Added Websockets

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.server.ts

@@ -0,0 +1,7 @@
+import games from '$lib/games/games';
+
+export function load() {
+	return {
+		games
+	};
+}

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.server.ts

@@ -0,0 +1,12 @@
+import { error } from '@sveltejs/kit';
+import games from '$lib/games/games';
+
+export function load({ params }) {
+	const index = parseInt(params.game);
+	if (isNaN(index)) {
+		error(404);
+	}
+	const game = games[index];
+	if (game === undefined) error(404);
+	else return game;
+}

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

@@ -0,0 +1,113 @@
+<script lang="ts">
+    import Wall from "./Wall.svelte";
+    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);
+        public game: Game;
+        public players: Player[];
+
+        public currentWall = $state(0);
+
+        constructor(game: Game, players: Player[]) {
+            this.game = game;
+            this.players = players;
+        }
+
+        startGame(): void {
+            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}`
+            });
+        }
+    }
+
+    let { data } = $props();
+    let players: Player[] = $state([
+        {
+            name: "Player 1",
+            points: 0
+        },
+        {
+            name: "Player 2",
+            points: 0
+        },
+        {
+            name: "Player 3",
+            points: 0
+        }
+    ]);
+    let gameManager = new GameManager(data, players);
+
+    function addPlayer() {
+        players.push({
+            name: "Player " + (players.length + 1),
+            points: 0
+        });
+    }
+
+    function removePlayer(index: number) {
+        players.splice(index, 1);
+    }
+</script>
+
+<div class="flex h-full flex-col">
+    <h1 class="ms-4 text-7xl font-bold">{gameManager.game.name}</h1>
+    {#if gameManager.state === GameState.INIT}
+        <div class="p-4">
+            <div class="flex items-center">
+                <h2 class="grow pb-4 text-5xl">Spieler</h2>
+                <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}
+                    <div class="flex items-center">
+                        <input class="inputField grow" type="text" bind:value={player.name} />
+                        <button class="btn" onclick={() => removePlayer(i)}>Löschen</button>
+                    </div>
+                {/each}
+            </div>
+            <button class="btn" onclick={addPlayer}>Spieler hinzufügen</button>
+        </div>
+    {:else}
+        <Wall wall={gameManager.game.walls[gameManager.currentWall]} />
+    {/if}
+</div>

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

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

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

@@ -0,0 +1,4 @@
+export interface Player {
+    name: string;
+    points: number;
+}

src/routes/connected/games/[game]/Wall.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import type { Wall } from "$lib/games/games";
+
+    interface Props {
+        wall: Wall;
+        [key: string]: unknown;
+    }
+
+    let { wall }: Props = $props();
+</script>
+
+<div class="grid h-full grid-flow-col grid-cols-5 grid-rows-6 gap-4 ps-4 pe-4 pb-4">
+    {#each wall.categories as category}
+        <div class="flex items-center justify-center text-3xl font-semibold">
+            <div>{category.name}</div>
+        </div>
+        {#each category.questions as question}
+            <div class="card">
+                <div>{question.points}</div>
+            </div>
+        {/each}
+    {/each}
+</div>