Move the amount of culture to reach to win into a constant.

package-lock.json

@@ -10,7 +10,9 @@
       "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",
@@ -706,6 +708,12 @@
       "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",
@@ -912,6 +920,15 @@
       "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,7 +12,9 @@
   "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 = $village.queue.find(q => q.id === building.id);
-    $: canUpgrade = canPayBuildingCost($village, building);
+    $: isUpgrading = building.state.upgrade.isUpgrading;
+    $: 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/constants.ts

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

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

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

src/hud/Cost.svelte

@@ -1,7 +1,13 @@
 <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">
@@ -21,6 +27,12 @@
         <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,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/hud/RecruitmentQueue.svelte

@@ -0,0 +1,20 @@
+<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,6 +31,7 @@
     <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,6 +5,7 @@
     import type { VillageState } from "../village";
     import village from "../village";
     import Cost from "./Cost.svelte";
+    import RecruitmentQueue from "./RecruitmentQueue.svelte";
 
     export let building: BuildingType;
 
@@ -22,7 +23,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);
@@ -42,12 +43,19 @@
 
         return res;
     }
+
+    function setMaxUnits() {
+        numberOfUnits = maximumUnits;
+    }
 </script>
 
 <div class="university">
     <p>Create Philosophers</p>
-    <div class="cost"><Cost { cost } /></div>
+    <div class="cost">
+        <Cost { cost } duration={ timeToRecruit } />
+    </div>
 
+    <div>
         <input
             type="range"
             name="units"
@@ -62,7 +70,10 @@
             max={ maximumUnits }
             bind:value={ numberOfUnits }
         />
+        <button on:click={ setMaxUnits }>↑</button>
         <button on:click={ recruit } disabled={ numberOfUnits > maximumUnits }>Recruit</button>
+    </div>
+    <RecruitmentQueue { building } />
 </div>
 
 <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

@@ -1,8 +1,9 @@
 import { produce } from 'immer';
 
-import { getBuilding, getProduction, getStorage, getUnitSource } from './utils';
-import village, { type VillageState } from "./village";
+import { CULTURE_TO_WIN } from './constants';
 import type { ProductionType } from './types';
+import { getProduction, getStorage, shuffle } from './utils';
+import village, { type VillageState } from "./village";
 
 
 let lastFrame: number;
@@ -23,16 +24,15 @@ export default function update(timestamp: number) {
 
         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();
-                }
+            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;
                 }
+            });
 
-            // Make all buildings produce and consume.
+            // Make all buildings and units produce and consume.
             const productionPerMinute = getProduction(V);
             const storage = getStorage(V);
 
@@ -41,6 +41,19 @@ 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];
@@ -71,14 +84,8 @@ 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 >= 2) {
+            if (V.resources.culture >= CULTURE_TO_WIN) {
                 V.victory = true;
             }
 

src/utils.ts

@@ -1,37 +1,60 @@
 import units from "./data/units";
-import type { BuildingType, CostType, ProductionType } from "./types";
+import type { BuildingType, CostType, ProductionType, ResourcesType } from "./types";
 import type { VillageState } from "./village";
 
 
-function _reduceResources(acc: ProductionType, item: ProductionType): ProductionType {
+function _reduceResources(acc: ResourcesType, item: ResourcesType): ResourcesType {
     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(): ProductionType {
+export function getEmptyResources(): ResourcesType {
     return {
         wood: 0,
         stone: 0,
         iron: 0,
         food: 0,
+        culture: 0,
     };
 }
 
 
-export function getProduction(villageState: VillageState): ProductionType {
-    return villageState.buildings
+export function getProduction(villageState: VillageState): ResourcesType {
+    let production = getEmptyResources();
+
+    // Add buildings production and intake.
+    production = villageState.buildings
         .filter(b => b.behavior.production && b.level > 0)
         .map(b => {
             if (b.behavior.production) {
                 return b.behavior.production(villageState, b);
             }
         })
-        .reduce(_reduceResources, getEmptyResources());
+        .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;
 }
 
 
@@ -99,21 +122,8 @@ export function shuffle<T>(array: Array<T>): Array<T> {
 }
 
 
-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;
+export function getBuildingUpgradeCost(_V: VillageState, building: BuildingType): CostType {
+    const level = building.level + 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,
     };
 
@@ -111,7 +103,7 @@ function getInitialState() {
             }
             const newBuilding = createBuilding(type);
             newBuilding.tile = new Hex(x, y);
-            newBuilding.level = 10; // DEBUG
+            newBuilding.level = newBuilding.type === 'field' ? 1 : 10;
             state.outsideTiles[y][x] = newBuilding.id;
             state.buildings.push(newBuilding);
         });