Implement almost working version of rooms

client/src/api.ts

@@ -78,3 +78,7 @@ export const login = (userLogin: UserLogin) => {
 export const getLatestPatchVersion = (patchId: string) => {
   return get(`/api/patch/${patchId}/latest`)
 }
+
+export const getRoomUsingPatch = (patchId: string) => {
+  return get(`/api/room/${patchId}`)
+}

client/src/components/app/App.tsx

@@ -6,9 +6,11 @@ import UtilityBox from '../utility-box/UtilityBox'
 import ModuleSelector from '../module-selector/ModuleSelector'
 import Patch from '../patch/Patch'
 import Hint from '../hint/Hint'
+import RoomCursors from '../room-cursors/RoomCursors'
 import { initializeAudio } from '../../audio'
 import state, { loadPatch, patch } from '../../state'
 import * as api from '../../api'
+import { joinRoom } from '../../rooms'
 
 const loadSaveState = async () => {
   const rawSaveState = localStorage.getItem('savestate')
@@ -41,6 +43,10 @@ const initialize = async () => {
 
       break
     }
+
+    case 'room': {
+      joinRoom(state.route.roomId)
+    }
   }
 }
 
@@ -80,6 +86,7 @@ const App = () => {
       }}
     >
       {state.initialized ? <Patch /> : null}
+      {state.room ? <RoomCursors /> : null}
       <Header />
       <UserBar />
       <ModuleSelector />

client/src/components/header/Header.tsx

@@ -3,6 +3,7 @@ import state, { patch } from '../../state'
 import MenuBar, { VerticalDivider } from '../menu-bar/MenuBar'
 import css from './Header.css'
 import * as api from '../../api'
+import { createRoom } from '../../rooms'
 
 const Menu = () => {
   const savePatch = async () => {
@@ -78,6 +79,15 @@ const Header = () => {
         </i>
       </div>
 
+      {state.patchMetadata.id !== null ? (
+        <>
+          <VerticalDivider />
+          <button onClick={() => createRoom(state.patchMetadata.id!)}>
+            Create room
+          </button>
+        </>
+      ) : null}
+
       {headerState.isMenuOpen ? <Menu /> : null}
     </MenuBar>
   )

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

@@ -53,7 +53,7 @@ type Props = CommonProps &
 const clamp = (value: number, min: number, max: number) =>
   Math.min(max, Math.max(min, value))
 
-const getInitialValue = (props: Props): number => {
+const getValue = (props: Props): number => {
   const knobValue = getKnobValue(props.moduleId, props.id)
 
   switch (props.type) {
@@ -194,14 +194,13 @@ const getHintText = (props: Props): string => {
 }
 
 const Knob = (props: Props) => {
-  const initialValue = getInitialValue(props)
+  const value = getValue(props)
+  const position = normalizeValue(value, props)
 
   const knobState = useState<{
-    position: number
     dragPosition: null | Vec2
     displayHint: boolean
   }>({
-    position: normalizeValue(initialValue, props),
     dragPosition: null,
     displayHint: false,
   })
@@ -216,7 +215,7 @@ const Knob = (props: Props) => {
   }
 
   useEffect(() => {
-    setKnobValue(props.moduleId, props.id, initialValue)
+    // setKnobValue(props.moduleId, props.id, value)
 
     document.addEventListener('mouseup', onDragEnd)
     document.addEventListener('blur', onDragEnd)
@@ -229,12 +228,13 @@ const Knob = (props: Props) => {
 
   useEffect(() => {
     if (knobState.dragPosition) {
-      knobState.position -= (state.cursor.y - knobState.dragPosition.y) / 300
-      knobState.position = Math.max(0, Math.min(1, knobState.position))
+      let newPosition = normalizeValue(getValue(props), props)
+      newPosition -= (state.cursor.y - knobState.dragPosition.y) / 300
+      newPosition = Math.max(0, Math.min(1, newPosition))
 
       knobState.dragPosition.x = state.cursor.x
       knobState.dragPosition.y = state.cursor.y
-      setNormalizedKnobValue(knobState.position, props)
+      setNormalizedKnobValue(newPosition, props)
     }
   })
 
@@ -264,7 +264,7 @@ const Knob = (props: Props) => {
         onMouseOut={hideHint}
         onMouseDown={onDragStart}
         style={{
-          transform: `rotate(${knobState.position * 300 - 60}deg)`,
+          transform: `rotate(${position * 300 - 60}deg)`,
         }}
       ></div>
       <div className={css('name')}>{props.label || props.id}</div>

client/src/components/modules/Sequencer.tsx

@@ -33,7 +33,7 @@ const NOTE_NAMES = [
   'A#',
   'B',
 ] as const
-type NoteName = typeof NOTE_NAMES[number]
+type NoteName = (typeof NOTE_NAMES)[number]
 
 const OCTAVES = [8, 7, 6, 5, 4, 3, 2]
 

client/src/components/patch/Patch.tsx

@@ -1,5 +1,5 @@
 import { h, Fragment, useState, useEffect, useRef, unwrap } from 'kaiku'
-import state, { patch } from '../../state'
+import state from '../../state'
 import { moduleMap } from '../../moduleMap'
 import Cables from './Cables'
 
@@ -16,8 +16,8 @@ const Patch = () => {
             `translate(${state.viewOffset.x}px, ${state.viewOffset.y}px)`,
         }}
       >
-        {Object.keys(patch.modules).map((id: string) => {
-          const module = patch.modules[id]
+        {Object.keys(state.patch.modules).map((id: string) => {
+          const module = state.patch.modules[id]
           assert(module, `Patch: invalid module id (${id})`)
           const Component: any =
             moduleMap[module.name as keyof typeof moduleMap]

client/src/components/room-cursors/RoomCursors.css

@@ -0,0 +1,15 @@
+.room-cursors {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+}
+
+.cursor {
+  width: 20px;
+  height: 20px;
+  background-image: url(/assets/cursor.png);
+  background-size: contain;
+}

client/src/components/room-cursors/RoomCursors.tsx

@@ -0,0 +1,26 @@
+import { h } from 'kaiku'
+import state from '../../state'
+import css from './RoomCursors.css'
+import assert from '../../assert'
+
+const RoomCursors = () => {
+  const room = state.room
+  assert(room)
+  return (
+    <div className={css('room-cursors')}>
+      {Object.values(room.users).map(({ cursor }) => (
+        <div
+          className={css('cursor')}
+          style={{
+            transform: () =>
+              `translate(${state.viewOffset.x + cursor.x}px, ${
+                state.viewOffset.y + cursor.y
+              }px)`,
+          }}
+        ></div>
+      ))}
+    </div>
+  )
+}
+
+export default RoomCursors

client/src/index.tsx

@@ -7,6 +7,7 @@ import * as auth from './auth'
 import './reset.css'
 
 import App from './components/app/App'
+import { joinRoom, leaveRoom } from './rooms'
 
 api.getIdentity().then((res) => {
   if (!res.error) {

client/src/modules.ts

@@ -13,11 +13,8 @@ export const connectKnobToParam = (
 
     if (knobs) {
       const knobValue = knobs[knob]
-      assert(
-        typeof knobValue !== 'undefined',
-        'Tried to set value of an undefined knob'
-      )
-      param.setTargetAtTime(knobValue, getAudioContext().currentTime, 0.001)
+      if (typeof knobValue !== 'undefined')
+        param.setTargetAtTime(knobValue, getAudioContext().currentTime, 0.001)
     }
   })
 }