<script lang="ts">
    import { getProduction, getStorage } from "../utils";
    import village from "../village";


    $: capacity = getStorage($village);
    $: production = getProduction($village);
</script>

<div class="resources">
    <div>
        <img src="/img/icons/wood.png" alt="Wood" />
        { Math.floor($village.resources.wood) } / { capacity.wood }
        ({ production.wood >= 0 ? '+' : '' }{ production.wood })
    </div>
    <div>
        <img src="/img/icons/stone.png" alt="Stone" />
        { Math.floor($village.resources.stone) } / { capacity.stone }
        ({ production.stone >= 0 ? '+' : '' }{ production.stone })
    </div>
    <div>
        <img src="/img/icons/iron.png" alt="Iron" />
        { Math.floor($village.resources.iron) } / { capacity.iron }
        ({ production.iron >= 0 ? '+' : '' }{ production.iron })
    </div>
    <div>
        <img src="/img/icons/food.png" alt="Food" />
        { Math.floor($village.resources.food) } / { capacity.food }
        ({ production.food >= 0 ? '+' : '' }{ production.food })
    </div>
    <div>
        <img src="/img/icons/culture.png" alt="Culture" />
        { Math.floor($village.resources.culture) }
        ({ production.culture >= 0 ? '+' : '' }{ production.culture })
    </div>
</div>

<style>
    .resources {
        display: flex;
        justify-content: center;
        gap: 2em;
    }

    .resources div {
        display: flex;
        gap: 0.5em;
    }

    .resources img {
        height: 1.5em;
    }
</style>
