Remove the queue of building construction and instead make buildings upgrade in parallel.

src/board/BuildingTile.svelte

@@ -7,8 +7,8 @@
     export let building: BuildingType;
 
 
-    $: isUpgrading = $village.queue.find(q => q.id === building.id);
+    $: isUpgrading = building.state.upgrade.isUpgrading;
-    $: canUpgrade = canPayBuildingCost($village, building);
+    $: canUpgrade = !isUpgrading && canPayBuildingCost($village, building);
 
 
     function upgradeBuilding() {
@@ -27,6 +27,11 @@
             on:click|stopPropagation={ upgradeBuilding }
         >
             { building.level }
+            { #if building.state.upgrade.isUpgrading }
+            <span>
+                ({ Math.ceil(building.state.upgrade.remainingTime / 1000) }’)
+            </span>
+            { /if }
         </button>
     </p>
 </div>
@@ -43,6 +48,10 @@
         font-size: 1.2em;
     }
 
+    .level span {
+        font-size: 0.9em;
+    }
+
     .level.can-upgrade {
         border-color: hsl(90, 99%, 36%);
     }
@@ -50,8 +59,4 @@
     .level.is-upgrading {
         border-color: hsl(56, 99%, 43%);
     }
-
-    .level:hover.can-upgrade {
-        border-color: hsl(90, 99%, 36%);
-    }
 </style>

src/create.ts

@@ -25,6 +25,11 @@ export function createBuilding(buildingType: string): BuildingType {
         id: uid++,
         level: 1,
         tile: new Hex(0, 0),
-        state: {},
+        state: {
+            upgrade: {
+                isUpgrading: false,
+                remainingTime: 0,
+            }
+        },
     };
 }

src/hud/Game.svelte

@@ -9,7 +9,6 @@
     import BuildingCreator from "./BuildingCreator.svelte";
     import BuildingPanel from "./BuildingPanel.svelte";
     import Navigation from "./Navigation.svelte";
-    import Queue from "./Queue.svelte";
     import Resources from "./Resources.svelte";
     import Units from "./Units.svelte";
     import Victory from "./Victory.svelte";
@@ -47,9 +46,6 @@
         <Outside />
         { /if }
     </div>
-    <div class="queue">
-        <Queue />
-    </div>
 </section>
 <section class="overlay">
     <BuildingCreator />

src/hud/Queue.svelte

@@ -1,50 +0,0 @@
-<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/moves/build.ts

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

src/moves/upgradeBuilding.ts

@@ -1,4 +1,4 @@
-import { canPayBuildingCost, enqueueBuilding, getBuildingUpgradeCost } from "../utils";
+import { canPayBuildingCost, getBuildingUpgradeCost } from "../utils";
 import type { VillageState } from "../village";
 
 
@@ -8,6 +8,10 @@ export default function upgradeBuilding(V: VillageState, buildingId: number) {
         return false;
     }
 
+    if (building.state.upgrade.isUpgrading) {
+        return false;
+    }
+
     if (!canPayBuildingCost(V, building)) {
         return false;
     }
@@ -18,7 +22,9 @@ export default function upgradeBuilding(V: VillageState, buildingId: number) {
     V.resources.stone -= cost.stone;
     V.resources.iron -= cost.iron;
     V.resources.food -= cost.food;
-    enqueueBuilding(V, building);
+
+    building.state.upgrade.isUpgrading = true;
+    building.state.upgrade.remainingTime = 1000 * (building.level + 1);
 
     return true;
 }

src/types.ts

@@ -41,6 +41,10 @@ export interface BuildingType extends BuildingSource {
     level: number;
     tile: Hex;
     state: {
+        upgrade: {
+            isUpgrading: boolean,
+            remainingTime: number;
+        }
         recruitment?: {
             count: number;
             elapsedTime: number;

src/update.ts

@@ -23,14 +23,13 @@ export default function update(timestamp: number) {
 
         return produce(state, (V: VillageState) => {
             // Advance building construction.
-            if (V.queue.length) {
+            V.buildings.filter(b => b.state.upgrade.isUpgrading).forEach(b => {
-                V.queue[0].remainingTime -= delta;
+                b.state.upgrade.remainingTime -= delta;
-                if (V.queue[0].remainingTime <= 0) {
+                if (b.state.upgrade.remainingTime <= 0) {
-                    const building = getBuilding(V, V.queue[0].id);
+                    b.level++;
-                    building.level++;
+                    b.state.upgrade.isUpgrading = false;
-                    V.queue.shift();
-                }
                 }
+            });
 
             // Make all buildings and units produce and consume.
             const productionPerMinute = getProduction(V);

src/utils.ts

@@ -122,21 +122,8 @@ export function shuffle<T>(array: Array<T>): Array<T> {
 }
 
 
-export function enqueueBuilding(V: VillageState, building: BuildingType) {
+export function getBuildingUpgradeCost(_V: VillageState, building: BuildingType): CostType {
-    const ongoingUpgrades = V.queue.filter(q => q.id === building.id);
+    const level = building.level + 1;
-    const level = building.level + 1 + ongoingUpgrades.length;
-    const remainingTime = 1000 * level;
-
-    V.queue.push({
-        id: building.id,
-        remainingTime,
-    });
-}
-
-
-export function getBuildingUpgradeCost(V: VillageState, building: BuildingType): CostType {
-    const ongoingUpgrades = V.queue.filter(q => q.id === building.id);
-    const level = building.level + ongoingUpgrades.length + 1;
     return building.cost(level);
 }
 

src/village.ts

@@ -13,12 +13,6 @@ type Board = {
 }
 
 
-interface QueuedBuilding {
-    id: number;
-    remainingTime: number;
-}
-
-
 export interface VillageState {
     buildings: BuildingType[];
     units: {
@@ -27,7 +21,6 @@ export interface VillageState {
     resources: ResourcesType;
     villageTiles: Board;
     outsideTiles: Board;
-    queue: QueuedBuilding[];
     victory: boolean;
 }
 
@@ -83,7 +76,6 @@ function getInitialState() {
         },
         villageTiles: getInitialVillageBoard(),
         outsideTiles: getInitialOutsideBoard(),
-        queue: [],
         victory: false,
     };