bourgade/src/hud/Game.svelte

<script lang="ts">
    import { onMount } from "svelte";

    import Outside from "../board/Outside.svelte";
    import Village from "../board/Village.svelte";
    import gameTab from "../stores/gameTab";
    import type { GameTab } from "../types";
    import update from "../update";
    import BuildingCreator from "./BuildingCreator.svelte";
    import BuildingPanel from "./BuildingPanel.svelte";
    import Navigation from "./Navigation.svelte";
    import Resources from "./Resources.svelte";
    import Queue from "./Queue.svelte";


    onMount(() => {
        let frame: number;

        function loop(timestamp: number) {
            frame = requestAnimationFrame(loop);
            update(timestamp);
        }
        frame = requestAnimationFrame(loop);

        return () => {
            cancelAnimationFrame(frame);
        }
    });

    function setTab(newTab: GameTab) {
        gameTab.set(newTab);
    }
</script>

<section class="hud">
    <header>
        <Resources />
        <Navigation { setTab } />
    </header>
    <div class="board">
        { #if $gameTab === 'village' }
        <Village />
        { :else if $gameTab === 'resources' }
        <Outside />
        { /if }
    </div>
    <div class="queue">
        <Queue />
    </div>
</section>
<section class="overlay">
    <BuildingCreator />
    <BuildingPanel />
</section>

<style>
    header {
        display: flex;
        justify-content: space-around;
    }

    .overlay {
        left: 0;
        position: absolute;
        top: 0;
    }
</style>