encryption, code cleanup, nice types, bug fixes, and more

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

@@ -1,10 +1,11 @@
 <script lang="ts">
     import { page } from "$app/state";
     import { onDestroy, onMount } from "svelte";
-    import { room } from "../../stores/roomStore";
+    import { room, connectionState } from "../../stores/roomStore";
     import { error, handleMessage, peer } from "../../utils/webrtcUtil";
-    import { ws } from "../../stores/websocketStore";
+    import { ws, connected } from "../../stores/websocketStore";
     import RtcMessage from "../../components/RTCMessage.svelte";
+    import { ConnectionState } from "../../types/websocket";
 
     if (!page.params.roomId) {
         throw new Error("Room ID not provided");
@@ -17,12 +18,14 @@
         $ws.addEventListener("message", handleMessage);
 
         $ws.onopen = () => {
-            $ws.send(JSON.stringify({ type: "join", data: $room }));
+            $connectionState = ConnectionState.CONNECTING;
+            $ws.send(JSON.stringify({ type: "join", roomId: $room }));
         };
     });
 
     onDestroy(() => {
         if ($ws) {
+            $connectionState = ConnectionState.DISCONNECTED;
             $ws.close();
         }
         if ($peer) {
@@ -34,6 +37,8 @@
 <div class="p-4">
     {#if $error}
         <p>Whoops! That room doesn't exist.</p>
+    {:else if !$connected || $connectionState === ConnectionState.CONNECTING}
+        <p>Connecting to server...</p>
     {:else}
         <RtcMessage />
     {/if}