<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>
