Show units being recruited in the University panel.

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/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;
 
@@ -42,6 +43,10 @@
 
         return res;
     }
+
+    function setMaxUnits() {
+        numberOfUnits = maximumUnits;
+    }
 </script>
 
 <div class="university">
@@ -65,8 +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>