better E2E encryption, nicer UI, bug fixes, more

src/routes/+page.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
-    import { ws, connected } from "../stores/websocketStore";
-    import { room, connectionState } from "../stores/roomStore";
+    import {
+        ws,
+        webSocketConnected,
+        WebSocketMessageType,
+    } from "../stores/websocketStore";
+    import { room } from "../stores/roomStore";
     import { browser } from "$app/environment";
     import { peer, handleMessage } from "../utils/webrtcUtil";
     import { onDestroy, onMount } from "svelte";
@@ -8,13 +12,19 @@
     import { ConnectionState } from "../types/websocket";
 
     onMount(async () => {
-        $connectionState = ConnectionState.CONNECTING;
+        room.update((room) => ({
+            ...room,
+            connectionState: ConnectionState.CONNECTING,
+        }));
         $ws.addEventListener("message", handleMessage);
     });
 
     onDestroy(() => {
         if ($ws) {
-            $connectionState = ConnectionState.DISCONNECTED;
+            room.update((room) => ({
+                ...room,
+                connectionState: ConnectionState.DISCONNECTED,
+            }));
             $ws.removeEventListener("message", handleMessage);
         }
         if ($peer) {
@@ -26,20 +36,20 @@
 <div class="p-4">
     <h1>Welcome to Wormhole!</h1>
 
-    {#if $connected}
+    {#if $webSocketConnected}
         <button
             on:click={() => {
-                $ws.send(JSON.stringify({ type: "create" })); // send a message when the button is clicked
+                $ws.send({ type: WebSocketMessageType.CREATE_ROOM }); // send a message when the button is clicked
             }}>Create Room</button
         >
     {:else}
         <p>Connecting to server...</p>
     {/if}
 
-    {#if $room && browser}
+    {#if $room.id && browser}
         <p>Room created!</p>
         <p>Share this link with your friend:</p>
-        <a href={`${location.origin}/${$room}`}>{location.origin}/{$room}</a>
+        <a href={`${location.origin}/${$room}`}>{location.origin}/{$room.id}</a>
     {/if}
 
     <RtcMessage />