Add a move and button to create a new building.

src/App.svelte

@@ -5,6 +5,7 @@
     import moves from "./moves";
     import update from "./update";
     import village from "./village";
+    import BuildingCreator from "./hud/BuildingCreator.svelte";
 
 
     onMount(() => {
@@ -25,12 +26,20 @@
     function upgradeBuilding(id: number) {
         moves.upgradeBuilding(id);
     }
+
+    let showBuildingCreator = false;
 </script>
 
+{ #if showBuildingCreator }
+<BuildingCreator close={ () => { showBuildingCreator = false } } />
+{ /if }
 <main>
     <header>
         <Resources />
     </header>
+    <div>
+        <button on:click={ () => { showBuildingCreator = true } }>Create building</button>
+    </div>
     <div class="buildings">
         { #each $village.buildings as building }
         <div>

src/hud/BuildingCreator.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+    import buildings from "../buildings";
+    import moves from "../moves";
+
+    export let close: () => void;
+
+
+    function build(type: string) {
+        if (moves.createBuilding(type)) {
+            close();
+        }
+    }
+</script>
+
+<section>
+    <div class="building-creator">
+        <header>
+            <h1>Build</h1>
+            <span class="close">
+                <button on:click={ close }>X</button>
+            </span>
+        </header>
+        <div class="buildings">
+            { #each Object.entries(buildings) as [type, building] }
+            <div>
+                <p>{ building.name }</p>
+                <button on:click={ () => build(type) }>Build</button>
+            </div>
+            { /each }
+        </div>
+    </div>
+</section>
+
+<style>
+    section {
+        background-color: hsl(0, 0%, 10%, 0.8);
+        display: grid;
+        place-items: center;
+        height: 100vh;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100vw;
+    }
+
+    .building-creator {
+        background-color: hsl(0, 0%, 20%);
+        border: 0.2em solid grey;
+        border-radius: .4em;
+        width: 80%;
+        height: 60%;
+    }
+
+    .building-creator header {
+        position: relative;
+    }
+
+    .building-creator header .close {
+        position: absolute;
+        right: 1em;
+        top: 0;
+    }
+
+    .building-creator .buildings {
+        display: grid;
+        gap: 1em;
+        grid-template-columns: repeat(4, 1fr);
+    }
+</style>

src/moves/createBuilding.ts

@@ -0,0 +1,34 @@
+import buildings from "../buildings";
+import type { VillageState } from "../village";
+
+
+let uid = 0;
+
+
+export default function createBuilding(V: VillageState, buildingType: keyof typeof buildings) {
+    const building = buildings[buildingType];
+    const cost = building.cost(1);
+
+    if (
+        cost.wood > V.resources.wood
+        || cost.stone > V.resources.stone
+        || cost.iron > V.resources.iron
+        || cost.food > V.resources.food
+    ) {
+        return false;
+    }
+
+    V.resources.wood -= cost.wood;
+    V.resources.stone -= cost.stone;
+    V.resources.iron -= cost.iron;
+    V.resources.food -= cost.food;
+
+    const newBuilding = {
+        ...building,
+        level: 1,
+        id: uid++,
+    };
+    V.buildings.push(newBuilding);
+
+    return true;
+}

src/moves/index.ts

@@ -1,6 +1,7 @@
 import { produce } from 'immer';
 
 import village, { type VillageState } from '../village';
+import createBuilding from './createBuilding';
 import upgradeBuilding from './upgradeBuilding';
 
 
@@ -16,8 +17,8 @@ export function makeMove(move: (...args: any[]) => boolean) {
         // That updates the game state.
         village.update(state => {
             // With an immutable state.
-            return produce(state, (G: VillageState) => {
+            return produce(state, (V: VillageState) => {
-                result = move(G, ...args);
+                result = move(V, ...args);
             });
         });
 
@@ -27,5 +28,6 @@ export function makeMove(move: (...args: any[]) => boolean) {
 
 
 export default {
+    createBuilding: makeMove(createBuilding),
     upgradeBuilding: makeMove(upgradeBuilding),
 };