Almost done

src/routes/connected/display/running/+layout.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    let { children } = $props();
+    import { MessageType } from "$lib/MessageType";
+    import ws from "$lib/websocket.svelte";
+    import DisplayState from "$lib/DisplayState.svelte";
+    import type { Player } from "$lib/Player";
+    import { goto } from "$app/navigation";
+    import Scoreboard from "$lib/Scoreboard.svelte";
+    $effect(() => {
+        if (ws.messageNum <= 0) return;
+        console.log(ws.message);
+        try {
+            let json = JSON.parse(ws.message);
+            if (json.type == MessageType.PLAYERS) {
+                ws.nextMessage();
+                DisplayState.players = json.players;
+                DisplayState.currentPlayer = json.current;
+            }
+            if (json.type == MessageType.GOTO) {
+                ws.nextMessage();
+                goto(DisplayState.baseRoute + json.route);
+            }
+        } catch (e) {}
+    });
+</script>
+
+<div class="flex h-full">
+    <Scoreboard players={DisplayState.players} currentPlayer={DisplayState.currentPlayer} />
+    <div class="flex grow flex-col">
+        {@render children?.()}
+    </div>
+</div>

src/routes/connected/display/running/[game]/+layout.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+    let { children } = $props();
+
+    import { error } from "@sveltejs/kit";
+    import games from "$lib/games/games";
+    import { page } from "$app/state";
+    import DisplayStateSvelte from "$lib/DisplayState.svelte";
+
+    console.log("game:", page.params.game);
+
+    let paramGame = page.params.game;
+    if (paramGame === undefined) {
+        error(404);
+    }
+    const gameIndex = parseInt(paramGame);
+    if (isNaN(gameIndex)) {
+        error(404);
+    }
+    if (DisplayStateSvelte.gameIndex !== gameIndex) {
+        const game = games[gameIndex];
+        if (game) {
+            DisplayStateSvelte.game = game;
+            DisplayStateSvelte.gameIndex = gameIndex;
+        } else {
+            error(404);
+        }
+    }
+</script>
+
+<div class="flex grow flex-col pr-4 pl-4">
+    <div>
+        <h2 class="text-5xl">
+            {DisplayStateSvelte.game?.name}
+        </h2>
+    </div>
+    <div class="flex grow">
+        {@render children?.()}
+    </div>
+</div>

src/routes/connected/display/running/[game]/[wall]/+page.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+    import Wall from "$lib/Wall.svelte";
+    import DisplayStateSvelte from "$lib/DisplayState.svelte";
+    import { page } from "$app/state";
+    import { error } from "@sveltejs/kit";
+    import ws from "$lib/websocket.svelte";
+    import { MessageType } from "$lib/MessageType";
+    import type { VisitedQuestions } from "$lib/Types";
+
+    console.log("wall:", page.params.wall);
+
+    let paramWall = page.params.wall;
+    if (paramWall === undefined) {
+        error(404);
+    }
+    const wallIndex = parseInt(paramWall);
+    if (isNaN(wallIndex)) {
+        error(404);
+    }
+    if (DisplayStateSvelte.wallIndex !== wallIndex) {
+        const wall = DisplayStateSvelte.game?.walls[wallIndex];
+        if (wall) {
+            DisplayStateSvelte.wall = wall;
+            DisplayStateSvelte.gameIndex = wallIndex;
+        } else {
+            error(404);
+        }
+    }
+
+    let visited: VisitedQuestions = $state([]);
+
+    $effect(() => {
+        if (ws.messageNum <= 0) return;
+        console.log(ws.message);
+        try {
+            let json = JSON.parse(ws.message);
+            if (json.type == MessageType.VISITED_QUESTIONS) {
+                ws.nextMessage();
+                visited = json.visitedQuestions;
+            }
+        } catch (e) {}
+    });
+</script>
+
+<Wall wall={DisplayStateSvelte.wall} {visited} />

