Almost done

src/lib/Wall.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+    import type { Wall } from "$lib/games/games";
+    import type { VisitedQuestions } from "./Types";
+
+    interface Props {
+        wall: Wall | undefined;
+        onclick?: (catIndex: number, questionIndex: number) => unknown;
+        visited: VisitedQuestions;
+        [key: string]: unknown;
+    }
+
+    function isVisited(catIndex: number, queIndex: number): boolean {
+        return visited[catIndex] && visited[catIndex].includes(queIndex);
+    }
+
+    let { wall, onclick, visited }: Props = $props();
+</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>{question.points}</div>
+                </div>
+            {/each}
+        {/each}
+    </div>
+{:else}
+    <p>Wall is undefined</p>
+{/if}
+
+<style>
+    .visited {
+        background-color: gray;
+    }
+</style>