feat: add help modal

src/as/dsp/build.ts

@@ -376,9 +376,24 @@ export function TrackBuild(track: Track) {
     setupVm.CreateValues(context.values)
     setupVm.End()
 
-    let L = program.scope.vars['L']
-    let R = program.scope.vars['R']
-    let LR = program.scope.vars['LR']
+    let L: AstNode | undefined = program.scope.vars['L']
+    let R: AstNode | undefined = program.scope.vars['R']
+    let LR: AstNode | undefined = program.scope.vars['LR']
+
+    // @ts-ignore
+    if (L?.value?.kind !== ValueBase.Kind.Audio && L?.value?.kind !== ValueBase.Kind.Dynamic) {
+      L = undefined
+    }
+
+    // @ts-ignore
+    if (R?.value?.kind !== ValueBase.Kind.Audio && R?.value?.kind !== ValueBase.Kind.Dynamic) {
+      R = undefined
+    }
+
+    // @ts-ignore
+    if (LR?.value?.kind !== ValueBase.Kind.Audio && LR?.value?.kind !== ValueBase.Kind.Dynamic) {
+      LR = undefined
+    }
 
     const slice = program.scope.stack.slice(-2)
     if (slice.length === 2) {
@@ -389,6 +404,33 @@ export function TrackBuild(track: Track) {
       LR ??= slice.pop()!
     }
 
+    // @ts-ignore
+    if (L?.value?.kind !== ValueBase.Kind.Audio && L?.value?.kind !== ValueBase.Kind.Dynamic) {
+      L = undefined
+    }
+
+    // @ts-ignore
+    if (R?.value?.kind !== ValueBase.Kind.Audio && R?.value?.kind !== ValueBase.Kind.Dynamic) {
+      R = undefined
+    }
+
+    // @ts-ignore
+    if (LR?.value?.kind !== ValueBase.Kind.Audio && LR?.value?.kind !== ValueBase.Kind.Dynamic) {
+      LR = undefined
+    }
+
+    if (!LR) {
+      if (L && R) { }
+      else if (L) {
+        LR = L
+        L = undefined
+      }
+      else if (R) {
+        LR = R
+        R = undefined
+      }
+    }
+
     const out = {
       L: L?.value as Value.Audio | undefined,
       R: R?.value as Value.Audio | undefined,

src/comp/DspEditorUi.tsx

@@ -2,13 +2,11 @@ import { BUFFER_SIZE, createDspNode, PreviewService, SoundValue } from 'dsp'
 import type { Pane } from 'editor'
 import { Gfx, Matrix, Rect, wasm as wasmGfx } from 'gfx'
 import type { Token } from 'lang'
-import { $, dispose, Sigui } from 'sigui'
+import { Sigui } from 'sigui'
 import { Canvas } from 'ui'
 import { assign, dom, Lru, throttle } from 'utils'
-import { cn } from '~/lib/cn.ts'
 import { DspEditor } from '~/src/comp/DspEditor.tsx'
 import { screen } from '~/src/screen.ts'
-import { state } from '~/src/state.ts'
 import { ListMarkWidget, RmsDecoWidget, WaveGlDecoWidget } from '~/src/ui/editor/widgets/index.ts'
 import { copyRingInto } from '~/src/util/copy-ring-into.ts'
 
@@ -364,7 +362,7 @@ export function DspEditorUi() {
   info.el = <div class="flex flex-1">
     <div class="w-full h-[calc(100vh-87px)] pt-2">
       <div class="relative flex w-full h-full">
-        {() => info.didBuildPane && <div class="absolute left-0 top-0 w-full h-full flex flex-row">
+        {() => info.didBuildPane && <div class="absolute left-0 top-0 w-full h-full flex flex-col md:flex-row">
           {dspEditor}
           {canvas}
         </div>}

src/comp/Help.tsx

@@ -0,0 +1,68 @@
+import { getAllProps, getAllPropsDetailed, getAllPropsReverse } from 'dsp'
+import { H3 } from 'ui'
+import { keys } from 'utils'
+import { dspGens } from '~/generated/typescript/dsp-gens.ts'
+
+const HIDDEN_PROPS = new Set<any>([
+  'gain',
+])
+const AUDIO_PROPS = new Set<any>([
+  'in',
+  'sidechain',
+])
+const STACK_PROPS = new Set<any>([
+  'in',
+])
+const HIDDEN_GENS = new Set<any>([
+  'gen',
+  'osc',
+  'biquad',
+  'moog',
+  'svf',
+  'dcc',
+  'dcfix',
+])
+
+const OPERATORS = {
+  '=': { name: 'assign', kind: 'binary' },
+  '?': { name: 'pick', kind: 'binary' },
+  '+': { name: 'add', kind: 'binary' },
+  '-': { name: 'subtract', kind: 'binary' },
+  '*': { name: 'multiply', kind: 'binary' },
+  '/': { name: 'divide', kind: 'binary' },
+  '%': { name: 'modulo', kind: 'binary' },
+  '^': { name: 'power', kind: 'binary' },
+}
+
+export function Help() {
+  return <div class="h-[80dvh]">
+    <div class="flex flex-col flex-wrap gap-4">
+      <H3>Gens</H3>
+      <div class="h-[50dvh] flex flex-col flex-wrap gap-4">
+        {keys(dspGens).filter(name => !HIDDEN_GENS.has(name)).map(name => {
+          const props = getAllProps(name)
+          return <div>
+            <span class="text-neutral-200">{name}</span>
+            <div class="w-20 flex flex-row flex-wrap gap-1">
+              {props.filter(name => !HIDDEN_PROPS.has(name)).map(name =>
+                <span class="text-xs leading-none">{name}</span>
+              )}
+            </div>
+          </div>
+        })}
+      </div>
+    </div>
+    <div class="flex flex-col flex-wrap gap-4">
+      <H3>Ops</H3>
+      <div class="h-[15dvh] flex flex-col flex-wrap">
+        {keys(OPERATORS).map(id => {
+          const { name, kind } = OPERATORS[id]
+          return <div class="flex flex-row flex-nowrap items-center gap-1">
+            <span class="text-neutral-200">{id}</span>
+            <span class="">{name}</span>
+          </div>
+        })}
+      </div>
+    </div>
+  </div>
+}

src/comp/HelpModal.tsx

@@ -0,0 +1,27 @@
+import { $ } from 'sigui'
+import { Help } from '~/src/comp/Help.tsx'
+import { state } from '~/src/state.ts'
+
+export function showHelpModal() {
+  state.modalIsCancelled = false
+
+  const off = $.fx(() => {
+    const { modalIsCancelled } = state
+    if (modalIsCancelled) {
+      off()
+      return
+    }
+    const { user } = state
+    $()
+    if (user == null) {
+      state.modal = <Help />
+      state.modalIsOpen = true
+      state.modalIsCancelled = false
+    }
+    else {
+      state.modal = null
+      state.modalIsOpen = false
+      queueMicrotask(() => off())
+    }
+  })
+}

src/lang/interpreter.ts

@@ -1,7 +1,7 @@
 import { dspGens } from '~/generated/typescript/dsp-gens.ts'
 import type { DspApi } from '~/src/as/dsp/build'
 import { getAllPropsReverse } from '~/src/as/dsp/util.ts'
-import type { Value } from '~/src/as/dsp/value.ts'
+import { Value } from '~/src/as/dsp/value.ts'
 import { Token } from '~/src/lang/tokenize.ts'
 import { parseNumber, type NumberFormat, type NumberInfo } from '~/src/lang/util.ts'
 
@@ -343,7 +343,9 @@ export function interpret(g: DspApi, data: Record<string, any>, tokens: Token[])
           if (r == null) return
           while (scope.stack.length) {
             l = scope.stack.pop() as AstNode & { value: Value }
+            // if (l.value.kind === Value.Kind.Audio) {
             r = g.math.add(l.value, r)
+            // }
           }
           const node = new AstNode(AstNode.Type.Result, { value: r }, [t])
           return node

src/pages/App.tsx

@@ -1,12 +1,14 @@
-import { AudioWaveform, Plus, UserCircle, UserCircle2, X } from 'lucide'
+import { AudioWaveform, HelpCircle, LogIn, Plus, UserCircle, UserCircle2, X } from 'lucide'
 import { Sigui } from 'sigui'
 import { Button, DropDown } from 'ui'
 import { dom } from 'utils'
 import type { z } from 'zod'
 import type { Profiles } from '~/api/models.ts'
 import { cn } from '~/lib/cn.ts'
 import { icon } from '~/lib/icon.ts'
+import { wrapActionAuth } from '~/src/comp/AuthModal.tsx'
 import { dspEditorUi } from '~/src/comp/DspEditorUi.tsx'
+import { showHelpModal } from '~/src/comp/HelpModal.tsx'
 import { Toast } from '~/src/comp/Toast.tsx'
 import { ICON_24, ICON_32, ICON_48 } from '~/src/constants.ts'
 import { CreateProfile } from '~/src/pages/CreateProfile.tsx'
@@ -230,8 +232,9 @@ export function App() {
   const Home = () => <div class="flex flex-row">
     <div class="flex flex-col">
       <div class="h-12 border-b border-b-neutral-500 text-xl flex items-center p-2 gap-1">
-        <Link href="/">{icon(AudioWaveform, ICON_32)}</Link>
-        <div class="leading-none">ravescript</div>
+        <Link href="/" class="flex flex-row flex-nowrap items-center gap-1 hover:no-underline">
+          {icon(AudioWaveform, ICON_32)} <div class="leading-none text-neutral-400">ravescript</div>
+        </Link>
       </div>
       <div class=" h-[calc(100vh-80px)] overflow-y-scroll">
         <div class="flex flex-col">{() => info.profile ? [
@@ -253,12 +256,21 @@ export function App() {
           <div class="flex items-center">{() => getDspControls().el}</div>
         </div>
         <div class="flex items-center gap-2">{() => [
-          <Link class="flex flex-row items-center text-lg mr-1" onclick={createSound}>
-            {icon(Plus, ICON_32)} <span>New sound</span>
+          <Link class="flex flex-row items-center mr-16 gap-1" onclick={showHelpModal}>
+            <span>help</span>
+            {icon(HelpCircle, { ...ICON_24, class: 'mb-0.5 text-neutral-400' })}
+          </Link>,
+          <Link class="flex flex-row items-center mr-16" onclick={createSound}>
+            <span>new sound</span>
+            {icon(Plus, { ...ICON_32, class: 'mb-0.5 text-neutral-400' })}
+          </Link>,
+          !state.user && <Link class="flex flex-row items-center gap-1" onclick={wrapActionAuth(() => { })}>
+            <span>Login</span>
+            {icon(LogIn, { ...ICON_24, class: 'mb-0.5 text-neutral-400' })}
           </Link>,
           ...(() => !state.user ? [] : [
-            <Link class="ml-16" href={() => `/${state.user?.defaultProfile}`}>{() => state.profile?.displayName}</Link>,
-            <DropDown right handle={icon(UserCircle, ICON_24)} items={() => [
+            <Link href={() => `/${state.user?.defaultProfile}`}>{() => state.profile?.displayName}</Link>,
+            <DropDown right handle={icon(UserCircle, { ...ICON_24, class: 'mb-0.5' })} items={() => [
               // [<Link class="px-2 py-1 hover:no-underline flex items-center justify-end" href="/settings">Settings</Link>, () => { }],
               [state.user ? <Link class="px-2 py-1 hover:no-underline flex items-center justify-end" onclick={logoutUser}>Logout</Link> : <div />, () => { }],
               [<Link class="px-2 py-1 hover:no-underline flex items-center justify-end" href="/new-profile">New profile</Link>, () => { }],
@@ -282,7 +294,7 @@ export function App() {
     </div>
   </div>
 
-  const Modal = () => state.modalIsOpen && <div class="fixed w-full h-full flex items-center justify-center bg-[#111a] z-30" onpointermove={dom.prevent.stop}>
+  const AuthModal = () => state.modalIsOpen && <div class="fixed w-full h-full flex items-center justify-center bg-[#111a] z-30" onpointermove={dom.prevent.stop}>
     <div class="bg-neutral-700 p-6 border-4 border-[#000] relative">
       <Button bare class="absolute top-0 right-0 m-1" onclick={() => {
         state.modalIsOpen = false
@@ -294,7 +306,7 @@ export function App() {
 
   return <main class="flex flex-col relative">{() => [
     <Toast />,
-    Modal(),
+    AuthModal(),
     (() => {
       const { pathname } = state
       $()

tailwind.config.js

@@ -11,6 +11,7 @@ export default {
   theme: {
     fontFamily: {
       sans: ['"Fustat"', 'sans-serif'],
+      mono: ['"IBM Plex Mono"', 'monospace'],
     },
     extend: {},
   },