elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-23 03:28:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

style repl

Browse Source
This commit is contained in:
Felix Roos 2022-03-12 20:30:15 +01:00
parent 2295ba7554
commit 984bd95cc0
2 changed files with 47 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
repl/public/global.css
View File

@ -10,17 +10,9 @@ body {
.CodeMirror { .CodeMirror {
height: 100% !important; height: 100% !important;
background-color: transparent !important; background-color: transparent !important;
//font-size: 15px; font-size: 15px;
} }
.CodeMirror-line span { .CodeMirror-line > span {
background-color: #2a323660; background-color: #2a323690;
}
.CodeMirror-code {
//padding: 10px;
}
.CodeMirror-linenumber {
background-color: transparent !important;
} }

55
repl/src/App.tsx
View File

@ -43,6 +43,7 @@ function App() {
defaultSynth, defaultSynth,
onDraw: useCallback(markEvent(editor), [editor]), onDraw: useCallback(markEvent(editor), [editor]),
}); });
const [uiHidden, setUiHidden] = useState(false);
const logBox = useRef<any>(); const logBox = useRef<any>();
// scroll log box to bottom when log changes // scroll log box to bottom when log changes
useLayoutEffect(() => { useLayoutEffect(() => {
@ -81,12 +82,43 @@ function App() {
return ( return (
<div className="min-h-screen flex flex-col"> <div className="min-h-screen flex flex-col">
<header className="flex-none w-full h-16 px-2 flex border-b border-gray-200 bg-white justify-between z-[10]"> <header
className={cx(
'flex-none w-full h-14 px-2 flex border-b border-gray-200 justify-between z-[10]',
uiHidden ? 'bg-transparent text-white' : 'bg-white'
)}
>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<img src={logo} className="Tidal-logo w-16 h-16" alt="logo" /> <img src={logo} className="Tidal-logo w-12 h-12" alt="logo" />
<h1 className="text-2xl">Strudel REPL</h1> <h1 className="text-2xl">Strudel REPL</h1>
</div> </div>
<div className="flex space-x-4"> <div className="flex space-x-4">
<button onClick={() => togglePlay()}>
{!pending ? (
<span className="flex items-center w-16">
{cycle.started ? (
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path
fillRule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z"
clipRule="evenodd"
/>
</svg>
) : (
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path
fillRule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
clipRule="evenodd"
/>
</svg>
)}
{cycle.started ? 'pause' : 'play'}
</span>
) : (
<>loading...</>
)}
</button>
<button <button
onClick={async () => { onClick={async () => {
const _code = getRandomTune(); const _code = getRandomTune();
@ -97,16 +129,23 @@ function App() {
setPattern(parsed.pattern); setPattern(parsed.pattern);
}} }}
> >
🎲 random tune 🎲 random
</button> </button>
<button> <button>
<a href="./tutorial">📚 tutorial</a> <a href="./tutorial">📚 tutorial</a>
</button> </button>
<button onClick={() => setUiHidden((c) => !c)}>👀 {uiHidden ? 'show ui' : 'hide ui'}</button>
</div> </div>
</header> </header>
<section className="grow flex flex-col text-gray-100"> <section className="grow flex flex-col text-gray-100">
<div className="grow relative"> <div className="grow relative">
<div className={cx('h-full', error ? 'focus:ring-red-500' : 'focus:ring-slate-800')}> <div
className={cx(
'h-full transition-opacity',
error ? 'focus:ring-red-500' : 'focus:ring-slate-800',
uiHidden ? 'opacity-0' : 'opacity-100'
)}
>
<CodeMirror <CodeMirror
value={code} value={code}
editorDidMount={setEditor} editorDidMount={setEditor}
@ -129,14 +168,8 @@ function App() {
</div> </div>
)} )}
</div> </div>
<button
className="z-[10] flex-none w-full border border-gray-700 p-2 bg-slate-700 hover:bg-slate-500"
onClick={() => togglePlay()}
>
{!pending ? <>{cycle.started ? 'pause' : 'play'}</> : <>loading...</>}
</button>
<textarea <textarea
className="z-[10] grow border-0 text-xs min-h-[200px] bg-[transparent]" className="z-[10] h-16 border-0 text-xs bg-[transparent] border-t border-slate-600 resize-none"
value={log} value={log}
readOnly readOnly
ref={logBox} ref={logBox}