Add a max level to all buildings.

src/board/BuildingTile.svelte

@@ -9,6 +9,7 @@
 
     $: isUpgrading = building.state.upgrade.isUpgrading;
     $: canUpgrade = !isUpgrading && canPayBuildingCost($village, building);
+    $: maxLevelReached = building.level === building.maxLevel;
 
 
     function upgradeBuilding() {
@@ -24,6 +25,7 @@
             class="level"
             class:can-upgrade={ canUpgrade }
             class:is-upgrading={ isUpgrading }
+            class:max-level={ maxLevelReached }
             on:click|stopPropagation={ upgradeBuilding }
         >
             { building.level }
@@ -59,4 +61,8 @@
     .level.is-upgrading {
         border-color: hsl(56, 99%, 43%);
     }
+
+    .level.max-level {
+        border-color: hsl(209, 70%, 52%);
+    }
 </style>

src/data/buildings.ts

@@ -8,6 +8,7 @@ export default [
         type: 'townhall',
         name: 'Town Hall',
         autoBuilt: true,
+        maxLevel: 20,
         cost: (level: number) => {
             return {
                 wood: level * 10,
@@ -31,6 +32,7 @@ export default [
         type: 'woodcutter',
         name: 'Woodcutter',
         autoBuilt: true,
+        maxLevel: 20,
         cost: (level: number) => {
             return {
                 wood: level * 10,
@@ -56,6 +58,7 @@ export default [
         type: 'mine',
         name: 'Mine',
         autoBuilt: true,
+        maxLevel: 20,
         cost: (level: number) => {
             return {
                 wood: level * 10,
@@ -81,6 +84,7 @@ export default [
         type: 'pit',
         name: 'Pit',
         autoBuilt: true,
+        maxLevel: 20,
         cost: (level: number) => {
             return {
                 wood: level * 10,
@@ -106,6 +110,7 @@ export default [
         type: 'field',
         name: 'Field',
         autoBuilt: true,
+        maxLevel: 20,
         cost: (level: number) => {
             return {
                 wood: level * 10,
@@ -126,6 +131,7 @@ export default [
     {
         type: 'warehouse',
         name: 'Warehouse',
+        maxLevel: 20,
         cost: (level: number) => {
             return {
                 wood: level * 10,
@@ -150,6 +156,7 @@ export default [
     {
         type: 'granary',
         name: 'Granary',
+        maxLevel: 20,
         cost: (level: number) => {
             return {
                 wood: level * 10,
@@ -174,6 +181,7 @@ export default [
     {
         type: 'university',
         name: 'University',
+        maxLevel: 20,
         cost: (level: number) => {
             return {
                 wood: level * 100,
@@ -198,6 +206,7 @@ export default [
     {
         type: 'barracks',
         name: 'Barracks',
+        maxLevel: 20,
         cost: (level: number) => {
             return {
                 wood: level * 100,

src/hud/BuildingPanel.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
     import moves from "../moves";
     import showBuildingPanel from "../stores/showBuildingPanel";
-    import { getBuilding } from "../utils";
+    import { getBuilding, getBuildingUpgradeCost } from "../utils";
     import village from "../village";
     import BuildingRecruitment from "./BuildingRecruitment.svelte";
+    import Cost from "./Cost.svelte";
 
     function close() {
         showBuildingPanel.set(null);
@@ -40,9 +41,19 @@
             { /if }
         </div>
         <div class="upgrade">
+            { #if building.state.upgrade.isUpgrading }
+            <p>
+                Upgrading to level { building.level + 1 }
+                ({ Math.ceil(building.state.upgrade.remainingTime / 1000) }’)
+            </p>
+            { :else if building.level === building.maxLevel }
+            <p>Max level reached!</p>
+            { :else }
             <div>
+                <Cost cost={ getBuildingUpgradeCost($village, building) } />
                 <button on:click={ () => upgrade() }>Upgrade</button>
             </div>
+            { /if }
         </div>
     </div>
 </section>

src/moves/upgradeBuilding.ts

@@ -12,6 +12,10 @@ export default function upgradeBuilding(V: VillageState, buildingId: number) {
         return false;
     }
 
+    if (building.level >= building.maxLevel) {
+        return false;
+    }
+
     if (!canPayBuildingCost(V, building)) {
         return false;
     }

src/types.ts

@@ -24,6 +24,7 @@ export interface BuildingSource {
     name: string;
     type: string;
     autoBuilt?: boolean;
+    maxLevel: number;
     cost: (level: number) => CostType;
     behavior: {
         production?: Function;