elias/strudel
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel.git synced 2026-01-11 13:48:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

embedded styles

Browse Source
This commit is contained in:
Felix Roos 2022-05-04 22:03:00 +02:00
parent cf79083edb
commit 8034eb14b6
1 changed files with 70 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
repl/src/App.js
View File

@ -58,6 +58,7 @@ extend(
},
);
const initialUrl = window.location.href;
const codeParam = window.location.href.split('#')[1];
let decoded;
try {
@ -74,7 +75,7 @@ function getRandomTune() {
const randomTune = getRandomTune();
const defaultSynth = getDefaultSynth();
const isEmbedded = window.location !== window.parent.location;
function App() {
// const [editor, setEditor] = useState();
const [view, setView] = useState();
@ -100,7 +101,9 @@ function App() {
const logBox = useRef();
// scroll log box to bottom when log changes
useLayoutEffect(() => {
logBox.current.scrollTop = logBox.current?.scrollHeight;
if (logBox.current) {
logBox.current.scrollTop = logBox.current?.scrollHeight;
}
}, [log]);
// set active pattern on ctrl+enter
@ -148,16 +151,19 @@ function App() {
<div className="min-h-screen flex flex-col">
<header
id="header"
className="flex-none w-full h-14 px-2 flex border-b border-gray-200 justify-between z-[10] bg-gray-100"
className={cx(
'flex-none w-full px-2 flex border-b border-gray-200 justify-between z-[10] bg-gray-100',
isEmbedded ? 'h-8' : 'h-14',
)}
>
<div className="flex items-center space-x-2">
<img src={logo} className="Tidal-logo w-10 h-10" alt="logo" />
<h1 className="text-xl">Strudel REPL</h1>
<img src={logo} className={cx('Tidal-logo', isEmbedded ? 'w-6 h-6' : 'w-10 h-10')} alt="logo" />
<h1 className={isEmbedded ? 'text-l' : 'text-xl'}>Strudel {isEmbedded ? 'Mini ' : ''}REPL</h1>
</div>
<div className="flex">
<button onClick={() => togglePlay()} className="hover:bg-gray-300 p-2">
<button onClick={() => togglePlay()} className={cx('hover:bg-gray-300', !isEmbedded ? 'p-2' : 'px-2')}>
{!pending ? (
<span className="flex items-center w-16">
<span className={cx('flex items-center', isEmbedded ? 'w-16' : '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
@ -181,31 +187,55 @@ function App() {
<>loading...</>
)}
</button>
<button
className="hover:bg-gray-300 p-2"
onClick={async () => {
const _code = getRandomTune();
console.log('tune', _code); // uncomment this to debug when random code fails
setCode(_code);
drawHelpers.cleanup();
uiHelpers.cleanup();
const parsed = await evaluate(_code);
setPattern(parsed.pattern);
setActiveCode(_code);
}}
>
🎲 random
</button>
<button className="hover:bg-gray-300 p-2">
<a href="./tutorial">📚 tutorial</a>
</button>
{!isEmbedded && (
<button
className="hover:bg-gray-300 p-2"
onClick={async () => {
const _code = getRandomTune();
console.log('tune', _code); // uncomment this to debug when random code fails
setCode(_code);
drawHelpers.cleanup();
uiHelpers.cleanup();
const parsed = await evaluate(_code);
setPattern(parsed.pattern);
setActiveCode(_code);
}}
>
🎲 random
</button>
)}
{!isEmbedded && (
<button className={cx('hover:bg-gray-300', !isEmbedded ? 'p-2' : 'px-2')}>
<a href="./tutorial">📚 tutorial</a>
</button>
)}
{isEmbedded && (
<button className={cx('hover:bg-gray-300 px-2')}>
<a href={window.location.href} target="_blank" rel="noopener noreferrer" title="Open in REPL">
🚀 open
</a>
</button>
)}
{isEmbedded && (
<button className={cx('hover:bg-gray-300 px-2')}>
<a
onClick={() => {
window.location.href = initialUrl;
window.location.reload();
}}
title="Reset"
>
💔 reset
</a>
</button>
)}
</div>
</header>
<section className="grow flex flex-col text-gray-100">
<div className="grow relative flex overflow-auto" id="code">
{/* onCursor={markParens} */}
<CodeMirror6 value={code} onChange={setCode} onViewChanged={setView} />
<span className="p-4 absolute top-0 right-0 text-xs whitespace-pre text-right pointer-events-none">
<span className="z-[20] py-1 px-2 absolute top-0 right-0 text-xs whitespace-pre text-right pointer-events-none">
{!cycle.started ? `press ctrl+enter to play\n` : dirty ? `ctrl+enter to update\n` : 'no changes\n'}
</span>
{error && (
@ -214,17 +244,21 @@ function App() {
</div>
)}
</div>
<textarea
className="z-[10] h-16 border-0 text-xs bg-[transparent] border-t border-slate-600 resize-none"
value={log}
readOnly
ref={logBox}
style={{ fontFamily: 'monospace' }}
/>
{!isEmbedded && (
<textarea
className="z-[10] h-16 border-0 text-xs bg-[transparent] border-t border-slate-600 resize-none"
value={log}
readOnly
ref={logBox}
style={{ fontFamily: 'monospace' }}
/>
)}
</section>
<button className="fixed right-4 bottom-2 z-[11]" onClick={() => playStatic(code)}>
static
</button>
{!isEmbedded && (
<button className="fixed right-4 bottom-2 z-[11]" onClick={() => playStatic(code)}>
static
</button>
)}
</div>
);
}