finish up base recruitment system

src/App.vue

@@ -51,8 +51,8 @@ import {version} from "@/../package.json";
     :adventurersForHire="adventurersForHire"
     :news="news"
     @finalizeQuest="finalizeQuest($event)"
-    @recruitAdventurer="recruitAdventurer($event)"
+    @hireAdventurer="recruitAdventurer($event)"
-    @dismissRecruit="dismissRecruit($event)"
+    @dismissAdventurer="dismissRecruit($event)"
   />
 </template>
 
@@ -101,6 +101,8 @@ export default defineComponent({
     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,
   }),
   methods: {
     async updateMissives() {
@@ -123,24 +125,30 @@ export default defineComponent({
         }
       }
 
-
     },
-    async checkForNewRecruit(currentTimestamp: number) {
+    async checkForNewRecruit(currentTimestamp: number, cooldownModifier: number = 1) {
+      const recruitCapacity = this.guild.recruitmentCapacity.getRecruitmentCapacity();
+
+      if (Object.keys(this.adventurersForHire).length >= recruitCapacity) return;
+
+      const deltaTime = this.nextRecruitArrival.getTime() - currentTimestamp;
+      if (deltaTime > 0) return; // not yet time for a new recruit
 
       if (Object.keys(this.adventurers).length <= 0) {
-        const firstAdventurer = this.adventurersDatabase[0]
+        const firstAdventurer = this.adventurersDatabase[0];
         this.adventurersForHire[firstAdventurer.id] = firstAdventurer;
       }
 
-      // TODO hiring capacity upgrade
-      if (Object.keys(this.adventurersForHire).length < 2) {
       const newAdventurerForHire = getNewAdventurerForHire(Object.values(this.adventurersDatabase));
       if (newAdventurerForHire === null) return;
       this.adventurersForHire[newAdventurerForHire.id] = newAdventurerForHire;
-      }
+
+      const timerValue = ((5 + (Math.random() * 15)) * 60 * 1000) * cooldownModifier;
+      this.nextRecruitArrival = new Date(currentTimestamp + timerValue);
     },
     recruitAdventurer(adventurer: Adventurer): void {
       this.adventurers[adventurer.id] = adventurer;
+      delete this.adventurersForHire[adventurer.id];
       delete this.adventurersDatabase[adventurer.id];
     },
     dismissRecruit(adventurer: Adventurer): void {
@@ -238,6 +246,8 @@ export default defineComponent({
         }
       }
 
+      this.nextRecruitArrival = saveData.nextRecruitArrival ? new Date(saveData.nextRecruitArrival) : new Date();
+
       const recruits = {} as { [key: string]: Adventurer };
 
       for (const id in saveData.adventurersForHire) {
@@ -306,6 +316,17 @@ export default defineComponent({
     this.loadGame();
     this.adventurersDatabase = removeAlreadyHiredAdventurers(this.adventurersDatabase, this.adventurers);
 
+    if (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 = 2 - 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;
@@ -318,15 +339,17 @@ export default defineComponent({
         missives: this.missives,
         lastQuestGot: this.lastQuestGot,
         adventurersForHire: this.adventurersForHire ?? 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,16 +8,21 @@ export class GameData {
   adventurers: { [key: string]: Adventurer };
   missives: Array<Quest>;
   lastQuestGot: { [key: string]: null | number };
-  adventurersForHire: {[key: string]: Adventurer} | null;
+  adventurersForHire: {[key: string]: Adventurer};
+  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.adventurersForHire = data.adventurersForHire ?? null;
+    this.adventurersForHire = data.adventurersForHire ?? {};
+    this.nextRecruitArrival = data.nextRecruitArrival ? new Date(data.nextRecruitArrival) : new Date();
+    if (isNaN(this.nextRecruitArrival.getTime())) {
+      this.nextRecruitArrival = new Date();
+    }
   }
 }
 
@@ -49,7 +54,8 @@ export function saveGame(
     adventurers: adventurers,
     missives: data.missives,
     lastQuestGot: data.lastQuestGot,
-    adventurersForHire: adventurersForHire
+    adventurersForHire: adventurersForHire,
+    nextRecruitArrival: data.nextRecruitArrival.getTime(),
   }));
 }
 

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.recruitmentCapacityUpgrade as RecruitmentCapacityUpgrade ?? new RecruitmentCapacityUpgrade();
     }
 
     upgrade(): void {

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

@@ -1,15 +1,19 @@
 <template>
   <section class="recruit panel pinned-paper">
-    <h1>Applying adventurers</h1>
+    <h1>Applying adventurers
+      {{ `(${Object.keys(adventurersForHire).length}/${guild.recruitmentCapacity.getRecruitmentCapacity()})` }}</h1>
     <div class="adventurers">
-      <div v-for="adventurerForHire in currentlyForHire" :key="adventurerForHire.id">
+      <div class="adventurer-tile" v-for="adventurerForHire in currentlyForHire" :key="adventurerForHire.id">
-        <div class="adventurer-tile">
+        <adventurer-tile
-          <adventurer-tile class="hire-tile" :adventurer="adventurerForHire"/>
+          class="hire-tile"
+          :adventurer="adventurerForHire"
+          @click="previewAdventurer(adventurerForHire)"
+        />
         <div class="decision">
           <span
             title="Hire"
             @click="hireAdventurer(adventurerForHire)"
-            :class="{disabled: Object.keys(adventurersForHire).length >= guild.adventurerCapacity.getAdventurerCapacity()}"
+            :class="{disabled: !canRecruitMore}"
           >
             ✔
           </span>
@@ -22,12 +26,9 @@
           </span>
         </div>
       </div>
-
-      </div>
       <div v-if="Object.keys(adventurersForHire).length == 0">
         <span>No one applied as of now. Check back later!</span>
       </div>
-
     </div>
   </section>
 </template>
@@ -46,16 +47,22 @@ export default defineComponent({
     currentlyForHire(): Array<Adventurer> {
       return Object.values(this.adventurersForHire);
     },
+    canRecruitMore() {
+      return Object.keys(this.adventurersForHire).length < this.guild.adventurerCapacity.getAdventurerCapacity();
+    },
   },
   methods: {
     hireAdventurer(adventurer: Adventurer): void {
-      if (Object.keys(this.adventurersForHire).length >= this.guild.adventurerCapacity.getAdventurerCapacity()) return;
+      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);
+    },
   },
   props: {
     guild: {
@@ -67,7 +74,7 @@ export default defineComponent({
       required: true,
     },
   },
-  emits: ["dismissAdventurer", "hireAdventurer"],
+  emits: ["dismissAdventurer", "hireAdventurer", "previewAdventurer"],
 })
 </script>
 
@@ -88,8 +95,10 @@ export default defineComponent({
     gap: 0.25rem;
     font-size: 1.1rem;
     cursor: pointer;
+    padding-block: 1rem;
+    padding-inline: 0.5rem;
 
-    .entry {
+    .hire-tile {
       height: 7rem;
       width: 7rem;
     }
@@ -112,6 +121,8 @@ export default defineComponent({
   align-items: center;
   font-size: 2rem;
   gap: 1rem;
+  line-height: 1;
+  width: 100%;
 
   span {
     cursor: pointer;

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/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/views/AdventurerView.vue

@@ -4,6 +4,7 @@
       :adventurer="selectedAdventurer"
       v-if="selectedAdventurer !== null"
       @closeButtonClicked="selectedAdventurer = null"
+      :show-prestige-button="adventurers[selectedAdventurer?.id] !== undefined"
 
     />
     <AdventurerRecruitment
@@ -11,6 +12,7 @@
       :adventurers-for-hire="adventurersForHire"
       @hireAdventurer="$emit('hireAdventurer', $event)"
       @dismissAdventurer="$emit('dismissAdventurer', $event)"
+      @previewAdventurer="selectedAdventurer = $event"
     />
     <section class="collection panel pinned-paper">
       <h1>