src/routes/connected/display/running/[game]/[wall]/[category]/[question]/+page.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+    import DisplayStateSvelte from "$lib/DisplayState.svelte";
+    import { page } from "$app/state";
+    import { error } from "@sveltejs/kit";
+    import SimpleQuestionComponent from "$lib/SimpleQuestionComponent.svelte";
+    import { isSimpleQuestion } from "$lib/games/games";
+    import ws from "$lib/websocket.svelte";
+    import { MessageType } from "$lib/MessageType";
+    import { untrack } from "svelte";
+
+    console.log("wall:", page.params.wall);
+
+    let paramWall = page.params.wall;
+    if (paramWall === undefined) {
+        error(404);
+    }
+    const wallIndex = parseInt(paramWall);
+    if (isNaN(wallIndex)) {
+        error(404);
+    }
+    if (DisplayStateSvelte.wallIndex !== wallIndex) {
+        const wall = DisplayStateSvelte.game?.walls[wallIndex];
+        if (wall) {
+            DisplayStateSvelte.wall = wall;
+            DisplayStateSvelte.gameIndex = wallIndex;
+        } else {
+            error(404);
+        }
+    }
+    if (page.params.category === undefined) {
+        error(404);
+    }
+    const categoryIndex = parseInt(page.params.category);
+    if (isNaN(categoryIndex)) {
+        error(404);
+    }
+
+    const category = DisplayStateSvelte.wall?.categories[categoryIndex];
+
+    if (category === undefined) {
+        error(404);
+    }
+
+    if (page.params.question === undefined) {
+        error(404);
+    }
+    const questionIndex = parseInt(page.params.question);
+    if (isNaN(questionIndex)) {
+        error(404);
+    }
+
+    const question = category.questions[questionIndex];
+
+    console.log(question);
+
+    if (question === undefined) {
+        error(404);
+    }
+
+    let showAnswer = $state(false);
+
+    $effect(() => {
+        if (ws.messageNum <= 0) return;
+        console.log(ws.message);
+        try {
+            let json = JSON.parse(ws.message);
+            if (json.type == MessageType.SHOW_ANSWER) {
+                ws.nextMessage();
+                untrack(() => {
+                    showAnswer = true;
+                });
+            }
+            if (json.type == MessageType.HIDE_ANSWER) {
+                ws.nextMessage();
+                untrack(() => {
+                    showAnswer = false;
+                });
+            }
+        } catch (e) {}
+    });
+</script>
+
+<div class="mt-4 flex grow flex-col">
+    <div class="mb-4 flex justify-between text-4xl">
+        <div>{category.name}</div>
+        <div>
+            {question.points} Punkte
+        </div>
+    </div>
+    <div class="flex grow flex-col">
+        {#if question === undefined}
+            <p>Question is undefined</p>
+        {:else if isSimpleQuestion(question)}
+            <SimpleQuestionComponent {question} {showAnswer} />
+        {:else}
+            <p>Type of question unknown: {question.type}</p>
+        {/if}
+    </div>
+</div>

src/routes/connected/display/running/[game]/[wall]/end/+page.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    import DisplayStateSvelte from "$lib/DisplayState.svelte";
+    import type { Player } from "$lib/Player";
+
+    let winners = $derived(() => {
+        let highscore = 0;
+
+        for (const player of DisplayStateSvelte.players) {
+            if (player.points > highscore) highscore = player.points;
+        }
+        let _winners: Player[] = [];
+        for (const player of DisplayStateSvelte.players) {
+            if (player.points >= highscore) _winners.push(player);
+        }
+        return _winners;
+    });
+</script>
+
+<div class="flex grow flex-col items-center justify-center gap-4 text-5xl">
+    <div class="m-32">Herzlichen Glückwunsch</div>
+    {#each winners() as player}
+        <div class="text-7xl">
+            {player.name}
+        </div>
+    {/each}
+    <div class="m-32">
+        {#if winners().length > 1}
+            haben
+        {:else}
+            hat
+        {/if}
+        gewonnen!
+    </div>
+</div>
+
+<style>
+    .m-32 {
+        margin: 32px;
+    }
+</style>