Add a victory screen.

src/hud/Game.svelte

@@ -12,6 +12,7 @@
     import Queue from "./Queue.svelte";
     import Resources from "./Resources.svelte";
     import Units from "./Units.svelte";
+    import Victory from "./Victory.svelte";
 
 
     onMount(() => {
@@ -53,6 +54,7 @@
 <section class="overlay">
     <BuildingCreator />
     <BuildingPanel />
+    <Victory />
 </section>
 
 <style>

src/hud/Victory.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import village from "../village";
+
+
+    function restart() {
+        village.reset();
+    }
+</script>
+
+{ #if $village.victory }
+<section>
+    <h1>Victory!</h1>
+    <div>
+        <button on:click={ restart }>Play again</button>
+    </div>
+</section>
+{ /if }
+
+<style>
+    section {
+        background-color: hsl(0, 0%, 10%, 0.9);
+        display: grid;
+        place-items: center;
+        height: 100vh;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100vw;
+    }
+</style>

src/update.ts

@@ -17,6 +17,10 @@ export default function update(timestamp: number) {
     const delta = timestamp - lastFrame;
 
     village.update(state => {
+        if (state.victory) {
+            return state;
+        }
+
         return produce(state, (V: VillageState) => {
             // Advance building construction.
             if (V.queue.length) {
@@ -71,7 +75,12 @@ export default function update(timestamp: number) {
             const philosopher = getUnitSource('philosopher');
             const outputPerMinute = philosopher.behavior.culturePerMinute;
             const outputPerMilisecond = outputPerMinute /  60.0 / 1000.0;
-            V.resources.culture += outputPerMilisecond * delta * V.units.philosopher;
+            V.resources.culture += outputPerMilisecond * delta * (V.units.philosopher || 0);
+
+            // Check if the game is won.
+            if (V.resources.culture >= 2) {
+                V.victory = true;
+            }
 
             return V;
         });

src/village.ts

@@ -28,6 +28,7 @@ export interface VillageState {
     villageTiles: Board;
     outsideTiles: Board;
     queue: QueuedBuilding[];
+    victory: boolean;
 }
 
 
@@ -83,6 +84,7 @@ function getInitialState() {
         villageTiles: getInitialVillageBoard(),
         outsideTiles: getInitialOutsideBoard(),
         queue: [],
+        victory: false,
     };
 
     // Create the Town hall.
@@ -122,4 +124,12 @@ function getInitialState() {
 const village = writable<VillageState>(getInitialState());
 
 
-export default village;
+function reset() {
+    village.set(getInitialState());
+}
+
+
+export default {
+    ...village,
+    reset,
+};