Release 2.0.0

Updated display and host

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

@@ -2,29 +2,17 @@
     let { children } = $props();
 
     import { error } from "@sveltejs/kit";
-    import games from "$lib/games/games";
+    // import games from "$lib/games/games";
     import { page } from "$app/state";
     import DisplayStateSvelte from "$lib/DisplayState.svelte";
+    import { onMount } from "svelte";
+    import { fetchGame } from "../../../../editor/fetchers";
 
-    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) {
+    onMount(() => {
+        fetchGame(`${page.params.game}`).then((game) => {
             DisplayStateSvelte.game = game;
-            DisplayStateSvelte.gameIndex = gameIndex;
-        } else {
-            error(404);
-        }
-    }
+        });
+    });
 </script>
 
 <div class="flex grow flex-col pr-4 pl-4">

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

@@ -6,27 +6,11 @@
     import ws from "$lib/websocket.svelte";
     import { MessageType } from "$lib/MessageType";
     import type { VisitedQuestions } from "$lib/Types";
+    import { onMount } from "svelte";
+    import { fetchWall } from "../../../../../editor/fetchers";
 
     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(() => {
@@ -40,6 +24,12 @@
             }
         } catch (e) {}
     });
+
+    onMount(() => {
+        fetchWall(`${page.params.wall}`).then((wall) => {
+            DisplayStateSvelte.wall = wall;
+        });
+    });
 </script>
 
 <Wall wall={DisplayStateSvelte.wall} {visited} />

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

@@ -9,65 +9,22 @@
         isImageMultipleChoiceQuestion,
         isImageQuestion,
         isMultipleChoiceQuestion,
-        isSimpleQuestion
+        isSimpleQuestion,
+        type Question
     } from "$lib/games/games";
     import ws from "$lib/websocket.svelte";
     import { MessageType } from "$lib/MessageType";
-    import { untrack } from "svelte";
+    import { onMount, untrack } from "svelte";
     import MultipleChoiceQuestionComponent from "$lib/MultipleChoiceQuestionComponent.svelte";
     import ImageQuestionComponent from "$lib/ImageQuestionComponent.svelte";
     import AudioQuestionComponent from "$lib/AudioQuestionComponent.svelte";
     import AudioMultipleChoiceQuestionComponent from "$lib/AudioMultipleChoiceQuestionComponent.svelte";
     import ImageMultipleChoiceQuestionComponent from "$lib/ImageMultipleChoiceQuestionComponent.svelte";
+    import { fetchCategory, fetchQuestion } from "../../../../../../../editor/fetchers";
+    import type { Category, GeneralQuestion } 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);
-        }
-    }
-    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 category: Category | undefined = $state();
+    let question: GeneralQuestion | undefined = $state();
 
     let showAnswer = $state(false);
     let showQuestion = $state(false);
@@ -118,42 +75,71 @@
             }
         } catch (e) {}
     });
+
+    onMount(() => {
+        fetchCategory(`${page.params.category}`)
+            .then((cat) => {
+                category = cat;
+                return fetchQuestion(`${page.params.question}`);
+            })
+            .then((que) => {
+                question = que;
+            });
+    });
 </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
+{#if category && question}
+    <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} {showQuestion} />
+            {:else if isMultipleChoiceQuestion(question)}
+                <MultipleChoiceQuestionComponent {question} {showAnswer} {showQuestion} />
+            {:else if isImageQuestion(question)}
+                <ImageQuestionComponent
+                    {question}
+                    {showAnswer}
+                    {showQuestion}
+                    {isBuzzed}
+                    isLegacy={false}
+                />
+            {:else if isImageMultipleChoiceQuestion(question)}
+                <ImageMultipleChoiceQuestionComponent
+                    {question}
+                    {showAnswer}
+                    {showQuestion}
+                    {isBuzzed}
+                    isLegacy={false}
+                />
+            {:else if isAudioQuestion(question)}
+                <AudioQuestionComponent
+                    {question}
+                    {showAnswer}
+                    {showQuestion}
+                    showPlayer={false}
+                    isLegacy={false}
+                />
+            {:else if isAudioMultipleChoiceQuestion(question)}
+                <AudioMultipleChoiceQuestionComponent
+                    {question}
+                    {showAnswer}
+                    {showQuestion}
+                    showPlayer={false}
+                    isLegacy={false}
+                />
+            {:else}
+                <p>Type of question unknown</p>
+            {/if}
         </div>
     </div>
-    <div class="flex grow flex-col">
-        {#if question === undefined}
-            <p>Question is undefined</p>
-        {:else if isSimpleQuestion(question)}
-            <SimpleQuestionComponent {question} {showAnswer} {showQuestion} />
-        {:else if isMultipleChoiceQuestion(question)}
-            <MultipleChoiceQuestionComponent {question} {showAnswer} {showQuestion} />
-        {:else if isImageQuestion(question)}
-            <ImageQuestionComponent {question} {showAnswer} {showQuestion} {isBuzzed} />
-        {:else if isImageMultipleChoiceQuestion(question)}
-            <ImageMultipleChoiceQuestionComponent
-                {question}
-                {showAnswer}
-                {showQuestion}
-                {isBuzzed}
-            />
-        {:else if isAudioQuestion(question)}
-            <AudioQuestionComponent {question} {showAnswer} {showQuestion} showPlayer={false} />
-        {:else if isAudioMultipleChoiceQuestion(question)}
-            <AudioMultipleChoiceQuestionComponent
-                {question}
-                {showAnswer}
-                {showQuestion}
-                showPlayer={false}
-            />
-        {:else}
-            <p>Type of question unknown</p>
-        {/if}
-    </div>
-</div>
+{:else}
+    Loading...
+{/if}