<script>
    import { querystring } from 'svelte-spa-router';
    import GameCanvas from '../components/GameCanvas.svelte';
    import HUD from '../components/HUD.svelte';
    import QuoteToast from '../components/QuoteToast.svelte';
    import LevelCompleteOverlay from '../components/LevelCompleteOverlay.svelte';

    // querystring is the part after ? in the URL e.g. "level=2"
    // we parse it safely — if missing, default to level 1
    $: levelNum = $querystring
        ? parseInt(new URLSearchParams($querystring).get('level')) || 1
        : 1;
</script>

<div class="game-wrapper">
    {#key levelNum}
        <GameCanvas levelNumber={levelNum}/>
    {/key}
    <HUD levelNumber={levelNum}/>
    <QuoteToast />
    <LevelCompleteOverlay />
</div>

<style>
    .game-wrapper{
        position: relative;
        width: 800px;
        height: 450px;
        margin: 0 auto;
    }
</style>