<script lang="ts">
    import { goto } from "$app/navigation";
    import websocket, { SocketConnectionType } from "$lib/websocket.svelte";

    $effect(() => {
        if (websocket.connectionType === SocketConnectionType.HOST) {
            console.log(`Type: ${websocket.connectionType}. Redirecting to /connected/games`);
            goto("/connected/games");
        }
        if (websocket.connectionType === SocketConnectionType.DISPLAY) {
            console.log(`Type: ${websocket.connectionType}. Redirecting to /connected/display`);
            goto("/connected/display");
        }
    });
</script>

<div class="flex h-full flex-col">
    <h1 class="m-4 mb-8 text-7xl font-bold">Jeopardy</h1>

    <div class="flex h-full grow items-center justify-around p-4">
        <button class="btn m-2 h-1/2 w-1/2 text-5xl" onclick={websocket.connectAsHost}
            >Connect as Host</button
        >
        <button class="btn m-2 h-1/2 w-1/2 text-5xl" onclick={websocket.connectAsDisplay}
            >Connect as Display</button
        >
    </div>
</div>
