basic pattern add function

website/src/repl/panel/PatternsTab.jsx

@@ -1,10 +1,29 @@
-import { cx } from '@strudel.cycles/react';
 import React from 'react';
 import * as tunes from '../tunes.mjs';
+import { useSettings, clearUserPatterns, newUserPattern } from '../../settings.mjs';
 
 export function PatternsTab({ context }) {
+  const { userPatterns } = useSettings();
   return (
-    <div className="px-4 w-full">
+    <div className="px-4 w-full text-foreground">
+      <h2 className="text-xl mb-2">My Patterns</h2>
+      <div className="space-x-1">
+        <button onClick={() => newUserPattern()}>add user pattern</button>
+        <button onClick={() => clearUserPatterns()}>clear user patterns</button>
+      </div>
+      {Object.entries(userPatterns).map(([key, up]) => (
+        <a
+          key={key}
+          className="mr-4 hover:opacity-50 cursor-pointer inline-block"
+          onClick={() => {
+            const { code } = up;
+            console.log('clikkk', code);
+            context.handleUpdate(code);
+          }}
+        >
+          {key}
+        </a>
+      ))}
       <h2 className="text-xl mb-2">Examples</h2>
       {Object.entries(tunes).map(([key, tune]) => (
         <a
@@ -21,3 +40,11 @@ export function PatternsTab({ context }) {
     </div>
   );
 }
+
+/*
+selectable examples
+if example selected
+  type character -> create new user pattern with exampleName_n
+  even if 
+clicking (+) opens the "new" example with same behavior as above
+*/

website/src/settings.mjs

@@ -15,6 +15,7 @@ export const defaultSettings = {
   isZen: false,
   soundsFilter: 'all',
   panelPosition: 'bottom',
+  userPatterns: '{}',
 };
 
 export const settingsMap = persistentMap('strudel-settings', defaultSettings);
@@ -29,6 +30,7 @@ export function useSettings() {
     isLineWrappingEnabled: [true, 'true'].includes(state.isLineWrappingEnabled) ? true : false,
     fontSize: Number(state.fontSize),
     panelPosition: state.activeFooter !== '' ? state.panelPosition : 'bottom',
+    userPatterns: JSON.parse(state.userPatterns),
   };
 }
 
@@ -51,3 +53,34 @@ export const fontFamily = patternSetting('fontFamily');
 export const fontSize = patternSetting('fontSize');
 
 export const settingPatterns = { theme, fontFamily, fontSize };
+
+function getUserPatterns() {
+  return JSON.parse(settingsMap.get().userPatterns);
+}
+function setUserPatterns(obj) {
+  settingsMap.setKey('userPatterns', JSON.stringify(obj));
+}
+
+export function addUserPattern(name, config) {
+  if (typeof config !== 'object') {
+    throw new Error('addUserPattern expected object as second param');
+  }
+  if (!config.code) {
+    throw new Error('addUserPattern expected code as property of second param');
+  }
+  const userPatterns = getUserPatterns();
+  setUserPatterns({ ...userPatterns, [name]: config });
+}
+
+export function newUserPattern() {
+  const userPatterns = getUserPatterns();
+  const date = new Date().toISOString().split('T')[0];
+  const todays = Object.entries(userPatterns).filter(([name]) => name.startsWith(date));
+  const num = String(todays.length + 1).padStart(3, '0');
+  const defaultNewPattern = 's("hh")';
+  addUserPattern(date + '_' + num, { code: defaultNewPattern });
+}
+
+export function clearUserPatterns() {
+  setUserPatterns({});
+}