package-lock.json

@@ -10,9 +10,7 @@
       "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^3.1.2",
         "@tsconfig/svelte": "^5.0.4",
-        "@types/luxon": "^3.4.2",
         "immer": "^10.1.1",
-        "luxon": "^3.5.0",
         "svelte": "^4.2.19",
         "svelte-check": "^4.0.4",
         "tslib": "^2.7.0",
@@ -708,12 +706,6 @@
       "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
       "dev": true
     },
-    "node_modules/@types/luxon": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.4.2.tgz",
-      "integrity": "sha512-TifLZlFudklWlMBfhubvgqTXRzLDI5pCbGa4P8a3wPyUQSW+1xQ5eDsreP9DWHX3tjq1ke96uYG/nwundroWcA==",
-      "dev": true
-    },
     "node_modules/acorn": {
       "version": "8.13.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.13.0.tgz",
@@ -920,15 +912,6 @@
       "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
       "dev": true
     },
-    "node_modules/luxon": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.5.0.tgz",
-      "integrity": "sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/magic-string": {
       "version": "0.30.12",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.12.tgz",

package.json

@@ -12,9 +12,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.1.2",
     "@tsconfig/svelte": "^5.0.4",
-    "@types/luxon": "^3.4.2",
     "immer": "^10.1.1",
-    "luxon": "^3.5.0",
     "svelte": "^4.2.19",
     "svelte-check": "^4.0.4",
     "tslib": "^2.7.0",

src/board/BuildingTile.svelte

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

src/constants.ts

@@ -1 +0,0 @@
-export const CULTURE_TO_WIN = 20000;

src/create.ts

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

src/hud/BuildingPanel.svelte

@@ -27,7 +27,7 @@
 <section>
     <div class="building-panel">
         <header>
-            <h1>{ building.name } ({ building.level })</h1>
+            <h1>Building</h1>
             <span class="close">
                 <button on:click={ close }>X</button>
             </span>
@@ -41,6 +41,7 @@
         </div>
         <div class="upgrade">
             <div>
+                <p>{ building.name } ({ building.level })</p>
                 <button on:click={ () => upgrade() }>Upgrade</button>
             </div>
         </div>

src/hud/Cost.svelte

@@ -1,13 +1,7 @@
 <script lang="ts">
-    import { Duration } from 'luxon';
-
     import type { CostType } from "../types";
 
     export let cost: CostType;
-    export let duration: number | null = null;
-
-
-    $: prettyDuration = (duration !== null) ? Duration.fromMillis(duration * 1000).toFormat(`mm:ss:SS`) : '';
 </script>
 
 <div class="cost">
@@ -27,12 +21,6 @@
         <img src="/img/icons/food.png" alt="Food" />
         { cost.food }
     </div>
-    { #if duration !== null }
-    <div>
-        <img src="/img/icons/time.png" alt="Duration">
-        { prettyDuration }
-    </div>
-    { /if }
 </div>
 
 <style>

src/hud/Game.svelte

@@ -9,6 +9,7 @@
     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";
@@ -46,6 +47,9 @@
         <Outside />
         { /if }
     </div>
+    <div class="queue">
+        <Queue />
+    </div>
 </section>
 <section class="overlay">
     <BuildingCreator />

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/RecruitmentQueue.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-    import type { BuildingType } from "../types";
-    import village from "../village";
-
-    export let building: BuildingType;
-
-
-    $: unitsCount = building.state.recruitment?.count || 0;
-    $: recruitmentTime = building.behavior.units?.recruitmentTime($village, building) || 0;
-    $: currentRecruitTime = building.state.recruitment?.elapsedTime || 0;
-    $: timeToNextRecruit = recruitmentTime * 1000 - currentRecruitTime;
-    $: prettyDuration = Math.ceil(timeToNextRecruit / 1000);
-</script>
-
-{ #if unitsCount > 0 }
-<div>
-    { unitsCount }
-    ({ prettyDuration }’)
-</div>
-{ /if }

src/hud/Resources.svelte

@@ -31,7 +31,6 @@
     <div>
         <img src="/img/icons/culture.png" alt="Culture" />
         { Math.floor($village.resources.culture) }
-        ({ production.culture >= 0 ? '+' : '' }{ production.culture })
     </div>
 </div>
 

src/hud/UniversityPanel.svelte

@@ -5,7 +5,6 @@
     import type { VillageState } from "../village";
     import village from "../village";
     import Cost from "./Cost.svelte";
-    import RecruitmentQueue from "./RecruitmentQueue.svelte";
 
     export let building: BuildingType;
 
@@ -23,7 +22,7 @@
         iron: unit.cost.iron * numberOfUnits,
         food: unit.cost.food * numberOfUnits,
     };
-    $: timeToRecruit = building.behavior.units?.recruitmentTime($village, building) * numberOfUnits;
+
 
     function recruit() {
         moves.recruitUnits(building.id, unitType, numberOfUnits);
@@ -43,37 +42,27 @@
 
         return res;
     }
-
-    function setMaxUnits() {
-        numberOfUnits = maximumUnits;
-    }
 </script>
 
 <div class="university">
     <p>Create Philosophers</p>
-    <div class="cost">
-        <Cost { cost } duration={ timeToRecruit } />
-    </div>
+    <div class="cost"><Cost { cost } /></div>
 
-    <div>
-        <input
-            type="range"
-            name="units"
-            min="1"
-            max={ maximumUnits }
-            bind:value={ numberOfUnits }
-        />
-        <input
-            type="number"
-            name="units"
-            min="1"
-            max={ maximumUnits }
-            bind:value={ numberOfUnits }
-        />
-        <button on:click={ setMaxUnits }>↑</button>
-        <button on:click={ recruit } disabled={ numberOfUnits > maximumUnits }>Recruit</button>
-    </div>
-    <RecruitmentQueue { building } />
+    <input
+        type="range"
+        name="units"
+        min="1"
+        max={ maximumUnits }
+        bind:value={ numberOfUnits }
+    />
+    <input
+        type="number"
+        name="units"
+        min="1"
+        max={ maximumUnits }
+        bind:value={ numberOfUnits }
+    />
+    <button on:click={ recruit } disabled={ numberOfUnits > maximumUnits }>Recruit</button>
 </div>
 
 <style>

src/moves/build.ts

@@ -1,5 +1,7 @@
+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";
 
 
@@ -28,11 +30,10 @@ 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, getBuildingUpgradeCost } from "../utils";
+import { canPayBuildingCost, enqueueBuilding, getBuildingUpgradeCost } from "../utils";
 import type { VillageState } from "../village";
 
 
@@ -8,10 +8,6 @@ export default function upgradeBuilding(V: VillageState, buildingId: number) {
         return false;
     }
 
-    if (building.state.upgrade.isUpgrading) {
-        return false;
-    }
-
     if (!canPayBuildingCost(V, building)) {
         return false;
     }
@@ -22,9 +18,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.state.upgrade.isUpgrading = true;
-    building.state.upgrade.remainingTime = 1000 * (building.level + 1);
+    enqueueBuilding(V, building);
 
     return true;
 }

