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

cleaning up

Browse source
This commit is contained in:
Jade (Rose) Rowland 2024-01-19 00:14:08 -05:00
parent 77a48e8351
commit 9a13c58583
5 changed files with 113 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -17,7 +17,6 @@ import {
initUserCode,
setActivePattern,
setLatestCode,
setViewingPattern,
createPatternID,
userPattern,
getViewingPatternData,
@ -77,7 +76,6 @@ export function Repl({ embedded = false }) {
setLatestCode(code);
window.location.hash = '#' + code2hash(code);
const viewingPatternData = getViewingPatternData();
const data = { ...viewingPatternData, code };
let id = data.id;
const isExamplePattern = viewingPatternData.collection !== userPattern.collection;
@ -86,13 +84,12 @@ export function Repl({ embedded = false }) {
const codeHasChanged = code !== viewingPatternData.code;
if (codeHasChanged) {
// fork example
id = createPatternID();
setViewingPattern(id);
setViewingPatternData(userPattern.update(id, data).data);
const newPattern = userPattern.duplicate(data);
id = newPattern.id;
setViewingPatternData(newPattern.data);
}
} else {
id = id == null ? createPatternID() : id;
setViewingPattern(id);
id = userPattern.isValidID(id) ? id : createPatternID();
setViewingPatternData(userPattern.update(id, data).data);
}
setActivePattern(id);
@ -169,23 +166,23 @@ export function Repl({ embedded = false }) {
await prebake(); // declare default samples
};
const handleUpdate = async (id, data, reset = false) => {
setViewingPatternData(data);
const handleUpdate = async (patternData, reset = false) => {
if (reset) {
await resetEditor();
}
setViewingPattern(id);
editorRef.current.setCode(data.code);
setViewingPatternData(patternData);
editorRef.current.setCode(patternData.code);
};
const handleEvaluate = () => {
editorRef.current.evaluate();
};
const handleShuffle = async () => {
const { code, name } = getRandomTune();
logger(`[repl] ✨ loading random tune "${name}"`);
setActivePattern(name);
setViewingPattern(name);
const patternData = getRandomTune();
const code = patternData.code;
logger(`[repl] ✨ loading random tune "${patternData.id}"`);
setActivePattern(patternData.id);
setViewingPatternData(patternData);
clearCanvas();
resetLoadedSounds();
await prebake(); // declare default samples

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

@ -4,7 +4,7 @@ import {
exportPatterns,
importPatterns,
useActivePattern,
useViewingPattern,
useViewingPatternData,
userPattern,
} from '../../user_pattern_utils.mjs';
import { useMemo } from 'react';
@ -40,21 +40,26 @@ function PatternButton({ showOutline, onClick, pattern, showHiglight }) {
);
}
function PatternButtons({ patterns, activePattern, onClick, viewingPattern, started }) {
function PatternButtons({ patterns, activePattern, onClick, started }) {
const viewingPatternStore = useViewingPatternData();
const viewingPatternData = JSON.parse(viewingPatternStore);
const viewingPatternID = viewingPatternData.id;
return (
<div className="font-mono text-sm">
{Object.values(patterns).map((pattern) => {
const id = pattern.id;
return (
<PatternButton
pattern={pattern}
key={id}
showHiglight={id === viewingPattern}
showOutline={id === activePattern && started}
onClick={() => onClick(id)}
/>
);
})}
{Object.values(patterns)
.reverse()
.map((pattern) => {
const id = pattern.id;
return (
<PatternButton
pattern={pattern}
key={id}
showHiglight={id === viewingPatternID}
showOutline={id === activePattern && started}
onClick={() => onClick(id)}
/>
);
})}
</div>
);
}
@ -70,30 +75,32 @@ function ActionButton({ children, onClick, label, labelIsHidden }) {
export function PatternsTab({ context }) {
const activePattern = useActivePattern();
const viewingPattern = useViewingPattern();
const viewingPatternStore = useViewingPatternData();
const viewingPatternData = JSON.parse(viewingPatternStore);
const { userPatterns } = useSettings();
const examplePatterns = useExamplePatterns();
const collections = examplePatterns.collections;
const updateCodeWindow = (id, data, reset = false) => {
context.handleUpdate(id, data, reset);
const updateCodeWindow = (patternData, reset = false) => {
context.handleUpdate(patternData, reset);
};
const isUserPattern = userPatterns[viewingPattern] != null;
const viewingPatternID = viewingPatternData?.id;
const viewingIDIsValid = userPattern.isValidID(viewingPatternID);
const isUserPattern = userPatterns[viewingPatternID] != null;
return (
<div className="px-4 w-full dark:text-white text-stone-900 space-y-4 pb-4">
<section>
{viewingPattern && (
{viewingIDIsValid && (
<div className="flex items-center mb-2 space-x-2 overflow-auto">
<h1 className="text-xl">{`${viewingPattern}`}</h1>
<h1 className="text-xl">{`${viewingPatternID}`}</h1>
<div className="space-x-4 flex w-min">
<ActionButton
label="Duplicate"
onClick={() => {
const { id, data } = userPattern.duplicate(
userPattern.getPatternData(id) ?? examplePatterns.patterns[id],
);
updateCodeWindow(id, data);
const { data } = userPattern.duplicate(viewingPatternData);
updateCodeWindow(data);
}}
labelIsHidden
>
@ -103,8 +110,8 @@ export function PatternsTab({ context }) {
<ActionButton
label="Delete"
onClick={() => {
const { id, data } = userPattern.delete(viewingPattern);
updateCodeWindow(id, { ...data, collection: userPattern.collection });
const { data } = userPattern.delete(viewingPatternID);
updateCodeWindow({ ...data, collection: userPattern.collection });
}}
labelIsHidden
>
@ -115,25 +122,25 @@ export function PatternsTab({ context }) {
</div>
)}
<PatternButtons
onClick={(id) => updateCodeWindow(id, { ...userPatterns[id], collection: userPattern.collection }, false)}
onClick={(id) => updateCodeWindow({ ...userPatterns[id], collection: userPattern.collection }, false)}
patterns={userPatterns}
started={context.started}
activePattern={activePattern}
viewingPattern={viewingPattern}
viewingPatternID={viewingPatternID}
/>
<div className="pr-4 space-x-4 border-b border-foreground mb-2 h-8 flex overflow-auto max-w-full items-center">
<ActionButton
label="new"
onClick={() => {
const { id, data } = userPattern.createAndAddToDB();
updateCodeWindow(id, data);
const { data } = userPattern.createAndAddToDB();
updateCodeWindow(data);
}}
/>
<ActionButton
label="clear"
onClick={() => {
const { id, data } = userPattern.clearAll();
updateCodeWindow(id, data);
const { data } = userPattern.clearAll();
updateCodeWindow(data);
}}
/>
@ -157,11 +164,10 @@ export function PatternsTab({ context }) {
<h2 className="text-xl mb-2">{collection}</h2>
<div className="font-mono text-sm">
<PatternButtons
onClick={(id) => updateCodeWindow(id, { ...patterns[id], collection }, true)}
onClick={(id) => updateCodeWindow({ ...patterns[id], collection }, true)}
started={context.started}
patterns={patterns}
activePattern={activePattern}
viewingPattern={viewingPattern}
/>
</div>
</section>

13
website/src/repl/useExamplePatterns.jsx
View file

@ -1,17 +1,20 @@
import { $featuredPatterns, $publicPatterns } from '../user_pattern_utils.mjs';
import { $featuredPatterns, $publicPatterns, collectionName } from '../user_pattern_utils.mjs';
import { useStore } from '@nanostores/react';
import { useMemo } from 'react';
import * as tunes from '../repl/tunes.mjs';
export const stockPatterns = Object.fromEntries(
Object.entries(tunes).map(([key, code], i) => [i, { id: i, code, collection: collectionName.stock }]),
);
export const useExamplePatterns = () => {
const featuredPatterns = useStore($featuredPatterns);
const publicPatterns = useStore($publicPatterns);
const collections = useMemo(() => {
const stockPatterns = Object.fromEntries(Object.entries(tunes).map(([key, code], i) => [i, { id: i, code }]));
const pats = new Map();
pats.set('Featured', featuredPatterns);
pats.set('Last Creations', publicPatterns);
pats.set('Stock Examples', stockPatterns);
pats.set(collectionName.featured, featuredPatterns);
pats.set(collectionName.public, publicPatterns);
pats.set(collectionName.stock, stockPatterns);
return pats;
}, [featuredPatterns, publicPatterns]);

14
website/src/repl/util.mjs
View file

@ -4,11 +4,13 @@ import { getAudioContext, initializeAudioOutput, setDefaultAudioContext } from '
import { isTauri } from '../tauri.mjs';
import './Repl.css';
import * as tunes from './tunes.mjs';
import { createClient } from '@supabase/supabase-js';
import { nanoid } from 'nanoid';
import { writeText } from '@tauri-apps/api/clipboard';
import { createContext } from 'react';
import { stockPatterns } from './useExamplePatterns';
import { loadDBPatterns } from '@src/user_pattern_utils.mjs';
// Create a single supabase client for interacting with your database
export const supabase = createClient(
@ -16,6 +18,10 @@ export const supabase = createClient(
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InBpZHhkc3hwaGxoempuem1pZnRoIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NTYyMzA1NTYsImV4cCI6MTk3MTgwNjU1Nn0.bqlw7802fsWRnqU5BLYtmXk_k-D1VFmbkHMywWc15NM',
);
if (typeof window !== 'undefined') {
loadDBPatterns();
}
export async function initCode() {
// load code from url hash (either short hash from database or decode long hash)
try {
@ -47,10 +53,10 @@ export async function initCode() {
}
export function getRandomTune() {
const allTunes = Object.entries(tunes);
const allTunes = Object.entries(stockPatterns);
const randomItem = (arr) => arr[Math.floor(Math.random() * arr.length)];
const [name, code] = randomItem(allTunes);
return { name, code };
const [id, data] = randomItem(allTunes);
return data;
}
export function loadModules() {