there are 4 ticks per second, so 0.25 per second base gives 1 point per second. this is to simplify game balance calculations

news.txt

@@ -1 +1 @@
-I'm working on it...
+This is alpha version. Saves can lose data across updates.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "adventurers-guild",
-  "version": "0.14.2",
+  "version": "0.15.4",
   "private": true,
   "scripts": {
     "dev": "vite",

public/data/quests.json

@@ -0,0 +1,106 @@
+{
+  "ranks": {
+    "A": [
+      {
+        "title": "Ogre king",
+        "text": "Ogres have chosen a new king through democratic vote. They all voted for the strongest ogre."
+      },
+      {
+        "title": "Devilish dungeon",
+        "text": "New dungeon was discovered. It needs to be mapped and explored so lower rank adventurers can enter."
+      },
+      {
+        "title": "Eater of Worlds",
+        "text": "A giant worm emerged from the ground and appears to be consuming the ground itself."
+      }
+    ],
+    "B": [
+      {
+        "title": "Undead horde",
+        "text": "Due to the spillage of necromancy potion at nearby graveyard we now have an undead army on our doorstep."
+      },
+      {
+        "title": "Runaway prisoner",
+        "text": "During the last prison guard strike a prisoner managed to escape. Bring them back to their cell."
+      },
+      {
+        "title": "The aristocrats",
+        "text": "Royalty wants an escort for one of their carriages."
+      }
+    ],
+    "C": [
+      {
+        "title": "Scratchy, the butcher",
+        "text": "Scratchy turned evil and is terrorizing its victims. Put a stop to it!"
+      },
+      {
+        "title": "Hobgnoblin subjugation",
+        "text": "Gnoblins evolved and are back for vengeance."
+      },
+      {
+        "title": "Holy",
+        "text": "Gnoblins summoned their machine god and it started going haywire on everything around it. Destroy it!"
+      }
+    ],
+    "D": [
+      {
+        "title": "Caravan escort",
+        "text": "Escort a merchant caravan."
+      },
+      {
+        "title": "Rare ore",
+        "text": "Obtain laudanium ore for town's blacksmith."
+      },
+      {
+        "title": "Demonic pests!",
+        "text": "Clear the fields from cabbage imps."
+      }
+    ],
+    "E": [
+      {
+        "title": "Gnoblin subjugation",
+        "text": "Kill 3 gnoblins."
+      },
+      {
+        "title": "Phantom menace",
+        "text": "Exorcise ghosts out of someone's apartment."
+      },
+      {
+        "title": "Scratchy in peril",
+        "text": "Get Scratchy the cat from the tree safe onto the ground."
+      }
+    ],
+    "F": [
+      {
+        "title": "Frog Frenzy",
+        "text": "Kill 10 demon frogs."
+      },
+      {
+        "title": "Rats!",
+        "text": "Get rid of the rats from someone's basement."
+      },
+      {
+        "title": "Herb gathering",
+        "text": "Collect medicinal herbs."
+      },
+      {
+        "title": "Big pile of rubble",
+        "text": "Tavern collapsed. Again. Help clean up the debris."
+      }
+    ],
+    "S": [
+      {
+        "title": "The Demon King",
+        "text": "Demon King has awoken and is a threat to whole existence. Heroes needed."
+      },
+      {
+        "title": "Scratchy, Destruction Incarnate",
+        "text": "Scratchy was reborn as a machine of pure destruction and needs to be stopped."
+      },
+      {
+        "title": "Jiggly Jungle",
+        "text": "A jungle south began rapidly expanding and experts think arson is our only option."
+      }
+    ]
+  }
+}

public/data/quests/RankA.json

@@ -1,14 +0,0 @@
-[
-  {
-    "title": "Ogre king",
-    "text": "Ogres have chosen a new king through democratic vote. They all voted for the strongest ogre."
-  },
-  {
-    "title": "Devilish dungeon",
-    "text": "New dungeon was discovered. It needs to be mapped and explored so lower rank adventurers can enter."
-  },
-  {
-    "title": "Eater of Worlds",
-    "text": "A giant worm emerged from the ground and appears to be consuming the ground itself."
-  }
-]

public/data/quests/RankB.json

@@ -1,14 +0,0 @@
-[
-  {
-    "title": "Undead horde",
-    "text": "Due to the spillage of necromancy potion at nearby graveyard we now have an undead army on our doorstep."
-  },
-  {
-    "title": "Runaway prisoner",
-    "text": "During the last prison guard strike a prisoner managed to escape. Bring them back to their cell."
-  },
-  {
-    "title": "The aristocrats",
-    "text": "Royalty wants an escort for one of their carriages."
-  }
-]

public/data/quests/RankC.json

@@ -1,14 +0,0 @@
-[
-  {
-    "title": "Scratchy, the butcher",
-    "text": "Scratchy turned evil and is terrorizing its victims. Put a stop to it!"
-  },
-  {
-    "title": "Hobgnoblin subjegation",
-    "text": "Gnoblins evolved and are back for vengeance."
-  },
-  {
-    "title": "Holy",
-    "text": "Gnoblins summoned their machine god and it started going haywire on everything around it. Destroy it!"
-  }
-]

public/data/quests/RankD.json

@@ -1,14 +0,0 @@
-[
-  {
-    "title": "Caravan escort",
-    "text": "Escort a merchant caravan."
-  },
-  {
-    "title": "Rare ore",
-    "text": "Obtain laudanium ore for town's blacksmith."
-  },
-  {
-    "title": "Demonic pests!",
-    "text": "Clear the fields from cabbage imps."
-  }
-]

public/data/quests/RankE.json

@@ -1,14 +0,0 @@
-[
-  {
-    "title": "Gnoblin subjegation",
-    "text": "Kill 3 gnoblins."
-  },
-  {
-    "title": "Phantom menace",
-    "text": "Exorcise ghosts out of someone's apartment."
-  },
-  {
-    "title": "Scratchy in peril",
-    "text": "Get Scratchy the cat from the tree safe onto the ground."
-  }
-]

public/data/quests/RankF.json

@@ -1,18 +0,0 @@
-[
-  {
-    "title": "Frog Frenzy",
-    "text": "Kill 10 demon frogs."
-  },
-  {
-    "title": "Rats!",
-    "text": "Get rid of the rats from someone's basement."
-  },
-  {
-    "title": "Herb gathering",
-    "text": "Collect medicinal herbs."
-  },
-  {
-    "title": "Big pile of rubble",
-    "text": "Tavern collapsed. Again. Help clean up the debris."
-  }
-]

public/data/quests/RankS.json

@@ -1,14 +0,0 @@
-[
-  {
-    "title": "The Demon King",
-    "text": "Demon King has awoken and is a threat to whole existence. Heroes needed."
-  },
-  {
-    "title": "Scratchy, Destruction Incarnate",
-    "text": "Scratchy was reborn as a machine of pure destruction and needs to be stopped."
-  },
-  {
-    "title": "Jiggly Jungle",
-    "text": "A jungle south began rapidly expanding and experts think arson is our only option."
-  }
-]

src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {RouterLink, RouterView} from 'vue-router'
+// @ts-ignore
 import {version} from "@/../package.json";
 </script>
 
@@ -48,17 +49,24 @@ import {version} from "@/../package.json";
     :guild="guild"
     :adventurers="adventurers"
     :quests="missives"
-    :adventurerForHire="adventurerForHire"
+    :adventurersForHire="adventurersForHire"
     :news="news"
     @finalizeQuest="finalizeQuest($event)"
-    @recruitActionTaken="recruitAction($event)"
+    @hireAdventurer="recruitAdventurer($event)"
+    @dismissAdventurer="dismissRecruit($event)"
+    @findNewRecruit="() => {
+      const newAdventurerForHire = getNewAdventurerForHire(Object.values(adventurersDatabase), Object.values(adventurers));
+      if (newAdventurerForHire === null) return;
+      adventurersForHire[newAdventurerForHire.id] = newAdventurerForHire;
+      setNextRecruitArrival(new Date().getTime())
+    }"
   />
 </template>
 
 <script lang="ts">
 import {defineComponent} from "vue";
 import {Adventurer} from "@/classes/Adventurer";
