wip websocket client

packages/codemirror/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/codemirror",
-  "version": "1.2.4",
+  "version": "1.2.3",
   "description": "Codemirror Extensions for Strudel",
   "main": "index.mjs",
   "publishConfig": {

packages/core/logger.mjs

@@ -6,7 +6,7 @@ let debounce = 1000,
 
 export function errorLogger(e, origin = 'cyclist') {
   //TODO: add some kind of debug flag that enables this  while in dev mode
-  // console.error(e);
+  console.error(e);
   logger(`[${origin}] error: ${e.message}`);
 }
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/core",
-  "version": "1.2.4",
+  "version": "1.2.3",
   "description": "Port of Tidal Cycles to JavaScript",
   "main": "index.mjs",
   "type": "module",

packages/csound/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/csound",
-  "version": "1.2.5",
+  "version": "1.2.4",
   "description": "csound bindings for strudel",
   "main": "index.mjs",
   "type": "module",

packages/draw/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/draw",
-  "version": "1.2.4",
+  "version": "1.2.3",
   "description": "Helpers for drawing with Strudel",
   "main": "index.mjs",
   "type": "module",

packages/gamepad/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/gamepad",
-  "version": "1.2.4",
+  "version": "1.2.3",
   "description": "Gamepad Inputs for strudel",
   "main": "index.mjs",
   "type": "module",

packages/hydra/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/hydra",
-  "version": "1.2.4",
+  "version": "1.2.3",
   "description": "Hydra integration for strudel",
   "main": "hydra.mjs",
   "type": "module",

packages/midi/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/midi",
-  "version": "1.2.5",
+  "version": "1.2.4",
   "description": "Midi API for strudel",
   "main": "index.mjs",
   "type": "module",

packages/mini/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/mini",
-  "version": "1.2.4",
+  "version": "1.2.3",
   "description": "Mini notation for strudel",
   "main": "index.mjs",
   "type": "module",

packages/mondough/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/mondo",
-  "version": "1.1.2",
+  "version": "1.1.1",
   "description": "mondo notation for strudel",
   "main": "mondough.mjs",
   "type": "module",

packages/motion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/motion",
-  "version": "1.2.4",
+  "version": "1.2.3",
   "description": "DeviceMotion API for strudel",
   "main": "index.mjs",
   "type": "module",

packages/mqtt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/mqtt",
-  "version": "1.2.4",
+  "version": "1.2.3",
   "description": "MQTT API for strudel",
   "main": "mqtt.mjs",
   "type": "module",

packages/osc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/osc",
-  "version": "1.2.4",
+  "version": "1.2.3",
   "description": "OSC messaging for strudel",
   "main": "osc.mjs",
   "type": "module",

packages/osc/superdirtoutput.js

@@ -6,5 +6,5 @@ const trigger = /* isTauri() ? oscTriggerTauri : */ oscTrigger;
 
 export const superdirtOutput = (hap, deadline, hapDuration, cps, targetTime) => {
   const currentTime = performance.now() / 1000;
-  return trigger(hap, currentTime, cps, targetTime);
+  return trigger(null, hap, currentTime, cps, targetTime);
 };

packages/repl/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/repl",
-  "version": "1.2.5",
+  "version": "1.2.4",
   "description": "Strudel REPL as a Web Component",
   "module": "index.mjs",
   "publishConfig": {

packages/sampler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/sampler",
-  "version": "0.2.3",
+  "version": "0.2.2",
   "description": "",
   "keywords": [
     "tidalcycles",

packages/serial/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/serial",
-  "version": "1.2.4",
+  "version": "1.2.3",
   "description": "Webserial API for strudel",
   "main": "serial.mjs",
   "type": "module",

packages/soundfonts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/soundfonts",
-  "version": "1.2.5",
+  "version": "1.2.4",
   "description": "Soundsfont support for strudel",
   "main": "index.mjs",
   "publishConfig": {

packages/superdough/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdough",
-  "version": "1.2.5",
+  "version": "1.2.4",
   "description": "simple web audio synth and sampler intended for live coding. inspired by superdirt and webdirt.",
   "main": "index.mjs",
   "type": "module",

packages/tonal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/tonal",
-  "version": "1.2.4",
+  "version": "1.2.3",
   "description": "Tonal functions for strudel",
   "main": "index.mjs",
   "publishConfig": {

packages/transpiler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/transpiler",
-  "version": "1.2.4",
+  "version": "1.2.3",
   "description": "Transpiler for strudel user code. Converts syntactically correct but semantically meaningless JS into evaluatable strudel code.",
   "main": "index.mjs",
   "type": "module",

packages/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/web",
-  "version": "1.2.5",
+  "version": "1.2.4",
   "description": "Easy to setup, opiniated bundle of Strudel for the browser.",
   "module": "web.mjs",
   "publishConfig": {

packages/webaudio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/webaudio",
-  "version": "1.2.5",
+  "version": "1.2.4",
   "description": "Web Audio helpers for Strudel",
   "main": "index.mjs",
   "type": "module",

packages/xen/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strudel/xen",
-  "version": "1.2.4",
+  "version": "1.2.3",
   "description": "Xenharmonic API for strudel",
   "main": "index.mjs",
   "type": "module",

website/src/pages/learn/mini-notation.mdx

@@ -168,20 +168,6 @@ Using "!" we can repeat without speeding up:
 
 <MiniRepl client:idle tune={`note("<[g3,b3,e4]!2 [a3,c3,e4] [b3,d3,f#4]>*2")`} punchcard />
 
-## Randomness
-
-Events with a "?" placed after them will have a 50% chance of being removed from the pattern:
-
-<MiniRepl client:idle tune={`note("[g3,b3,e4]*8?")`} punchcard />
-
-Adding a number between 0 and 1 after the "?" will affect the likelihood of the event being removed. For example, events with "?0.1" placed after them will have a 10% chance of being removed:
-
-<MiniRepl client:idle tune={`note("[g3,b3,e4]*8?0.1")`} punchcard />
-
-Events separated by a "|" will be chosen from at random:
-
-<MiniRepl client:idle tune={`note("[g3,b3,e4] | [a3,c3,e4] | [b3,d3,f#4]")`} punchcard />
-
 ## Mini-notation review
 
 To recap what we've learned so far, compare the following patterns:
@@ -193,8 +179,6 @@ To recap what we've learned so far, compare the following patterns:
 <MiniRepl client:idle tune={`note("<[g3,b3,e4] _ [a3,c3,e4] [b3,d3,f#4]>*2")`} />
 <MiniRepl client:idle tune={`note("<[g3,b3,e4]@2 [a3,c3,e4] [b3,d3,f#4]>*2")`} />
 <MiniRepl client:idle tune={`note("<[g3,b3,e4]!2 [a3,c3,e4] [b3,d3,f#4]>*2")`} />
-<MiniRepl client:idle tune={`note("<[g3,b3,e4]? [a3,c3,e4] [b3,d3,f#4]>*2")`} />
-<MiniRepl client:idle tune={`note("<[g3|b3|e4] [a3,c3,e4] [b3,d3,f#4]>*2")`} />
 
 ## Euclidian rhythms
 

website/src/pages/technical-manual/repl.mdx

@@ -9,9 +9,7 @@ import { MiniRepl } from '../../docs/MiniRepl';
 
 {/* The [REPL](https://strudel.cc/) is the place where all packages come together to form a live coding system. It can also be seen as a reference implementation for users of the library. */}
 
-While Strudel can be used as a library in any JavaScript codebase, its main, reference user interface is the Strudel REPL[^1], which is a browser-based live coding environment. This live code editor is dedicated to manipulating Strudel patterns while they play. The REPL features built-in visual feedback, highlighting which elements in the patterned (mini-notation) sequences are influencing the event that is currently being played. This feedback is designed to support both learning and live use of Strudel.
-
-[^1]: REPL stands for read, evaluate, print/play, loop. It is friendly jargon for an interactive programming interface from computing heritage, usually for a commandline interface but also applied to live coding editors.
+While Strudel can be used as a library in any JavaScript codebase, its main, reference user interface is the Strudel REPL^[REPL stands for read, evaluate, print/play, loop. It is friendly jargon for an interactive programming interface from computing heritage, usually for a commandline interface but also applied to live coding editors.], which is a browser-based live coding environment. This live code editor is dedicated to manipulating Strudel patterns while they play. The REPL features built-in visual feedback, highlighting which elements in the patterned (mini-notation) sequences are influencing the event that is currently being played. This feedback is designed to support both learning and live use of Strudel.
 
 Besides a UI for playback control and meta information, the main part of the REPL interface is the code editor powered by CodeMirror. In it, the user can edit and evaluate pattern code live, using one of the available synthesis outputs to create music and/or sound art. The control flow of the REPL follows 3 basic steps:
 

website/src/repl/components/button/action-button.jsx

@@ -1,10 +0,0 @@
-import cx from '@src/cx.mjs';
-
-export function ActionButton({ children, label, labelIsHidden, className, ...buttonProps }) {
-  return (
-    <button className={cx('hover:opacity-50 text-nowrap w-fit', className)} title={label} {...buttonProps}>
-      {labelIsHidden !== true && label}
-      {children}
-    </button>
-  );
-}

website/src/repl/components/panel/PatternsTab.jsx

@@ -12,8 +12,8 @@ import { useMemo } from 'react';
 import { getMetadata } from '../../../metadata_parser.js';
 import { useExamplePatterns } from '../../useExamplePatterns.jsx';
 import { parseJSON, isUdels } from '../../util.mjs';
-import { useSettings } from '../../../settings.mjs';
-import { ActionButton } from '../button/action-button.jsx';
+import { ButtonGroup } from './Forms.jsx';
+import { settingsMap, useSettings } from '../../../settings.mjs';
 import { Pagination } from '../pagination/Pagination.jsx';
 import { useState } from 'react';
 import { useDebounce } from '../usedebounce.jsx';
@@ -75,6 +75,15 @@ function PatternButtons({ patterns, activePattern, onClick, started }) {
   );
 }
 
+function ActionButton({ children, onClick, label, labelIsHidden }) {
+  return (
+    <button className="hover:opacity-50 text-nowrap" onClick={onClick} title={label}>
+      {labelIsHidden !== true && label}
+      {children}
+    </button>
+  );
+}
+
 const updateCodeWindow = (context, patternData, reset = false) => {
   context.handleUpdate(patternData, reset);
 };

website/src/repl/components/panel/SoundsTab.jsx

@@ -2,21 +2,16 @@ import useEvent from '@src/useEvent.mjs';
 import { useStore } from '@nanostores/react';
 import { getAudioContext, soundMap, connectToDestination } from '@strudel/webaudio';
 import { useMemo, useRef, useState } from 'react';
-import { settingsMap, soundFilterType, useSettings } from '../../../settings.mjs';
+import { settingsMap, useSettings } from '../../../settings.mjs';
 import { ButtonGroup } from './Forms.jsx';
 import ImportSoundsButton from './ImportSoundsButton.jsx';
 import { Textbox } from '../textbox/Textbox.jsx';
-import { ActionButton } from '../button/action-button.jsx';
-import { confirmDialog } from '@src/repl/util.mjs';
-import { clearIDB, userSamplesDBConfig } from '@src/repl/idbutils.mjs';
-import { prebake } from '@src/repl/prebake.mjs';
 
 const getSamples = (samples) =>
   Array.isArray(samples) ? samples.length : typeof samples === 'object' ? Object.values(samples).length : 1;
 
 export function SoundsTab() {
   const sounds = useStore(soundMap);
-
   const { soundsFilter } = useSettings();
   const [search, setSearch] = useState('');
   const { BASE_URL } = import.meta.env;
@@ -32,19 +27,18 @@ export function SoundsTab() {
       .sort((a, b) => a[0].localeCompare(b[0]))
       .filter(([name]) => name.toLowerCase().includes(search.toLowerCase()));
 
-    if (soundsFilter === soundFilterType.USER) {
+    if (soundsFilter === 'user') {
       return filtered.filter(([_, { data }]) => !data.prebake);
     }
-    if (soundsFilter === soundFilterType.DRUMS) {
+    if (soundsFilter === 'drums') {
       return filtered.filter(([_, { data }]) => data.type === 'sample' && data.tag === 'drum-machines');
     }
-    if (soundsFilter === soundFilterType.SAMPLES) {
+    if (soundsFilter === 'samples') {
       return filtered.filter(([_, { data }]) => data.type === 'sample' && data.tag !== 'drum-machines');
     }
-    if (soundsFilter === soundFilterType.SYNTHS) {
+    if (soundsFilter === 'synths') {
       return filtered.filter(([_, { data }]) => ['synth', 'soundfont'].includes(data.type));
     }
-    //TODO: tidy this up, it does not need to be saved in settings
     if (soundsFilter === 'importSounds') {
       return [];
     }
@@ -63,10 +57,10 @@ export function SoundsTab() {
     });
   });
   return (
-    <div id="sounds-tab" className="px-4 flex gap-2 flex-col w-full h-full text-foreground">
+    <div id="sounds-tab" className="px-4 flex flex-col w-full h-full text-foreground">
       <Textbox placeholder="Search" value={search} onChange={(v) => setSearch(v)} />
 
-      <div className=" flex shrink-0 flex-wrap">
+      <div className="pb-2 flex shrink-0 flex-wrap">
         <ButtonGroup
           value={soundsFilter}
           onChange={(value) => settingsMap.setKey('soundsFilter', value)}
@@ -80,26 +74,7 @@ export function SoundsTab() {
         ></ButtonGroup>
       </div>
 
-      {soundsFilter === soundFilterType.USER && soundEntries.length > 0 && (
-        <ActionButton
-          className="pl-2"
-          label="delete-all"
-          onClick={async () => {
-            try {
-              const confirmed = await confirmDialog('Delete all imported user samples?');
-              if (confirmed) {
-                clearIDB(userSamplesDBConfig.dbName);
-                soundMap.set({});
-                await prebake();
-              }
-            } catch (e) {
-              console.error(e);
-            }
-          }}
-        />
-      )}
-
-      <div className="min-h-0 max-h-full grow overflow-auto  text-sm break-normal bg-background p-2 rounded-md">
+      <div className="min-h-0 max-h-full grow overflow-auto  text-sm break-normal pb-2">
         {soundEntries.map(([name, { data, onTrigger }]) => {
           return (
             <span
@@ -176,7 +151,9 @@ export function SoundsTab() {
         ) : (
           ''
         )}
-        {!soundEntries.length && soundsFilter !== 'importSounds' ? 'No sounds loaded' : ''}
+        {!soundEntries.length && soundsFilter !== 'importSounds'
+          ? 'No custom sounds loaded in this pattern (yet).'
+          : ''}
       </div>
     </div>
   );

website/src/repl/idbutils.mjs

@@ -12,21 +12,17 @@ export const userSamplesDBConfig = {
 };
 
 // deletes all of the databases, useful for debugging
-function clearAllIDB() {
+function clearIDB() {
   window.indexedDB
     .databases()
     .then((r) => {
-      for (var i = 0; i < r.length; i++) clearIDB(r[i].name);
+      for (var i = 0; i < r.length; i++) window.indexedDB.deleteDatabase(r[i].name);
     })
     .then(() => {
       alert('All data cleared.');
     });
 }
 
-export function clearIDB(dbName) {
-  return window.indexedDB.deleteDatabase(dbName);
-}
-
 // queries the DB, and registers the sounds so they can be played
 export function registerSamplesFromDB(config = userSamplesDBConfig, onComplete = () => {}) {
   openDB(config, (objectStore) => {

website/src/repl/ws.mjs

@@ -0,0 +1,26 @@
+import { register, signal } from '@strudel/core';
+import { clamp } from '../../../packages/superdough/util.mjs';
+
+let sigs = [0, 0, 0, 0, 0, 0, 0, 0];
+
+export let sig = register('sig', (pat) =>
+  pat
+    .fmap((n) => {
+      return signal(() => clamp(sigs[n], 0.0001, 1));
+    })
+    .outerJoin(),
+);
+
+let socket;
+export function initSocket(ip) {
+  // e.g. 192.168.1.12:4422
+  socket = socket || new WebSocket(`ws://${ip}`);
+  socket.addEventListener('open', () => console.log('connection opened'));
+  socket.addEventListener('error', () => console.log('connection error'));
+  socket.addEventListener('message', (event) => {
+      if (Math.random() < 0.01) {
+        console.log(event.data.toString());
+      }
+    sigs = JSON.parse(event.data.toString());
+  });
+}

website/src/settings.mjs

@@ -8,14 +8,6 @@ export const audioEngineTargets = {
   osc: 'osc',
 };
 
-export const soundFilterType = {
-  USER: 'user',
-  DRUMS: 'drums',
-  SAMPLES: 'samples',
-  SYNTHS: 'synths',
-  ALL: 'all',
-};
-
 export const defaultSettings = {
   activeFooter: 'intro',
   keybindings: 'codemirror',
@@ -36,7 +28,7 @@ export const defaultSettings = {
   fontSize: 18,
   latestCode: '',
   isZen: false,
-  soundsFilter: soundFilterType.ALL,
+  soundsFilter: 'all',
   patternFilter: 'community',
   // panelPosition: window.innerWidth > 1000 ? 'right' : 'bottom', //FIX: does not work on astro
   panelPosition: 'right',