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 Worldmap from "../board/Worldmap.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 Units from "./Units.svelte";
    import Victory from "./Victory.svelte";
    import Quests from "./Quests.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>
        <Navigation { setTab } />
        <Resources />
    </header>
    <div class="side">
        <Units />
        <Quests />
    </div>
    <div class="board">
        { #if $gameTab === 'village' }
        <Village />
        { :else if $gameTab === 'resources' }
        <Outside />
        { :else if $gameTab === 'world' }
        <Worldmap />
        { /if }
    </div>
</section>
<section class="overlay">
    <BuildingCreator />
    <BuildingPanel />
    <Victory />
</section>

<style>
    .hud {
        display: grid;
        grid-template-columns: 20vw 1fr 20vw;
        grid-template-rows: 20vh 1fr;
        height: 100vh;
        width: 100vw;
    }

    .hud header {
        display: flex;
        justify-content: center;
        flex-direction: column;
        grid-area: 1 / span 3;
    }

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