<script lang="ts">
    import gameTab from "../stores/gameTab";
    import showBuildingPanel from "../stores/showBuildingPanel";
    import { getBuilding, getKeysAsNumbers } from "../utils";
    import village, { VILLAGE_TILE } from "../village";
    import BuildingTile from "./BuildingTile.svelte";
    import Tile from "./Tile.svelte";


    function openBuildingPanel(buildingId: number) {
        showBuildingPanel.set(buildingId);
    }
</script>

<section class="outside-map">
    <div>
        { #each getKeysAsNumbers($village.outsideTiles) as y }
        <div>
            { #each getKeysAsNumbers($village.outsideTiles[y]) as x }
                { #if $village.outsideTiles[y][x] >= 0 }
                    <Tile
                        onTileClick={ () => openBuildingPanel($village.outsideTiles[y][x]) }
                    >
                        <BuildingTile building={ getBuilding($village, $village.outsideTiles[y][x]) } />
                    </Tile>
                { :else if $village.outsideTiles[y][x] === VILLAGE_TILE }
                    <Tile
                        onTileClick={ () => gameTab.set('village') }
                    >
                        <img src="/img/icons/village.svg" alt="">
                    </Tile>
                { /if }
            { /each }
        </div>
        { /each }
    </div>
</section>

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

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