Add a Palace that gives new heroes, and allow different heroes to be sent on quests at the same time.

src/board/BuildingTile.svelte

@@ -18,11 +18,14 @@
     }
 </script>
 
-<div>
-    <p>{ building.name }</p>
-    <p>
+<div class="building">
+    <div class="illustration">
+        <img src="/img/buildings/{ building.type }.png" alt="">
+    </div>
+    <div class="content">
+        <!-- <p>{ building.name }</p> -->
+        <div class="level">
             <button
-            class="level"
                 class:can-upgrade={ canUpgrade }
                 class:is-upgrading={ isUpgrading }
                 class:max-level={ maxLevelReached }
@@ -35,11 +38,37 @@
                 </span>
                 { /if }
             </button>
-    </p>
+        </div>
+    </div>
 </div>
 
 <style>
+    .building {
+        position: relative;
+        height: 100%;
+    }
+
+    .building .illustration,
+    .building .illustration img {
+        width: 100%;
+    }
+
+    .building .content {
+        left: 0;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        width: 100%;
+    }
+
     .level {
+        bottom: -0.4em;
+        left: 50%;
+        position: absolute;
+        translate: -50%;
+    }
+
+    .level button {
         aspect-ratio: 1;
         background-color: hsl(208, 100%, 97%);
         border: 0.4em solid hsl(0, 0%, 45%);
@@ -48,21 +77,26 @@
         box-shadow: 0 0 0.2em black;
         color: hsl(0, 0%, 10%);
         font-size: 1.2em;
+        transition: all 100ms ease-in-out;
     }
 
-    .level span {
+    .level button span {
         font-size: 0.9em;
     }
 
-    .level.can-upgrade {
+    .level button.can-upgrade {
         border-color: hsl(90, 99%, 36%);
     }
 
-    .level.is-upgrading {
+    .level button.is-upgrading {
         border-color: hsl(56, 99%, 43%);
     }
 
-    .level.max-level {
+    .level button.max-level {
         border-color: hsl(209, 70%, 52%);
     }
+
+    .level button:hover {
+        scale: 1.1;
+    }
 </style>

src/board/Tile.svelte

@@ -16,8 +16,10 @@
 <style>
     .hexagon {
         aspect-ratio: 1;
-        background-color: hsl(220, 75%, 75%);
+        border: 0.2em solid;
+        border-color: hsl(220, 75%, 75%);
         border-radius: 100%;
+        box-sizing: border-box;
         cursor: pointer;
         font-size: 1.2vmin;
         height: 12em;
@@ -27,11 +29,11 @@
     }
 
     .hexagon:hover {
-        background-color: hsl(60, 75%, 75%);
+        border-color: hsl(60, 75%, 75%);
     }
 
     .hexagon:active {
-        background-color: hsl(60, 75%, 50%);
+        border-color: hsl(60, 75%, 50%);
     }
 
     .hexagon .content {

src/create.ts

@@ -1,6 +1,8 @@
 import buildings from "./data/buildings";
+import { NAMES } from "./data/heroes";
 import { Hex } from "./hexgrid";
-import type { BuildingSource, BuildingType } from "./types";
+import type { BuildingSource, BuildingType, HeroType, QuestType, ResourcesType } from "./types";
+import { getEmptyResources, random, shuffle } from "./utils";
 
 
 let uid = 0;
@@ -33,3 +35,37 @@ export function createBuilding(buildingType: string): BuildingType {
         },
     };
 }
+
+
+export function createQuest(level: number): QuestType {
+    const reward = getEmptyResources();
+    const adjustedLevel = level * level + 3;
+    const duration = random(adjustedLevel - 2, adjustedLevel + 2);
+    Object.keys(reward).forEach(r => {
+        const resource = r as keyof ResourcesType;
+        reward[resource] = random(
+            Math.round((duration * 5 - level * 10) * (1 + level / 3)),
+            Math.round((duration * 5 + level * 10) * (1 + level / 3)),
+        );
+
+        if (resource === 'culture') {
+            reward[resource] = Math.round(reward[resource] / 20);
+        }
+    });
+
+    return {
+        id: uid++,
+        duration,
+        reward,
+        level,
+        started: false,
+    };
+}
+
+
+export function createHero(): HeroType {
+    return {
+        id: uid++,
+        name: shuffle(NAMES)[0],
+    };
+}

src/data/buildings.ts

@@ -1,3 +1,4 @@
+import { createHero } from "../create";
 import type { BuildingType } from "../types";
 import { getEmptyResources } from "../utils";
 import type { VillageState } from "../village";
@@ -31,10 +32,10 @@ export default [
         maxLevel: 20,
         cost: (level: number) => {
             return {
-                wood: level * 10,
-                stone: level * 10,
-                iron: level * 10,
-                food: 0,
+                wood: getResourceBuildingCost(level, 10),
+                stone: getResourceBuildingCost(level, 15),
+                iron: getResourceBuildingCost(level, 20),
+                food: getResourceBuildingCost(level, 5),
             };
         },
         timeToBuild: getStandardTimeToBuild,
@@ -47,6 +48,7 @@ export default [
                     'food': 100,
                 }
             },
+            constructionTimeReductionPerLevel: 0.025,
         },
     },
     {
@@ -257,4 +259,34 @@ export default [
             },
         },
     },
