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

    $: queue = $village.queue.map(q => {
        return {
            ...q,
            building: getBuilding($village, q.id),
        };
    });
</script>

<section class="queue">
    { #each queue as item }
    <div>
        <p>{ item.building.name }</p>
        <p class="time">{ Math.ceil(item.remainingTime / 1000) }’</p>
    </div>
    { /each }
</section>

<style>
    .queue {
        display: flex;
        gap: 1em;
    }

    .queue div {
        aspect-ratio: 1;
        border: 0.4em solid grey;
        border-radius: 100%;
        height: 4em;
        max-width: 4em;
        position: relative;
    }

    .queue div p {
        overflow-wrap: break-word;
    }

    .queue div .time {
        background: hsl(0, 0%, 20%);
        border-radius: 100%;
        bottom: 0;
        left: 50%;
        padding: 0.2em 0.4em;
        position: absolute;
        translate: -50% 150%;
    }
</style>
