Add quests that give resources as reward.

public/img/icons/world.svg

@@ -0,0 +1 @@
+<svg style="height: 512px; width: 512px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g class="" style="" transform="translate(0,0)"><path d="M253.47 17.406C123.76 17.406 18.437 122.76 18.437 252.47c0 129.707 105.324 235.06 235.03 235.06 129.707 0 235.063-105.353 235.063-235.06 0-129.71-105.355-235.064-235.06-235.064zM367.874 68.75c61.246 38.19 101.97 106.14 101.97 183.72 0 17.143-1.993 33.823-5.75 49.81l-34.25-18.06 22 54.874c-9.454 21.647-22.362 41.432-38 58.687l-43.158-30.936-64.625 47.72-61.656 6.967-13.906-41.78-49.72 26.844-68.093-18.938 9.157 36.594c-28.41-21.793-51.23-50.466-66-83.563L81.25 304.47l32.25 17.124 59.22-9.875 2.843-40.908-37.344-1.718 4.905-17.844 30.78-25.313-25.093-15.625 67.22-38.593-45.345-29.657-66.625 40.187-49.437-15.28c13.812-32.14 35.21-60.22 61.906-82.064l-3.75 44.375 43.376-34.124 72 22.22-22.5-27.407L233 75.562l26.813 28.468 71 9.845-3.5-34.47 41.468 12.657-.905-23.312zm1.156 120.03L278 199.47l28.906 43.218 3.156 64.468L339.25 321l11.438-28.375 62.656 48.656L395.78 294l6.408-48.344-43.75-22.72 10.593-34.155zM221 192.438l-31.594 21.188 36.47 14.78 16.686-14.78L221 192.437zm22.188 144.688l18.687 52.594 19.78-42.564-38.467-10.03z" fill="#ffffff" fill-opacity="1"></path></g></svg>

src/app.css

@@ -37,9 +37,6 @@ h1 {
 }
 
 #app {
-    max-width: 1280px;
-    margin: 0 auto;
-    padding: 2rem;
     text-align: center;
 }
 

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/board/OasisRegion.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+    import moves from "../moves";
+    import type { OasisType } from "../types";
+    import { getRemainingUnitCount } from "../utils";
+    import village from "../village";
+
+    export let region: OasisType;
+
+
+    let numberOfUnits = 0;
+    $: maximumUnits = getRemainingUnitCount($village, 'soldier');
+    $: if (numberOfUnits > maximumUnits) {
+        numberOfUnits = maximumUnits || 0;
+    }
+
+
+    function setMaxUnits() {
+        numberOfUnits = maximumUnits;
+    }
+
+
+    function pillage() {
+        moves.pillage(region.state.index, numberOfUnits);
+    }
+</script>
+
+<div>
+    <h2>
+        <img src="/img/icons/{ region.resource }.png" alt="{ region.resource }">
+        Oasis
+        (→ { region.distance })
+    </h2>
+    { #if region.state.mission }
+    <div>
+        <p>{ region.state.mission.unitCount } soldiers are on a mission here.</p>
+        <p>Remaining: { Math.ceil(region.state.mission.remainingTime / 1000) }</p>
+    </div>
+    { :else }
+    <div>
+        <input
+            type="range"
+            name="units"
+            min="0"
+            max={ maximumUnits }
+            bind:value={ numberOfUnits }
+        />
+        <input
+            type="number"
+            name="units"
+            min="0"
+            max={ maximumUnits }
+            bind:value={ numberOfUnits }
+        />
+        <button on:click={ setMaxUnits }>↑</button>
+        <button on:click={ pillage } disabled={ numberOfUnits === 0 }>Pillage</button>
+    </div>
+    { /if }
+</div>
+
+<style>
+    h2 {
+        align-items: center;
+        display: flex;
+        gap: 0.4em;
+    }
+</style>

src/board/Outside.svelte

@@ -40,7 +40,6 @@
     .outside-map {
         display: grid;
         height: 100%;
-        margin-top: 0.8em;
         position: relative;
     }
 

src/board/Village.svelte

@@ -43,7 +43,6 @@
     .village-map {
         display: grid;
         height: 100%;
-        margin-top: 0.8em;
         position: relative;
     }
 

src/board/Worldmap.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import village from "../village";
+    import OasisRegion from "./OasisRegion.svelte";
+
+</script>
+
+<section class="worldmap">
+    { #each $village.worldmap as region }
+    <div class="region">
+        { #if region.type === 'oasis' }
+        <OasisRegion { region } />
+        { /if }
+    </div>
+    { /each }
+</section>
+
+<style>
+    .worldmap {
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        gap: 1em;
+    }
+
+    .region {
+        border: 1px solid white;
+        padding: 1em;
+    }
+</style>

src/create.ts

@@ -1,6 +1,6 @@
 import buildings from "./data/buildings";
 import { Hex } from "./hexgrid";
-import type { BuildingType, BuildingSource } from "./types";
+import type { BuildingSource, BuildingType } from "./types";
 
 
 let uid = 0;

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,
@@ -194,5 +202,30 @@ export default [
                 recruitmentTime: (V: VillageState, self: BuildingType) => 2 - 0.06 * self.level,
             },
         },
-    }
+    },
+    {
+        type: 'barracks',
+        name: 'Barracks',
+        maxLevel: 20,
+        cost: (level: number) => {
+            return {
+                wood: level * 100,
+                stone: level * 100,
+                iron: level * 100,
+                food: 0,
+            };
+        },
+        behavior: {
+            production: (V: VillageState, self: BuildingType) => {
+                const prod = getEmptyResources();
+                const intakePerMinute = Math.ceil(self.level / 3) * 3;
+                prod.food = -intakePerMinute;
+                return prod;
+            },
+            units: {
+                type: 'soldier',
+                recruitmentTime: (V: VillageState, self: BuildingType) => 1 - 0.03 * self.level,
+            },
+        },
+    },
 ];

