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

    $: currentUnits = Object.entries($village.units).map(([type, count]) => {
        const unit = units.find(u => u.type === type);
        if (!unit) {
            throw new Error(`Unable to find unit: "${type}"`);

        }
        return {
            ...unit,
            count,
        };
    });
</script>

<section>
    { #each $village.heroes as hero }
    <p>{ hero.name }</p>
    { /each }
    { #each currentUnits as unit }
    <p>{ unit.name }: { getRemainingUnitCount($village, unit.type) } / { unit.count }</p>
    { /each }
</section>
