Added Wall

src/routes/+page.server.ts

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

src/routes/+page.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import games from '$lib/games/lanparty';
+	let { data } = $props();
 </script>
 
 <h1 class="m-4 mb-8 text-7xl font-bold">Jeopardy</h1>
 
 <div class="flex flex-col space-y-4">
-	{#each games as game}
+	{#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="/{game.name.toLocaleLowerCase().replaceAll(' ', '_')}">{game.name}</a
+			href="/{i}">{game.name}</a
 		>
 	{/each}
 </div>

src/routes/[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/[game]/+page.svelte

@@ -1 +1,75 @@
-<h1>This is Game ...</h1>
+<script lang="ts">
+    import Wall from "./Wall.svelte";
+    import type { Player } from "./Player";
+    import { GameState } from "./GameState";
+    import type { Game } from "$lib/games/games";
+
+    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.RUNNING;
+            console.log("hello");
+        }
+    }
+
+    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" 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/[game]/GameState.ts

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

src/routes/[game]/Player.ts

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

src/routes/[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>