src/data/units.ts

@@ -9,8 +9,23 @@ export default [
             food: 0,
         },
         behavior: {
+            caryingCapacity: 2,
             culturePerMinute: 1,
             foodIntakePerMinute: 2,
         },
     },
+    {
+        type: 'soldier',
+        name: 'Soldier',
+        cost: {
+            wood: 15,
+            stone: 5,
+            iron: 40,
+            food: 0,
+        },
+        behavior: {
+            caryingCapacity: 4,
+            foodIntakePerMinute: 1,
+        },
+    },
 ];

src/data/worldmap.ts

@@ -0,0 +1,22 @@
+export default [
+    {
+        type: 'oasis',
+        resource: 'food',
+        distance: 1,
+    },
+    {
+        type: 'oasis',
+        resource: 'wood',
+        distance: 1,
+    },
+    {
+        type: 'oasis',
+        resource: 'stone',
+        distance: 1,
+    },
+    {
+        type: 'oasis',
+        resource: 'iron',
+        distance: 1,
+    },
+];

src/hud/BuildingCreator.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
+    import { createBuilding } from "../create";
     import buildings from "../data/buildings";
     import moves from "../moves";
     import showBuildingCreator from "../stores/showBuildingCreator";
+    import { canPayBuildingCost } from "../utils";
+    import village from "../village";
+    import Cost from "./Cost.svelte";
 
     function close() {
         showBuildingCreator.set(null);
@@ -18,7 +22,11 @@
         }
     }
 
