Chat isolation

src/components/chat/Chat.svelte

@@ -11,6 +11,7 @@
     import { fly } from 'svelte/transition';
     import { UserStore } from '@lib/user';
     import type { Message, TextMessage } from '@lib/message';
+    import { onMount } from 'svelte';
 
     let message: string;
     let messagesDiv: HTMLDivElement = null;
@@ -43,6 +44,10 @@
             messagesDiv.scrollTop = messagesDiv.scrollHeight;
         }, 500);
     }
+
+    onMount(() => {
+        chatStore.newChat($jamStore.id);
+    });
 </script>
 
 <div
@@ -52,8 +57,8 @@
     <div
         bind:this={messagesDiv}
         class="messages">
-        {#if $chatStore.length > 0}
-            {#each $chatStore as message}
+        {#if $chatStore[$jamStore.id] && $chatStore[$jamStore.id].length > 0}
+            {#each $chatStore[$jamStore.id] as message}
                 <ChatBubble {message} />
             {/each}
         {:else}

src/lib/api/index.ts

@@ -35,7 +35,7 @@ export const agent = {
         list: async () => {
             const {
                 data: { rooms },
-            } = await api.get<{ rooms: JamRoom[]; }>('/jams');
+            } = await api.get<{ rooms: JamRoom[] }>('/jams');
 
             return rooms;
         },

src/lib/audio/mic.ts

@@ -84,7 +84,8 @@ export function noteFromPitch(
     octaveLength = 12
 ): number | null {
     const A4 = { freq: 440, midi: 69 };
-    const noteNum = octaveLength * (Math.log(frequency / A4.freq) / Math.log(2));
+    const noteNum =
+        octaveLength * (Math.log(frequency / A4.freq) / Math.log(2));
     const midiNote = Math.round(noteNum) + A4.midi;
     if (midiNote < 0 || midiNote > 127) {
         return null;

src/lib/audio/midi.ts

@@ -16,7 +16,7 @@ class Instrument {
     }
 
     // FIXME - _velocity defined but never used
-    noteOn(note: number) {
+    noteOn(note: number, _velocity: number) {
         this.player.play(note.toString());
     }
 }

src/lib/jam/chat.ts

@@ -1,19 +1,34 @@
 import type { TextMessage } from '@lib/message';
 import { createStorage } from '../storage';
 
-const createChatStorage = (init: TextMessage[] = []) => {
-    const { subscribe, update } = createStorage<TextMessage[]>(
-        'CHAT_STORE',
-        init
-    );
+interface ChatHistory {
+    [jamId: string]: TextMessage[];
+}
 
-    function saveMessage(...message: TextMessage[]) {
+const createChatStorage = () => {
+    const { subscribe, update } = createStorage<ChatHistory>('CHAT_STORE', {});
+
+    function newChat(jamId: string) {
+        update(($storage) => {
+            if ($storage[jamId] === undefined) {
+                $storage[jamId] = []
+            }
+
+            return $storage
+        });
+    }
+
+    function saveMessage(jamId: string, ...message: TextMessage[]) {
         update(($storage) => {
-            return [...$storage, ...message];
+            if ($storage[jamId])
+                return {
+                    ...$storage,
+                    [jamId]: [...$storage[jamId], ...message],
+                };
         });
     }
 
-    return { subscribe, saveMessage };
+    return { subscribe, newChat, saveMessage };
 };
 
 export const chatStore = createChatStorage();

src/lib/theme.ts

@@ -100,5 +100,8 @@ export const switchTheme = (name: ThemeName) => {
 };
 
 export const applyTheme = (theme: Theme) => {
-    return Object.entries(theme.vars).reduce((rules, [prop, val]) => `${rules}${prop}:${val};`, '');
+    return Object.entries(theme.vars).reduce(
+        (rules, [prop, val]) => `${rules}${prop}:${val};`,
+        ''
+    );
 };

src/pages/Jam.svelte

@@ -118,7 +118,8 @@
         // TODO -- this can be done at the variable declaration level
         // easier to track
         // FIXME - webkitAudioContext doesn't exist in type `Window` (d.ts file needed)
-        audioContext = new (window.AudioContext || window.webkitAudioContext)({
+        audioContext = new (window.AudioContext ||
+            globalThis.webkitAudioContext)({
             latencyHint: 'interactive',
         });
         try {
@@ -161,7 +162,10 @@
                     displayMsg.displayName = 'You';
                 }
 
-                chatStore.saveMessage({ ...message, payload: displayMsg });
+                chatStore.saveMessage($jamStore.id, {
+                    ...message,
+                    payload: displayMsg,
+                });
                 break;
             }
             case 'midi': {