bourgade/src/hud/Game.svelte

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

    import Village from "../board/Village.svelte";
    import update from "../update";
    import BuildingCreator from "./BuildingCreator.svelte";
    import Resources from "./Resources.svelte";
    import BuildingPanel from "./BuildingPanel.svelte";


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

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

        return () => {
            cancelAnimationFrame(frame);
        }
    });
</script>

<section class="hud">
    <header>
        <Resources />
    </header>
    <div class="buildings">
        <Village />
    </div>
</section>
<section class="overlay">
    <BuildingCreator />
    <BuildingPanel />
</section>

<style>
    .buildings {
        margin-top: 2em;
    }

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