Add mixer and delay modules

client/src/components/module-parts/Keyboard.css

@@ -1,6 +1,51 @@
-.keyboard svg {
+.keyboard {
   border-radius: 3px;
   width: 152px;
   height: 60px;
   overflow: hidden;
+  position: relative;
+}
+
+.white-key,
+.black-key {
+  width: 20px;
+  height: 100%;
+  position: absolute;
+}
+
+.white-key {
+  background: var(--background);
+}
+
+.black-key {
+  background: var(--on-background);
+  top: -50%;
+}
+
+.black-key::before {
+  background: var(--on-background);
+  content: ' ';
+  width: 20px;
+  height: 20px;
+  transform: scale(0.7, 0.2) rotate(45deg);
+  position: absolute;
+  bottom: -10px;
+  left: 0;
+}
+
+.white-key::after,
+.black-key::after {
+  content: ' ';
+  position: absolute;
+  bottom: 5px;
+  left: 7px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--secondary);
+}
+
+.white-key.on::after,
+.black-key.on::after {
+  background-color: var(--primary);
 }

client/src/components/module-parts/Keyboard.tsx

@@ -15,44 +15,23 @@ type Props = {
 const Keyboard = ({ note, onChange }: Props) => {
   return (
     <div className={css('keyboard')}>
-      <svg viewbox="0 0 152 60">
-        <defs>
-          <g id="white-key">
-            <rect fill="white" x="0" y="0" width="20" height="60" />
-            <circle cx="10" cy="50" r="4" fill="#c7c7c7" />
-          </g>
-          <g id="white-key-active">
-            <rect fill="white" x="0" y="0" width="20" height="60" />
-            <circle cx="10" cy="50" r="4" fill="#e85d00" />
-          </g>
-          <g id="black-key">
-            <path fill="#333333" d="M 0 0 H 20 V 35 l -10 3 l -10 -3 Z" />
-            <circle cx="10" cy="25" r="4" fill="#c7c7c7" />
-          </g>
-          <g id="black-key-active">
-            <path fill="#333333" d="M 0 0 H 20 V 35 l -10 3 l -10 -3 Z" />
-            <circle cx="10" cy="25" r="4" fill="#e85d00" />
-          </g>
-        </defs>
-
-        {WHITE_KEYS.map((key, index) => (
-          <use
-            href={key === note ? '#white-key-active' : '#white-key'}
-            x={index * 22}
-            onClick={() => onChange(key)}
-          />
-        ))}
-        {BLACK_KEYS.map(
-          (key, index) =>
-            key && (
-              <use
-                href={key === note ? '#black-key-active' : '#black-key'}
-                x={10 + index * 22}
-                onClick={() => onChange(key)}
-              />
-            )
-        )}
-      </svg>
+      {WHITE_KEYS.map((key, i) => (
+        <button
+          onClick={() => onChange(key)}
+          className={css('white-key', { on: key === note })}
+          style={{ left: i * 22 + 'px' }}
+        ></button>
+      ))}
+      {BLACK_KEYS.map(
+        (key, i) =>
+          key && (
+            <button
+              onClick={() => onChange(key)}
+              className={css('black-key', { on: key === note })}
+              style={{ left: i * 22 + 10 + 'px' }}
+            ></button>
+          )
+      )}
     </div>
   )
 }

client/src/components/module-parts/Knob.css

@@ -2,14 +2,15 @@
   width: 28px;
   height: 28px;
   border-radius: 50%;
-  border: 2px solid var(--secondary-variant);
+  border: 7px solid var(--on-background);
+  background: var(--background);
   position: relative;
 }
 
 .knob-position {
   position: absolute;
-  width: 50%;
-  border-bottom: 2px solid var(--secondary-variant);
-  top: 11px;
-  left: 0;
+  width: 14px;
+  border-bottom: 4px solid var(--background);
+  top: 5px;
+  left: -7px;
 }

client/src/components/module-parts/Module.css

@@ -1,12 +1,13 @@
 .module {
-  width: 200px;
   background-color: var(--secondary);
   border-radius: 5px;
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0.7;
   box-shadow: var(--box-shadow);
+  display: flex;
+  flex-direction: column;
 }
 
 .module.active {
@@ -31,4 +32,5 @@
   flex-wrap: wrap;
   justify-content: space-around;
   align-items: center;
+  flex-grow: 1;
 }