+    {
+        type: 'palace',
+        name: 'Palace',
+        maxLevel: 20,
+        unique: true,
+        cost: (level: number) => {
+            return {
+                wood: getStorageBuildingCost(level, 200),
+                stone: getStorageBuildingCost(level, 240),
+                iron: getStorageBuildingCost(level, 110),
+                food: getStorageBuildingCost(level, 70),
+            };
+        },
+        timeToBuild: getStandardTimeToBuild,
+        behavior: {
+            production: (V: VillageState, self: BuildingType) => {
+                const prod = getEmptyResources();
+                prod.food = self.level * -30;
+                return prod;
+            },
+            triggers: {
+                onLevelUp: (V: VillageState, self: BuildingType) => {
+                    if (self.level === 10 || self.level === 20) {
+                        // Create a new hero.
+                        V.heroes.push(createHero());
+                    }
+                },
+            },
+        },
+    },
 ];

src/data/heroes.ts

@@ -0,0 +1,12 @@
+export const NAMES = [
+    'Adosinda',
+    'Garsendis',
+    'Amalfriede',
+    'Seda',
+    'Amalgard',
+    'Samocenus',
+    'Licno',
+    'Vercombogious',
+    'Elusconos',
+    'Excingullus',
+];

src/hud/BuildingCreator.svelte

@@ -4,7 +4,7 @@
     import moves from "../moves";
     import showBuildingCreator from "../stores/showBuildingCreator";
     import { canPayBuildingCost } from "../utils";
-    import village from "../village";
+    import village, { type VillageState } from "../village";
     import Cost from "./Cost.svelte";
 
     function close() {
@@ -22,7 +22,10 @@
         }
     }
 
