Added Editor Game and Wall Display

src/lib/Wall.svelte

@@ -1,10 +1,21 @@
 <script lang="ts">
-    import type { Wall } from "$lib/games/games";
-    import type { VisitedQuestions } from "./Types";
+    import axios from "axios";
+    import {
+        isWall,
+        type Category,
+        type CategoryId,
+        type QuestionId,
+        type VisitedQuestions,
+        type Wall
+    } from "./Types";
+    import { url } from "./util";
+    import { onMount } from "svelte";
+    import type { FullWall } from "./games/games";
 
     interface Props {
-        wall: Wall | undefined;
+        wall: Wall | FullWall | undefined;
         onclick?: (catIndex: number, questionIndex: number) => unknown;
+        onclickIds?: (catId: CategoryId, questionId: QuestionId) => unknown;
         visited: VisitedQuestions;
         [key: string]: unknown;
     }
@@ -13,30 +24,80 @@
         return visited[catIndex] && visited[catIndex].includes(queIndex);
     }
 
-    let { wall, onclick, visited }: Props = $props();
+    let { wall, onclick, onclickIds, visited }: Props = $props();
+
+    let categories: Category[] = $state([]);
+
+    async function fetchCategories(wall: Wall) {
+        let cats: Promise<Category>[] = [];
+        for (const catId of wall.categories) {
+            cats.push(
+                axios
+                    .get(url(`/category?id=${catId}`), { withCredentials: true })
+                    .then((response) => {
+                        if (response.status === 200) {
+                            return response.data;
+                        } else throw "Failed to fetch: " + response.status;
+                    })
+            );
+        }
+        return Promise.all(cats).then((cats) => {
+            categories = cats;
+        });
+    }
+
+    onMount(() => {
+        if (wall && isWall(wall)) fetchCategories(wall);
+    });
 </script>
 
 {#if wall != undefined}
     <div class="grid h-full grow grid-flow-col grid-cols-5 grid-rows-6 gap-4 pb-4">
-        {#each wall.categories as category, catIndex}
-            <div class="flex items-center justify-center text-3xl font-semibold">
-                <div>{category.name}</div>
-            </div>
-            {#each category.questions as question, queIndex}
-                <!-- svelte-ignore a11y_click_events_have_key_events -->
-                <div
-                    class="card {isVisited(catIndex, queIndex) ? 'visited' : ''}"
-                    role="button"
-                    aria-pressed="false"
-                    tabindex="0"
-                    onclick={() => {
-                        if (onclick) onclick(catIndex, queIndex);
-                    }}
-                >
-                    <div class="text-6xl font-thin">{question.points}</div>
+        {#if isWall(wall)}
+            {#each categories as category, catIndex}
+                <div class="flex items-center justify-center text-3xl font-semibold">
+                    <div>{category.name}</div>
                 </div>
+                {#each category.questions as question, queIndex}
+                    <!-- svelte-ignore a11y_click_events_have_key_events -->
+                    <div
+                        class="card {isVisited(catIndex, queIndex) ? 'visited' : ''}"
+                        role="button"
+                        aria-pressed="false"
+                        tabindex="0"
+                        onclick={() => {
+                            if (onclickIds) onclickIds(category._id, question._id);
+                        }}
+                    >
+                        <div class="text-6xl font-thin">
+                            {question.points >= 0 ? question.points : "???"}
+                        </div>
+                    </div>
+                {/each}
             {/each}
-        {/each}
+        {:else}
+            {#each wall.categories as category, catIndex}
+                <div class="flex items-center justify-center text-3xl font-semibold">
+                    <div>{category.name}</div>
+                </div>
+                {#each category.questions as question, queIndex}
+                    <!-- svelte-ignore a11y_click_events_have_key_events -->
+                    <div
+                        class="card {isVisited(catIndex, queIndex) ? 'visited' : ''}"
+                        role="button"
+                        aria-pressed="false"
+                        tabindex="0"
+                        onclick={() => {
+                            if (onclick) onclick(catIndex, queIndex);
+                        }}
+                    >
+                        <div class="text-6xl font-thin">
+                            {question.points >= 0 ? question.points : "???"}
+                        </div>
+                    </div>
+                {/each}
+            {/each}
+        {/if}
     </div>
 {:else}
     <p>Wall is undefined</p>