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


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

<div class="resources">
    <div>Wood: { Math.floor($village.resources.wood) } / { capacity.wood }</div>
    <div>Stone: { Math.floor($village.resources.stone) } / { capacity.stone }</div>
    <div>Iron: { Math.floor($village.resources.iron) } / { capacity.iron }</div>
    <div>Food: { Math.floor($village.resources.food) } / { capacity.food }</div>
</div>

<style>
    .resources {
        display: flex;
        justify-content: space-around;
    }
</style>