-    const constructible = buildings.filter(b => !b.autoBuilt);
+    const constructible = buildings.filter(b => !b.autoBuilt).map(b =>{
+        const building = createBuilding(b.type);
+        building.level = 0;
+        return building;
+    });
 </script>
 
 { #if $showBuildingCreator !== null }
@@ -34,7 +42,13 @@
             { #each constructible as building }
             <div>
                 <p>{ building.name }</p>
-                <button on:click={ () => build(building.type) }>Build</button>
+                <Cost cost={ building.cost(1) } />
+                <button
+                    on:click={ () => build(building.type) }
+                    disabled={ !canPayBuildingCost($village, building) }
+                >
+                    Build
+                </button>
             </div>
             { /each }
         </div>

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 UniversityPanel from "./UniversityPanel.svelte";
+    import BuildingRecruitment from "./BuildingRecruitment.svelte";
+    import Cost from "./Cost.svelte";
 
     function close() {
         showBuildingPanel.set(null);
@@ -35,14 +36,24 @@
         <div class="content">
             { #if building.level === 0 }
             <p>Building in construction…</p>
-            { :else if building.type === 'university' }
+            { :else if building.behavior.units }
-            <UniversityPanel { building } />
+            <BuildingRecruitment { building } />
             { /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/hud/BuildingRecruitment.svelte

@@ -49,8 +49,8 @@
     }
 </script>
 
-<div class="university">
+<div class="recruitment">
-    <p>Create Philosophers</p>
+    <p>Recruit { unit.name }s</p>
     <div class="cost">
         <Cost { cost } duration={ timeToRecruit } />
     </div>
@@ -77,7 +77,7 @@
 </div>
 
 <style>
-    .university .cost {
+    .recruitment .cost {
         margin: 1em;
     }
 </style>

src/hud/Game.svelte

@@ -3,6 +3,7 @@
 
     import Outside from "../board/Outside.svelte";
     import Village from "../board/Village.svelte";
+    import Worldmap from "../board/Worldmap.svelte";
     import gameTab from "../stores/gameTab";
     import type { GameTab } from "../types";
     import update from "../update";
@@ -12,6 +13,7 @@
     import Resources from "./Resources.svelte";
     import Units from "./Units.svelte";
     import Victory from "./Victory.svelte";
+    import Quests from "./Quests.svelte";
 
 
     onMount(() => {
@@ -35,15 +37,20 @@
 
 <section class="hud">
     <header>
-        <Units />
-        <Resources />
         <Navigation { setTab } />
+        <Resources />
     </header>
+    <div class="side">
+        <Units />
+        <Quests />
+    </div>
     <div class="board">
         { #if $gameTab === 'village' }
         <Village />
         { :else if $gameTab === 'resources' }
         <Outside />
+        { :else if $gameTab === 'world' }
+        <Worldmap />
         { /if }
     </div>
 </section>
@@ -54,9 +61,19 @@
 </section>
 
 <style>
-    header {
+    .hud {
+        display: grid;
+        grid-template-columns: 20vw 1fr 20vw;
+        grid-template-rows: 20vh 1fr;
+        height: 100vh;
+        width: 100vw;
+    }
+
+    .hud header {
         display: flex;
-        justify-content: space-around;
+        justify-content: center;
+        flex-direction: column;
+        grid-area: 1 / span 3;
     }
 
     .overlay {

src/hud/Navigation.svelte

@@ -19,6 +19,13 @@
         <img src="/img/icons/field.svg" alt="">
         <span>Resources</span>
     </button>
+    <button
+        class="invisible"
+        on:click={ () => setTab('world') }
+    >
+        <img src="/img/icons/world.svg" alt="">
+        <span>Worldmap</span>
+    </button>
 </nav>
 
 <style>

src/hud/Quests.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+    import { fly } from "svelte/transition";
+
+    import moves from "../moves";
+    import village from "../village";
+    import Reward from "./Reward.svelte";
+    import { flip } from "svelte/animate";
+
+
+    $: isQuestStarted = $village.quests.some(q => q.started);
+
+    function startQuest(id: number) {
+        moves.startQuest(id);
+    }
+</script>
+
+<section>
+    { #each $village.quests as quest (quest.id) }
+    <div
+        class="quest"
+        in:fly={{ duration: 200, delay: 100, x: -500 }}
+        out:fly={{ duration: 200, x: 500 }}
+        animate:flip={{ duration: 100 }}
+    >
+        <p>
+            <Reward reward={ quest.reward } />
+        </p>
+        <p>
+            <img src="/img/icons/time.png" alt="Duration">
+            { #if quest.started }
+            { Math.ceil((quest.remainingTime || 0) / 1000) }
+            { :else }
+            { quest.duration }
+            <button
+                on:click={ () => startQuest(quest.id) }
+                disabled={ isQuestStarted }
+            >
+                Start quest
+            </button>
+            { /if }
+        </p>
+    </div>
+    { /each }
+</section>
+
+<style>
+    .quest {
+        text-align: left;
+    }
+</style>

src/hud/Resources.svelte

@@ -38,8 +38,8 @@
 <style>
     .resources {
         display: flex;
-        justify-content: space-around;
+        justify-content: center;
-        gap: 1em;
+        gap: 2em;
     }
 
     .resources div {

src/hud/Reward.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+    import type { ResourcesType } from "../types";
+
+    export let reward: ResourcesType;
+</script>
+
+<div class="reward">
+    { #if reward.wood > 0 }
+    <div>
+        <img src="/img/icons/wood.png" alt="Wood" />
+        { reward.wood }
+    </div>
+    { /if }
+    { #if reward.stone > 0 }
+    <div>
+        <img src="/img/icons/stone.png" alt="Stone" />
+        { reward.stone }
+    </div>
+    { /if }
+    { #if reward.iron > 0 }
+    <div>
+        <img src="/img/icons/iron.png" alt="Iron" />
+        { reward.iron }
+    </div>
+    { /if }
+    { #if reward.food > 0 }
+    <div>
+        <img src="/img/icons/food.png" alt="Food" />
+        { reward.food }
+    </div>
+    { /if }
+    { #if reward.culture > 0 }
+    <div>
+        <img src="/img/icons/culture.png" alt="Culture" />
+        { reward.culture }
+    </div>
+    { /if }
+</div>
+
+<style>
+    .reward {
+        align-items: center;
+        display: flex;
+        gap: 1em;
+        justify-content: center;
+    }
+
+    .reward div {
+        display: flex;
+        align-items: center;
+        gap: 0.2em;
+    }
+</style>

src/hud/Units.svelte

@@ -1,9 +1,14 @@
 <script lang="ts">
     import units from "../data/units";
+    import { getRemainingUnitCount } from "../utils";
     import village from "../village";
 
     $: currentUnits = Object.entries($village.units).map(([type, count]) => {
         const unit = units.find(u => u.type === type);
+        if (!unit) {
+            throw new Error(`Unable to find unit: "${type}"`);
+
+        }
         return {
             ...unit,
             count,
@@ -13,6 +18,6 @@
 
 <section>
     { #each currentUnits as unit }
-    <p>{ unit.name }: { unit.count }</p>
+    <p>{ unit.name }: { getRemainingUnitCount($village, unit.type) } / { unit.count }</p>
     { /each }
 </section>

src/missions.ts

@@ -0,0 +1,34 @@
+import type { OasisType, RegionType } from "./types";
+import { getUnitSource } from "./utils";
+import type { VillageState } from "./village";
+
+
+export function resolveMission(V: VillageState, region: RegionType) {
+    const mission = region.state.mission;
+    if (!mission) {
+        return;
+    }
+
+    switch (mission.type) {
+        case 'pillage':
+            if (region.type === 'oasis') {
+                resolvePillageOasis(V, region);
+            }
+            break;
+        default:
+            throw new Error(`Unknown mission type: "${ mission.type }"`);
+    }
+}
+
+
+function resolvePillageOasis(V: VillageState, region: OasisType) {
+    const mission = region.state.mission;
+    if (!mission) {
+        return;
+    }
+
+    const unit = getUnitSource('soldier');
+
+    V.resources[region.resource] += mission.unitCount * unit.behavior.caryingCapacity;
+    delete region.state.mission;
+}

src/moves/index.ts

@@ -2,8 +2,10 @@ import { produce } from 'immer';
 
 import village, { type VillageState } from '../village';
 import build from './build';
-import upgradeBuilding from './upgradeBuilding';
+import pillage from './pillage';
 import recruitUnits from './recruitUnits';
+import startQuest from './startQuest';
+import upgradeBuilding from './upgradeBuilding';
 
 
 // Encapsulates a move function into a store update, where the data is made
@@ -31,5 +33,7 @@ export function makeMove(move: (...args: any[]) => boolean) {
 export default {
     build: makeMove(build),
     upgradeBuilding: makeMove(upgradeBuilding),
+    pillage: makeMove(pillage),
     recruitUnits: makeMove(recruitUnits),
+    startQuest: makeMove(startQuest),
 };

src/moves/pillage.ts

@@ -0,0 +1,24 @@
+import { getRemainingUnitCount } from "../utils";
+import type { VillageState } from "../village";
+
+
+export default function pillage(V: VillageState, regionIndex: number, soldiersCount: number) {
+    if (soldiersCount > getRemainingUnitCount(V, 'soldier')) {
+        return false;
+    }
+
+    const region = V.worldmap[regionIndex];
+
+    if (region.state.mission) {
+        return false;
+    }
+
+    region.state.mission = {
+        type: 'pillage',
+        unitType: 'soldier',
+        unitCount: soldiersCount,
+        remainingTime: region.distance * 10 * 1000,
+    };
+
+    return true;
+}

src/moves/startQuest.ts

@@ -0,0 +1,13 @@
+import type { VillageState } from "../village";
+
+export default function startQuest(V: VillageState, questId: number) {
+    const quest = V.quests.find(q => q.id === questId);
+    if (!quest) {
+        return false;
+    }
+
+    quest.started = true;
+    quest.remainingTime = quest.duration * 1000;
+
+    return true;
+}

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/quests.ts

@@ -0,0 +1,34 @@
+import type { QuestType, ResourcesType } from "./types";
+import { getEmptyResources, random } from "./utils";
+
+
+let uid = 0;
+
+
+export function createQuest(level: number): QuestType {
+    const reward = getEmptyResources();
+    const adjustedLevel = level * 2 + 5;
+    const duration = random(adjustedLevel - 2, adjustedLevel + 2);
+    Object.keys(reward).forEach(r => {
+        const resource = r as keyof ResourcesType;
+        reward[resource] = random(
+            duration * 5 - level * 10,
+            duration * 5 + level * 10,
+        );
+
+        if (resource === 'food') {
+            reward[resource] = Math.round(reward[resource] / 3);
+        }
+        else if (resource === 'culture') {
+            reward[resource] = Math.round(reward[resource] / 20);
+        }
+    });
+
+    return {
+        id: uid++,
+        duration,
+        reward,
+        level,
+        started: false,
+    };
+}

src/types.ts

@@ -1,7 +1,7 @@
 import type { Hex } from "./hexgrid";
 
 
-export type GameTab = 'village' | 'resources';
+export type GameTab = 'village' | 'resources' | 'world';
 
 
 export interface CostType {
@@ -24,6 +24,7 @@ export interface BuildingSource {
     name: string;
     type: string;
     autoBuilt?: boolean;
+    maxLevel: number;
     cost: (level: number) => CostType;
     behavior: {
         production?: Function;
@@ -58,7 +59,54 @@ export interface UnitType {
     name: string;
     cost: CostType;
     behavior: {
+        caryingCapacity: number;
         foodIntakePerMinute: number;
         culturePerMinute?: number;
     }
 }
+
+
+export interface MissionType {
+    type: string;
+    unitType: string;
+    unitCount: number;
+    remainingTime: number;
+}
+
+interface BaseRegionType {
+    distance: number;
+    state: {
+        index: number;
+        mission?: MissionType;
+    };
+}
+
+
+export interface OasisType extends BaseRegionType {
+    type: 'oasis';
+    resource: keyof CostType;
+}
+
+
+export interface BourgadeType extends BaseRegionType {
+    type: 'bourgade';
+    distance: number;
+}
+
+
+export type RegionType = OasisType | BourgadeType;
+
+
+export interface HeroType {
+    id: number;
+}
+
+
+export interface QuestType {
+    id: number;
+    duration: number;
+    reward: ResourcesType;
+    level: number;
+    started: boolean;
+    remainingTime?: number;
+}

src/update.ts

@@ -1,9 +1,11 @@
 import { produce } from 'immer';
 
 import { CULTURE_TO_WIN } from './constants';
+import { resolveMission } from './missions';
 import type { ProductionType } from './types';
 import { getProduction, getStorage, shuffle } from './utils';
 import village, { type VillageState } from "./village";
+import { createQuest } from './quests';
 
 
 let lastFrame: number;
@@ -32,6 +34,39 @@ export default function update(timestamp: number) {
                 }
             });
 
+            // Advance missions.
+            V.worldmap.forEach(region => {
+                if (!region.state.mission) {
+                    return;
+                }
+
+                const mission = region.state.mission;
+                mission.remainingTime -= delta;
+                if (mission.remainingTime <= 0) {
+                    resolveMission(V, region);
+                }
+            });
+
+            // Advance quests.
+            V.quests.filter(q => q.started).forEach(quest => {
+                if (!quest.remainingTime) {
+                    return;
+                }
+
+                quest.remainingTime -= delta;
+                if (quest.remainingTime <= 0) {
+                    V.resources.wood += quest.reward.wood;
+                    V.resources.stone += quest.reward.stone;
+                    V.resources.iron += quest.reward.iron;
+                    V.resources.food += quest.reward.food;
+                    V.resources.culture += quest.reward.culture;
+
+                    // Replace the finished quest with a new one.
+                    V.quests = V.quests.filter(q => q.id !== quest.id);
+                    V.quests.push(createQuest(quest.level + 1));
+                }
+            });
+
             // Make all buildings and units produce and consume.
             const productionPerMinute = getProduction(V);
             const storage = getStorage(V);

src/utils.ts

@@ -1,5 +1,5 @@
 import units from "./data/units";
-import type { BuildingType, CostType, ProductionType, ResourcesType } from "./types";
+import type { BuildingType, CostType, MissionType, ProductionType, ResourcesType } from "./types";
 import type { VillageState } from "./village";
 
 
@@ -39,7 +39,7 @@ export function getProduction(villageState: VillageState): ResourcesType {
         .reduce(_reduceResources, production);
 
     // Add units production and intake.
-    ['philosopher'].forEach(type => {
+    ['philosopher', 'soldier'].forEach(type => {
         const unit = getUnitSource(type);
         const unitCount = villageState.units[type] || 0;
 
@@ -49,7 +49,7 @@ export function getProduction(villageState: VillageState): ResourcesType {
 
         // Add culture production for Philosophers.
         if (type === 'philosopher') {
-            const outputPerMinute = unit.behavior.culturePerMinute;
+            const outputPerMinute = unit.behavior.culturePerMinute || 0;
             production.culture += outputPerMinute * unitCount;
         }
     });
@@ -88,6 +88,14 @@ export function getUnitSource(unitType: string) {
 }
 
 
+export function getRemainingUnitCount(V: VillageState, unitType: string) {
+    let total = V.units[unitType] || 0;
+    const missions = V.worldmap.filter(r => r.state.mission?.unitType === unitType).map(r => r.state.mission);
+    missions.forEach(m => total -= m?.unitCount || 0);
+    return total;
+}
+
+
 export function getKeysAsNumbers(dict: Object): Array<number> {
     return Object.keys(dict).map(i => parseInt(i)).sort((a, b) => a - b);
 }
@@ -122,6 +130,21 @@ export function shuffle<T>(array: Array<T>): Array<T> {
 }
 
 
+/**
+ * Return a random integer in the range [ min, max ] (min and max can be returned).
+ * @param min integer
+ * @param max integer
+ * @returns integer
+ */
+export function random(min: number, max?: number) {
+    if (max == null) {
+        max = min;
+        min = 0;
+    }
+    return min + Math.floor(Math.random() * (max - min + 1.0));
+}
+
+
 export function getBuildingUpgradeCost(_V: VillageState, building: BuildingType): CostType {
     const level = building.level + 1;
     return building.cost(level);

src/village.ts

@@ -1,9 +1,11 @@
 import { writable } from "svelte/store";
 
 import { createBuilding } from "./create";
+import worldmap from "./data/worldmap";
 import { getTilesAtDistance, Hex } from "./hexgrid";
-import type { BuildingType, ResourcesType } from "./types";
+import type { BuildingType, QuestType, RegionType, ResourcesType } from "./types";
 import { getKeysAsNumbers, shuffle } from "./utils";
+import { createQuest } from "./quests";
 
 
 type Board = {
@@ -21,6 +23,8 @@ export interface VillageState {
     resources: ResourcesType;
     villageTiles: Board;
     outsideTiles: Board;
+    worldmap: RegionType[];
+    quests: QuestType[];
     victory: boolean;
 }
 
@@ -63,6 +67,28 @@ function getInitialOutsideBoard() {
 }
 
 
+function getInitialWorldmap(): RegionType[] {
+    return worldmap.map((r, index) => {
+        const region = r as RegionType;
+        return {
+            ...region,
+            state: {
+                index,
+            },
+        };
+    });
+}
+
+
+function getInitialQuests(): QuestType[] {
+    return [
+        createQuest(1),
+        createQuest(1),
+        createQuest(1),
+    ];
+}
+
+
 function getInitialState() {
     const state: VillageState = {
         buildings: [],
@@ -76,6 +102,8 @@ function getInitialState() {
         },
         villageTiles: getInitialVillageBoard(),
         outsideTiles: getInitialOutsideBoard(),
+        worldmap: getInitialWorldmap(),
+        quests: getInitialQuests(),
         victory: false,
     };
 
@@ -103,7 +131,7 @@ function getInitialState() {
             }
             const newBuilding = createBuilding(type);
             newBuilding.tile = new Hex(x, y);
-            newBuilding.level = newBuilding.type === 'field' ? 1 : 10;
+            newBuilding.level = 1; //newBuilding.type === 'field' ? 1 : 10;
             state.outsideTiles[y][x] = newBuilding.id;
             state.buildings.push(newBuilding);
         });