fix infinite loading screen on new save file

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.1",
+  "version": "0.15.3",
   "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,10 +49,17 @@ 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>
 
@@ -75,6 +83,7 @@ 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";
 
 export default defineComponent({
   name: "GuildView",
@@ -94,14 +103,20 @@ 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) {
@@ -123,35 +138,44 @@ export default defineComponent({
         }
       }
 
-
     },
-    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;
@@ -190,6 +214,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);
       }
@@ -243,17 +270,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 +330,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 +340,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 +362,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

@@ -8,18 +8,21 @@ export class GameData {
   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 +42,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 +78,69 @@ 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 = quest.id;
+      quests[questRank][id] = new Quest(
+        id,
+        questRank,
         quest.title,
         quest.text,
-        1,
-        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;
 }

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

@@ -18,9 +18,9 @@ export class Quest {
       rank: QuestRank,
       title: string,
       text: string,
-      maxProgress: number,
+      maxProgress: number = 1,
-      expReward: number,
+      expReward: number = 0,
-      goldReward: number,
+      goldReward: number = 0,
       maxAdventurers: number = 1
     ) {
         this.id = id;

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/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/AdventurerList.vue

@@ -22,9 +22,9 @@ export default defineComponent({
   }),
   props: {
     adventurers: {
-      type: Object as PropType<{ [key: string]: Adventurer }>,
+      type: Object as PropType<Array<Adventurer>>,
       default() {
-        return {} as { [key: string]: Adventurer };
+        return [] as Array<Adventurer>;
       },
     },
   },

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(adventurersForHire).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.adventurersForHire).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/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>