hacklab/strudel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

all working

Browse source
This commit is contained in:
Jade (Rose) Rowland 2024-01-08 00:15:07 -05:00
parent 1ff7548b52
commit 51dd408733
5 changed files with 50 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

1
packages/core/repl.mjs
View file

@ -94,7 +94,6 @@ export function repl({
afterEval?.({ code, pattern, meta }); afterEval?.({ code, pattern, meta });
return pattern; return pattern;
} catch (err) { } catch (err) {
// console.warn(`[repl] eval error: ${err.message}`);
logger(`[eval] error: ${err.message}`, 'error'); logger(`[eval] error: ${err.message}`, 'error');
updateState({ evalError: err, pending: false }); updateState({ evalError: err, pending: false });
onEvalError?.(err); onEvalError?.(err);

4
website/src/repl/Header.jsx
View file

@ -19,7 +19,7 @@ export function Header({ context }) {
isDirty, isDirty,
activeCode, activeCode,
handleTogglePlay, handleTogglePlay,
handleUpdate, handleEvaluate,
handleShuffle, handleShuffle,
handleShare, handleShare,
} = context; } = context;
@ -85,7 +85,7 @@ export function Header({ context }) {
)} )}
</button> </button>
<button <button
onClick={() => handleUpdate({})} onClick={handleEvaluate}
title="update" title="update"
className={cx( className={cx(
'flex items-center space-x-1', 'flex items-center space-x-1',

30
website/src/repl/Repl.jsx
View file

@ -160,38 +160,25 @@ export function Repl({ embedded = false }) {
// UI Actions // UI Actions
// //
const handleTogglePlay = async () => editorRef.current?.toggle(); const handleTogglePlay = async () => {
editorRef.current?.toggle();
};
// payload = {reset?: boolean, code?: string, evaluate?: boolean, pattern?: string } const handleUpdate = (id, code) => {
const handleUpdate = async (payload) => {
const { id, code } = payload;
setViewingPattern(id); setViewingPattern(id);
editorRef.current.setCode(code); editorRef.current.setCode(code);
};
// const { reset = false, code = null, evaluate = true, pattern = null } = payload; const handleEvaluate = () => {
editorRef.current.evaluate();
// if (reset) {
// clearCanvas();
// resetLoadedSounds();
// editorRef.current.repl.setCps(1);
// await prebake(); // declare default samples
// }
// if (code != null && pattern != null) {
// setViewingPattern(pattern);
// editorRef.current.setCode(code);
// }
// if (evaluate) {
// editorRef.current.evaluate();
// }
}; };
const handleShuffle = async () => { const handleShuffle = async () => {
// window.postMessage('strudel-shuffle');
const { code, name } = getRandomTune(); const { code, name } = getRandomTune();
logger(`[repl] ✨ loading random tune "${name}"`); logger(`[repl] ✨ loading random tune "${name}"`);
setActivePattern(name); setActivePattern(name);
setViewingPattern(name);
clearCanvas(); clearCanvas();
resetLoadedSounds(); resetLoadedSounds();
editorRef.current.repl.setCps(1);
await prebake(); // declare default samples await prebake(); // declare default samples
editorRef.current.setCode(code); editorRef.current.setCode(code);
editorRef.current.repl.evaluate(code); editorRef.current.repl.evaluate(code);
@ -208,6 +195,7 @@ export function Repl({ embedded = false }) {
handleUpdate, handleUpdate,
handleShuffle, handleShuffle,
handleShare, handleShare,
handleEvaluate,
}; };
return ( return (

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

@ -30,7 +30,7 @@ function PatternButton({ showOutline, onClick, label, showHiglight }) {
); );
} }
function PatternButtons({ patterns, activePattern, onClick, viewingPattern, isExample = false }) { function PatternButtons({ patterns, activePattern, onClick, viewingPattern, started }) {
return ( return (
<div className="font-mono text-sm"> <div className="font-mono text-sm">
{Object.entries(patterns).map(([id]) => ( {Object.entries(patterns).map(([id]) => (
@ -38,8 +38,8 @@ function PatternButtons({ patterns, activePattern, onClick, viewingPattern, isEx
key={id} key={id}
label={id} label={id}
showHiglight={id === viewingPattern} showHiglight={id === viewingPattern}
showOutline={id === activePattern} showOutline={id === activePattern && started}
onClick={() => onClick(id, isExample)} onClick={() => onClick(id)}
/> />
))} ))}
</div> </div>
@ -51,11 +51,10 @@ export function PatternsTab({ context }) {
const examplePatterns = useMemo(() => examplePattern.getAll(), []); const examplePatterns = useMemo(() => examplePattern.getAll(), []);
const activePattern = useActivePattern(); const activePattern = useActivePattern();
const viewingPattern = useViewingPattern(); const viewingPattern = useViewingPattern();
const updateCodeWindow = (id, code) => { const updateCodeWindow = (id, code) => {
context.handleUpdate({ code, id, evaluate: false }); context.handleUpdate(id, code);
}; };
const onPatternBtnClick = (id, isExample) => { const onPatternBtnClick = (id, isExample = false) => {
const code = isExample ? examplePatterns[id].code : userPatterns[id].code; const code = isExample ? examplePatterns[id].code : userPatterns[id].code;
// display selected pattern code in the window // display selected pattern code in the window
@ -80,16 +79,12 @@ export function PatternsTab({ context }) {
title="Rename" title="Rename"
> >
<PencilSquareIcon className="w-5 h-5" /> <PencilSquareIcon className="w-5 h-5" />
{/* <PencilIcon className="w-5 h-5" /> */}
</button> </button>
)} )}
<button <button
className="hover:opacity-50" className="hover:opacity-50"
onClick={() => { onClick={() => {
const { id, data } = userPattern.duplicate( const { id, data } = userPattern.duplicate(viewingPattern);
viewingPattern,
userPatterns[viewingPattern]?.code ?? examplePatterns[viewingPattern]?.code,
);
updateCodeWindow(id, data.code); updateCodeWindow(id, data.code);
}} }}
title="Duplicate" title="Duplicate"
@ -101,7 +96,6 @@ export function PatternsTab({ context }) {
className="hover:opacity-50" className="hover:opacity-50"
onClick={() => { onClick={() => {
const { id, data } = userPattern.delete(viewingPattern); const { id, data } = userPattern.delete(viewingPattern);
console.log({ id, data });
updateCodeWindow(id, data.code); updateCodeWindow(id, data.code);
}} }}
title="Delete" title="Delete"
@ -115,6 +109,7 @@ export function PatternsTab({ context }) {
<PatternButtons <PatternButtons
onClick={onPatternBtnClick} onClick={onPatternBtnClick}
patterns={userPatterns} patterns={userPatterns}
started={context.started}
activePattern={activePattern} activePattern={activePattern}
viewingPattern={viewingPattern} viewingPattern={viewingPattern}
/> />
@ -155,8 +150,8 @@ export function PatternsTab({ context }) {
<section> <section>
<h2 className="text-xl mb-2">Examples</h2> <h2 className="text-xl mb-2">Examples</h2>
<PatternButtons <PatternButtons
isExample={true} onClick={(id) => onPatternBtnClick(id, true)}
onClick={onPatternBtnClick} started={context.started}
patterns={examplePatterns} patterns={examplePatterns}
activePattern={activePattern} activePattern={activePattern}
viewingPattern={viewingPattern} viewingPattern={viewingPattern}

53
website/src/settings.mjs
View file

@ -54,11 +54,13 @@ export function useActivePattern() {
return useStore($activePattern); return useStore($activePattern);
} }
export function initUserCode(code) { export function initUserCode(code) {
const userPatterns = getUserPatterns(); const patterns = { ...userPattern.getAll(), ...examplePattern.getAll() };
const match = Object.entries(userPatterns).find(([_, pat]) => pat.code === code); const match = Object.entries(patterns).find(([_, pat]) => pat.code === code);
const id = match?.[0] || ''; const id = match?.[0];
setActivePattern(id); if (id != null) {
setViewingPattern(id); setActivePattern(id);
setViewingPattern(id);
}
} }
export function useSettings() { export function useSettings() {
@ -122,22 +124,25 @@ export const createPatternID = () => {
}; };
export const getNextCloneID = (id) => { export const getNextCloneID = (id) => {
const userPatterns = this.getAll(); const patterns = { ...userPattern.getAll(), ...examplePattern.getAll() };
const clones = Object.entries(userPatterns).filter(([patID]) => patID.startsWith(id)); const clones = Object.entries(patterns).filter(([patID]) => patID.startsWith(id));
const num = String(clones.length + 1).padStart(3, '0'); const num = String(clones.length + 1).padStart(3, '0');
const newID = id + '_' + num; const newID = id + '_' + num;
return newID; return newID;
}; };
const examplePatterns = Object.fromEntries(Object.entries(tunes).map(([id, code]) => [id, { code }]));
export const examplePattern = { export const examplePattern = {
getAll() { getAll() {
const examplePatterns = {};
Object.entries(tunes).forEach(([key, code]) => (examplePatterns[key] = { code }));
return examplePatterns; return examplePatterns;
}, },
getPatternData(id) { getPatternData(id) {
const userPatterns = this.getAll(); const pats = this.getAll();
return userPatterns[id]; return pats[id];
},
exists(id) {
return this.getPatternData(id) != null;
}, },
}; };
@ -150,8 +155,7 @@ export const userPattern = {
return userPatterns[id]; return userPatterns[id];
}, },
exists(id) { exists(id) {
const userPatterns = this.getAll(); return this.getPatternData(id) != null;
return userPatterns[id] != null;
}, },
create() { create() {
const newID = createPatternID(); const newID = createPatternID();
@ -164,7 +168,9 @@ export const userPattern = {
const userPatterns = this.getAll(); const userPatterns = this.getAll();
setUserPatterns({ ...userPatterns, [id]: data }); setUserPatterns({ ...userPatterns, [id]: data });
}, },
duplicate(id, data) { duplicate(id) {
const examplePatternData = examplePattern.getPatternData(id);
const data = examplePatternData != null ? examplePatternData : this.getPatternData(id);
const newID = getNextCloneID(id); const newID = getNextCloneID(id);
this.update(newID, data); this.update(newID, data);
return { id: newID, data }; return { id: newID, data };
@ -179,36 +185,37 @@ export const userPattern = {
if (examplePatternData != null) { if (examplePatternData != null) {
return { id: viewingPattern, data: examplePatternData }; return { id: viewingPattern, data: examplePatternData };
} }
setViewingPattern(null); // setViewingPattern(null);
setActivePattern(null); setActivePattern(null);
return { id: null, data: { code: '' } }; return { id: null, data: { code: defaultCode } };
}, },
delete(id) { delete(id) {
const userPatterns = this.getAll(); const userPatterns = this.getAll();
const updatedPatterns = Object.fromEntries(Object.entries(userPatterns).filter(([key]) => key !== id)); delete userPatterns[id];
if (getActivePattern() === id) { if (getActivePattern() === id) {
setActivePattern(null); setActivePattern(null);
} }
setUserPatterns(updatedPatterns); setUserPatterns(userPatterns);
const viewingPattern = getViewingPattern(); const viewingPattern = getViewingPattern();
if (viewingPattern === id) { if (viewingPattern === id) {
return this.create(); return { id: null, data: { code: defaultCode } };
} }
return { id: viewingPattern, data: updatedPatterns[id] }; return { id: viewingPattern, data: userPatterns[viewingPattern] };
}, },
rename(id) { rename(id) {
const userPatterns = this.getAll(); const userPatterns = this.getAll();
const newID = prompt('Enter new name', id); const newID = prompt('Enter new name', id);
const data = userPatterns[id];
if (newID === null) { if (newID === null) {
// canceled // canceled
return; return { id, data };
} }
if (userPatterns[newID]) { if (userPatterns[newID]) {
alert('Name already taken!'); alert('Name already taken!');
return; return { id, data };
} }
const data = userPatterns[id];
userPatterns[newID] = data; // copy code userPatterns[newID] = data; // copy code
delete userPatterns[id]; delete userPatterns[id];