Give heroes some health, a level and experience points. Make them lose health and gain experience when finishing a quest.

src/constants.ts

@@ -1,7 +1,12 @@
+import type { Resource } from "./types";
+
+
 export const CULTURE_TO_WIN = 20000;
 export const WORLD_MAP_HEIGHT = 9;
 export const WORLD_MAP_WIDTH = 9;
 
+export const RESOURCES: Resource[] = ['wood', 'stone', 'iron', 'food', 'culture'];
+
 // Debug values.
 export const TOWN_HALL_START_LEVEL = 1;
 export const RESOURCE_BUILDINGS_START_LEVEL = 1;

src/create.ts

@@ -1,8 +1,8 @@
 import buildings from "./data/buildings";
 import { NAMES } from "./data/heroes";
 import { Hex } from "./hexgrid";
-import type { BuildingSource, BuildingType, HeroType, QuestType, ResourcesType } from "./types";
-import { getEmptyResources, random, shuffle } from "./utils";
+import type { BuildingSource, BuildingType, HeroType, QuestType, Resource } from "./types";
+import { random, shuffle } from "./utils";
 
 
 let uid = 0;
@@ -37,25 +37,18 @@ 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);
-        }
-    });
+export function createQuest(resource: Resource, level: number): QuestType {
+    const adjustedLevel = Math.ceil((level * level + 3) / 3);
+    const duration = Math.max(1, random(adjustedLevel - 2, adjustedLevel + 2));
+    const reward = Math.max(10, random(
+        Math.round((duration * 5 - level * 10) * (1 + level / 3)),
+        Math.round((duration * 5 + level * 10) * (1 + level / 3)),
+    ));
 
     return {
         id: uid++,
         duration,
+        resource,
         reward,
         level,
         started: false,
@@ -67,5 +60,8 @@ export function createHero(): HeroType {
     return {
         id: uid++,
         name: shuffle(NAMES)[0],
+        health: 100.0,
+        level: 1,
+        experience: 0,
     };
 }

src/data/buildings.ts

@@ -58,7 +58,7 @@ export default [
         },
         description: {
             short: '',
-            long: 'Increases the construction time of buildings by 2,5% per level, and unlocks new buildings.'
+            long: 'Reduces the construction time of buildings by 2,5% per level, and unlocks new buildings.'
         },
     },
     {

src/hud/Hero.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+    import heroes from "../modules/heroes";
+    import type { HeroType } from "../types";
+
+
+    export let hero: HeroType;
+</script>
+
+<div class="hero">
+    <span class="level">{ hero.level }</span>
+    <p class="name">{ hero.name }</p>
+    <p>Exp: { hero.experience } / { heroes.getExperienceNeeded(hero) }</p>
+    <div class="health" style="--health-percent: { Math.floor(hero.health) }%;"></div>
+</div>
+
+<style>
+    .hero {
+        margin: 1em auto;
+        width: 80%;
+    }
+    .health {
+        background-color: hsl(0, 86%, 33%);
+        border: 1px solid hsl(61, 83%, 14%);
+        width: 100%;
+        height: 1em;
+        position: relative;
+    }
+
+    .health::after {
+        content: '';
+        background-color: hsl(120, 41%, 53%);
+        width: 100%;
+        height: 1em;
+        position: absolute;
+        top: 0;
+        left: 0;
+        scale: var(--health-percent) 1;
+        transform-origin: left;
+        transition: scale 400ms ease-in-out;
+    }
+</style>

src/hud/Quests.svelte

@@ -3,7 +3,8 @@
     import { fly } from "svelte/transition";
 
     import moves from "../moves";
-    import { getPrettyTime } from "../utils";
+    import type { Resource, ResourcesType } from "../types";
+    import { getEmptyResources, getPrettyTime } from "../utils";
     import village from "../village";
     import Reward from "./Reward.svelte";
 
@@ -13,6 +14,12 @@
     function startQuest(id: number, heroId: number) {
         moves.startQuest(id, heroId);
     }
+
+    function getRewardAsResources(resource: Resource, reward: number): ResourcesType {
+        const output = getEmptyResources();
+        output[resource] = reward;
+        return output;
+    }
 </script>
 
 <section>
@@ -23,15 +30,19 @@
         out:fly={{ duration: 200, x: 500 }}
         animate:flip={{ duration: 100 }}
     >
-        <p>
-            <Reward reward={ quest.reward } />
+        <p class="reward">
+            <span>
+                <img src="./img/icons/time.png" alt="Duration">
+                { #if quest.started }
+                { getPrettyTime(quest.remainingTime || 0) }
+                { :else }
+                { quest.duration }
+                { /if }
+            </span>
+            <Reward reward={ getRewardAsResources(quest.resource, quest.reward) } />
         </p>
+        { #if !quest.started }
         <p>
-            <img src="./img/icons/time.png" alt="Duration">
-            { #if quest.started }
-            { getPrettyTime(quest.remainingTime || 0) }
-            { :else }
-            { quest.duration }
             { #each availableHeroes as hero }
             <button
                 on:click={ () => startQuest(quest.id, hero.id) }
@@ -41,14 +52,29 @@
             { :else }
             <span>No heroes available</span>
             { /each }
-            { /if }
         </p>
+        { /if }
     </div>
     { /each }
 </section>
 
 <style>
     .quest {
+        border: 1px solid hsl(0, 0%, 20%);
+        border-radius: 1em;
+        margin-bottom: 0.5em;
+        padding: 0 1em;
         text-align: left;
     }
+
+    .quest .reward {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .quest .reward span {
+        display: flex;
+        align-items: center;
+        gap: 0.5em;
+    }
 </style>

src/hud/Units.svelte

@@ -2,6 +2,7 @@
     import units from "../data/units";
     import { getRemainingUnitCount } from "../utils";
     import village from "../village";
+    import Hero from "./Hero.svelte";
 
     $: currentUnits = Object.entries($village.units).map(([type, count]) => {
         const unit = units.find(u => u.type === type);
@@ -18,7 +19,7 @@
 
 <section>
     { #each $village.heroes as hero }
-    <p>{ hero.name }</p>
+    <Hero { hero } />
     { /each }
     { #each currentUnits as unit }
     <p>{ unit.name }: { getRemainingUnitCount($village, unit.type) } / { unit.count }</p>

src/modules/heroes.ts

@@ -0,0 +1,79 @@
+import type { HeroType } from "../types";
+import type { VillageState } from "../village";
+
+
+const LEVELS = [
+    0,
+    10,
+    25,
+    50,
+    100,
+    250,
+    500,
+    1000,
+    2500,
+    5000,
+    10000,
+];
+
+
+export function getHero(V: VillageState, heroId: number) {
+    const hero = V.heroes.find(h => h.id === heroId);
+    if (!hero) {
+        throw new Error(`Cannot find hero with id "${heroId}"`);
+    }
+    return hero;
+}
+
+
+export function getMaxHealth(hero: HeroType): number {
+    return 100.0 + (hero.level - 1) * 5.0;
+}
+
+
+export function hurt(hero: HeroType, damage: number) {
+    hero.health -= damage;
+
+    if (hero.health <= 0) {
+        hero.health = 0.0;
+
+        // Do something to show that the hero is dead.
+    }
+}
+
+
+export function heal(hero: HeroType, health: number) {
+    hero.health -= health;
+
+    const maxHealth = getMaxHealth(hero);
+    if (hero.health > maxHealth) {
+        hero.health = maxHealth;
+    }
+}
+
+
+export function gainExperience(hero: HeroType, xp: number) {
+    hero.experience += xp;
+
+    if (hero.experience >= LEVELS[hero.level]) {
+        hero.experience -= LEVELS[hero.level];
+
+        hero.level++;
+        hero.health = getMaxHealth(hero);
+    }
+}
+
+
+export function getExperienceNeeded(hero: HeroType) {
+    return LEVELS[hero.level];
+}
+
+
+export default {
+    getHero,
+    getExperienceNeeded,
+    getMaxHealth,
+    heal,
+    hurt,
+    gainExperience,
+};

src/moves/startQuest.ts

@@ -1,5 +1,6 @@
 import type { VillageState } from "../village";
 
+
 export default function startQuest(V: VillageState, questId: number, heroId: number) {
     const quest = V.quests.find(q => q.id === questId);
     if (!quest) {

src/types.ts

@@ -26,6 +26,9 @@ export interface ResourcesType extends CostType {
 }
 
 
+export type Resource = keyof ResourcesType;
+
+
 export interface BuildingSource {
     name: string;
     type: string;
@@ -133,13 +136,17 @@ export type RegionType = EmptyRegionType | OasisType | BourgadeType;
 export interface HeroType {
     id: number;
     name: string;
+    level: number;
+    health: number;
+    experience: number;
 }
 
 
 export interface QuestType {
     id: number;
     duration: number;
-    reward: ResourcesType;
+    resource: keyof ResourcesType
+    reward: number;
     level: number;
     started: boolean;
     hero?: number;

src/update.ts

@@ -6,6 +6,7 @@ import { resolveMission } from './missions';
 import type { ProductionType } from './types';
 import { getProduction, getRegionsWithMissions, getStorage, shuffle } from './utils';
 import village, { type VillageState } from "./village";
+import heroes from './modules/heroes';
 
 
 let lastFrame: number;
@@ -56,15 +57,15 @@ export default function update(timestamp: number) {
 
                 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;
+                    V.resources[quest.resource] += quest.reward;
+
+                    const hero = heroes.getHero(V, quest.hero as number);
+                    heroes.hurt(hero, 10.0);
+                    heroes.gainExperience(hero, 2);
 
                     // 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));
+                    const index = V.quests.findIndex(q => q.id === quest.id);
+                    V.quests[index] = createQuest(quest.resource, quest.level + 1);
                 }
             });
 
@@ -120,6 +121,11 @@ export default function update(timestamp: number) {
                 }
             });
 
+            // Heal heroes.
+            V.heroes.forEach(h => {
+                heroes.heal(h, delta / 5000.0)
+            });
+
             // Check if the game is won.
             if (V.resources.culture >= CULTURE_TO_WIN) {
                 V.victory = true;

src/utils.ts

@@ -1,6 +1,6 @@
 import { WORLD_MAP_HEIGHT, WORLD_MAP_WIDTH } from "./constants";
 import units from "./data/units";
-import { WORLDMAP_TYPES, type BuildingType, type CostType, type OasisType, type Point, type ProductionType, type ResourcesType } from "./types";
+import { WORLDMAP_TYPES, type BuildingType, type CostType, type HeroType, type OasisType, type Point, type ProductionType, type ResourcesType } from "./types";
 import type { VillageState } from "./village";
 
 

src/village.ts

@@ -1,11 +1,11 @@
 import { writable } from "svelte/store";
 
+import { RESOURCE_BUILDINGS_START_LEVEL, RESOURCES, TOWN_HALL_START_LEVEL, WORLD_MAP_HEIGHT, WORLD_MAP_WIDTH } from "./constants";
 import { createBuilding, createHero, createQuest } from "./create";
 import worldmap from "./data/worldmap";
 import { getTilesAtDistance, Hex } from "./hexgrid";
 import { WORLDMAP_TYPES, type BuildingType, type CostType, type HeroType, type QuestType, type RegionType, type ResourcesType } from "./types";
-import { distanceBetweenCells, getAdjacentWorldmapCells, getKeysAsNumbers, indexToPoint, shuffle } from "./utils";
-import { RESOURCE_BUILDINGS_START_LEVEL, TOWN_HALL_START_LEVEL, WORLD_MAP_HEIGHT, WORLD_MAP_WIDTH } from "./constants";
+import { distanceBetweenCells, getKeysAsNumbers, indexToPoint, shuffle } from "./utils";
 
 
 type Board = {
@@ -106,11 +106,9 @@ function getInitialWorldmap(): RegionType[] {
 
 
 function getInitialQuests(): QuestType[] {
-    return [
-        createQuest(1),
-        createQuest(1),
-        createQuest(1),
-    ];
+    return RESOURCES.map(r => {
+        return createQuest(r, 1);
+    });
 }