-    const constructible = buildings.filter(b => !b.autoBuilt).map(b =>{
+    $: constructible = buildings
+        .filter(b => !b.autoBuilt)
+        .filter(b => !(b.unique && $village.buildings.some(b2 => b2.type === b.type)))
+        .map(b =>{
             const building = createBuilding(b.type);
             building.level = 0;
             return building;

src/hud/Quests.svelte

@@ -7,10 +7,10 @@
     import { flip } from "svelte/animate";
 
 
-    $: isQuestStarted = $village.quests.some(q => q.started);
+    $: availableHeroes = $village.heroes.filter(h => !$village.quests.some(q => q.hero === h.id));
 
-    function startQuest(id: number) {
-        moves.startQuest(id);
+    function startQuest(id: number, heroId: number) {
+        moves.startQuest(id, heroId);
     }
 </script>
 
@@ -31,12 +31,15 @@
             { Math.ceil((quest.remainingTime || 0) / 1000) }
             { :else }
             { quest.duration }
+            { #each availableHeroes as hero }
             <button
-                on:click={ () => startQuest(quest.id) }
-                disabled={ isQuestStarted }
+                on:click={ () => startQuest(quest.id, hero.id) }
             >
-                Start quest
+                Send { hero.name }
             </button>
+            { :else }
+            <span>No heroes available</span>
+            { /each }
             { /if }
         </p>
     </div>

src/hud/Units.svelte

@@ -17,6 +17,9 @@
 </script>
 
 <section>
+    { #each $village.heroes as hero }
+    <p>{ hero.name }</p>
+    { /each }
     { #each currentUnits as unit }
     <p>{ unit.name }: { getRemainingUnitCount($village, unit.type) } / { unit.count }</p>
     { /each }

src/logic.ts

@@ -0,0 +1,14 @@
+import type { BuildingSource } from "./types";
+import type { VillageState } from "./village";
+
+
+export function getTimeToBuild(V: VillageState, building: BuildingSource, level: number): number {
+    const townhall = V.buildings.find(b => b.type === 'townhall');
+    if (!townhall) {
+        throw new Error("Unable to find the Town hall");
+    }
+
+    const reduction = townhall.level * (townhall.behavior.constructionTimeReductionPerLevel || 0);
+    const baseBuildingTime = building.timeToBuild(level) * 1000;
+    return baseBuildingTime - (baseBuildingTime * reduction);
+}

src/moves/build.ts

@@ -1,5 +1,6 @@
 import { createBuilding, getBuildingSource } from "../create";
 import type { Hex } from "../hexgrid";
+import { getTimeToBuild } from "../logic";
 import { DEFAULT_TILE, type VillageState } from "../village";
 
 
@@ -29,7 +30,7 @@ export default function build(V: VillageState, buildingType: string, tile: Hex)
     newBuilding.tile = tile;
     newBuilding.level = 0;
     newBuilding.state.upgrade.isUpgrading = true;
-    newBuilding.state.upgrade.remainingTime = 1000 * newBuilding.timeToBuild(newBuilding.level + 1);
+    newBuilding.state.upgrade.remainingTime = getTimeToBuild(V, building, 1);
 
     V.buildings.push(newBuilding);
     V.villageTiles[tile.y][tile.x] = newBuilding.id;

src/moves/startQuest.ts

@@ -1,12 +1,23 @@
 import type { VillageState } from "../village";
 
-export default function startQuest(V: VillageState, questId: number) {
+export default function startQuest(V: VillageState, questId: number, heroId: number) {
     const quest = V.quests.find(q => q.id === questId);
     if (!quest) {
         return false;
     }
 
+    const hero = V.heroes.find(h => h.id === heroId);
+    if (!hero) {
+        return false;
+    }
+
+    // Make sure the hero is not already on a quest.
+    if (V.quests.some(q => q.hero === heroId)) {
+        return false;
+    }
+
     quest.started = true;
+    quest.hero = heroId;
     quest.remainingTime = quest.duration * 1000;
 
     return true;

src/moves/upgradeBuilding.ts

@@ -1,3 +1,4 @@
+import { getTimeToBuild } from "../logic";
 import { canPayBuildingCost, getBuildingUpgradeCost } from "../utils";
 import type { VillageState } from "../village";
 
@@ -28,7 +29,7 @@ export default function upgradeBuilding(V: VillageState, buildingId: number) {
     V.resources.food -= cost.food;
 
     building.state.upgrade.isUpgrading = true;
-    building.state.upgrade.remainingTime = 1000 * building.timeToBuild(building.level + 1);
+    building.state.upgrade.remainingTime = getTimeToBuild(V, building, building.level + 1);
 
     return true;
 }

src/types.ts

@@ -24,6 +24,7 @@ export interface BuildingSource {
     name: string;
     type: string;
     autoBuilt?: boolean;
+    unique?: boolean;
     maxLevel: number;
     cost: (level: number) => CostType;
     timeToBuild: (level: number) => number;
@@ -34,6 +35,10 @@ export interface BuildingSource {
             type: string;
             recruitmentTime: Function;
         };
+        constructionTimeReductionPerLevel?: number;
+        triggers?: {
+            onLevelUp?: Function;
+        };
     };
 }
 
@@ -100,6 +105,7 @@ export type RegionType = OasisType | BourgadeType;
 
 export interface HeroType {
     id: number;
+    name: string;
 }
 
 
@@ -109,5 +115,6 @@ export interface QuestType {
     reward: ResourcesType;
     level: number;
     started: boolean;
+    hero?: number;
     remainingTime?: number;
 }

src/update.ts

@@ -31,6 +31,7 @@ export default function update(timestamp: number) {
                 if (b.state.upgrade.remainingTime <= 0) {
                     b.level++;
                     b.state.upgrade.isUpgrading = false;
+                    b.behavior.triggers?.onLevelUp?.(V, b);
                 }
             });
 

src/village.ts

@@ -1,11 +1,10 @@
 import { writable } from "svelte/store";
 
-import { createBuilding } from "./create";
+import { createBuilding, createHero, createQuest } from "./create";
 import worldmap from "./data/worldmap";
 import { getTilesAtDistance, Hex } from "./hexgrid";
-import type { BuildingType, QuestType, RegionType, ResourcesType } from "./types";
+import type { BuildingType, HeroType, QuestType, RegionType, ResourcesType } from "./types";
 import { getKeysAsNumbers, shuffle } from "./utils";
-import { createQuest } from "./quests";
 
 
 type Board = {
@@ -24,6 +23,7 @@ export interface VillageState {
     villageTiles: Board;
     outsideTiles: Board;
     worldmap: RegionType[];
+    heroes: HeroType[];
     quests: QuestType[];
     victory: boolean;
 }
@@ -103,6 +103,9 @@ function getInitialState() {
         villageTiles: getInitialVillageBoard(),
         outsideTiles: getInitialOutsideBoard(),
         worldmap: getInitialWorldmap(),
+        heroes: [
+            createHero(),
+        ],
         quests: getInitialQuests(),
         victory: false,
     };
@@ -131,7 +134,7 @@ function getInitialState() {
             }
             const newBuilding = createBuilding(type);
             newBuilding.tile = new Hex(x, y);
-            newBuilding.level = 1; //newBuilding.type === 'field' ? 1 : 10;
+            newBuilding.level = 20; //newBuilding.type === 'field' ? 1 : 10;
             state.outsideTiles[y][x] = newBuilding.id;
             state.buildings.push(newBuilding);
         });