better E2E encryption, nicer UI, bug fixes, more

src/routes/[roomId]/+page.svelte

@@ -1,31 +1,47 @@
 <script lang="ts">
     import { page } from "$app/state";
     import { onDestroy, onMount } from "svelte";
-    import { room, connectionState } from "../../stores/roomStore";
+    import { room } from "../../stores/roomStore";
     import { error, handleMessage, peer } from "../../utils/webrtcUtil";
-    import { ws, connected } from "../../stores/websocketStore";
+    import {
+        ws,
+        webSocketConnected,
+        WebSocketMessageType,
+    } from "../../stores/websocketStore";
     import RtcMessage from "../../components/RTCMessage.svelte";
     import { ConnectionState } from "../../types/websocket";
 
-    if (!page.params.roomId) {
+    const roomId = page.params.roomId;
+    if (roomId === undefined) {
         throw new Error("Room ID not provided");
     }
 
     // subscribe to the websocket store
-    room.set(page.params.roomId);
+    room.update((room) => ({ ...room, id: roomId }));
 
     onMount(async () => {
         $ws.addEventListener("message", handleMessage);
 
-        $ws.onopen = () => {
-            $connectionState = ConnectionState.CONNECTING;
-            $ws.send(JSON.stringify({ type: "join", roomId: $room }));
-        };
+        webSocketConnected.subscribe((value) => {
+            if (value) {
+                $ws.send({ type: WebSocketMessageType.JOIN_ROOM, roomId });
+            }
+        });
+        // $ws.onopen = () => {
+        //     room.update((room) => ({
+        //         ...room,
+        //         connectionState: ConnectionState.CONNECTING,
+        //     }));
+        //     $ws.send({ type: WebSocketMessageType.JOIN_ROOM, roomId });
+        // };
     });
 
     onDestroy(() => {
         if ($ws) {
-            $connectionState = ConnectionState.DISCONNECTED;
+            room.update((room) => ({
+                ...room,
+                connectionState: ConnectionState.DISCONNECTED,
+            }));
             $ws.close();
         }
         if ($peer) {
@@ -37,7 +53,7 @@
 <div class="p-4">
     {#if $error}
         <p>Whoops! That room doesn't exist.</p>
-    {:else if !$connected || $connectionState === ConnectionState.CONNECTING}
+    {:else if !$webSocketConnected || $room.connectionState === ConnectionState.CONNECTING}
         <p>Connecting to server...</p>
     {:else}
         <RtcMessage />