fix state pollution and other bugs, and random other stuff

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

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