Add buildings to a construction queue when building or upgrading them.

src/board/Outside.svelte

@@ -26,7 +26,9 @@
                 { :else if $village.outsideTiles[y][x] === VILLAGE_TILE }
                     <Tile
                         onTileClick={ () => gameTab.set('village') }
-                    />
+                    >
+                        <img src="/img/icons/village.svg" alt="">
+                    </Tile>
                 { /if }
             { /each }
         </div>

src/buildings.ts

@@ -1,9 +1,9 @@
-import type { Building, BuildingSource } from "./types";
+import type { Building } from "./types";
 import { getEmptyResources } from "./utils";
 import type { VillageState } from "./village";
 
 
-const buildings = [
+export default [
     {
         type: 'townhall',
         name: 'Town Hall',
@@ -172,4 +172,3 @@ const buildings = [
         },
     },
 ];
-export default buildings;

src/hud/Game.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
     import { onMount } from "svelte";
 
+    import Outside from "../board/Outside.svelte";
     import Village from "../board/Village.svelte";
+    import gameTab from "../stores/gameTab";
+    import type { GameTab } from "../types";
     import update from "../update";
     import BuildingCreator from "./BuildingCreator.svelte";
-    import Resources from "./Resources.svelte";
     import BuildingPanel from "./BuildingPanel.svelte";
-    import Outside from "../board/Outside.svelte";
     import Navigation from "./Navigation.svelte";
-    import type { GameTab } from "../types";
-    import gameTab from "../stores/gameTab";
+    import Resources from "./Resources.svelte";
+    import Queue from "./Queue.svelte";
 
 
     onMount(() => {
@@ -36,13 +37,16 @@
         <Resources />
         <Navigation { setTab } />
     </header>
-    <div class="">
+    <div class="board">
         { #if $gameTab === 'village' }
         <Village />
         { :else if $gameTab === 'resources' }
         <Outside />
         { /if }
     </div>
+    <div class="queue">
+        <Queue />
+    </div>
 </section>
 <section class="overlay">
     <BuildingCreator />
@@ -50,6 +54,11 @@
 </section>
 
 <style>
+    header {
+        display: flex;
+        justify-content: space-around;
+    }
+
     .overlay {
         left: 0;
         position: absolute;

src/hud/Queue.svelte

@@ -0,0 +1,50 @@
+<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>

src/hud/Resources.svelte

@@ -34,6 +34,7 @@
     .resources {
         display: flex;
         justify-content: space-around;
+        gap: 1em;
     }
 
     .resources div {

src/moves/build.ts

@@ -1,6 +1,7 @@
 import buildings from "../buildings";
 import { createBuilding, getBuildingSource } from "../create";
 import type { Hex } from "../hexgrid";
+import { enqueueBuilding } from "../utils";
 import { DEFAULT_TILE, type VillageState } from "../village";
 
 
@@ -28,9 +29,11 @@ export default function build(V: VillageState, buildingType: string, tile: Hex)
 
     const newBuilding = createBuilding(buildingType);
     newBuilding.tile = tile;
+    newBuilding.level = 0;
 
     V.buildings.push(newBuilding);
     V.villageTiles[tile.y][tile.x] = newBuilding.id;
+    enqueueBuilding(V, newBuilding);
 
     return true;
 }

src/moves/upgradeBuilding.ts

@@ -1,3 +1,4 @@
+import { enqueueBuilding } from "../utils";
 import type { VillageState } from "../village";
 
 
@@ -7,7 +8,10 @@ export default function upgradeBuilding(V: VillageState, buildingId: number) {
         return false;
     }
 
-    const cost = building.cost(building.level + 1);
+    const ongoingUpgrades = V.queue.filter(q => q.id === building.id);
+    const level = building.level + 1 + ongoingUpgrades.length;
+
+    const cost = building.cost(level);
 
     if (
         cost.wood > V.resources.wood
@@ -22,8 +26,7 @@ export default function upgradeBuilding(V: VillageState, buildingId: number) {
     V.resources.stone -= cost.stone;
     V.resources.iron -= cost.iron;
     V.resources.food -= cost.food;
-
-    building.level++;
+    enqueueBuilding(V, building);
 
     return true;
 }

src/update.ts

@@ -1,6 +1,6 @@
 import { produce } from 'immer';
 
-import { getProduction, getStorage } from './utils';
+import { getBuilding, getProduction, getStorage } from './utils';
 import village, { type VillageState } from "./village";
 import type { Production } from './types';
 
@@ -18,6 +18,17 @@ export default function update(timestamp: number) {
 
     village.update(state => {
         return produce(state, (V: VillageState) => {
+            // Advance building construction.
+            if (V.queue.length) {
+                V.queue[0].remainingTime -= delta;
+                if (V.queue[0].remainingTime <= 0) {
+                    const building = getBuilding(V, V.queue[0].id);
+                    building.level++;
+                    V.queue.shift();
+                }
+            }
+
+            // Make all buildings produce and consume.
             const productionPerMinute = getProduction(V);
             const storage = getStorage(V);
 

src/utils.ts

@@ -24,7 +24,7 @@ export function getEmptyResources(): Production {
 
 export function getProduction(villageState: VillageState): Production {
     return villageState.buildings
-        .filter(b => b.behavior.production)
+        .filter(b => b.behavior.production && b.level > 0)
         .map(b => {
             if (b.behavior.production) {
                 return b.behavior.production(villageState, b);
@@ -36,7 +36,7 @@ export function getProduction(villageState: VillageState): Production {
 
 export function getStorage(villageState: VillageState): Production {
     return villageState.buildings
-        .filter(b => b.behavior.storage)
+        .filter(b => b.behavior.storage && b.level > 0)
         .map(b => {
             if (b.behavior.storage) {
                 return b.behavior.storage(villageState, b);
@@ -87,3 +87,15 @@ export function shuffle<T>(array: Array<T>): Array<T> {
     }
     return result;
 }
+
+
+export function enqueueBuilding(V: VillageState, building: Building) {
+    const ongoingUpgrades = V.queue.filter(q => q.id === building.id);
+    const level = building.level + 1 + ongoingUpgrades.length;
+    const remainingTime = 1000 * level;
+
+    V.queue.push({
+        id: building.id,
+        remainingTime,
+    });
+}

src/village.ts

@@ -14,6 +14,12 @@ type Board = {
 }
 
 
+interface QueuedBuilding {
+    id: number;
+    remainingTime: number;
+}
+
+
 export interface VillageState {
     buildings: Building[];
     resources: {
@@ -25,6 +31,7 @@ export interface VillageState {
     };
     villageTiles: Board;
     outsideTiles: Board;
+    queue: QueuedBuilding[];
 }
 
 
@@ -78,6 +85,7 @@ function getInitialState() {
         },
         villageTiles: getInitialVillageBoard(),
         outsideTiles: getInitialOutsideBoard(),
+        queue: [],
     };
 
     // Create the Town hall.