<script lang="ts">
    let { children } = $props();
    import { MessageType } from "$lib/MessageType";
    import ws from "$lib/websocket.svelte";
    import DisplayState from "$lib/DisplayState.svelte";
    import type { Player } from "$lib/Player";
    import { goto } from "$app/navigation";
    import Scoreboard from "$lib/Scoreboard.svelte";
    $effect(() => {
        if (ws.messageNum <= 0) return;
        console.log(ws.message);
        try {
            let json = JSON.parse(ws.message);
            if (json.type == MessageType.PLAYERS) {
                ws.nextMessage();
                DisplayState.players = json.players;
                DisplayState.currentPlayer = json.current;
            }
            if (json.type == MessageType.GOTO) {
                ws.nextMessage();
                goto(DisplayState.baseRoute + json.route);
            }
        } catch (e) {}
    });
</script>

<div class="flex h-full">
    <Scoreboard players={DisplayState.players} currentPlayer={DisplayState.currentPlayer} />
    <div class="flex grow flex-col">
        {@render children?.()}
    </div>
</div>
