<script lang="ts">
    import { WORLD_MAP_HEIGHT, WORLD_MAP_WIDTH } from "../constants";
    import gameTab from "../stores/gameTab";
    import showOasisPanel from "../stores/showOasisPanel";
    import { WORLDMAP_TYPES } from "../types";
    import village from "../village";
</script>

<section
    class="worldmap"
    style="--map-height: {WORLD_MAP_HEIGHT}; --map-width: {WORLD_MAP_WIDTH};"
>
    { #each $village.worldmap as region }
    <div
        class="region"
        class:empty={ region.type === WORLDMAP_TYPES.EMPTY }
        class:bourgade={ region.type === WORLDMAP_TYPES.BOURGADE }
        class:oasis={ region.type === WORLDMAP_TYPES.OASIS }
        class:cleared={ region.type === WORLDMAP_TYPES.OASIS && region.state.cleared }
    >
        { #if region.type === WORLDMAP_TYPES.BOURGADE }
        <button class="invisible" on:click={ () => gameTab.set('resources') }>
            <img src="/img/icons/field.svg" alt="">
        </button>
        { :else if region.type === WORLDMAP_TYPES.OASIS }
        <button class="invisible" on:click={ () => showOasisPanel.set(region.id) }>
            <img src="/img/icons/{region.resource}.png" alt="">
        </button>
        { :else }
        { region.id }
        { /if }
    </div>
    { /each }
</section>

<style>
    .worldmap {
        aspect-ratio: 1;
        display: grid;
        grid-template-columns: repeat(var(--map-width), 1fr);
        grid-template-rows: repeat(var(--map-height), 1fr);
        height: 80vh;
        margin: auto;
    }

    .region {
        border: 1px solid white;
        padding: 0;
        margin: 0;
    }

    .region > button {
        cursor: pointer;
        height: 100%;
        width: 100%;
    }

    .region.bourgade {
        background-color: black;
    }

    .region.empty {
        background-color: grey;
    }

    .region.oasis {
        background-color: red;
    }

    .region.oasis.cleared {
        background-color: cyan;
    }
</style>