src/types.ts

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

src/update.ts

@@ -1,9 +1,8 @@
 import { produce } from 'immer';
 
-import { CULTURE_TO_WIN } from './constants';
-import type { ProductionType } from './types';
-import { getProduction, getStorage, shuffle } from './utils';
+import { getBuilding, getProduction, getStorage, getUnitSource } from './utils';
 import village, { type VillageState } from "./village";
+import type { ProductionType } from './types';
 
 
 let lastFrame: number;
@@ -24,15 +23,16 @@ export default function update(timestamp: number) {
 
         return produce(state, (V: VillageState) => {
             // Advance building construction.
-            V.buildings.filter(b => b.state.upgrade.isUpgrading).forEach(b => {
-                b.state.upgrade.remainingTime -= delta;
-                if (b.state.upgrade.remainingTime <= 0) {
-                    b.level++;
-                    b.state.upgrade.isUpgrading = false;
+            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 and units produce and consume.
+            // Make all buildings produce and consume.
             const productionPerMinute = getProduction(V);
             const storage = getStorage(V);
 
@@ -41,19 +41,6 @@ export default function update(timestamp: number) {
                 const outputPerMinute = productionPerMinute[resource];
                 const outputPerMilisecond = outputPerMinute /  60.0 / 1000.0;
                 V.resources[resource] += outputPerMilisecond * delta;
-            });
-
-            // Kill units if food is negative.
-            if (V.resources.food < 0) {
-                // Choose a unit type at random.
-                const type = shuffle(Object.keys(V.units).filter(t => V.units[t] > 0))[0];
-                // Kill one unit of that type.
-                V.units[type]--;
-            }
-
-            // Make sure resources do not overflow.
-            Object.keys(productionPerMinute).forEach((key) => {
-                const resource = key as keyof ProductionType;
 
                 if (V.resources[resource] > storage[resource]) {
                     V.resources[resource] = storage[resource];
@@ -84,8 +71,14 @@ export default function update(timestamp: number) {
                 }
             });
 
+            // Make philosophers produce culture.
+            const philosopher = getUnitSource('philosopher');
+            const outputPerMinute = philosopher.behavior.culturePerMinute;
+            const outputPerMilisecond = outputPerMinute /  60.0 / 1000.0;
+            V.resources.culture += outputPerMilisecond * delta * (V.units.philosopher || 0);
+
             // Check if the game is won.
-            if (V.resources.culture >= CULTURE_TO_WIN) {
+            if (V.resources.culture >= 2) {
                 V.victory = true;
             }
 

src/utils.ts

@@ -1,60 +1,37 @@
 import units from "./data/units";
-import type { BuildingType, CostType, ProductionType, ResourcesType } from "./types";
+import type { BuildingType, CostType, ProductionType } from "./types";
 import type { VillageState } from "./village";
 
 
-function _reduceResources(acc: ResourcesType, item: ResourcesType): ResourcesType {
+function _reduceResources(acc: ProductionType, item: ProductionType): ProductionType {
     return {
         wood: acc.wood + item.wood,
         stone: acc.stone + item.stone,
         iron: acc.iron + item.iron,
         food: acc.food + item.food,
-        culture: acc.culture + item.culture,
     };
 }
 
 
-export function getEmptyResources(): ResourcesType {
+export function getEmptyResources(): ProductionType {
     return {
         wood: 0,
         stone: 0,
         iron: 0,
         food: 0,
-        culture: 0,
     };
 }
 
 
-export function getProduction(villageState: VillageState): ResourcesType {
-    let production = getEmptyResources();
-
-    // Add buildings production and intake.
-    production = villageState.buildings
+export function getProduction(villageState: VillageState): ProductionType {
+    return villageState.buildings
         .filter(b => b.behavior.production && b.level > 0)
         .map(b => {
             if (b.behavior.production) {
                 return b.behavior.production(villageState, b);
             }
         })
-        .reduce(_reduceResources, production);
-
-    // Add units production and intake.
-    ['philosopher'].forEach(type => {
-        const unit = getUnitSource(type);
-        const unitCount = villageState.units[type] || 0;
-
-        // Add food intake.
-        const intakePerMinute = unit.behavior.foodIntakePerMinute * unitCount;
-        production.food -= intakePerMinute;
-
-        // Add culture production for Philosophers.
-        if (type === 'philosopher') {
-            const outputPerMinute = unit.behavior.culturePerMinute;
-            production.culture += outputPerMinute * unitCount;
-        }
-    });
-
-    return production;
+        .reduce(_reduceResources, getEmptyResources());
 }
 
 
@@ -122,8 +99,21 @@ export function shuffle<T>(array: Array<T>): Array<T> {
 }
 
 
-export function getBuildingUpgradeCost(_V: VillageState, building: BuildingType): CostType {
-    const level = building.level + 1;
+export function enqueueBuilding(V: VillageState, building: BuildingType) {
+    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,
+    });
+}
+
+
+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,6 +13,12 @@ type Board = {
 }
 
 
+interface QueuedBuilding {
+    id: number;
+    remainingTime: number;
+}
+
+
 export interface VillageState {
     buildings: BuildingType[];
     units: {
@@ -21,6 +27,7 @@ export interface VillageState {
     resources: ResourcesType;
     villageTiles: Board;
     outsideTiles: Board;
+    queue: QueuedBuilding[];
     victory: boolean;
 }
 
@@ -76,6 +83,7 @@ function getInitialState() {
         },
         villageTiles: getInitialVillageBoard(),
         outsideTiles: getInitialOutsideBoard(),
+        queue: [],
         victory: false,
     };
 
@@ -103,7 +111,7 @@ function getInitialState() {
             }
             const newBuilding = createBuilding(type);
             newBuilding.tile = new Hex(x, y);
-            newBuilding.level = newBuilding.type === 'field' ? 1 : 10;
+            newBuilding.level = 10; // DEBUG
             state.outsideTiles[y][x] = newBuilding.id;
             state.buildings.push(newBuilding);
         });