<script lang="ts">
    import village from "../village";
    import OasisRegion from "./OasisRegion.svelte";

</script>

<section class="worldmap">
    { #each $village.worldmap as region }
    <div class="region">
        { #if region.type === 'oasis' }
        <OasisRegion { region } />
        { /if }
    </div>
    { /each }
</section>

<style>
    .worldmap {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        gap: 1em;
    }

    .region {
        border: 1px solid white;
        padding: 1em;
    }
</style>
