Added Websockets

src/routes/+layout.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import '../app.css';
-	import favicon from '$lib/assets/favicon.svg';
+    import "../app.css";
+    import favicon from "$lib/assets/favicon.svg";
 
-	let { children } = $props();
+    let { children } = $props();
 </script>
 
 <svelte:head>
-	<link rel="icon" href={favicon} />
+    <link rel="icon" href={favicon} />
 </svelte:head>
 
 {@render children?.()}

src/routes/+page.svelte

@@ -1,14 +1,28 @@
-<script lang="ts">
-	let { data } = $props();
-</script>
-
-<h1 class="m-4 mb-8 text-7xl font-bold">Jeopardy</h1>
-
-<div class="flex flex-col space-y-4">
-	{#each data.games as game, i}
-		<a
-			class="ms-4 me-4 rounded-xl border-2 p-4 hover:cursor-pointer hover:bg-emerald-200"
-			href="/{i}">{game.name}</a
-		>
-	{/each}
-</div>
+<script lang="ts">
+    import { goto } from "$app/navigation";
+    import websocket, { SocketConnectionType } from "$lib/websocket.svelte";
+
+    $effect(() => {
+        if (websocket.connectionType === SocketConnectionType.HOST) {
+            console.log(`Type: ${websocket.connectionType}. Redirecting to /connected/games`);
+            goto("/connected/games");
+        }
+        if (websocket.connectionType === SocketConnectionType.DISPLAY) {
+            console.log(`Type: ${websocket.connectionType}. Redirecting to /connected/display`);
+            goto("/connected/display");
+        }
+    });
+</script>
+
+<div class="flex h-full flex-col">
+    <h1 class="m-4 mb-8 text-7xl font-bold">Jeopardy</h1>
+
+    <div class="flex h-full grow items-center justify-around p-4">
+        <button class="btn m-2 h-1/2 w-1/2 text-5xl" onclick={websocket.connectAsHost}
+            >Connect as Host</button
+        >
+        <button class="btn m-2 h-1/2 w-1/2 text-5xl" onclick={websocket.connectAsDisplay}
+            >Connect as Display</button
+        >
+    </div>
+</div>

src/routes/connected/+layout.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+    import { goto } from "$app/navigation";
+    import ws, { SocketConnectionType } from "$lib/websocket.svelte";
+
+    let { children } = $props();
+
+    $effect(() => {
+        if (ws.connectionType === SocketConnectionType.NONE) {
+            goto("/");
+        }
+    });
+</script>
+
+{@render children?.()}

src/routes/connected/display/+page.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    import { goto } from "$app/navigation";
+    import ws from "$lib/websocket.svelte";
+    $effect(() => {
+        if (!ws.message) return;
+        console.log(ws.message);
+        if (ws.nextMessage() == "HOST-DISCONNECTED") {
+            goto("/connected/display");
+        }
+    });
+</script>
+
+<div class="flex h-full w-full items-center justify-center">
+    <p class="text-9xl">Waiting for game to start</p>
+</div>

src/routes/connected/games/+page.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+    let { data } = $props();
+</script>
+
+<h1 class="m-4 mb-8 text-7xl font-bold">Games</h1>
+
+<div class="flex flex-col space-y-4">
+    {#each data.games as game, i}
+        <a
+            class="ms-4 me-4 rounded-xl border-2 p-4 hover:cursor-pointer hover:bg-emerald-200"
+            href="/connected/games/{i}">{game.name}</a
+        >
+    {/each}
+</div>

src/routes/connected/games/[game]/+page.svelte

@@ -3,6 +3,24 @@
     import type { Player } from "./Player";
     import { GameState } from "./GameState";
     import type { Game } from "$lib/games/games";
+    import ws from "$lib/websocket.svelte";
+    import { page } from "$app/state";
+
+    let startDisabled = $state(true);
+    let _startDisabled = true;
+
+    $effect(() => {
+        if (!ws.message) return;
+        console.log(ws.message);
+        if (ws.nextMessage() == "DISPLAY-CONNECTED") {
+            if (!_startDisabled) {
+                gameManager?.sendStart();
+                gameManager?.sendCurrentState();
+            }
+            _startDisabled = false;
+            startDisabled = false;
+        }
+    });
 
     class GameManager {
         public state: GameState = $state(GameState.INIT);
@@ -17,8 +35,26 @@
         }
 
         startGame(): void {
-            this.state = GameState.RUNNING;
-            console.log("hello");
+            this.state = GameState.CHOOSING_QUESTION;
+            this.sendStart();
+            this.sendCurrentState();
+        }
+
+        sendStart(): void {
+            ws.sendMessage({
+                type: "start"
+            });
+        }
+
+        sendCurrentState(): void {
+            ws.sendMessage({
+                type: "players",
+                players
+            });
+            ws.sendMessage({
+                type: "goto",
+                route: `/${page.params.game}/${this.currentWall}`
+            });
         }
     }
 
@@ -57,7 +93,9 @@
         <div class="p-4">
             <div class="flex items-center">
                 <h2 class="grow pb-4 text-5xl">Spieler</h2>
-                <button class="btn" onclick={() => gameManager.startGame()}>Start</button>
+                <button class="btn" disabled={startDisabled} onclick={() => gameManager.startGame()}
+                    >Start</button
+                >
             </div>
             <div class="flex flex-col space-y-2 pb-4">
                 {#each gameManager.players as player, i}

src/routes/connected/games/[game]/GameState.ts

@@ -1,4 +1,4 @@
 export enum GameState {
     INIT,
-    RUNNING
+    CHOOSING_QUESTION
 }