Added the warehouse and granary to store resources.

src/App.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from "svelte";
 
+    import Resources from "./hud/Resources.svelte";
     import moves from "./moves";
     import update from "./update";
     import village from "./village";
@@ -27,19 +28,13 @@
 </script>
 
 <main>
-    <div>
+    <header>
-        <ul>
+        <Resources />
-            <li>Wood: { Math.floor($village.resources.wood) }</li>
+    </header>
-            <li>Stone: { Math.floor($village.resources.stone) }</li>
-            <li>Iron: { Math.floor($village.resources.iron) }</li>
-            <li>Food: { Math.floor($village.resources.food) }</li>
-        </ul>
-    </div>
     <div class="buildings">
         { #each $village.buildings as building }
         <div>
-            <p>{ building.name }</p>
+            <p>{ building.name } ({ building.level })</p>
-            <p>Level: { building.level }</p>
             <p>
                 <button on:click={ () => upgradeBuilding(building.id) }>
                     Upgrade
@@ -52,7 +47,8 @@
 
 <style>
     .buildings {
-        display: flex;
+        display: grid;
         gap: 1em;
+        grid-template-columns: repeat(4, 1fr);
     }
 </style>

src/app.css

@@ -24,9 +24,6 @@ a:hover {
 
 body {
     margin: 0;
-    display: flex;
-    place-items: center;
-    min-width: 320px;
     min-height: 100vh;
 }
 

src/buildings.ts

@@ -1,10 +1,11 @@
+import type { Building } from "./types";
+import { getEmptyResources } from "./utils";
 import type { VillageState } from "./village";
 
 
 export default {
     'woodcutter': {
         name: 'Woodcutter',
-        level: 1,
         cost: (level: number) => {
             return {
                 wood: level * 10,
@@ -14,16 +15,16 @@ export default {
             };
         },
         behavior: {
-            production: (V: VillageState, self: any, delta: number) => {
+            production: (V: VillageState, self: Building) => {
+                const prod = getEmptyResources();
                 const outputPerMinute = 5 * (self.level * self.level);
-                const outputPerMilisecond = outputPerMinute /  60.0 / 1000.0;
+                prod.wood = outputPerMinute;
-                V.resources.wood += outputPerMilisecond * delta;
+                return prod;
             }
         }
     },
     'mine': {
         name: 'Mine',
-        level: 1,
         cost: (level: number) => {
             return {
                 wood: level * 10,
@@ -33,16 +34,16 @@ export default {
             };
         },
         behavior: {
-            production: (V: VillageState, self: any, delta: number) => {
+            production: (V: VillageState, self: Building) => {
+                const prod = getEmptyResources();
                 const outputPerMinute = 5 * (self.level * self.level);
-                const outputPerMilisecond = outputPerMinute /  60.0 / 1000.0;
+                prod.iron = outputPerMinute;
-                V.resources.iron += outputPerMilisecond * delta;
+                return prod;
             }
         }
     },
     'pit': {
         name: 'Pit',
-        level: 1,
         cost: (level: number) => {
             return {
                 wood: level * 10,
@@ -52,11 +53,58 @@ export default {
             };
         },
         behavior: {
-            production: (V: VillageState, self: any, delta: number) => {
+            production: (V: VillageState, self: Building) => {
+                const prod = getEmptyResources();
                 const outputPerMinute = 5 * (self.level * self.level);
-                const outputPerMilisecond = outputPerMinute /  60.0 / 1000.0;
+                prod.stone = outputPerMinute;
-                V.resources.stone += outputPerMilisecond * delta;
+                return prod;
             }
         }
     },
+    'warehouse': {
+        name: 'Warehouse',
+        cost: (level: number) => {
+            return {
+                wood: level * 10,
+                stone: level * 10,
+                iron: level * 10,
+                food: 0,
+            };
+        },
+        behavior: {
+            storage: (V: VillageState, self: Building) => {
+                const x = self.level;
+                const capacity = ( ( ( x + ( x * x ) ) / 2 ) + 3 ) * 25;
+                return {
+                    'wood': capacity,
+                    'stone': capacity,
+                    'iron': capacity,
+                    'food': 0,
+                }
+            }
+        },
+    },
+    'granary': {
+        name: 'Granary',
+        cost: (level: number) => {
+            return {
+                wood: level * 10,
+                stone: level * 10,
+                iron: level * 10,
+                food: 0,
+            };
+        },
+        behavior: {
+            storage: (V: VillageState, self: Building) => {
+                const x = self.level;
+                const capacity = ( ( ( x + ( x * x ) ) / 2 ) + 3 ) * 25;
+                return {
+                    'wood': 0,
+                    'stone': 0,
+                    'iron': 0,
+                    'food': capacity,
+                }
+            }
+        },
+    },
 };

src/hud/Resources.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { getStorage } from "../utils";
+    import village from "../village";
+
+
+    $: capacity = getStorage($village);
+</script>
+
+<div class="resources">
+    <div>Wood: { Math.floor($village.resources.wood) } / { capacity.wood }</div>
+    <div>Stone: { Math.floor($village.resources.stone) } / { capacity.stone }</div>
+    <div>Iron: { Math.floor($village.resources.iron) } / { capacity.iron }</div>
+    <div>Food: { Math.floor($village.resources.food) } / { capacity.food }</div>
+</div>
+
+<style>
+    .resources {
+        display: flex;
+        justify-content: space-around;
+    }
+</style>

src/moves/upgradeBuilding.ts

@@ -7,7 +7,7 @@ export default function upgradeBuilding(V: VillageState, buildingId: number) {
         return false;
     }
 
-    const cost = building.cost(building.level);
+    const cost = building.cost(building.level + 1);
 
     if (
         cost.wood > V.resources.wood

src/types.ts

@@ -6,12 +6,16 @@ export interface Cost {
 }
 
 
+export type Production = Cost;
+
+
 export interface BuildingSource {
     name: string;
     level: number;
     cost: (level: number) => Cost;
     behavior: {
         production?: Function;
+        storage?: Function;
     };
 }
 

src/update.ts

@@ -1,6 +1,8 @@
 import { produce } from 'immer';
 
+import { getProduction, getStorage } from './utils';
 import village, { type VillageState } from "./village";
+import type { Production } from './types';
 
 
 let lastFrame: number;
@@ -16,11 +18,20 @@ export default function update(timestamp: number) {
 
     village.update(state => {
         return produce(state, (V: VillageState) => {
-            V.buildings.forEach(b => {
+            const productionPerMinute = getProduction(V);
-                if (b.behavior.production) {
+            const storage = getStorage(V);
-                    b.behavior.production(V, b, delta);
+
+            Object.keys(productionPerMinute).forEach((key) => {
+                const resource = key as keyof Production;
+                const outputPerMinute = productionPerMinute[resource];
+                const outputPerMilisecond = outputPerMinute /  60.0 / 1000.0;
+                V.resources[resource] += outputPerMilisecond * delta;
+
+                if (V.resources[resource] > storage[resource]) {
+                    V.resources[resource] = storage[resource];
                 }
             });
+
             return V;
         });
     });

src/utils.ts

@@ -0,0 +1,46 @@
+import type { Production } from "./types";
+import type { VillageState } from "./village";
+
+
+function _reduceResources(acc: Production, item: Production): Production {
+    return {
+        wood: acc.wood + item.wood,
+        stone: acc.stone + item.stone,
+        iron: acc.iron + item.iron,
+        food: acc.food + item.food,
+    };
+}
+
+
+export function getEmptyResources(): Production {
+    return {
+        wood: 0,
+        stone: 0,
+        iron: 0,
+        food: 0,
+    };
+}
+
+
+export function getProduction(villageState: VillageState): Production {
+    return villageState.buildings
+        .filter(b => b.behavior.production)
+        .map(b => {
+            if (b.behavior.production) {
+                return b.behavior.production(villageState, b);
+            }
+        })
+        .reduce(_reduceResources, getEmptyResources());
+}
+
+
+export function getStorage(villageState: VillageState): Production {
+    return villageState.buildings
+        .filter(b => b.behavior.storage)
+        .map(b => {
+            if (b.behavior.storage) {
+                return b.behavior.storage(villageState, b);
+            }
+        })
+        .reduce(_reduceResources, getEmptyResources());
+}

src/village.ts

@@ -11,25 +11,27 @@ export interface VillageState {
         iron: number;
         food: number;
         culture: number;
-    }
+    };
 }
 
 let uid = 0;
 
 const village = writable<VillageState>({
     buildings: [
-        { ...buildings.woodcutter, id: uid++ },
+        { ...buildings.woodcutter, level: 1, id: uid++ },
-        { ...buildings.woodcutter, id: uid++ },
+        { ...buildings.woodcutter, level: 1, id: uid++ },
-        { ...buildings.woodcutter, id: uid++ },
+        { ...buildings.woodcutter, level: 1, id: uid++ },
-        { ...buildings.woodcutter, id: uid++ },
+        { ...buildings.woodcutter, level: 1, id: uid++ },
-        { ...buildings.mine, id: uid++ },
+        { ...buildings.mine, level: 1, id: uid++ },
-        { ...buildings.mine, id: uid++ },
+        { ...buildings.mine, level: 1, id: uid++ },
-        { ...buildings.mine, id: uid++ },
+        { ...buildings.mine, level: 1, id: uid++ },
-        { ...buildings.mine, id: uid++ },
+        { ...buildings.mine, level: 1, id: uid++ },
-        { ...buildings.pit, id: uid++ },
+        { ...buildings.pit, level: 1, id: uid++ },
-        { ...buildings.pit, id: uid++ },
+        { ...buildings.pit, level: 1, id: uid++ },
-        { ...buildings.pit, id: uid++ },
+        { ...buildings.pit, level: 1, id: uid++ },
-        { ...buildings.pit, id: uid++ },
+        { ...buildings.pit, level: 1, id: uid++ },
+        { ...buildings.warehouse, level: 1, id: uid++ },
+        { ...buildings.granary, level: 1, id: uid++ },
     ],
     resources: {
         wood: 100,