elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-22 19:18:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

add patterns tab with examples

Browse Source
This commit is contained in:
Felix Roos 2023-08-23 22:51:36 +02:00
parent 4e7e715f10
commit 1855dae35e
4 changed files with 40 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/react/src/hooks/useStrudel.mjs
View File

@ -73,8 +73,11 @@ function useStrudel({
} }
}); });
const activateCode = useCallback( const activateCode = useCallback(
async (autostart = true) => { async (newCode, autostart = true) => {
const res = await evaluate(code, autostart); if (newCode) {
setCode(code);
}
const res = await evaluate(newCode || code, autostart);
broadcast({ type: 'start', from: id }); broadcast({ type: 'start', from: id });
return res; return res;
}, },

4
website/src/repl/Repl.jsx
View File

@ -225,8 +225,8 @@ export function Repl({ embedded = false }) {
stop(); stop();
} }
}; };
const handleUpdate = () => { const handleUpdate = (newCode) => {
isDirty && activateCode(); (newCode || isDirty) && activateCode(newCode);
logger('[repl] code updated! tip: you can also update the code by pressing ctrl+enter', 'highlight'); logger('[repl] code updated! tip: you can also update the code by pressing ctrl+enter', 'highlight');
}; };

17
website/src/repl/panel/Panel.jsx
View File

@ -10,6 +10,7 @@ import { Reference } from './Reference';
import { SettingsTab } from './SettingsTab'; import { SettingsTab } from './SettingsTab';
import { SoundsTab } from './SoundsTab'; import { SoundsTab } from './SoundsTab';
import { WelcomeTab } from './WelcomeTab'; import { WelcomeTab } from './WelcomeTab';
import { PatternsTab } from './PatternsTab';
const TAURI = window.__TAURI__; const TAURI = window.__TAURI__;
@ -54,7 +55,7 @@ export function Panel({ context }) {
}, []), }, []),
); );
const FooterTab = ({ children, name, label }) => ( const PanelTab = ({ children, name, label }) => (
<> <>
<div <div
onClick={() => setActiveFooter(name)} onClick={() => setActiveFooter(name)}
@ -82,12 +83,13 @@ export function Panel({ context }) {
<nav className={cx('bg-lineHighlight z-[10] flex flex-col', positions[panelPosition])}> <nav className={cx('bg-lineHighlight z-[10] flex flex-col', positions[panelPosition])}>
<div className="flex justify-between px-2"> <div className="flex justify-between px-2">
<div className={cx('flex select-none max-w-full overflow-auto', activeFooter && 'pb-2')}> <div className={cx('flex select-none max-w-full overflow-auto', activeFooter && 'pb-2')}>
<FooterTab name="intro" label="welcome" /> <PanelTab name="intro" label="welcome" />
<FooterTab name="sounds" /> <PanelTab name="sounds" />
<FooterTab name="console" /> <PanelTab name="console" />
<FooterTab name="reference" /> <PanelTab name="patterns" />
<FooterTab name="settings" /> <PanelTab name="reference" />
{TAURI && <FooterTab name="files" />} <PanelTab name="settings" />
{TAURI && <PanelTab name="files" />}
</div> </div>
{activeFooter !== '' && ( {activeFooter !== '' && (
<button onClick={() => setActiveFooter('')} className="text-foreground px-2" aria-label="Close Panel"> <button onClick={() => setActiveFooter('')} className="text-foreground px-2" aria-label="Close Panel">
@ -99,6 +101,7 @@ export function Panel({ context }) {
<div className="relative overflow-hidden"> <div className="relative overflow-hidden">
<div className="text-white overflow-auto h-full max-w-full" ref={footerContent}> <div className="text-white overflow-auto h-full max-w-full" ref={footerContent}>
{activeFooter === 'intro' && <WelcomeTab />} {activeFooter === 'intro' && <WelcomeTab />}
{activeFooter === 'patterns' && <PatternsTab context={context} />}
{activeFooter === 'console' && <ConsoleTab log={log} />} {activeFooter === 'console' && <ConsoleTab log={log} />}
{activeFooter === 'sounds' && <SoundsTab />} {activeFooter === 'sounds' && <SoundsTab />}
{activeFooter === 'reference' && <Reference />} {activeFooter === 'reference' && <Reference />}

23
website/src/repl/panel/PatternsTab.jsx Normal file
View File

@ -0,0 +1,23 @@
import { cx } from '@strudel.cycles/react';
import React from 'react';
import * as tunes from '../tunes.mjs';
export function PatternsTab({ context }) {
return (
<div className="px-4 w-full">
<h2 className="text-xl mb-2">Examples</h2>
{Object.entries(tunes).map(([key, tune]) => (
<a
key={key}
className="mr-4 hover:opacity-50 cursor-pointer inline-block"
onClick={() => {
console.log('clikkk', tune);
context.handleUpdate(tune);
}}
>
{key}
</a>
))}
</div>
);
}