bump version

Adventurer details

package.json

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

src/App.vue

@@ -10,15 +10,15 @@ import {RouterLink, RouterView} from 'vue-router'</script>
       <RouterLink :to="{name: 'technical'}"><img class="icon" src="/img/icons/cog.svg" alt="Technical"></RouterLink>
     </nav>
   </header>
-    <RouterView
+  <RouterView
-        :guild="guild"
+      :guild="guild"
-        :adventurers="adventurers"
+      :adventurers="adventurers"
-        :quests="missives"
+      :quests="missives"
-        :lastRecruitTime="lastRecruitHandled"
+      :adventurerForHire="adventurerForHire"
-        @finalizeQuest="finalizeQuest($event)"
+      @finalizeQuest="finalizeQuest($event)"
-        @wipeSave="resetSave()"
+      @wipeSave="resetSave()"
-        @recruitActionTaken="lastRecruitHandled = Number(new Date())"
+      @recruitActionTaken="recruitAction($event)"
-    />
+  />
 </template>
 
 <script lang="ts">
@@ -27,24 +27,35 @@ import {Adventurer} from "@/classes/Adventurer";
 import {getQuestWithRewards, Quest} from "@/classes/Quest";
 import {Guild} from "@/classes/Guild";
 import {getFromString, QuestRank} from "@/classes/QuestRank";
-import {GameData, loadAvailableQuests, loadGame, saveGame} from "@/GameData";
+import {
+  GameData,
+  loadAdventurersForHire,
+  loadAvailableQuests,
+  loadGame,
+  removeAlreadyHiredAdventurers,
+  saveGame
+} from "@/GameData";
 import type {GuildUpgrade} from "@/classes/GuildUpgrade";