-import {getQuestWithRewards, Quest} from "@/classes/Quest";
+import {getQuestWithRewards, Quest} from "@/classes/quests/Quest";
 import {Guild} from "@/classes/Guild";
 import {getFromString, QuestRank} from "@/classes/QuestRank";
 import {
@@ -75,6 +83,9 @@ import {getNewAdventurerForHire} from "@/classes/Recruitment";
 import QuestExpUpgrade from "@/classes/guildUpgrades/QuestExpUpgrade";
 import QuestGoldUpgrade from "@/classes/guildUpgrades/QuestGoldUpgrade";
 import AutoFinishQuestsUpgrade from "@/classes/guildUpgrades/AutoFinishQuestsUpgrade";
+import RecruitmentCapacityUpgrade from "@/classes/guildUpgrades/RecruitmentCapacityUpgrade";
+import QuestPhase from "@/classes/quests/QuestPhase";
+import {PhaseType} from "@/classes/quests/QuestPhaseType";
 
 export default defineComponent({
   name: "GuildView",
@@ -94,67 +105,81 @@ export default defineComponent({
       E: null as null | number,
       F: null as null | number,
     } as { [key: string]: null | number },
-    lastRecruitHandled: null as null | number,
+    adventurersForHire: {} as { [key: string]: Adventurer },
-    adventurerForHire: null as Adventurer | null,
+    adventurersDatabase: {} as { [key: string]: Adventurer },
-    adventurersDatabase: {} as Array<Adventurer>,
     allAdventurers: {} as { [key: string]: Adventurer },
     adventurers: {} as { [key: string]: Adventurer },
     quests: {} as { [key: string]: { [key: string]: Quest } },
     missives: [] as Array<Quest>,
+    nextRecruitArrival: new Date() as Date,
+    tickCounter: 0 as number,
   }),
+  computed: {
+    recruitmentSlotsFull(): boolean {
+      return Object.keys(this.adventurersForHire).length >= this.guild.recruitmentCapacity.getRecruitmentCapacity();
+    },
+  },
   methods: {
     async updateMissives() {
       for (const missive of this.missives) {
         if (missive.adventurers.length < missive.maxAdventurers) {
-          missive.progressPoints = 0;
+          missive.phases.forEach(phase => {
+            phase.points = 0;
+          });
           continue;
         }
-        for (const adventurerId in missive.adventurers) {
+        for (const phase of missive.phases) {
-          const adventurer = missive.adventurers[adventurerId];
+          if (phase.completed()) continue;
-          const attack = adventurer.getAttack();
+          phase.tick(missive.adventurers);
-          adventurer.busy = true;
+          break;
-          missive.progressPoints = Math.min(missive.progressPoints + attack, missive.maxProgress);
         }
         if (
-          missive.progressPoints >= missive.maxProgress
+          missive.isCompleted()
           && this.guild.autoFinishQuestsUpgrade.getRanksToAutoFinishQuestsIn().includes(missive.rank)
         ) {
           this.finalizeQuest(missive);
         }
       }
-
-
     },
-    async checkForNewRecruit(currentTimestamp: number) {
+    async checkForNewRecruit(currentTimestamp: number, cooldownModifier: number = 1) {
+      const recruitCapacity = this.guild.recruitmentCapacity.getRecruitmentCapacity();
 
-      if (this.lastRecruitHandled == null) {
+      if (Object.keys(this.adventurersForHire).length >= recruitCapacity) return;
-        this.lastRecruitHandled = 0;
+
-      }
+      const deltaTime = this.nextRecruitArrival.getTime() - currentTimestamp;
+      if (deltaTime > 0) return; // not yet time for a new recruit
 
       if (Object.keys(this.adventurers).length <= 0) {
-        this.adventurerForHire = this.adventurersDatabase[0];
+        const firstAdventurer = this.adventurersDatabase["aldek"];
+        this.adventurersForHire[firstAdventurer.id] = firstAdventurer;
+        this.setNextRecruitArrival(currentTimestamp, cooldownModifier)
+        return;
       }
 
-      if (currentTimestamp - this.lastRecruitHandled >= 1000 * 60 * 30 && this.adventurerForHire == null) {
+      const newAdventurerForHire = getNewAdventurerForHire(Object.values(this.adventurersDatabase), Object.values(this.adventurers));
-        this.adventurerForHire = getNewAdventurerForHire(this.adventurersDatabase);
+      if (newAdventurerForHire === null) return;
-      }
+      this.adventurersForHire[newAdventurerForHire.id] = newAdventurerForHire;
+
+      this.setNextRecruitArrival(currentTimestamp, cooldownModifier)
     },
-    recruitAction(adventurer: Adventurer | null): void {
+    setNextRecruitArrival(currentTimestamp: number, cooldownModifier: number = 1): void {
-      this.lastRecruitHandled = Number(new Date());
+      const timerValue = ((5 + (Math.random() * 15)) * 60 * 1000) * cooldownModifier;
-      this.adventurerForHire = null;
+      this.nextRecruitArrival = new Date(currentTimestamp + timerValue);
-      if (adventurer === null) return;
+    },
-
+    recruitAdventurer(adventurer: Adventurer): void {
+      if (adventurer == null) return;
+      if (this.recruitmentSlotsFull) this.setNextRecruitArrival(new Date().getTime())
       this.adventurers[adventurer.id] = adventurer;
-      for (const id in this.adventurersDatabase) {
+      delete this.adventurersForHire[adventurer.id];
-        const databaseAdventurer = this.adventurersDatabase[id];
+      delete this.adventurersDatabase[adventurer.id];
-        if (databaseAdventurer.id === adventurer.id) {
+    },
-          this.adventurersDatabase.splice(Number(id), 1);
+    dismissRecruit(adventurer: Adventurer): void {
-          break;
+      if (adventurer == null) return;
-        }
+      if (this.recruitmentSlotsFull) this.setNextRecruitArrival(new Date().getTime())
-      }
+      if (this.adventurersForHire[adventurer.id] == null) return;
+      delete this.adventurersForHire[adventurer.id];
     },
     finalizeQuest(missive: Quest) {
-      missive.progressPoints = 0;
       this.guild.gold += missive.goldReward;
       for (const adventurerId in missive.adventurers) {
         const adventurer = missive.adventurers[adventurerId];
@@ -176,7 +201,7 @@ export default defineComponent({
       return getQuestWithRewards(questsForRank[randomIdString], this.guild.expModifier.getModifier(), this.guild.goldModifier.getModifier());
     },
     createMissive(questToAdd: Quest) {
-      const quest = JSON.parse(JSON.stringify(questToAdd));
+      const quest = Quest.deserialize(questToAdd.serialize());
       quest.id = Math.random().toString(16).slice(2).toString();
       this.missives.push(quest);
     },
@@ -190,6 +215,9 @@ export default defineComponent({
       if (saveData.guild.adventurerCapacity) {
         guildUpgrades.adventurerCapacity = new AdventurerCapacityUpgrade(saveData.guild.adventurerCapacity.level);
       }
+      if (saveData.guild.recruitmentCapacity) {
+        guildUpgrades.recruitmentCapacity = new RecruitmentCapacityUpgrade(saveData.guild.recruitmentCapacity.level);
+      }
       if (saveData.guild.expModifier) {
         guildUpgrades.expModifier = new QuestExpUpgrade(saveData.guild.expModifier.level);
       }
@@ -230,9 +258,28 @@ export default defineComponent({
 
       if (Array.isArray(saveData.missives)) {
         for (const data of saveData.missives) {
-          const quest = new Quest(data.id, getFromString(data.rank), data.title, data.text, data.maxProgress, data.expReward, data.goldReward);
+          const phases: Array<QuestPhase> = [];
-          quest.progressPoints = data.progressPoints;
+          if (Array.isArray(data.phases) && data.phases.length > 0) {
-          if (data.adventurers.length > 0) {
+            for (const phaseData of data.phases) {
+              const types: Array<PhaseType> = [];
+              if (Array.isArray(phaseData.types)) {
+                for (const type of phaseData.types) {
+                  try {
+                    const phaseType = PhaseType[type as keyof typeof PhaseType];
+                    types.push(phaseType);
+                  } catch (e) {
+                    console.error("Error creating phase type", e);
+                  }
+                }
+              }
+              const phase = new QuestPhase(types, phaseData.maxPoints, phaseData.points);
+              phases.push(phase);
+            }
+          } else {
+            continue; // skip this missive if it has no phases
+          }
+          const quest = new Quest(data.id, getFromString(data.rank), data.title, data.text, phases, data.expReward, data.goldReward);
+          if (Array.isArray(data?.adventurers)) {
             for (const adventurer of data.adventurers) {
               const adventurerId = adventurer.id;
               if (this.adventurers[adventurerId] == null) continue;
@@ -243,17 +290,33 @@ export default defineComponent({
         }
       }
 
-      this.lastRecruitHandled = saveData.lastRecruitAction ?? 0;
+      this.nextRecruitArrival = saveData.nextRecruitArrival ? new Date(saveData.nextRecruitArrival) : new Date();
 
-      if (saveData.adventurerForHireId != null) {
+      const recruits = {} as { [key: string]: Adventurer };
-        for (const id in this.adventurersDatabase) {
+
-          const adventurer = this.adventurersDatabase[id];
+      for (const id in saveData.adventurersForHire) {
-          if (adventurer.id === saveData.adventurerForHireId) {
+        const data = saveData.adventurersForHire[id];
-            this.adventurerForHire = adventurer;
+        let portrait: string = "";
-            return;
+
-          }
+        const adventurer = this.allAdventurers[data.id];
+        if (adventurer) {
+          portrait = adventurer.portrait;
+        }
+
+        try {
+          recruits[data.id] = new Adventurer(
+            data.id,
+            data.name,
+            portrait,
+            data.attackExponent ?? 1.1,
+            data.level ?? 1,
+            data.exp ?? 0,
+            data.prestige ?? 0,
+          );
+        } catch (e) {
         }
       }
+      this.adventurersForHire = recruits;
     },
     async updateNews() {
       const result = await fetch("https://raw.githubusercontent.com/YouHaveTrouble/GuildMaster/master/news.txt").catch(() => {
@@ -287,7 +350,7 @@ export default defineComponent({
     });
 
     this.quests = promises[0] as { [key: string]: { [key: string]: Quest } };
-    this.adventurersDatabase = promises[1] as Array<Adventurer>;
+    this.adventurersDatabase = promises[1] as { [key: string]: Adventurer };
     for (const adventurerId in this.adventurersDatabase) {
       const adventurer = this.adventurersDatabase[adventurerId];
       this.allAdventurers[adventurer.id] = new Adventurer(adventurer.id, adventurer.name, adventurer.portrait, adventurer.attackExponent, adventurer.level, adventurer.exp, adventurer.prestige);
@@ -297,6 +360,17 @@ export default defineComponent({
     this.loadGame();
     this.adventurersDatabase = removeAlreadyHiredAdventurers(this.adventurersDatabase, this.adventurers);
 
+    if (Object.keys(this.adventurers).length > 0 && Object.keys(this.adventurersForHire).length < this.guild.recruitmentCapacity.getRecruitmentCapacity()) {
+      // check if more time passed than next recruit arrival and simulate next recruit arrivals up to now
+      const now = new Date();
+      if (this.nextRecruitArrival.getTime() < now.getTime()) {
+        const slotsLeft = this.guild.recruitmentCapacity.getRecruitmentCapacity() - Object.keys(this.adventurersForHire).length;
+        for (let i = 0; i < slotsLeft; i++) {
+          await this.checkForNewRecruit(this.nextRecruitArrival.getTime());
+        }
+      }
+    }
+
     // Wait a second to make sure at least most images load in behind the loader
     setTimeout(() => {
       this.loading = false;
@@ -308,17 +382,18 @@ export default defineComponent({
         guild: this.guild,
         missives: this.missives,
         lastQuestGot: this.lastQuestGot,
-        lastRecruitAction: this.lastRecruitHandled,
+        adventurersForHire: this.adventurersForHire ?? null,
-        adventurerForHireId: this.adventurerForHire?.id ?? null,
+        nextRecruitArrival: this.nextRecruitArrival,
       }));
     }, 10 * 1000));
 
     this.gameTickTask = Number(setInterval(() => {
+      this.tickCounter++;
       this.updateMissives();
 
       const now = Number(new Date());
 
-      this.checkForNewRecruit(now);
+      if (this.tickCounter % 8 === 0) this.checkForNewRecruit(now);
 
       for (const id in this.lastQuestGot) {
         const lastTime = this.lastQuestGot[getFromString(id as QuestRank)];

src/GameData.ts

@@ -1,25 +1,30 @@
 import {Guild} from "@/classes/Guild";
 import {Adventurer} from "@/classes/Adventurer";
-import {Quest} from "@/classes/Quest";
+import {Quest} from "@/classes/quests/Quest";
 import {getFromString, QuestRank} from "@/classes/QuestRank";
+import QuestPhase from "@/classes/quests/QuestPhase";
+import {PhaseType} from "@/classes/quests/QuestPhaseType";
 
 export class GameData {
   guild: Guild;
   adventurers: { [key: string]: Adventurer };
   missives: Array<Quest>;
   lastQuestGot: { [key: string]: null | number };
-  lastRecruitAction: null | number;
+  adventurersForHire: {[key: string]: Adventurer};
-  adventurerForHireId: string | null;
+  nextRecruitArrival: Date;
 
   constructor(
     data: any,
   ) {
     this.guild = data.guild ?? new Guild(1, 0);
-    this.adventurers = data.adventurers ?? {} as { [key: string]: Adventurer };
+    this.adventurers = data.adventurers ?? {};
     this.missives = data.missives ?? [] as Array<Quest>;
-    this.lastQuestGot = data.lastQuestGot ?? {} as { [key: string]: null | number };
+    this.lastQuestGot = data.lastQuestGot ?? {};
-    this.lastRecruitAction = data.lastRecruitAction ?? null;
+    this.adventurersForHire = data.adventurersForHire ?? {};
-    this.adventurerForHireId = data.adventurerForHireId ?? null;
+    this.nextRecruitArrival = data.nextRecruitArrival ? new Date(data.nextRecruitArrival) : new Date();
+    if (isNaN(this.nextRecruitArrival.getTime())) {
+      this.nextRecruitArrival = new Date();
+    }
   }
 }
 
@@ -39,13 +44,20 @@ export function saveGame(
     adventurers[adventurerId] = adventurer;
   }
 
+  const adventurersForHire = {} as { [key: string]: any };
+  for (const adventurerId in data.adventurersForHire) {
+    const adventurer: {[key: string]: any} = JSON.parse(JSON.stringify(data.adventurersForHire[adventurerId]));
+    delete adventurer.portrait;
+    adventurersForHire[adventurerId] = adventurer;
+  }
+
   window.localStorage.setItem("savedGame", JSON.stringify({
     guild: data.guild,
     adventurers: adventurers,
     missives: data.missives,
     lastQuestGot: data.lastQuestGot,
-    lastRecruitAction: data.lastRecruitAction,
+    adventurersForHire: adventurersForHire,
-    adventurerForHireId: data.adventurerForHireId,
+    nextRecruitArrival: data.nextRecruitArrival.getTime(),
   }));
 }
 
@@ -68,64 +80,102 @@ export async function loadAvailableQuests(): Promise<{ [key: string]: { [key: st
     F: {} as { [key: string]: Quest },
   } as { [key: string]: { [key: string]: Quest } };
 
-  for (const rank in quests) {
+  const questsResponse = await fetch(`data/quests.json`);
-    const response = await fetch(`data/quests/Rank${rank}.json`);
+
-    if (response.status !== 200) {
+  if (questsResponse.status !== 200) {
     console.error("Failed to load quests");
     alert("Failed to load quests. Please try refreshing the page.");
     return quests;
   }
-    const questData = await response.json();
 
-    let id = 0;
+  const questsData = await questsResponse.json();
-    for (const quest of questData) {
+
-      id++;
+  for (const rank of Object.keys(questsData.ranks)) {
-      quests[rank.toString()][id] = new Quest(
+    const questRank = getFromString(rank as keyof typeof QuestRank);
-        id.toString(),
+    if (!questRank) {
-        getFromString(rank as QuestRank),
+      console.error(`Invalid quest rank: ${rank}`);
+      continue;
+    }
+    const questRankData = questsData.ranks[questRank];
+
+    for (const quest of questRankData) {
+      const id = hash(JSON.stringify(quest));
+
+      const phases = [] as Array<QuestPhase>;
+      if (Array.isArray(quest?.phases)) {
+        for (const phase of quest.phases) {
+          const phaseTypes: PhaseType[] = [];
+          if (Array.isArray(phase?.types)) {
+            for (const type of phase.types) {
+              const phaseType = PhaseType[type as keyof typeof PhaseType];
+              if (!phaseType) {
+                console.error(`Invalid phase type: ${type}`);
+                continue;
+              }
+              phaseTypes.push(phaseType);
+            }
+          }
+          phases.push(new QuestPhase(
+            phaseTypes,
+            phase.maxPoints,
+            0,
+          ));
+        }
+      }
+
+
+      quests[questRank][id] = new Quest(
+        id,
+        questRank,
         quest.title,
         quest.text,
-        1,
+        phases,
-        0,
-        0
       );
     }
   }
   return quests;
 }
 
-export async function loadAdventurersForHire(): Promise<Array<Adventurer>> {
+export async function loadAdventurersForHire(): Promise<{[key: string]: Adventurer}> {
   const response = await fetch("data/adventurers.json");
   if (response.status !== 200) {
     console.error("Failed to load adventurers");
     alert("Failed to load adventurers. Please try refreshing the page.");
-    return [];
+    return {};
   }
   const adventurerData = await response.json();
 
-  const adventurers: Array<Adventurer> = [];
+  const adventurers: {[key: string]: Adventurer} = {};
   for (const adventurer of adventurerData) {
-    adventurers.push(new Adventurer(
+    const loadedAdventurer = new Adventurer(
       adventurer.id,
       adventurer.name,
       adventurer.portrait,
       adventurer.attackExponent,
       adventurer.level,
       adventurer.exp,
-    ));
+    )
+    adventurers[loadedAdventurer.id] = loadedAdventurer;
   }
-
   return adventurers;
 }
 
 export function removeAlreadyHiredAdventurers(
-  adventurers: Array<Adventurer>,
+  adventurers: { [key: string]: Adventurer },
   adventurersHired: { [key: string]: Adventurer }
-): Array<Adventurer> {
+): { [key: string]: Adventurer } {
-  const adventurersForHire: Array<Adventurer> = [];
+  const adventurersForHire: { [key: string]: Adventurer } = {};
-  for (const adventurer of adventurers) {
+  for (const adventurer of Object.values(adventurers)) {
     if (adventurersHired[adventurer.id]) continue;
-    adventurersForHire.push(adventurer);
+    adventurersForHire[adventurer.id] = adventurer;
   }
   return adventurersForHire;
 }
+
+function hash(str: string): string {
+  let hash = 5381;
+  for (let i = 0; i < str.length; i++) {
+    hash = (hash * 33) ^ str.charCodeAt(i);
+  }
+  return (hash >>> 0).toString(16);
+}

src/classes/Guild.ts

@@ -4,6 +4,7 @@ import {formatGold} from "@/classes/NumberMagic";
 import QuestExpUpgrade from "@/classes/guildUpgrades/QuestExpUpgrade";
 import QuestGoldUpgrade from "@/classes/guildUpgrades/QuestGoldUpgrade";
 import AutoFinishQuestsUpgrade from "@/classes/guildUpgrades/AutoFinishQuestsUpgrade";
+import RecruitmentCapacityUpgrade from "@/classes/guildUpgrades/RecruitmentCapacityUpgrade";
 
 const MAX_LEVEL: number = 8;
 
@@ -16,6 +17,7 @@ export class Guild {
     expModifier: QuestExpUpgrade;
     goldModifier: QuestGoldUpgrade;
     autoFinishQuestsUpgrade: AutoFinishQuestsUpgrade;
+    recruitmentCapacity: RecruitmentCapacityUpgrade;
 
     constructor(level: number, gold: number, upgrades: {[index:string]: GuildUpgrade} = {}) {
         this.gold = gold;
@@ -28,7 +30,7 @@ export class Guild {
         this.expModifier = upgrades.expModifier as QuestExpUpgrade ?? new QuestExpUpgrade();
         this.goldModifier = upgrades.goldModifier as QuestGoldUpgrade ?? new QuestGoldUpgrade();
         this.autoFinishQuestsUpgrade = upgrades.autoFinishQuestsUpgrade as AutoFinishQuestsUpgrade ?? new AutoFinishQuestsUpgrade();
-
+        this.recruitmentCapacity = upgrades.recruitmentCapacity as RecruitmentCapacityUpgrade ?? new RecruitmentCapacityUpgrade();
     }
 
     upgrade(): void {

src/classes/Recruitment.ts

@@ -4,10 +4,14 @@ import type {Adventurer} from "@/classes/Adventurer";
 /**
  * Get a random adventurer from the pool
  * @param adventurerPool
+ * @param exceptions
  * @returns {Adventurer|null} null if the pool is empty
  */
-export function getNewAdventurerForHire(adventurerPool: Array<Adventurer>): Adventurer|null {
+export function getNewAdventurerForHire(adventurerPool: Array<Adventurer>, exceptions: Array<Adventurer> = []): Adventurer|null {
     if (adventurerPool.length <= 0) return null;
+    const pool = Array.from(adventurerPool);
+    const exceptionSet = new Set(exceptions);
+    pool.filter((adventurer) => !exceptionSet.has(adventurer));
     const randomId = adventurerPool.length * Math.random() << 0;
     return adventurerPool[randomId];
 }

src/classes/guildUpgrades/RecruitmentCapacityUpgrade.ts

@@ -0,0 +1,36 @@
+import {GuildUpgrade} from "@/classes/GuildUpgrade";
+import type MaxLevellable from "@/classes/MaxLevellable";
+
+export default class AdventurerCapacityUpgrade extends GuildUpgrade implements MaxLevellable {
+
+    maxLevel: number;
+
+    constructor(level: number = 1) {
+        super();
+        this.level = level;
+        this.nextLevelCost = this.getCostForLevel(this.level);
+        this.guildLevelRequirement = 3;
+        this.maxLevel = 3;
+    }
+
+    upgrade(): void {
+        this.level += 1;
+        this.nextLevelCost = this.getCostForLevel(this.level);
+    }
+
+    getCostForLevel(level: number): number {
+        if (level === 1) return 1500;
+        return Math.floor(1500 * (level * 4));
+    }
+
+    /**
+     * Returns the number of adventurers the guild can have
+     */
+    getRecruitmentCapacity(): number {
+        return this.level ;
+    }
+
+    isMaxLevel(): boolean {
+        return this.level >= this.maxLevel;
+    }
+}

src/classes/quests/Quest.ts

@@ -1,5 +1,6 @@
 import type {Adventurer} from "@/classes/Adventurer";
 import {QuestRank} from "@/classes/QuestRank";
+import QuestPhase from "@/classes/quests/QuestPhase";
 
 export class Quest {
     id: string;
@@ -7,9 +8,8 @@ export class Quest {
     title:  string;
     text: string;
     adventurers: Array<Adventurer>;
+    phases: QuestPhase[] = [];
     maxAdventurers: number;
-    progressPoints: number;
-    maxProgress: number;
     expReward: number;
     goldReward: number;
 
@@ -18,25 +18,84 @@ export class Quest {
       rank: QuestRank,
       title: string,
       text: string,
-      maxProgress: number,
+      phases: QuestPhase[],
-      expReward: number,
+      expReward: number = 0,
-      goldReward: number,
+      goldReward: number = 0,
       maxAdventurers: number = 1
     ) {
         this.id = id;
         this.rank = rank;
         this.title = title;
         this.text = text;
-        this.maxProgress = maxProgress;
         this.expReward = expReward;
         this.goldReward = goldReward;
-        this.progressPoints = 0;
         this.adventurers = [];
         this.maxAdventurers = maxAdventurers;
+        for (const phase of phases) {
+            this.phases.push(new QuestPhase(Array.from(phase.types), phase.maxPoints, phase.points));
+        }
     }
 
     getPercentProgress(): number {
-        return Math.round(this.progressPoints / this.maxProgress * 100);
+        let maxProgress = this.getMaxProgress();
+        let progressPoints = this.getProgress();
+        if (maxProgress === 0) return 0;
+        return progressPoints / maxProgress * 100;
+    }
+
+    isCompleted(): boolean {
+        for (const phase of this.phases) {
+            if (!phase.completed()) return false;
+        }
+        return true;
+    }
+
+    getMaxProgress(): number {
+        let maxProgress = 0;
+        for (const phase of this.phases) {
+            maxProgress += phase.maxPoints;
+        }
+        return maxProgress;
+    }
+
+    getProgress(): number {
+        let progressPoints = 0;
+        for (const phase of this.phases) {
+            progressPoints += phase.points;
+        }
+        return progressPoints;
+    }
+
+    serialize(): {[key: string]: any} {
+        return {
+            id: this.id,
+            rank: this.rank,
+            title: this.title,
+            text: this.text,
+            phases: this.phases.map(phase => phase.serialize()),
+            expReward: this.expReward,
+            goldReward: this.goldReward,
+            maxAdventurers: this.maxAdventurers,
+        };
+    }
+
+    static deserialize(data: {[key: string]: any}): Quest {
+        if (!data || typeof data !== 'object') {
+            throw new Error("Invalid data for Quest deserialization");
+        }
+
+        const phases = (data.phases || []).map((phaseData: any) => QuestPhase.deserialize(phaseData));
+
+        return new Quest(
+            data.id,
+            data.rank,
+            data.title,
+            data.text,
+            phases,
+            data.expReward || 0,
+            data.goldReward || 0,
+            data.maxAdventurers || 1
+        );
     }
 
 }
@@ -49,47 +108,47 @@ export class Quest {
  */
 export function getQuestWithRewards(quest: Quest, expModifier: number = 1, goldModifier: number = 1) {
 
-    let maxProgress = 1;
+    let rewardValue = 1;
 
     switch (quest.rank) {
         case QuestRank.S:
             // at level 30 adventurers have ~6513 dps, this will take 30 seconds on level 30
-            maxProgress = 195390;
+            rewardValue = 195390;
             break;
         case QuestRank.A:
             // at level 25 adventurers have ~2051 dps, this will take 15 seconds on level 25
-            maxProgress = 30770;
+            rewardValue = 30770;
             break;
         case QuestRank.B:
             // at level 20 adventurers have ~645 dps, this will take 15 seconds on level 20
-            maxProgress = 9690;
+            rewardValue = 9690;
             break;
         case QuestRank.C:
             // at level 15 adventurers have ~203 dps, this will take 15 seconds on level 15
-            maxProgress = 3045;
+            rewardValue = 3045;
             break;
         case QuestRank.D:
             // at level 10 adventurers have ~64 dps, this will take 15 seconds on level 10
-            maxProgress = 960;
+            rewardValue = 960;
             break;
         case QuestRank.E:
             // at level 5 adventurers have ~20 dps, this will take 15 seconds on level 5
-            maxProgress = 300;
+            rewardValue = 300;
             break;
         case QuestRank.F:
             // at level 1 adventurers have ~8 dps, this will take 15 seconds on level 1
-            maxProgress = 120;
+            rewardValue = 120;
             break;
     }
 
-    let goldReward = Math.floor(maxProgress/6 * goldModifier);
+    let goldReward = Math.floor(rewardValue/6 * goldModifier);
-    let expReward = Math.floor((Math.floor(maxProgress/120) - maxProgress/1000) * expModifier);
+    let expReward = Math.floor((Math.floor(rewardValue/120) - rewardValue/1000) * expModifier);
 
     // add some randomness to the rewards
     goldReward = Math.floor(randomNumberBetween(goldReward * 0.95, goldReward * 1.1));
     expReward = Math.max(1, Math.floor(randomNumberBetween(expReward * 0.95, expReward * 1.2)));
 
-    return new Quest(quest.id, quest.rank, quest.title, quest.text, maxProgress, expReward, goldReward);
+    return new Quest(quest.id, quest.rank, quest.title, quest.text, quest.phases, expReward, goldReward);
 }
 
 function randomNumberBetween(min: number, max: number) {

src/classes/quests/QuestPhase.ts

@@ -0,0 +1,67 @@
+import type {Adventurer} from "@/classes/Adventurer";
+import {PhaseType} from "@/classes/quests/QuestPhaseType";
+
+export default class QuestPhase {
+
+  types: Set<PhaseType>;
+  points: number;
+  maxPoints: number;
+
+  constructor(
+    types: PhaseType[],
+    maxPoints: number,
+    points: number = 0,
+  ) {
+    this.types = new Set<PhaseType>(types);
+    this.points = Math.max(0, points);
+    this.maxPoints = Math.max(1, maxPoints);
+  }
+
+  /**
+   * Get how many points should be added each tick based on adventurers on a task.
+   */
+  getPointIncrement(adventurers: Array<Adventurer>): number {
+    // TODO add point multiplier based on adventurer stats
+    return 0.25;
+  }
+
+  public tick(adventurers: Array<Adventurer> = []) {
+    if (this.completed()) return;
+    const pointsToAdd = this.getPointIncrement(adventurers);
+    this.points = Math.max(Math.min(this.points + pointsToAdd, this.maxPoints), 0);
+  }
+
+  public completed(): boolean {
+    return this.points >= this.maxPoints;
+  }
+
+  public serialize(): string {
+    return JSON.stringify({
+      types: Array.from(this.types),
+      points: this.points,
+      maxPoints: this.maxPoints,
+    });
+  }
+
+  public static deserialize(data: string): QuestPhase {
+    const parsedData = JSON.parse(data);
+
+    if (typeof parsedData?.points !== 'number') {
+      throw new Error("Invalid data: 'points' must be a number.");
+    }
+    if (typeof parsedData?.maxPoints !== 'number') {
+      throw new Error("Invalid data: 'maxPoints' must be a number.");
+    }
+    if (!Array.isArray(parsedData?.types)) {
+      throw new Error("Invalid data: 'types' must be an array.");
+    }
+
+    const types = parsedData.types.map((type: string) => PhaseType[type as keyof typeof PhaseType]);
+    return new QuestPhase(
+      types,
+      parsedData.maxPoints,
+      parsedData.points
+    );
+  }
+
+}

src/classes/quests/QuestPhaseType.ts

@@ -0,0 +1,9 @@
+export enum PhaseType {
+
+  TRAVEL = "travel",
+  FIGHT = "fight",
+  GATHER = "gather",
+  PHYSICAL = "physical",
+  MENTAL = "mental",
+
+}

src/components/AdventurerDetails.vue

@@ -13,7 +13,10 @@
       <p>Exp: {{ adventurer.exp }} / {{ adventurer.getNextLevelExpRequirement() }}</p>
       <p>DPS: {{ formatDamage(adventurer.getDPS()) }}</p>
     </div>
-    <div class="adventurer-upgrades">
+    <div
+      v-if="showPrestigeButton"
+      class="adventurer-upgrades"
+    >
       <button
           class="button metal"
           :disabled="!adventurer.canPrestigeUp()"
@@ -44,6 +47,10 @@ export default defineComponent({
       type: Object as PropType<Adventurer | null>,
       required: true,
     },
+    showPrestigeButton: {
+      type: Boolean,
+      default: true,
+    },
   },
   mounted() {
     const refs = this.$refs as any;

src/components/AdventurerRecruitment.vue

@@ -0,0 +1,230 @@
+<template>
+  <section class="recruit panel pinned-paper">
+    <h1>Applying adventurers
+      {{ `(${Object.keys(adventurersForHire).length}/${guild.recruitmentCapacity.getRecruitmentCapacity()})` }}</h1>
+    <div class="adventurers">
+      <div class="adventurer-tile" v-for="adventurerForHire in currentlyForHire" :key="adventurerForHire.id">
+        <adventurer-tile
+          class="hire-tile"
+          :adventurer="adventurerForHire"
+          @click="previewAdventurer(adventurerForHire)"
+        />
+        <div class="decision">
+          <span
+            title="Hire"
+            @click="hireAdventurer(adventurerForHire)"
+            :class="{disabled: !canRecruitMore}"
+          >
+            ✔
+          </span>
+          <span
+            :title="Object.keys(adventurersForHire).length > 0 ? 'Dismiss' : ''"
+            :class="{disabled: Object.keys(adventurers).length <= 0}"
+            @click="dismissAdventurer(adventurerForHire)"
+          >
+            ✗
+          </span>
+        </div>
+      </div>
+      <div v-if="Object.keys(adventurersForHire).length == 0">
+        <span>No one applied as of now. Check back later!</span>
+      </div>
+    </div>
+    <div>
+      <button
+        class="button metal find-recruit"
+        :disabled="recruitSlotsFilled || guild.gold < newRecruitCost"
+        @click="findNewRecruit()"
+      >Find a recruit now {{(`(${formatGold(newRecruitCost)}) gold`)}}</button>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+
+import {defineComponent, type PropType} from "vue";
+import AdventurerTile from "@/components/AdventurerTile.vue";
+import type {Guild} from "@/classes/Guild";
+import type {Adventurer} from "@/classes/Adventurer";
+import {formatGold} from "@/classes/NumberMagic";
+
+export default defineComponent({
+  name: "RecruitView",
+  components: {AdventurerTile},
+  computed: {
+    currentlyForHire(): Array<Adventurer> {
+      return Object.values(this.adventurersForHire);
+    },
+    canRecruitMore() {
+      return Object.keys(this.adventurers).length < this.guild.adventurerCapacity.getAdventurerCapacity();
+    },
+    newRecruitCost(): number {
+      const guildLevel = this.guild.level;
+      return Math.max(500, 500 * Math.pow(2.2, guildLevel - 1));
+    },
+    recruitSlotsFilled(): boolean {
+      return Object.keys(this.adventurersForHire).length >= this.guild.recruitmentCapacity.getRecruitmentCapacity();
+    }
+  },
+  methods: {
+    formatGold,
+    hireAdventurer(adventurer: Adventurer): void {
+      if (!this.canRecruitMore) return;
+      this.$emit("hireAdventurer", adventurer);
+    },
+    dismissAdventurer(adventurer: Adventurer) {
+      if (Object.keys(this.adventurers).length <= 0) return;
+      this.$emit("dismissAdventurer", adventurer);
+    },
+    previewAdventurer(adventurer: Adventurer): void {
+      this.$emit("previewAdventurer", adventurer);
+    },
+    findNewRecruit(): void {
+      if (this.recruitSlotsFilled) return;
+      this.$emit("findNewRecruit");
+    },
+  },
+  props: {
+    guild: {
+      type: Object as PropType<Guild>,
+      required: true,
+    },
+    adventurersForHire: {
+      type: Object as PropType<{ [key: string]: Adventurer }>,
+      required: true,
+    },
+    adventurers: {
+      type: Object as PropType<{ [key: string]: Adventurer }>,
+      required: true,
+    },
+  },
+  emits: ["dismissAdventurer", "hireAdventurer", "previewAdventurer", "findNewRecruit"],
+})
+</script>
+
+<style scoped lang="scss">
+
+section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow-x: hidden;
+}
+
+.find-recruit {
+  text-wrap: wrap;
+}
+
+.adventurers {
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 1rem;
+  scroll-snap-type: x mandatory;
+  overflow-x: scroll;
+  width: 100%;
+  min-height: 12rem;
+
+  @media (min-width: 800px) {
+    flex-wrap: wrap;
+    justify-content: center;
+    overflow-x: hidden;
+    scroll-snap-type: none;
+    width: auto;
+  }
+
+  .adventurer-tile {
+    display: flex;
+    position: relative;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: 0.25rem;
+    font-size: 1.1rem;
+    cursor: pointer;
+    padding-block: 1rem;
+    padding-inline: 0.5rem;
+    min-width: 100%;
+    scroll-snap-align: center;
+
+    &:not(:first-of-type) {
+      &::before {
+        position: absolute;
+        left: 0;
+        top: 4rem;
+        content: "⇠";
+        width: 1rem;
+        height: 1rem;
+        line-height: 1;
+      }
+    }
+
+    &:not(:last-of-type) {
+      &::after {
+        position: absolute;
+        right: 0;
+        top: 4rem;
+        content: "⇢";
+        width: 1rem;
+        height: 1rem;
+        line-height: 1;
+      }
+    }
+
+
+
+    @media (min-width: 800px) {
+      min-width: auto;
+      scroll-snap-align: none;
+
+      &::before {
+        content: none !important;
+      }
+
+      &::after {
+        content: none !important;
+      }
+    }
+
+    .hire-tile {
+      height: 7rem;
+      width: 7rem;
+    }
+
+    b {
+      line-height: 1;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+    }
+  }
+}
+
+.decision {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  font-size: 2rem;
+  gap: 1rem;
+  line-height: 1;
+  width: 100%;
+
+  span {
+    cursor: pointer;
+
+    &:hover {
+      color: #fff;
+    }
+
+    &.disabled {
+      color: rgba(0, 0, 0, 0.5);
+      cursor: default;
+    }
+  }
+}
+</style>

src/components/AdventurerTile.vue

@@ -48,6 +48,7 @@ export default defineComponent({
   overflow: clip;
   font-size: 5rem;
   line-height: 1;
+  aspect-ratio: 1/1;
   color: rgba(0, 0, 0, 0.75);
   position: relative;
   background: rgb(2,0,36);

src/components/QuestGroup.vue

@@ -63,7 +63,7 @@ h1 {
   gap: 1rem;
   padding-block: 0.5rem;
   padding-inline: 5rem;
-  overflow-x: auto;
+  overflow-x: scroll;
   scroll-snap-type: x mandatory;
   width: 100vw;
   max-width: 100%;

src/components/QuestMissive.vue

@@ -37,7 +37,7 @@
     </div>
     <div class="progressWrap">
       <span class="progress"></span>
-      <span class="percentage">{{ `${progressPercentage.toFixed(2)}%` }}</span>
+      <span class="percentage">{{ `${missive.getPercentProgress().toFixed(2)}%` }}</span>
     </div>
     <h3>Rewards</h3>
     <div class="rewards">
@@ -48,7 +48,7 @@
 </template>
 
 <script lang="ts">
-import type {Quest} from "@/classes/Quest";
+import type {Quest} from "@/classes/quests/Quest";
 import AdventurerComponent from "@/components/AdventurerMiniComponent.vue";
 import type {Adventurer} from "@/classes/Adventurer";
 import {defineComponent, type PropType} from "vue";
@@ -61,7 +61,7 @@ export default defineComponent({
   components: {Parchment, WaterStain, DrinkStain, AdventurerComponent},
   computed: {
     progressPercentageValue(): string {
-      return `${this.missive.progressPoints / this.missive.maxProgress * 100}%`;
+      return `${this.missive.getPercentProgress()}%`;
     },
     notBusyAdventurers(): Adventurer[] {
       return Object.values(this.adventurers).filter(adventurer => !adventurer.busy);
@@ -94,7 +94,7 @@ export default defineComponent({
   methods: {
     updateProgress() {
       if (this.missive === undefined) return;
-      this.progressPercentage = this.missive.progressPoints / this.missive.maxProgress * 100;
+      this.progressPercentage = this.missive.getPercentProgress();
     },
     randomNumber(min: number, max: number) {
       return Math.random() * (max - min) + min;

src/components/UpgradesList.vue

@@ -13,6 +13,19 @@
         Upgrade ({{ formatGold(guild.adventurerCapacity.nextLevelCost) }} gold)
       </button>
     </div>
+    <div class="upgrade">
+      <span>Recruitment capacity (level {{ guild.recruitmentCapacity.level }})</span>
+      <small>Increases the maximum amount of adventurers that await recruitment</small>
+      <button
+        class="button metal"
+        v-if="guild.recruitmentCapacity.nextLevelCost"
+        :disabled="guild.gold < guild.recruitmentCapacity.nextLevelCost || guild.recruitmentCapacity.isMaxLevel()"
+        @click="upgradeRecruitmentCapacity()"
+      >
+        <span v-if="!guild.recruitmentCapacity.isMaxLevel()">Upgrade ({{  formatGold(guild.recruitmentCapacity.nextLevelCost) }} gold)</span>
+        <span v-else>Max level</span>
+      </button>
+    </div>
     <div class="upgrade" v-if="guild.level >= guild.autoFinishQuestsUpgrade.guildLevelRequirement">
       <span>Auto-finish quests (level {{ guild.autoFinishQuestsUpgrade.level - 1 }})</span>
       <small>Automatically finish quests when they are completed.</small>
@@ -75,6 +88,14 @@ export default defineComponent({
       this.guild.gold -= this.guild.adventurerCapacity.nextLevelCost;
       this.guild.adventurerCapacity.upgrade();
     },
+    upgradeRecruitmentCapacity(): void {
+      if (!this.guild.recruitmentCapacity) return;
+      if (this.guild.recruitmentCapacity.isMaxLevel()) return;
+      if (!this.guild.recruitmentCapacity.nextLevelCost) return;
+      if (this.guild.gold < this.guild.recruitmentCapacity.nextLevelCost) return;
+      this.guild.gold -= this.guild.recruitmentCapacity.nextLevelCost;
+      this.guild.recruitmentCapacity.upgrade();
+    },
     upgradeAutoFinishQuests(): void {
       if (!this.guild.autoFinishQuestsUpgrade) return;
       if (this.guild.autoFinishQuestsUpgrade.isMaxLevel()) return;

src/components/technical/ChangelogComponent.vue

@@ -70,10 +70,13 @@ export default defineComponent({
   gap: 1rem;
   max-width: 45rem;
   min-height: 30rem;
-  max-height: 30rem;
   width: 100%;
   overflow-y: auto;
 
+  @media(min-width: 800px) {
+    max-height: 30rem;
+  }
+
   h1 {
     font-size: 3rem;
     line-height: 1;
@@ -88,7 +91,7 @@ export default defineComponent({
     align-items: center;
     gap: 1rem;
     width: 100%;
-    overflow-y: auto;
+    user-select: text;
   }
 
   .changelog-entry {

src/views/AdventurerView.vue

@@ -4,39 +4,21 @@
       :adventurer="selectedAdventurer"
       v-if="selectedAdventurer !== null"
       @closeButtonClicked="selectedAdventurer = null"
-
+      :show-prestige-button="adventurers[selectedAdventurer?.id] !== undefined"
+    />
+    <AdventurerRecruitment
+      :guild="guild"
+      :adventurers-for-hire="adventurersForHire"
+      :adventurers="adventurers"
+      @hireAdventurer="$emit('hireAdventurer', $event)"
+      @dismissAdventurer="$emit('dismissAdventurer', $event)"
+      @previewAdventurer="selectedAdventurer = $event"
+      @findNewRecruit="$emit('findNewRecruit')"
     />
-    <section class="recruit panel pinned-paper">
-      <h1>Applying adventurers</h1>
-      <div class="adventurers">
-        <div v-if="adventurerForHire">
-          <adventurer-tile class="hire-tile" :adventurer="adventurerForHire"/>
-          <div class="decision">
-          <span
-              title="Hire"
-              @click="hireAdventurer()"
-              :class="{disabled: Object.keys(adventurers).length >= guild.adventurerCapacity.getAdventurerCapacity()}"
-          >
-            ✔
-          </span>
-            <span
-                :title="Object.keys(adventurers).length > 0 ? 'Dismiss' : ''"
-                :class="{disabled: Object.keys(adventurers).length <= 0}"
-                @click="dismissAdventurer()"
-            >
-            ✗
-          </span>
-          </div>
-        </div>
-        <div v-else>
-          <span>Noone applied as of now. Check back later!</span>
-        </div>
-
-      </div>
-    </section>
     <section class="collection panel pinned-paper">
       <h1>
-        Recruited adventurers ({{ Object.keys(adventurers).length }} / {{ guild.adventurerCapacity.getAdventurerCapacity() }})
+        Recruited adventurers ({{ Object.keys(adventurers).length }} /
+        {{ guild.adventurerCapacity.getAdventurerCapacity() }})
       </h1>
       <small>Click an adventurer to see details about them</small>
       <div class="adventurers">
@@ -61,14 +43,13 @@ import AdventurerTile from "@/components/AdventurerTile.vue";
 import type {Adventurer} from "@/classes/Adventurer";
 import type {Guild} from "@/classes/Guild";
 import AdventurerDetails from "@/components/AdventurerDetails.vue";
+import AdventurerRecruitment from "@/components/AdventurerRecruitment.vue";
 
 export default defineComponent({
-  name: "RecruitView",
+  name: "AdventurerView",
-  components: {AdventurerDetails, AdventurerTile},
+  components: {AdventurerDetails, AdventurerTile, AdventurerRecruitment},
   data: () => {
     return {
-      currentlyForHire: null as Adventurer | null,
-      adventurersForHire: [] as Array<Adventurer>,
       selectedAdventurer: null as Adventurer | null,
     }
   },
@@ -81,27 +62,14 @@ export default defineComponent({
       type: Object as PropType<{ [key: string]: Adventurer }>,
       required: true,
     },
-    adventurerForHire: {
+    adventurersForHire: {
-      type: Object as PropType<Adventurer | null>,
+      type: Object as PropType<{ [key: string]: Adventurer }>,
       default() {
-        return null;
+        return {};
       }
     },
   },
-  methods: {
+  emits: ["hireAdventurer", "dismissAdventurer", "findNewRecruit"],
-    hireAdventurer(): void {
-      if (Object.keys(this.adventurers).length >= this.guild.adventurerCapacity.getAdventurerCapacity()) return;
-      this.$emit("recruitActionTaken", this.adventurerForHire);
-    },
-    dismissAdventurer() {
-      if (Object.keys(this.adventurers).length <= 0) return;
-      this.$emit("recruitActionTaken", null);
-    }
-  },
-  async mounted() {
-
-  },
-  emits: ["recruitActionTaken"]
 
 });
 </script>

src/views/QuestView.vue

@@ -2,17 +2,17 @@
   <section>
     <QuestGroup
         :adventurers="adventurers"
-        :quests="quests.filter(quest => quest.progressPoints < quest.maxProgress)"
+        :quests="quests.filter(quest => quest.getProgress() < quest.getMaxProgress())"
         :finalizeQuest="finalizeQuest"
         label="Quests"
-        v-show="quests.filter(quest => quest.progressPoints < quest.maxProgress).length > 0"
+        v-show="quests.filter(quest => quest.getProgress() < quest.getMaxProgress()).length > 0"
     />
     <QuestGroup
       :finalize-quest="finalizeQuest"
       :adventurers="adventurers"
-      :quests="quests.filter(quest => quest.progressPoints >= quest.maxProgress)"
+      :quests="quests.filter(quest => quest.getProgress() >= quest.getMaxProgress())"
       label="Completed Quests"
-      v-show="quests.filter(quest => quest.progressPoints >= quest.maxProgress).length > 0"
+      v-show="quests.filter(quest => quest.getProgress() >= quest.getMaxProgress()).length > 0"
     />
   </section>
 </template>
@@ -21,7 +21,7 @@
 import {defineComponent, type PropType} from "vue";
 import AdventurerComponent from "@/components/AdventurerMiniComponent.vue";
 import type {Adventurer} from "@/classes/Adventurer";
-import type {Quest} from "@/classes/Quest";
+import type {Quest} from "@/classes/quests/Quest";
 import {Guild} from "@/classes/Guild";
 import QuestMissive from "@/components/QuestMissive.vue";
 import QuestGroup from "@/components/QuestGroup.vue";
@@ -53,7 +53,7 @@ export default defineComponent({
   methods: {
     // This is a workaround for vue not reporting Quest as Quest in v-for
     finalizeQuest(quest: any | Quest): void {
-      if (quest.progressPoints < quest.maxProgress) return;
+      if (!quest.isCompleted()) return;
       this.$emit('finalizeQuest', quest)
     },
   }