Display the time to recruit units in the University panel.

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

@@ -22,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);
@@ -46,23 +46,27 @@
 
 <div class="university">
     <p>Create Philosophers</p>
-    <div class="cost"><Cost { cost } /></div>
+    <div class="cost">
+        <Cost { cost } duration={ timeToRecruit } />
+    </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={ recruit } disabled={ numberOfUnits > maximumUnits }>Recruit</button>
+    <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={ recruit } disabled={ numberOfUnits > maximumUnits }>Recruit</button>
+    </div>
 </div>
 
 <style>