<script lang="ts">
    import { Hex } from "../hexgrid";
    import moves from "../moves";
    import showBuildingCreator from "../stores/showBuildingCreator";
    import { getKeysAsNumbers } from "../utils";
    import village from "../village";
    import Tile from "./Tile.svelte";


    function upgradeBuilding(id: number) {
        moves.upgradeBuilding(id);
    }


    function openBuildingCreator(tile: Hex) {
        showBuildingCreator.set(tile);
    }
</script>

<section class="village-map">
    <div>
        { #each getKeysAsNumbers($village.villageTiles) as y }
        <div>
            { #each getKeysAsNumbers($village.villageTiles[y]) as x }
                { #if $village.villageTiles[y][x] >= 0 }
                    <Tile
                        onTileClick={ () => {} }
                    >
                        <p>{ $village.buildings.find(b => b.id === $village.villageTiles[y][x])?.name }</p>
                    </Tile>
                { :else }
                    <Tile
                        onTileClick={ () => openBuildingCreator(new Hex(x, y)) }
                    />
                { /if }
            { /each }
        </div>
        { /each }
    </div>
</section>

<style>
    .village-map {
        display: grid;
        height: 100%;
        position: relative;
    }

    .village-map > div {
        margin: auto;
    }
</style>
