<script lang="ts">
    import buildings from "../buildings";
    import moves from "../moves";

    export let close: () => void;


    function build(type: string) {
        if (moves.createBuilding(type)) {
            close();
        }
    }
</script>

<section>
    <div class="building-creator">
        <header>
            <h1>Build</h1>
            <span class="close">
                <button on:click={ close }>X</button>
            </span>
        </header>
        <div class="buildings">
            { #each Object.entries(buildings) as [type, building] }
            <div>
                <p>{ building.name }</p>
                <button on:click={ () => build(type) }>Build</button>
            </div>
            { /each }
        </div>
    </div>
</section>

<style>
    section {
        background-color: hsl(0, 0%, 10%, 0.8);
        display: grid;
        place-items: center;
        height: 100vh;
        left: 0;
        position: absolute;
        top: 0;
        width: 100vw;
    }

    .building-creator {
        background-color: hsl(0, 0%, 20%);
        border: 0.2em solid grey;
        border-radius: .4em;
        width: 80%;
        height: 60%;
    }

    .building-creator header {
        position: relative;
    }

    .building-creator header .close {
        position: absolute;
        right: 1em;
        top: 0;
    }

    .building-creator .buildings {
        display: grid;
        gap: 1em;
        grid-template-columns: repeat(4, 1fr);
    }
</style>