-import {AdventurerCapacityUpgrade} from "@/classes/guildUpgrades/AdventurerCapacityUpgrade";
+import AdventurerCapacityUpgrade from "@/classes/guildUpgrades/AdventurerCapacityUpgrade";
+import {getNewAdventurerForHire} from "@/classes/Recruitment";
+import QuestExpUpgrade from "@/classes/guildUpgrades/QuestExpUpgrade";
 
 export default defineComponent({
   name: "GuildView",
   data: () => ({
     guild: new Guild(1, 500),
     lastQuestGot: {
-      S: null as null|number,
+      S: null as null | number,
-      A: null as null|number,
+      A: null as null | number,
-      B: null as null|number,
+      B: null as null | number,
-      C: null as null|number,
+      C: null as null | number,
-      D: null as null|number,
+      D: null as null | number,
-      E: null as null|number,
+      E: null as null | number,
-      F: null as null|number,
+      F: null as null | number,
-    } as { [key: string]: null|number },
+    } as { [key: string]: null | number },
-    lastRecruitHandled: null as null|number,
+    lastRecruitHandled: null as null | number,
+    adventurerForHire: null as Adventurer | null,
+    adventurersDatabase: {} as Array<Adventurer>,
     adventurers: {} as { [key: string]: Adventurer },
     quests: {} as { [key: string]: { [key: string]: Quest } },
     missives: {
@@ -77,6 +88,34 @@ export default defineComponent({
       }
 
     },
+    async checkForNewRecruit(currentTimestamp: number) {
+
+      if (this.lastRecruitHandled == null) {
+        this.lastRecruitHandled = 0;
+      }
+
+      if (Object.keys(this.adventurers).length <= 0) {
+        this.adventurerForHire = this.adventurersDatabase[0];
+      }
+
+      if (currentTimestamp - this.lastRecruitHandled >= 1000 * 60 * 30 && this.adventurerForHire == null) {
+        this.adventurerForHire = getNewAdventurerForHire(this.adventurersDatabase);
+      }
+    },
+    recruitAction(adventurer: Adventurer | null): void {
+      this.lastRecruitHandled = Number(new Date());
+      this.adventurerForHire = null;
+      if (adventurer === null) return;
+
+      this.adventurers[adventurer.id] = adventurer;
+      for (const id in this.adventurersDatabase) {
+        const databaseAdventurer = this.adventurersDatabase[id];
+        if (databaseAdventurer.id === adventurer.id) {
+          this.adventurersDatabase.splice(Number(id), 1);
+          break;
+        }
+      }
+    },
     finalizeQuest(missive: Quest) {
       missive.progressPoints = 0;
       this.guild.gold += missive.goldReward;
@@ -94,7 +133,7 @@ export default defineComponent({
       const questsForRank = this.quests[rank] as { [key: string]: Quest };
       const randomId = keys.length * Math.random() << 0;
       const randomIdString = keys[randomId] as string;
-      return getQuestWithRewards(questsForRank[randomIdString]);
+      return getQuestWithRewards(questsForRank[randomIdString], this.guild.expModifier.getModifier());
     },
     createMissive(questToAdd: Quest, rank: QuestRank) {
       const quest = JSON.parse(JSON.stringify(questToAdd));
@@ -103,56 +142,71 @@ export default defineComponent({
       this.missives[rank][newId] = quest;
     },
     loadGame() {
-       const saveData = loadGame();
+      const saveData = loadGame();
-       if (saveData === null) return;
+      if (saveData === null) return;
 
-       this.lastQuestGot = saveData.lastQuestGot;
+      this.lastQuestGot = saveData.lastQuestGot;
 
-       const guildUpgrades = {} as { [key: string]: GuildUpgrade };
+      const guildUpgrades = {} as { [key: string]: GuildUpgrade };
-       if (saveData.guild.adventurerCapacity) {
+      if (saveData.guild.adventurerCapacity) {
-         guildUpgrades.adventurerCapacity = new AdventurerCapacityUpgrade(saveData.guild.adventurerCapacity.level);
+        guildUpgrades.adventurerCapacity = new AdventurerCapacityUpgrade(saveData.guild.adventurerCapacity.level);
-       }
+      }
+      if (saveData.guild.expModifier) {
+        guildUpgrades.expModifier = new QuestExpUpgrade(saveData.guild.expModifier.level);
+      }
 
-       this.guild = new Guild(saveData.guild.level, saveData.guild.gold, guildUpgrades);
+      this.guild = new Guild(saveData.guild.level, saveData.guild.gold, guildUpgrades);
 
-       const adventurers = {} as { [key: string]: Adventurer };
+      const adventurers = {} as { [key: string]: Adventurer };
 
-       for (const id in saveData.adventurers) {
+      for (const id in saveData.adventurers) {
-         const data = saveData.adventurers[id];
+        const data = saveData.adventurers[id];
-         try {
+        try {
-           const adventurer = new Adventurer(
+          const adventurer = new Adventurer(
-               data.id,
+            data.id,
-               data.name,
+            data.name,
-               data.portrait,
+            data.portrait,
-               data.attackExponent ?? 1.1,
+            data.attackExponent ?? 1.1,
-               data.level ?? 1,
+            data.level ?? 1,
-               data.exp ?? 0
+            data.exp ?? 0,
-           );
+            data.prestige ?? 0,
-           adventurer.busy = data.busy;
+          );
-           adventurers[data.id] = adventurer;
+          adventurer.busy = data.busy;
-         } catch (e) {}
+          adventurers[data.id] = adventurer;
-       }
+        } catch (e) {
-       this.adventurers = adventurers;
+        }
+      }
+      this.adventurers = adventurers;
 
-       const missives = {} as { [key: string]: { [key: string]: Quest } };
+      const missives = {} as { [key: string]: { [key: string]: Quest } };
 
-       for (const id in saveData.missives) {
+      for (const id in saveData.missives) {
-         const missiveRank = {} as { [key: string]: Quest }
+        const missiveRank = {} as { [key: string]: Quest }
-         for (const questId in saveData.missives[id]) {
+        for (const questId in saveData.missives[id]) {
-           const data = saveData.missives[id][questId];
+          const data = saveData.missives[id][questId];
-           const quest = new Quest(questId, getFromString(data.rank), data.title, data.text, data.maxProgress, data.expReward, data.goldReward);
+          const quest = new Quest(questId, getFromString(data.rank), data.title, data.text, data.maxProgress, data.expReward, data.goldReward);
-           quest.progressPoints = data.progressPoints;
+          quest.progressPoints = data.progressPoints;
-           if (data.adventurers.length > 0) {
+          if (data.adventurers.length > 0) {
-             quest.adventurers.push(this.adventurers[data.adventurers[0].id])
+            quest.adventurers.push(this.adventurers[data.adventurers[0].id])
-           }
+          }
-           missiveRank[questId] = quest;
+          missiveRank[questId] = quest;
-         }
+        }
-         missives[id] = missiveRank;
+        missives[id] = missiveRank;
-       }
+      }
 
-       this.missives = missives;
+      this.missives = missives;
 
-       this.lastRecruitHandled = saveData.lastRecruitAction ?? 0;
+      this.lastRecruitHandled = saveData.lastRecruitAction ?? 0;
+
+      if (saveData.adventurerForHireId != null) {
+        for (const id in this.adventurersDatabase) {
+          const adventurer = this.adventurersDatabase[id];
+          if (adventurer.id === saveData.adventurerForHireId) {
+            this.adventurerForHire = adventurer;
+            return;
+          }
+        }
+      }
     },
     resetSave() {
       if (!confirm("You are about to wipe your save file. Are you sure?")) return;
@@ -161,25 +215,30 @@ export default defineComponent({
     }
   },
   async mounted() {
-    this.loadGame();
     this.quests = await loadAvailableQuests();
+    this.adventurersDatabase = await loadAdventurersForHire();
+    this.loadGame();
+
+    this.adventurersDatabase = removeAlreadyHiredAdventurers(this.adventurersDatabase, this.adventurers);
 
     setInterval(() => {
-      saveGame(new GameData(
+      saveGame(new GameData({
-          this.guild,
+        adventurers: this.adventurers,
-          this.adventurers,
+        guild: this.guild,
-          this.missives,
+        missives: this.missives,
-          this.lastQuestGot,
+        lastQuestGot: this.lastQuestGot,
-          this.lastRecruitHandled
+        lastRecruitAction: this.lastRecruitHandled,
-          )
+        adventurerForHireId: this.adventurerForHire?.id ?? null,
-      );
+      }));
-    }, 10*1000)
+    }, 10 * 1000)
 
     setInterval(() => {
       this.updateMissives();
 
       const now = Number(new Date());
 
+      this.checkForNewRecruit(now);
+
       for (const id in this.lastQuestGot) {
         const lastTime = this.lastQuestGot[getFromString(id as QuestRank)];
         if (lastTime === null) this.lastQuestGot[getFromString(id as QuestRank)] = 0;
@@ -303,6 +362,7 @@ nav {
     font-size: 2rem;
     color: #fff;
     text-decoration: none;
+
     &.router-link-active {
       text-decoration: underline;
     }

src/GameData.ts

@@ -1,22 +1,26 @@
-import type {Guild} from "@/classes/Guild";
+import {Guild} from "@/classes/Guild";
 import {Adventurer} from "@/classes/Adventurer";
 import {Quest} from "@/classes/Quest";
 import {getFromString, QuestRank} from "@/classes/QuestRank";
 
 export class GameData {
-    guild: Guild;
+  guild: Guild;
-    adventurers: { [key: string]: Adventurer };
+  adventurers: { [key: string]: Adventurer };
-    missives: { [key: string]: { [key: string]: Quest } };
+  missives: { [key: string]: { [key: string]: Quest } };
-    lastQuestGot: { [key: string]: null | number };
+  lastQuestGot: { [key: string]: null | number };
-    lastRecruitAction: null | number;
+  lastRecruitAction: null | number;
+  adventurerForHireId: string | null;
 
-    constructor(guild: Guild, adventurers: { [key: string]: Adventurer }, missives: { [key: string]: { [key: string]: Quest } }, lastQuestGot: { [key: string]: null | number }, lastRecruitAction: null | number) {
+  constructor(
-        this.guild = guild;
+    data: any,
-        this.adventurers = adventurers;
+  ) {
-        this.missives = missives;
+    this.guild = data.guild ?? new Guild(1, 0);
-        this.lastQuestGot = lastQuestGot;
+    this.adventurers = data.adventurers ?? {} as { [key: string]: Adventurer };
-        this.lastRecruitAction = lastRecruitAction;
+    this.missives = data.missives ?? {} as { [key: string]: { [key: string]: Quest } };
-    }
+    this.lastQuestGot = data.lastQuestGot ?? {} as { [key: string]: null | number };
+    this.lastRecruitAction = data.lastRecruitAction ?? null;
+    this.adventurerForHireId = data.adventurerForHireId ?? null;
+  }
 }
 
 
@@ -24,90 +28,96 @@ export class GameData {
  * Save the game to local storage
  */
 export function saveGame(
-    data: GameData
+  data: GameData
 ): void {
-    console.debug("Saving game...");
+  console.debug("Saving game...");
-    window.localStorage.setItem("savedGame", JSON.stringify({
+  window.localStorage.setItem("savedGame", JSON.stringify({
-        guild: data.guild,
+    guild: data.guild,
-        adventurers: data.adventurers,
+    adventurers: data.adventurers,
-        missives: data.missives,
+    missives: data.missives,
-        lastQuestGot: data.lastQuestGot,
+    lastQuestGot: data.lastQuestGot,
-        lastRecruitAction: data.lastRecruitAction,
+    lastRecruitAction: data.lastRecruitAction,
-    }));
+    adventurerForHireId: data.adventurerForHireId,
+  }));
 }
 
 export function loadGame(): GameData | null {
-    const savedGame = window.localStorage.getItem("savedGame");
+  const savedGame = window.localStorage.getItem("savedGame");
-    if (!savedGame) return null;
+  if (!savedGame) return null;
-    console.debug("Loading game...");
+  const parsedGame = JSON.parse(savedGame);
-    const parsedGame = JSON.parse(savedGame);
+  console.debug("Loading game...");
-    return new GameData(
+  return new GameData(parsedGame);
-        parsedGame.guild,
-        parsedGame.adventurers,
-        parsedGame.missives,
-        parsedGame.lastQuestGot,
-        parsedGame.lastRecruitAction
-    );
 }
 
 export async function loadAvailableQuests(): Promise<{ [key: string]: { [key: string]: Quest } }> {
-    const quests = {
+  const quests = {
-        S: {} as { [key: string]: Quest },
+    S: {} as { [key: string]: Quest },
-        A: {} as { [key: string]: Quest },
+    A: {} as { [key: string]: Quest },
-        B: {} as { [key: string]: Quest },
+    B: {} as { [key: string]: Quest },
-        C: {} as { [key: string]: Quest },
+    C: {} as { [key: string]: Quest },
-        D: {} as { [key: string]: Quest },
+    D: {} as { [key: string]: Quest },
-        E: {} as { [key: string]: Quest },
+    E: {} as { [key: string]: Quest },
-        F: {} as { [key: string]: Quest },
+    F: {} as { [key: string]: Quest },
-    } as { [key: string]: { [key: string]: Quest } };
+  } as { [key: string]: { [key: string]: Quest } };
 
-    for (const rank in quests) {
+  for (const rank in quests) {
-        const response = await fetch(`data/quests/Rank${rank}.json`);
+    const response = await fetch(`data/quests/Rank${rank}.json`);
-        if (response.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;
-        for (const quest of questData) {
-            id++;
-            quests[rank.toString()][id] = new Quest(
-                id.toString(),
-                getFromString(rank as QuestRank),
-                quest.title,
-                quest.text,
-                1,
-                0,
-                0
-            );
-        }
-    }
-    return quests;
-}
-
-export async function loadAdventurersForHire(currentAdventurerIds: Array<string> = []): Promise<Array<Adventurer>> {
-    const response = await fetch("data/adventurers.json");
     if (response.status !== 200) {
-        console.error("Failed to load adventurers");
+      console.error("Failed to load quests");
-        alert("Failed to load adventurers. Please try refreshing the page.");
+      alert("Failed to load quests. Please try refreshing the page.");
-        return [];
+      return quests;
     }
-    const adventurerData = await response.json();
+    const questData = await response.json();
 
-    const adventurers = [] as Array<Adventurer>;
+    let id = 0;
-    for (const adventurer of adventurerData) {
+    for (const quest of questData) {
-        if (currentAdventurerIds.includes(adventurer.id)) continue;
+      id++;
-        adventurers.push(new Adventurer(
+      quests[rank.toString()][id] = new Quest(
-            adventurer.id,
+        id.toString(),
-            adventurer.name,
+        getFromString(rank as QuestRank),
-            adventurer.portrait,
+        quest.title,
-            adventurer.attackExponent,
+        quest.text,
-            adventurer.level,
+        1,
-            adventurer.exp,
+        0,
-        ));
+        0
+      );
     }
-
+  }
-    return adventurers;
+  return quests;
+}
+
+export async function loadAdventurersForHire(): Promise<Array<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 [];
+  }
+  const adventurerData = await response.json();
+
+  const adventurers: Array<Adventurer> = [];
+  for (const adventurer of adventurerData) {
+    adventurers.push(new Adventurer(
+      adventurer.id,
+      adventurer.name,
+      adventurer.portrait,
+      adventurer.attackExponent,
+      adventurer.level,
+      adventurer.exp,
+    ));
+  }
+
+  return adventurers;
+}
+
+export function removeAlreadyHiredAdventurers(
+  adventurers: Array<Adventurer>,
+  adventurersHired: { [key: string]: Adventurer }
+): Array<Adventurer> {
+  const adventurersForHire: Array<Adventurer> = [];
+  for (const adventurer of adventurers) {
+    if (adventurersHired[adventurer.id]) continue;
+    adventurersForHire.push(adventurer);
+  }
+  return adventurersForHire;
 }

src/assets/main.css

@@ -1,20 +0,0 @@
-
-:root {
-
-}
-
-body {
-    margin: 0;
-    padding: 0 0 10rem;
-    min-height: calc(100vh - 10rem);
-    font-family: 'EB Garamond', serif;
-    overflow-y: scroll;
-    user-select: none;
-    background-size: 30%;
-    background: rgba(87, 50, 20, 0.75) url("/img/background/panels/plaster.png") repeat;
-    background-blend-mode: darken;
-}
-
-#app {
-    width: 100%;
-}

src/assets/main.scss

@@ -0,0 +1,84 @@
+body {
+  margin: 0;
+  padding: 0 0 10rem;
+  min-height: calc(100vh - 10rem);
+  font-family: 'EB Garamond', serif;
+  overflow-y: scroll;
+  user-select: none;
+  background-size: 25rem;
+  background-color: rgba(87, 50, 20, 0.45);
+  background-image: url("/img/background/wood/cut_wood_background.png");
+  background-blend-mode: darken;
+  background-repeat: repeat;
+}
+
+#app {
+  width: 100%;
+}
+
+.panel {
+  &.pinned-paper {
+    background-image: url("/img/quests/backgrounds/paper.png");
+    position: relative;
+    filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.25));
+
+    .nail {
+      position: absolute;
+      width: 2rem;
+      height: 2rem;
+      filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.5));
+
+      &.small {
+        width: 1rem;
+        height: 1rem;
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+
+      &.top-left {
+        top: 1rem;
+        left: 1rem;
+      }
+
+      &.top-right {
+        top: 1rem;
+        right: 1rem;
+      }
+    }
+  }
+
+  &.note-paper {
+    background-image: url("/img/background/paper/small_tile_paper.png");
+    position: relative;
+    filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.25));
+    border-image: url("/img/borders/metal_corner.png") 30 round;
+  }
+}
+
+.button {
+  padding: 0.5rem 1rem;
+  font-size: 1.2rem;
+  font-family: 'EB Garamond', serif;
+  font-weight: bold;
+  cursor: pointer;
+  border: 2px solid rgb(0, 0, 0);
+  transition: filter 0.05s linear;
+  white-space: nowrap;
+  &.metal {
+    background-image: url("/img/borders/metal_strip.png");
+    background-size: contain;
+    background-blend-mode: darken;
+    background-repeat: repeat;
+    color: #dcdcdc;
+  }
+  &:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+  &:hover:not(:disabled) {
+    filter: brightness(1.2);
+  }
+}

src/classes/Adventurer.ts

@@ -44,12 +44,13 @@ export class Adventurer {
     }
 
     canPrestigeUp(): boolean {
+        if (this.busy) return false;
         if (this.level < getMaxLevelForPrestige(this.prestige)) return false;
         return this.prestige < 5
     }
 
     getNextLevelExpRequirement(): number {
-        return this.level * 3;
+        return Math.max(1, Math.floor((3 * Math.pow(1.2, this.level - 1)) * Math.pow(1.025, this.level - 1)));
     }
 
     /**

src/classes/Guild.ts

@@ -1,5 +1,8 @@
 import type {GuildUpgrade} from "@/classes/GuildUpgrade";
-import {AdventurerCapacityUpgrade} from "@/classes/guildUpgrades/AdventurerCapacityUpgrade";
+import AdventurerCapacityUpgrade from "@/classes/guildUpgrades/AdventurerCapacityUpgrade";
+import {formatGold} from "@/classes/NumberMagic";
+import QuestExpUpgrade from "@/classes/guildUpgrades/QuestExpUpgrade";
+
 
 export class Guild {
     gold: number;
@@ -7,14 +10,17 @@ export class Guild {
     displayUpgradeCost: number|string;
     upgradeCost: number|null = null;
     adventurerCapacity: AdventurerCapacityUpgrade;
+    expModifier: QuestExpUpgrade;
 
     constructor(level: number, gold: number, upgrades: {[index:string]: GuildUpgrade} = {}) {
         this.gold = gold;
         this.level = level;
-        this.displayUpgradeCost = this.getUpgradeCost() ?? "Max level";
+        const rawDisplayUpgradeCost = this.getUpgradeCost();
+        this.displayUpgradeCost = rawDisplayUpgradeCost ? formatGold(rawDisplayUpgradeCost) : "Max level";
         this.upgradeCost = this.getUpgradeCost();
 
         this.adventurerCapacity = upgrades.adventurerCapacity as AdventurerCapacityUpgrade ?? new AdventurerCapacityUpgrade();
+        this.expModifier = upgrades.expModifier as QuestExpUpgrade ?? new QuestExpUpgrade();
 
     }
 
@@ -30,7 +36,7 @@ export class Guild {
         } else {
             const newCost = this.getUpgradeCost();
             if (newCost === null) return;
-            this.displayUpgradeCost = newCost;
+            this.displayUpgradeCost = formatGold(newCost);
             this.upgradeCost = newCost;
         }
     }
@@ -40,7 +46,7 @@ export class Guild {
     }
 
     isMaxLevel(): boolean {
-        return this.level >= 7;
+        return this.level >= 8;
     }
 }
 
@@ -50,5 +56,6 @@ const upgradeCosts = {
     "3": 5000,
     "4": 10000,
     "5": 25000,
-    "6": 50000,
+    "6": 100000,
+    "7": 750000,
 } as {[index:string]: number}

src/classes/NumberMagic.ts

@@ -0,0 +1,20 @@
+const goldFormatter = new Intl.NumberFormat('en-US', {
+    maximumFractionDigits: 3,
+    // @ts-ignore - typescript doesn't know about this option for some godforsaken reason
+    notation: "compact",
+    useGrouping: true,
+});
+
+const damageFormatter = new Intl.NumberFormat('en-US', {
+    maximumFractionDigits: 2,
+    // @ts-ignore - typescript doesn't know about this option for some godforsaken reason
+    notation: "compact",
+});
+
+export function formatGold(number: number): string {
+    return goldFormatter.format(number);
+}
+
+export function formatDamage(number: number): string {
+    return damageFormatter.format(number);
+}

src/classes/Quest.ts

@@ -33,8 +33,9 @@ export class Quest {
 /**
  * Generate rewards for a quest and return it
  * @param quest
+ * @param expModifier - multiplification modifier for the exp reward
  */
-export function getQuestWithRewards(quest: Quest) {
+export function getQuestWithRewards(quest: Quest, expModifier: number = 1) {
 
     let maxProgress = 1;
 
@@ -70,7 +71,7 @@ export function getQuestWithRewards(quest: Quest) {
     }
 
     let goldReward = Math.floor(maxProgress/6);
-    let expReward = Math.floor(Math.floor(maxProgress/120) - maxProgress/1000);
+    let expReward = Math.floor((Math.floor(maxProgress/120) - maxProgress/1000) * expModifier);
 
     // add some randomness to the rewards
     goldReward = Math.floor(randomNumberBetween(goldReward * 0.95, goldReward * 1.1));

src/classes/Recruitment.ts

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

src/classes/guildUpgrades/AdventurerCapacityUpgrade.ts

@@ -1,6 +1,6 @@
 import {GuildUpgrade} from "@/classes/GuildUpgrade";
 
-export class AdventurerCapacityUpgrade extends GuildUpgrade {
+export default class AdventurerCapacityUpgrade extends GuildUpgrade {
     constructor(level: number = 1) {
         super();
         this.level = level;

src/classes/guildUpgrades/QuestExpUpgrade.ts

@@ -0,0 +1,24 @@
+import {GuildUpgrade} from "@/classes/GuildUpgrade";
+
+export default class QuestExpUpgrade extends GuildUpgrade {
+  constructor(level: number = 1) {
+    super();
+    this.level = level;
+    this.nextLevelCost = this.getCostForLevel(this.level);
+    this.guildLevelRequirement = 8;
+  }
+
+  upgrade(): void {
+    this.level += 1;
+    this.nextLevelCost = this.getCostForLevel(this.level);
+  }
+
+  getCostForLevel(level: number): number {
+    const scalingFactor = Math.pow(1.15, level - 1);
+    return Math.floor(4000000 * scalingFactor * Math.pow(level, 1.1));
+  }
+
+  getModifier(): number {
+    return 1 + (this.level * 0.1);
+  }
+}

src/components/AdventurerDetails.vue

@@ -0,0 +1,144 @@
+<template>
+  <dialog ref="modal" class="adventurer-details" v-if="adventurer">
+    <button class="close" @click="$emit('closeButtonClicked')">✗</button>
+
+    <div class="adventurer-portrait">
+      <img :src="adventurer.portrait" alt="" draggable="false"/>
+    </div>
+    <span class="name">{{ adventurer.name }}</span>
+    <div class="adventurer-data">
+      <p>Level: {{ adventurer.level }} / {{ adventurer.getMaxLevel() }}</p>
+      <p>Prestige level: {{ adventurer.prestige }}</p>
+
+      <p>Exp: {{ adventurer.exp }} / {{ adventurer.getNextLevelExpRequirement() }}</p>
+      <p>DPS: {{ formatDamage(adventurer.getDPS()) }}</p>
+    </div>
+    <div class="adventurer-upgrades">
+      <button
+          class="button metal"
+          :disabled="!adventurer.canPrestigeUp()"
+          :title="!adventurer.canPrestigeUp() ? 'Adventurer needs to be at max level to prestige up' : ''"
+          @click="() => {
+            if (adventurer === null) return;
+            if (!adventurer.canPrestigeUp()) return;
+            adventurer.prestigeUp();
+          }"
+      >
+        Prestige up
+      </button>
+    </div>
+
+  </dialog>
+</template>
+
+<script lang="ts">
+import type {Adventurer} from "@/classes/Adventurer";
+import {defineComponent, type PropType} from "vue";
+import {formatDamage} from "../classes/NumberMagic";
+
+export default defineComponent({
+  name: "AdventurerDetails",
+  methods: {formatDamage},
+  props: {
+    adventurer: {
+      type: Object as PropType<Adventurer | null>,
+      default() {
+        return null as Adventurer | null;
+      },
+      required: true,
+    },
+  },
+  mounted() {
+    const refs = this.$refs as any;
+    refs.modal.showModal();
+  },
+
+});
+</script>
+
+<style lang="scss" scoped>
+.adventurer-details {
+  display: flex;
+  position: absolute;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  min-height: 10rem;
+  max-width: 45rem;
+  background-image: url("/img/background/paper/small_tile_paper.png");
+  background-position: center;
+  background-size: cover;
+  user-select: none;
+
+  &::backdrop {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  .close {
+    position: absolute;
+    top: 0.25rem;
+    right: 0.5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 3rem;
+    margin: 0;
+    cursor: pointer;
+    color: #ab0707;
+    background: transparent;
+    border: none;
+    font-family: 'EB Garamond', serif;
+    transition: color 0.05s linear;
+
+    &:hover {
+      color: #ff0000;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: 2px solid #ff0000;
+    }
+  }
+
+  .adventurer-portrait {
+    width: 100%;
+    max-width: 15rem;
+    aspect-ratio: 1/1;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  .name {
+    display: flex;
+    justify-content: center;
+    font-size: 2rem;
+    font-weight: bold;
+    width: 100%;
+  }
+
+  .adventurer-data {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    font-size: 1.2rem;
+    width: 100%;
+
+    & > * {
+      margin: 0;
+      width: calc(50% - 1rem);
+      text-align: center;
+      padding-inline: 0.5rem;
+    }
+  }
+}
+</style>

src/components/AdventurerList.vue

@@ -18,14 +18,15 @@ export default defineComponent({
   name: "AdventurerList",
   components: {AdventurerMiniComponent},
   data: () => ({
-    currentAdventurer: null as Adventurer|null
+    currentAdventurer: null as Adventurer | null
   }),
   props: {
     adventurers: {
-      type: Object as PropType<{[key: string]: Adventurer}>,
+      type: Object as PropType<{ [key: string]: Adventurer }>,
       default() {
-        return {} as {[key: string]: Adventurer};
+        return {} as { [key: string]: Adventurer };
       },
+      required: true,
     },
   },
 
@@ -39,12 +40,13 @@ export default defineComponent({
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
+
   .slot {
     padding: 0;
     width: 5rem;
     height: 5rem;
     border: 2px solid #000;
-    background-color: rgba(0,0,0, 0.2);
+    background-color: rgba(0, 0, 0, 0.2);
     cursor: pointer;
     border-radius: 0.2rem;
   }

src/components/AdventurerMiniComponent.vue

@@ -65,12 +65,10 @@ export default defineComponent({
       default() {
         return {} as {[key: string]: Adventurer};
       },
+      required: true,
     },
   },
   methods: {
-    print(a:string) {
-      console.log(a);
-    },
     closeSelect() {
       this.selection = false;
     }

src/components/AdventurerTile.vue

@@ -4,7 +4,8 @@
       :title="adventurer.name + (adventurer.busy ? ' (busy)' : '')"
   >
     <img :src="adventurer.portrait" :alt="adventurer.name" draggable="false">
-    <div class="level" :title="adventurer.isMaxLevel() ? 'Max level' : ''">{{adventurer.level}}<span v-if="adventurer.isMaxLevel()">⇪</span></div>
+    <div class="level" :title="adventurer.isMaxLevel() ? 'Max level' : ''">{{ adventurer.level }}<span
+        v-if="adventurer.isMaxLevel()">⇪</span></div>
     <div class="exp"></div>
   </article>
 </template>
@@ -12,7 +13,7 @@
 <script lang="ts">
 
 import type {Adventurer} from "@/classes/Adventurer";
-import {defineComponent, type PropType } from "vue";
+import {defineComponent, type PropType} from "vue";
 
 export default defineComponent({
   name: "AdventurerTile",
@@ -22,6 +23,7 @@ export default defineComponent({
       default() {
         return {} as Adventurer;
       },
+      required: true,
     }
   },
   data: () => ({
@@ -49,19 +51,21 @@ export default defineComponent({
   overflow: clip;
   font-size: 5rem;
   line-height: 1;
-  color: rgba(0,0,0, 0.75);
+  color: rgba(0, 0, 0, 0.75);
   position: relative;
+
   .level {
     position: absolute;
     top: 0;
     left: 0;
     font-size: 1rem;
     min-width: 1rem;
-    background-color: rgba(0,0,0, 0.75);
+    background-color: rgba(0, 0, 0, 0.75);
     border-bottom-right-radius: 0.2rem;
     padding: 0.1rem;
     color: #fff;
   }
+
   .exp {
     position: absolute;
     bottom: 0;
@@ -71,6 +75,7 @@ export default defineComponent({
     background-color: rgba(203, 33, 213, 0.75);
     transition: width 1s linear;
   }
+
   img {
     width: 100%;
     height: 100%;

src/components/ChangelogComponent.vue

@@ -1,8 +1,15 @@
 <template>
-  <div class="changelog">
+  <div class="changelog panel pinned-paper">
+    <div class="nail top-left">
+      <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
+    </div>
+    <div class="nail top-right">
+      <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
+    </div>
     <h1>Changelog</h1>
     <div class="changelog-entry" v-for="release in releases">
-      <h2>Version {{ release.name }}</h2>
+      <hr>
+      <h2><span>Version {{ release.name }}</span><small class="date">{{ timeFormat.format(release.createdAt) }}</small></h2>
       <pre>{{ release.body }}</pre>
     </div>
   </div>
@@ -15,7 +22,12 @@ import {defineComponent} from "vue";
 export default defineComponent({
   name: "ChangelogComponent",
   data: () => ({
-    releases: [] as Array<any>,
+    timeFormat: Intl.DateTimeFormat(Intl.DateTimeFormat().resolvedOptions().locale, {
+      year: "numeric",
+      month: "numeric",
+      day: "numeric",
+    }),
+    releases: [] as Array<{body: string, name: string, createdAt: Date}>,
     lastPage: 1,
   }),
   methods: {
@@ -33,6 +45,7 @@ export default defineComponent({
         const version = {} as any;
         version.body = release.body.trim();
         version.name = release.name;
+        version.createdAt = new Date(release.published_at);
         if (release.body.length === 0) continue;
         this.releases.push(version);
       }
@@ -47,29 +60,53 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .changelog {
-  padding: 3rem;
+  padding-block: 3rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 1rem;
   max-width: 45rem;
+  width: 100%;
+
   h1 {
     font-size: 3rem;
     line-height: 1;
     margin: 0;
     text-align: center;
   }
+
   .changelog-entry {
     width: 100%;
+
     h2 {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+      align-items: flex-end;
       margin: 0;
+      padding-inline: 1rem;
+      gap: 0.5rem;
     }
+
+    .date {
+      color: rgba(0,0,0, 0.6);
+      font-size: 1rem;
+    }
+
+    hr {
+      border: 0;
+      width: calc(100% - 2rem);
+      border-bottom: 1px solid black;
+    }
+
     pre {
       line-height: 1.2;
       margin: 0;
       white-space: pre-wrap;
       font-family: 'EB Garamond', serif;
+      padding-inline: 1rem;
     }
   }
 }

src/components/QuestMissive.vue

@@ -40,8 +40,8 @@
     </div>
     <h3>Rewards</h3>
     <div class="rewards">
-      <span>Gold: <b>{{missive.goldReward}}</b></span>
+      <span>Gold: <b>{{ missive.goldReward }}</b></span>
-      <span>Exp: <b>{{missive.expReward}}</b></span>
+      <span>Exp: <b>{{ missive.expReward }}</b></span>
     </div>
   </article>
 </template>
@@ -57,16 +57,18 @@ export default defineComponent({
   components: {AdventurerComponent},
   props: {
     missive: {
-      type: Object as PropType<Quest|any>,
+      type: Object as PropType<Quest | any>,
       default() {
         return {} as Quest;
       },
+      required: true,
     },
     adventurers: {
-      type: Object as PropType<{[key: string]: Adventurer}>,
+      type: Object as PropType<{ [key: string]: Adventurer }>,
       default() {
-        return {} as {[key: string]: Adventurer};
+        return {} as { [key: string]: Adventurer };
       },
+      required: true,
     },
   },
   data: () => {
@@ -126,6 +128,7 @@ export default defineComponent({
     height: 100%;
     z-index: -5;
     overflow: hidden;
+
     img {
       width: 100%;
       height: 100%;
@@ -137,6 +140,7 @@ export default defineComponent({
     font-size: 1.5rem;
     line-height: 1;
   }
+
   h3 {
     font-size: 1.15rem;
     margin: 0;
@@ -148,6 +152,7 @@ export default defineComponent({
     margin: 0.5rem auto;
     position: relative;
     height: 1.25rem;
+
     .progress {
       position: absolute;
       top: 0;
@@ -158,6 +163,7 @@ export default defineComponent({
       background-color: rgba(0, 128, 0, 0.65);
       transition: width 250ms linear;
     }
+
     .percentage {
       position: absolute;
       top: 0;
@@ -221,6 +227,7 @@ export default defineComponent({
     background-size: contain;
     opacity: 1;
     z-index: -4;
+
     img {
       width: 100%;
       height: 100%;
@@ -241,6 +248,7 @@ export default defineComponent({
     display: flex;
     justify-content: center;
     align-items: center;
+
     img {
       width: 45%;
       height: 35%;

src/components/UpgradesList.vue

@@ -1,22 +1,37 @@
 <template>
-<section class="upgrades">
+  <section class="upgrades">
-<h2>Upgrades</h2>
+    <h2>Upgrades</h2>
-  <div class="upgrade">
+    <div class="upgrade">
-    <span>Adventurer capacity (level {{ guild.adventurerCapacity.level }})</span>
+      <span>Adventurer capacity (level {{ guild.adventurerCapacity.level }})</span>
-    <button
+      <small>Increases the maximum amount of recruited adventurers</small>
-        v-if="guild.adventurerCapacity.nextLevelCost"
+      <button
-        :disabled="guild.gold < guild.adventurerCapacity.nextLevelCost"
+          class="button metal"
-        @click="upgradeAdventurerCapacity()"
+          v-if="guild.adventurerCapacity.nextLevelCost"
-    >
+          :disabled="guild.gold < guild.adventurerCapacity.nextLevelCost"
-      Upgrade ({{guild.adventurerCapacity.nextLevelCost.toFixed(0)}} gold)
+          @click="upgradeAdventurerCapacity()"
-    </button>
+      >
-  </div>
+        Upgrade ({{ formatGold(guild.adventurerCapacity.nextLevelCost) }} gold)
-</section>
+      </button>
+    </div>
+    <div class="upgrade" v-if="guild.level >= guild.expModifier.guildLevelRequirement">
+      <span>Quest exp modifier (level {{ guild.expModifier.level }})</span>
+      <small>Increases exp from newly offered quests by 10% per level</small>
+      <button
+          class="button metal"
+          v-if="guild.expModifier.nextLevelCost"
+          :disabled="guild.gold < guild.expModifier.nextLevelCost"
+          @click="upgradeQuestExpModifier()"
+      >
+        Upgrade ({{ formatGold(guild.expModifier.nextLevelCost) }} gold)
+      </button>
+    </div>
+  </section>
 </template>
 
 <script lang="ts">
-import { Guild } from "@/classes/Guild";
+import {Guild} from "@/classes/Guild";
 import {defineComponent, type PropType} from "vue";
+import {formatGold} from "@/classes/NumberMagic";
 
 export default defineComponent({
   name: "UpgradesList",
@@ -25,17 +40,26 @@ export default defineComponent({
       type: Object as PropType<Guild>,
       default() {
         return new Guild(1, 0) as Guild;
-      }
+      },
+      required: true,
     }
   },
   methods: {
+    formatGold,
     upgradeAdventurerCapacity(): void {
       if (!this.guild.adventurerCapacity) return;
       if (!this.guild.adventurerCapacity.nextLevelCost) return;
       if (this.guild.gold < this.guild.adventurerCapacity.nextLevelCost) return;
       this.guild.gold -= this.guild.adventurerCapacity.nextLevelCost;
       this.guild.adventurerCapacity.upgrade();
-    }
+    },
+    upgradeQuestExpModifier(): void {
+      if (!this.guild.expModifier) return;
+      if (!this.guild.expModifier.nextLevelCost) return;
+      if (this.guild.gold < this.guild.expModifier.nextLevelCost) return;
+      this.guild.gold -= this.guild.expModifier.nextLevelCost;
+      this.guild.expModifier.upgrade();
+    },
   }
 });
 </script>
@@ -47,22 +71,27 @@ export default defineComponent({
   justify-content: center;
   align-items: center;
   gap: 1rem;
+
   h2 {
     font-size: 1.75rem;
     margin: 2rem 0 0;
     padding: 0;
   }
+
   .upgrade {
     text-align: center;
     font-size: 1.25rem;
     font-weight: bold;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
-    flex-wrap: wrap;
     width: min(25rem, 100%);
     justify-content: center;
     align-items: center;
-    gap: 1rem;
+    gap: 0.2rem;
+    small {
+      font-weight: normal;
+      line-height: 1;
+    }
   }
 }
 </style>

src/main.ts

@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 
-import './assets/main.css'
+import './assets/main.scss'
 
 const app = createApp(App)
 

src/views/AdventurerView.vue

@@ -1,43 +1,57 @@
 <template>
-<div class="adventurer-section">
+  <div class="adventurer-section">
-  <section class="recruit">
+    <AdventurerDetails
-    <h1>Applying adventurers</h1>
+        :adventurer="selectedAdventurer"
-    <div class="adventurers">
+        v-if="selectedAdventurer !== null"
-      <div v-if="currentlyForHire">
+        @closeButtonClicked="selectedAdventurer = null"
-        <adventurer-tile class="hire-tile" :adventurer="currentlyForHire"/>
+
-        <div class="decision">
+    />
+    <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(currentlyForHire)"
+              @click="hireAdventurer()"
               :class="{disabled: Object.keys(adventurers).length >= guild.adventurerCapacity.getAdventurerCapacity()}"
           >
             ✔
           </span>
-          <span
+            <span
-              :title="Object.keys(adventurers).length > 0 ? 'Dismiss' : ''"
+                :title="Object.keys(adventurers).length > 0 ? 'Dismiss' : ''"
-              :class="{disabled: Object.keys(adventurers).length <= 0}"
+                :class="{disabled: Object.keys(adventurers).length <= 0}"
-              @click="dismissAdventurer()"
+                @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() }})
+      </h1>
+      <small>Click an adventurer to see details about them</small>
+      <div class="adventurers">
+        <div
+            class="adventurer-tile"
+            v-for="adventurer in adventurers"
+            :key="adventurer.id"
+            @click="selectedAdventurer = adventurer"
+        >
+          <AdventurerTile class="entry" :adventurer="adventurer"/>
+          <b>{{ adventurer.name }}</b>
         </div>
       </div>
-      <div v-else>
+    </section>
-        <span>Noone applied as of now. Check back later!</span>
+  </div>
-      </div>
-
-    </div>
-  </section>
-  <section class="collection">
-    <h1>Recruited adventurers ({{ Object.keys(adventurers).length }} / {{ guild.adventurerCapacity.getAdventurerCapacity() }})</h1>
-    <div class="adventurers">
-      <div class="adventurer-tile" v-for="adventurer in adventurers" :key="adventurer.id">
-        <AdventurerTile class="entry" :adventurer="adventurer" />
-        <b>{{ adventurer.name }}</b>
-      </div>
-    </div>
-  </section>
-</div>
 </template>
 
 <script lang="ts">
@@ -45,16 +59,17 @@ import type {PropType} from "vue";
 import {defineComponent} from "vue";
 import AdventurerTile from "@/components/AdventurerTile.vue";
 import type {Adventurer} from "@/classes/Adventurer";
-import { loadAdventurersForHire } from "@/GameData";
 import type {Guild} from "@/classes/Guild";
+import AdventurerDetails from "@/components/AdventurerDetails.vue";
 
 export default defineComponent({
   name: "RecruitView",
-  components: {AdventurerTile},
+  components: {AdventurerDetails, AdventurerTile},
   data: () => {
     return {
-      currentlyForHire: null as Adventurer|null,
+      currentlyForHire: null as Adventurer | null,
       adventurersForHire: [] as Array<Adventurer>,
+      selectedAdventurer: null as Adventurer | null,
     }
   },
   props: {
@@ -63,83 +78,34 @@ export default defineComponent({
       default() {
         return {} as Guild
       },
+      required: true,
     },
     adventurers: {
       type: Object as PropType<{ [key: string]: Adventurer }>,
       default() {
         return {} as { [key: string]: Adventurer };
       },
+      required: true,
     },
-    lastRecruitTime: {
+    adventurerForHire: {
-      type: Number as PropType<number>,
+      type: Object as PropType<Adventurer | null>,
       default() {
-        return 0;
+        return null;
       }
     },
   },
   methods: {
-    getRandomAdventurer(): Adventurer|null {
+    hireAdventurer(): void {
-      if (this.adventurersForHire.length <= 0) return null;
-      const randomId = this.adventurersForHire.length * Math.random() << 0;
-      return this.adventurersForHire[randomId];
-    },
-    getNewAdventurerForHire(): void {
-      const adventurer = this.getRandomAdventurer();
-      if (adventurer === null) {
-        this.currentlyForHire = null;
-        return;
-      }
-
-      if (this.adventurers[adventurer.id] != null) {
-        this.currentlyForHire = null;
-        return;
-      }
-
-      this.currentlyForHire = adventurer;
-      window.localStorage.setItem("currentlyForHire", adventurer.id);
-
-    },
-    hireAdventurer(adventurer: Adventurer|any): void {
       if (Object.keys(this.adventurers).length >= this.guild.adventurerCapacity.getAdventurerCapacity()) return;
-      this.adventurers[adventurer.id] = adventurer;
+      this.$emit("recruitActionTaken", this.adventurerForHire);
-      this.currentlyForHire = null;
-      window.localStorage.removeItem("currentlyForHire");
-      this.$emit("recruitActionTaken", adventurer);
     },
     dismissAdventurer() {
       if (Object.keys(this.adventurers).length <= 0) return;
-      this.currentlyForHire = null;
       this.$emit("recruitActionTaken", null);
-      window.localStorage.removeItem("currentlyForHire");
     }
   },
   async mounted() {
 
-    this.adventurersForHire = await loadAdventurersForHire(Object.keys(this.adventurers));
-
-    if (Object.keys(this.adventurers).length <= 0) {
-      this.currentlyForHire = this.adventurersForHire[0];
-      window.localStorage.setItem("currentlyForHire", this.adventurersForHire[0].id);
-      return;
-    }
-
-    const savedCurrentForHire = window.localStorage.getItem("currentlyForHire");
-    if (savedCurrentForHire !== null) {
-      for (const id in this.adventurersForHire) {
-        const adventurer = this.adventurersForHire[id];
-        if (adventurer.id === savedCurrentForHire) {
-          this.currentlyForHire = adventurer;
-          return;
-        }
-      }
-    }
-
-    const now = Number(new Date());
-
-    if (now - this.lastRecruitTime >= 1000 * 60 * 30 && this.currentlyForHire === null) {
-      this.getNewAdventurerForHire();
-    }
-
   },
   emits: ["recruitActionTaken"]
 
@@ -148,22 +114,36 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .adventurer-section {
+  padding-block: 1rem;
   display: flex;
-  flex-direction: column;
   justify-content: center;
-  align-items: center;
+  align-content: center;
+  flex-direction: column;
+  gap: 1rem;
   width: 100%;
+
   section {
-    max-width: 1280px;
-    width: 100%;
     text-align: center;
-    padding-block: 1rem;
+    padding: 1rem;
+    width: calc(100% - 2rem);
+    max-width: 45rem;
+    margin: 0 auto;
   }
+
   h1 {
     font-size: 2rem;
     font-weight: bold;
     margin: 0;
   }
+
+  .collection {
+    small {
+      font-size: 1rem;
+      display: block;
+      margin-bottom: 0.5rem;
+    }
+  }
+
   .adventurers {
     display: flex;
     flex-direction: row;
@@ -171,6 +151,7 @@ export default defineComponent({
     align-items: center;
     flex-wrap: wrap;
     gap: 1rem;
+
     .adventurer-tile {
       display: flex;
       justify-content: center;
@@ -178,10 +159,13 @@ export default defineComponent({
       flex-direction: column;
       gap: 0.25rem;
       font-size: 1.1rem;
+      cursor: pointer;
+
       .entry {
         height: 7rem;
         width: 7rem;
       }
+
       b {
         line-height: 1;
         text-align: center;
@@ -192,6 +176,7 @@ export default defineComponent({
       }
     }
   }
+
   .decision {
     display: flex;
     flex-direction: row;
@@ -199,17 +184,21 @@ export default defineComponent({
     align-items: center;
     font-size: 2rem;
     gap: 1rem;
+
     span {
       cursor: pointer;
+
       &:hover {
         color: #fff;
       }
+
       &.disabled {
-        color: rgba(0,0,0, 0.5);
+        color: rgba(0, 0, 0, 0.5);
         cursor: default;
       }
     }
   }
+
   .hire-tile {
     width: 8rem;
     height: 8rem;

src/views/HomeView.vue

@@ -1,26 +1,39 @@
 <template>
   <main>
-    <section class="title">
+    <section class="title panel note-paper">
       <h1>Guild Master</h1>
       <h3>Adventurer's guild management game</h3>
-      <small>v{{version}}</small>
+      <small>v{{ version }}</small>
     </section>
-    <section class="coffer">
+    <section class="upgrades panel pinned-paper">
-      <p>Coffer: {{guild.gold}} gold</p>
+      <div class="nail top-left">
-    </section>
+        <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
-    <section class="upgrade">
+      </div>
-      <p>Guild level: {{ guild.level }}</p>
+      <div class="nail top-right">
-      <button :disabled="guild.upgradeCost ? guild.gold < guild.upgradeCost : true" @click="guild.upgrade()">
+        <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
-        <span>Upgrade guild level</span><br>
+      </div>
-        <span>({{ guild.displayUpgradeCost }})</span>
+      <section class="coffer">
-      </button>
+        <p>Coffer: {{ formatGold(guild.gold) }} gold</p>
-    </section>
+      </section>
-    <section class="upgrade">
+      <section class="upgrade">
-      <UpgradesList :guild="guild" />
+        <p>Guild level: {{ guild.level }}</p>
-    </section>
+        <button
-    <section class="upgrade">
+            class="button metal"
-      <span class="wipe-save" @click="$emit('wipeSave')">Wipe your save data</span>
+            :disabled="guild.upgradeCost ? guild.gold < guild.upgradeCost : true"
+            @click="guild.upgrade()"
+        >
+          <span>Upgrade guild level </span>
+          <span>({{ guild.displayUpgradeCost }})</span>
+        </button>
+      </section>
+      <section class="upgrade">
+        <UpgradesList :guild="guild"/>
+      </section>
+      <section class="upgrade">
+        <span class="wipe-save" @click="$emit('wipeSave')">Wipe your save data</span>
+      </section>
     </section>
+
   </main>
 </template>
 
@@ -31,9 +44,11 @@ import {Guild} from "@/classes/Guild";
 
 import {version} from "../../package.json"
 import UpgradesList from "@/components/UpgradesList.vue";
+import {formatGold} from "@/classes/NumberMagic";
 
 export default defineComponent({
   name: "GuildView",
+  methods: {formatGold},
   components: {UpgradesList},
   data: () => {
     return {
@@ -44,46 +59,69 @@ export default defineComponent({
     guild: {
       type: Object as PropType<Guild>,
       default: () => new Guild(1, 0) as Guild,
+      required: true,
     },
   }
 });
 </script>
 
 <style lang="scss">
+main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-block: 1rem;
+  gap: 1rem;
+
+  .upgrades {
+    max-width: 45rem;
+    width: 100%;
+  }
+}
+
 .title {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 2.5rem;
+  padding-block: 2.5rem;
   text-align: center;
-
+  width: 100%;
+  max-width: 45rem;
   gap: 0.5rem;
+
   h1 {
     font-size: 4rem;
     line-height: 0.75;
-
+    white-space: pre-wrap;
     margin: 0;
   }
+
   h3 {
     margin: 0;
     line-height: 0.9;
   }
+
   small {
     font-size: 0.9rem;
     font-weight: bold;
     line-height: 0.25;
   }
 }
+
 .coffer {
   text-align: center;
+
   p {
     font-size: 1.5rem;
     font-weight: bold;
   }
 }
+
 .upgrade {
   text-align: center;
+
   .wipe-save {
     display: inline-flex;
     font-weight: bold;
@@ -91,6 +129,7 @@ export default defineComponent({
     color: #d52121;
     cursor: pointer;
   }
+
   p {
     margin: 0;
     font-size: 1.5rem;

src/views/QuestView.vue

@@ -1,89 +1,90 @@
 <template>
-  <div class="guild" v-if="guild.level >= 7 && Object.keys(quests.S).length > 0">
+  <section>
-    <h1>Rank S Quests</h1>
+    <div class="guild" v-if="guild.level >= 7 && Object.keys(quests.S).length > 0">
-    <section class="missives">
+      <h1>Rank S Quests</h1>
-      <QuestMissive
+      <section class="missives">
-          v-for="(missive, key, index) in quests.S"
+        <QuestMissive
-          :key="key"
+            v-for="(missive, key, index) in quests.S"
-          :adventurers="adventurers"
+            :key="key"
-          :missive="missive"
+            :adventurers="adventurers"
-          @click="finalizeQuest(missive)"
+            :missive="missive"
-      />
+            @click="finalizeQuest(missive)"
-    </section>
+        />
-  </div>
+      </section>
-  <div class="guild" v-if="guild.level >= 6 && Object.keys(quests.A).length > 0">
+    </div>
-    <h1>Rank A Quests</h1>
+    <div class="guild" v-if="guild.level >= 6 && Object.keys(quests.A).length > 0">
-    <section class="missives">
+      <h1>Rank A Quests</h1>
-      <QuestMissive
+      <section class="missives">
-          v-for="(missive, key, index) in quests.A"
+        <QuestMissive
-          :key="key"
+            v-for="(missive, key, index) in quests.A"
-          :adventurers="adventurers"
+            :key="key"
-          :missive="missive"
+            :adventurers="adventurers"
-          @click="finalizeQuest(missive)"
+            :missive="missive"
-      />
+            @click="finalizeQuest(missive)"
-    </section>
+        />
-  </div>
+      </section>
-  <div class="guild" v-if="guild.level >= 5 && Object.keys(quests.B).length > 0">
+    </div>
-    <h1>Rank B Quests</h1>
+    <div class="guild" v-if="guild.level >= 5 && Object.keys(quests.B).length > 0">
-    <section class="missives">
+      <h1>Rank B Quests</h1>
-      <QuestMissive
+      <section class="missives">
-          v-for="(missive, key, index) in quests.B"
+        <QuestMissive
-          :key="key"
+            v-for="(missive, key, index) in quests.B"
-          :adventurers="adventurers"
+            :key="key"
-          :missive="missive"
+            :adventurers="adventurers"
-          @click="finalizeQuest(missive)"
+            :missive="missive"
-      />
+            @click="finalizeQuest(missive)"
-    </section>
+        />
-  </div>
+      </section>
-  <div class="guild" v-if="guild.level >= 4 && Object.keys(quests.C).length > 0">
+    </div>
-    <h1>Rank C Quests</h1>
+    <div class="guild" v-if="guild.level >= 4 && Object.keys(quests.C).length > 0">
-    <section class="missives">
+      <h1>Rank C Quests</h1>
-      <QuestMissive
+      <section class="missives">
-          v-for="(missive, key, index) in quests.C"
+        <QuestMissive
-          :key="key"
+            v-for="(missive, key, index) in quests.C"
-          :adventurers="adventurers"
+            :key="key"
-          :missive="missive"
+            :adventurers="adventurers"
-          @click="finalizeQuest(missive)"
+            :missive="missive"
-      />
+            @click="finalizeQuest(missive)"
-    </section>
+        />
-  </div>
+      </section>
-  <div class="guild" v-if="guild.level >= 3 && Object.keys(quests.D).length > 0">
+    </div>
-    <h1>Rank D Quests</h1>
+    <div class="guild" v-if="guild.level >= 3 && Object.keys(quests.D).length > 0">
-    <section class="missives">
+      <h1>Rank D Quests</h1>
-      <QuestMissive
+      <section class="missives">
-          v-for="(missive, key, index) in quests.D"
+        <QuestMissive
-          :key="key"
+            v-for="(missive, key, index) in quests.D"
-          :adventurers="adventurers"
+            :key="key"
-          :missive="missive"
+            :adventurers="adventurers"
-          @click="finalizeQuest((missive))"
+            :missive="missive"
-      />
+            @click="finalizeQuest((missive))"
-    </section>
+        />
-  </div>
+      </section>
-  <div class="guild" v-if="guild.level >= 2 && Object.keys(quests.E).length > 0">
+    </div>
-    <h1>Rank E Quests</h1>
+    <div class="guild" v-if="guild.level >= 2 && Object.keys(quests.E).length > 0">
-    <section class="missives">
+      <h1>Rank E Quests</h1>
-      <QuestMissive
+      <section class="missives">
-          v-for="(missive, key, index) in quests.E"
+        <QuestMissive
-          :key="key"
+            v-for="(missive, key, index) in quests.E"
-          :adventurers="adventurers"
+            :key="key"
-          :missive="missive"
+            :adventurers="adventurers"
-          @click="finalizeQuest(missive)"
+            :missive="missive"
-      />
+            @click="finalizeQuest(missive)"
-    </section>
+        />
-  </div>
+      </section>
-  <div class="guild" v-if="Object.keys(quests.F).length > 0">
+    </div>
-    <h1>Rank F Quests</h1>
+    <div class="guild" v-if="Object.keys(quests.F).length > 0">
-    <section class="missives">
+      <h1>Rank F Quests</h1>
-      <QuestMissive
+      <section class="missives">
-          v-for="(missive, key, index) in quests.F"
+        <QuestMissive
-          :key="key"
+            v-for="(missive, key, index) in quests.F"
-          :adventurers="adventurers"
+            :key="key"
-          :missive="missive"
+            :adventurers="adventurers"
-          @click="finalizeQuest(missive)"
+            :missive="missive"
-      />
+            @click="finalizeQuest(missive)"
-    </section>
+        />
-  </div>
+      </section>
-
+    </div>
+  </section>
 </template>
 
 <script lang="ts">
@@ -103,18 +104,21 @@ export default defineComponent({
       default() {
         return new Guild(1, 0);
       },
+      required: true,
     },
     adventurers: {
       type: Object as PropType<{ [key: string]: Adventurer }>,
       default() {
         return {} as { [key: string]: Adventurer };
       },
+      required: true,
     },
     quests: {
       type: Object as PropType<{ [key: string]: Quest }>,
       default() {
         return {} as { [key: string]: Quest };
       },
+      required: true,
     },
     lastRecruitTime: {
       type: Number as PropType<number>,
@@ -123,10 +127,10 @@ export default defineComponent({
       }
     },
   },
-  emits: [ 'finalizeQuest', 'wipeSave', 'recruitActionTaken'],
+  emits: ['finalizeQuest', 'wipeSave', 'recruitActionTaken'],
   methods: {
     // This is a workaround for vue not reporting Quest as Quest in v-for
-    finalizeQuest(quest: any|Quest): void {
+    finalizeQuest(quest: any | Quest): void {
       if (quest.progressPoints < quest.maxProgress) return;
       this.$emit('finalizeQuest', quest)
     },

src/views/TechnicalView.vue

@@ -1,15 +1,27 @@
 <template>
-<section class="technical-view">
+  <section class="technical-view">
-  <h1>Socials</h1>
+    <div class="socials panel pinned-paper">
-  <div class="socials">
+      <div class="nail top-left small">
-    <a class="link" href="https://discord.gg/j8KK5dGBps"><img class="icon" src="/img/icons/discord.svg" alt="Discord" />Discord</a>
+        <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
-    <a class="link" href="https://github.com/YouHaveTrouble/GuildMaster"><img class="icon" src="/img/icons/github.svg" alt="GitHub" />GitHub</a>
+      </div>
+      <div class="nail top-right small">
+        <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
+      </div>
+      <h1>Socials</h1>
+      <div class="links">
+        <a class="link" href="https://discord.gg/j8KK5dGBps">
+          <img class="icon" src="/img/icons/discord.svg" alt="Discord"/>
+          Discord
+        </a>
+        <a class="link" href="https://github.com/YouHaveTrouble/GuildMaster">
+          <img class="icon" src="/img/icons/github.svg" alt="GitHub"/>
+          GitHub
+        </a>
+      </div>
+    </div>
+    <ChangelogComponent/>
 
-  </div>
+  </section>
-
-  <ChangelogComponent/>
-
-</section>
 </template>
 
 <script lang="ts">
@@ -31,30 +43,44 @@ export default defineComponent({
   align-items: center;
   gap: 1rem;
   padding-block: 1rem;
+
   h1 {
     font-size: 3rem;
     line-height: 1;
     margin: 0;
   }
+
   .socials {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 1rem;
+    padding: 1rem;
+
+    .links {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      gap: 1rem;
+
+      .link {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 0.05rem;
+        text-decoration: underline;
+        font-size: 1.5rem;
+        color: #000;
+        font-weight: bold;
+      }
+    }
   }
-  .link {
+
-    display: flex;
+
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 0.05rem;
-    text-decoration: underline;
-    font-size: 1.5rem;
-    color: #000;
-    font-weight: bold;
-  }
   .icon {
     width: 2rem;
     height: 2rem;