client/src/components/module-parts/Module.tsx

@@ -10,10 +10,17 @@ const css = classNames.bind(styles)
 type Props = {
   id: Id
   name: string
+  height?: number
   width?: number
 }
 
-const Module: FC<Props> = ({ id, name, children, width = 200 }) => {
+const Module: FC<Props> = ({
+  id,
+  name,
+  children,
+  height = 100,
+  width = 200,
+}) => {
   const moduleState = useState<{
     dragPosition: null | Vec2
   }>({
@@ -62,6 +69,7 @@ const Module: FC<Props> = ({ id, name, children, width = 200 }) => {
       style={{
         zIndex: () => (state.activeModule === id ? 10 : 1),
         width: width + 'px',
+        height: height + 'px',
         transform: () =>
           `translate(${modulePosition.x}px, ${modulePosition.y}px)`,
       }}

client/src/components/modules/Clock.tsx

@@ -1,16 +1,15 @@
-import { h, Component, useEffect } from 'kaiku'
-import { IModule, Id } from '../../types'
+import { h, Component } from 'kaiku'
+import { IModule } from '../../types'
 import { getAudioContext } from '../../audio'
 import { WorkletNode } from '../../worklets'
-import { getModuleKnobs } from '../../state'
 import Socket from '../module-parts/Socket'
 import Module from '../module-parts/Module'
 import Knob from '../module-parts/Knob'
 import { connectKnobToParam } from '../../modules'
 
-import { ModuleInputs, ModuleOutputs } from '../module-parts/ModuleSockets'
+import { ModuleOutputs } from '../module-parts/ModuleSockets'
 type Props = {
-  id: Id
+  id: string
 }
 
 class Clock extends Component<Props> implements IModule {

client/src/components/modules/Delay.tsx

@@ -0,0 +1,55 @@
+import { h, Component } from 'kaiku'
+import { IModule } from '../../types'
+import { getAudioContext } from '../../audio'
+import { WorkletNode } from '../../worklets'
+import Socket from '../module-parts/Socket'
+import Module from '../module-parts/Module'
+import Knob from '../module-parts/Knob'
+import { connectKnobToParam } from '../../modules'
+
+import { ModuleInputs, ModuleOutputs } from '../module-parts/ModuleSockets'
+type Props = {
+  id: string
+}
+
+class Delay extends Component<Props> implements IModule {
+  node: WorkletNode<'Delay'>
+
+  constructor(props: Props) {
+    super(props)
+    const audioContext = getAudioContext()
+
+    this.node = new WorkletNode(audioContext, 'Delay', {
+      numberOfOutputs: 2,
+    })
+
+    const dry = this.node.parameters.get('dry')
+    const wet = this.node.parameters.get('wet')
+    const delayTime = this.node.parameters.get('delayTime')
+    const feedBack = this.node.parameters.get('feedBack')
+
+    connectKnobToParam(props.id, 'dry', dry)
+    connectKnobToParam(props.id, 'wet', wet)
+    connectKnobToParam(props.id, 'delayTime', delayTime)
+    connectKnobToParam(props.id, 'feedBack', feedBack)
+  }
+
+  render({ id }: Props) {
+    return (
+      <Module id={id} name="Delay">
+        <Knob moduleId={id} name="delayTime" min={0.01} max={2} initial={10} />
+        <Knob moduleId={id} name="feedBack" min={0} max={1} initial={0.2} />
+        <Knob moduleId={id} name="wet" min={0} max={1} initial={0.5} />
+        <Knob moduleId={id} name="dry" min={0} max={1} initial={1} />
+        <ModuleInputs>
+          <Socket moduleId={id} type="input" name="In" node={this.node} />
+        </ModuleInputs>
+        <ModuleOutputs>
+          <Socket moduleId={id} type="output" name="Out" node={this.node} />
+        </ModuleOutputs>
+      </Module>
+    )
+  }
+}
+
+export default Delay

client/src/components/modules/Mixer.css

@@ -0,0 +1,6 @@
+.mixer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  height: 100%;
+}