<script lang="ts">
    import { browser } from "$app/environment";

    let username = $state('');
    let url = $state('ws://localhost:5151');

    let isPlaying = $state(false);

    async function launch() {
        isPlaying = true;
        let module = await import('$lib/bundle/starkingdoms-opt.js');
        await module.default();
        module.play(url);
    }
</script>

{#if !isPlaying}
    <h1 class="font-semibold text-2xl">StarKingdoms</h1>
    <label for="username">Username</label>
    <input id="username" type="text" bind:value={username} >
    <label for="url">URL</label>
    <input id="url" type="text" bind:value={url} >
    <button onclick={launch}>bonk</button>
{/if}

<style>
    :global(canvas) {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw !important;
        height: 100vh !important;
    }
</style>