bump version

Adventurer details

package.json

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

src/App.vue

@@ -27,7 +27,14 @@ import {Adventurer} from "@/classes/Adventurer";
 import {getQuestWithRewards, Quest} from "@/classes/Quest";
 import {Guild} from "@/classes/Guild";
 import {getFromString, QuestRank} from "@/classes/QuestRank";
-import {GameData, loadAdventurersForHire, 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 {getNewAdventurerForHire} from "@/classes/Recruitment";
@@ -81,10 +88,16 @@ export default defineComponent({
 
     },
     async checkForNewRecruit(currentTimestamp: number) {
-      if (this.lastRecruitHandled === null) {
+
+      if (this.lastRecruitHandled == null) {
         this.lastRecruitHandled = 0;
       }
-      if (currentTimestamp - this.lastRecruitHandled >= 1000 * 60 * 30 && this.adventurerForHire === null) {
+
+      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);
       }
     },
@@ -151,16 +164,16 @@ export default defineComponent({
             data.portrait,
             data.attackExponent ?? 1.1,
             data.level ?? 1,
-               data.exp ?? 0
+            data.exp ?? 0,
+            data.prestige ?? 0,
           );
           adventurer.busy = data.busy;
           adventurers[data.id] = adventurer;
-         } catch (e) {}
+        } catch (e) {
+        }
       }
       this.adventurers = adventurers;
 
-
-
       const missives = {} as { [key: string]: { [key: string]: Quest } };
 
       for (const id in saveData.missives) {
@@ -181,15 +194,10 @@ export default defineComponent({
 
       this.lastRecruitHandled = saveData.lastRecruitAction ?? 0;
 
-      if (Object.keys(this.adventurers).length <= 0) {
+      if (saveData.adventurerForHireId != null) {
-        this.adventurerForHire = this.adventurersDatabase[0];
-        return;
-      }
-
-      if (saveData.currentlyForHireId !== null) {
         for (const id in this.adventurersDatabase) {
           const adventurer = this.adventurersDatabase[id];
-          if (adventurer.id === saveData.currentlyForHireId) {
+          if (adventurer.id === saveData.adventurerForHireId) {
             this.adventurerForHire = adventurer;
             return;
           }
@@ -203,20 +211,21 @@ export default defineComponent({
     }
   },
   async mounted() {
-    this.loadGame();
     this.quests = await loadAvailableQuests();
-    this.adventurersDatabase = await loadAdventurersForHire(Object.keys(this.adventurers));
+    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,
-          this.adventurerForHire?.id ?? null
+        adventurerForHireId: this.adventurerForHire?.id ?? null,
-          )
+      }));
-      );
     }, 10 * 1000)
 
     setInterval(() => {
@@ -349,6 +358,7 @@ nav {
     font-size: 2rem;
     color: #fff;
     text-decoration: none;
+
     &.router-link-active {
       text-decoration: underline;
     }

src/GameData.ts

@@ -1,4 +1,4 @@
-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";
@@ -9,21 +9,17 @@ export class GameData {
   missives: { [key: string]: { [key: string]: Quest } };
   lastQuestGot: { [key: string]: null | number };
   lastRecruitAction: null | number;
-    currentlyForHireId: string|null;
+  adventurerForHireId: string | null;
 
   constructor(
-        guild: Guild, adventurers: { [key: string]: Adventurer },
+    data: any,
-        missives: { [key: string]: { [key: string]: Quest } },
-        lastQuestGot: { [key: string]: null | number },
-        lastRecruitAction: null | number,
-        currentlyForHireId: string|null = null
   ) {
-        this.guild = guild;
+    this.guild = data.guild ?? new Guild(1, 0);
-        this.adventurers = adventurers;
+    this.adventurers = data.adventurers ?? {} as { [key: string]: Adventurer };
-        this.missives = missives;
+    this.missives = data.missives ?? {} as { [key: string]: { [key: string]: Quest } };
-        this.lastQuestGot = lastQuestGot;
+    this.lastQuestGot = data.lastQuestGot ?? {} as { [key: string]: null | number };
-        this.lastRecruitAction = lastRecruitAction;
+    this.lastRecruitAction = data.lastRecruitAction ?? null;
-        this.currentlyForHireId = currentlyForHireId;
+    this.adventurerForHireId = data.adventurerForHireId ?? null;
   }
 }
 
@@ -41,22 +37,16 @@ export function saveGame(
     missives: data.missives,
     lastQuestGot: data.lastQuestGot,
     lastRecruitAction: data.lastRecruitAction,
-        adventurerForHireId: data.currentlyForHireId,
+    adventurerForHireId: data.adventurerForHireId,
   }));
 }
 
 export function loadGame(): GameData | null {
   const savedGame = window.localStorage.getItem("savedGame");
   if (!savedGame) return null;
-    console.debug("Loading game...");
   const parsedGame = JSON.parse(savedGame);
-    return new GameData(
+  console.debug("Loading game...");
-        parsedGame.guild,
+  return new GameData(parsedGame);
-        parsedGame.adventurers,
-        parsedGame.missives,
-        parsedGame.lastQuestGot,
-        parsedGame.lastRecruitAction
-    );
 }
 
 export async function loadAvailableQuests(): Promise<{ [key: string]: { [key: string]: Quest } }> {
@@ -96,7 +86,7 @@ export async function loadAvailableQuests(): Promise<{ [key: string]: { [key: st
   return quests;
 }
 
-export async function loadAdventurersForHire(currentAdventurerIds: Array<string> = []): Promise<Array<Adventurer>> {
+export async function loadAdventurersForHire(): Promise<Array<Adventurer>> {
   const response = await fetch("data/adventurers.json");
   if (response.status !== 200) {
     console.error("Failed to load adventurers");
@@ -105,9 +95,8 @@ export async function loadAdventurersForHire(currentAdventurerIds: Array<string>
   }
   const adventurerData = await response.json();
 
-    const adventurers = [] as Array<Adventurer>;
+  const adventurers: Array<Adventurer> = [];
   for (const adventurer of adventurerData) {
-        if (currentAdventurerIds.includes(adventurer.id)) continue;
     adventurers.push(new Adventurer(
       adventurer.id,
       adventurer.name,
@@ -120,3 +109,15 @@ export async function loadAdventurersForHire(currentAdventurerIds: Array<string>
 
   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.scss

@@ -1,8 +1,3 @@
-
-:root {
-
-}
-
 body {
   margin: 0;
   padding: 0 0 10rem;
@@ -62,3 +57,28 @@ body {
     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,6 +1,7 @@
 import type {GuildUpgrade} from "@/classes/GuildUpgrade";
 import {AdventurerCapacityUpgrade} from "@/classes/guildUpgrades/AdventurerCapacityUpgrade";
-import formatGold from "@/classes/NumberMagic";
+import {formatGold} from "@/classes/NumberMagic";
+
 
 export class Guild {
     gold: number;
@@ -12,7 +13,8 @@ export class Guild {
     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();

src/classes/NumberMagic.ts

@@ -1,10 +1,20 @@
-const formatter = new Intl.NumberFormat('en-US', {
+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,
 });
 
-export default function formatGold(number: number): string {
+const damageFormatter = new Intl.NumberFormat('en-US', {
-    return formatter.format(number);
+    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/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/UpgradesList.vue

@@ -4,6 +4,7 @@
     <div class="upgrade">
       <span>Adventurer capacity (level {{ guild.adventurerCapacity.level }})</span>
       <button
+          class="button metal"
           v-if="guild.adventurerCapacity.nextLevelCost"
           :disabled="guild.gold < guild.adventurerCapacity.nextLevelCost"
           @click="upgradeAdventurerCapacity()"
@@ -17,7 +18,7 @@
 <script lang="ts">
 import {Guild} from "@/classes/Guild";
 import {defineComponent, type PropType} from "vue";
-import formatGold from "../classes/NumberMagic";
+import {formatGold} from "@/classes/NumberMagic";
 
 export default defineComponent({
   name: "UpgradesList",
@@ -67,7 +68,7 @@ export default defineComponent({
     width: min(25rem, 100%);
     justify-content: center;
     align-items: center;
-    gap: 1rem;
+    gap: 0.2rem;
   }
 }
 </style>

src/views/AdventurerView.vue

@@ -1,5 +1,11 @@
 <template>
   <div class="adventurer-section">
+    <AdventurerDetails
+        :adventurer="selectedAdventurer"
+        v-if="selectedAdventurer !== null"
+        @closeButtonClicked="selectedAdventurer = null"
+
+    />
     <section class="recruit panel pinned-paper">
       <h1>Applying adventurers</h1>
       <div class="adventurers">
@@ -29,10 +35,17 @@
       </div>
     </section>
     <section class="collection panel pinned-paper">
-      <h1>Recruited adventurers ({{ Object.keys(adventurers).length }} /
+      <h1>
-        {{ guild.adventurerCapacity.getAdventurerCapacity() }})</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">
+        <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>
@@ -46,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,
       adventurersForHire: [] as Array<Adventurer>,
+      selectedAdventurer: null as Adventurer | null,
     }
   },
   props: {
@@ -122,6 +136,14 @@ export default defineComponent({
     margin: 0;
   }
 
+  .collection {
+    small {
+      font-size: 1rem;
+      display: block;
+      margin-bottom: 0.5rem;
+    }
+  }
+
   .adventurers {
     display: flex;
     flex-direction: row;
@@ -137,6 +159,7 @@ export default defineComponent({
       flex-direction: column;
       gap: 0.25rem;
       font-size: 1.1rem;
+      cursor: pointer;
 
       .entry {
         height: 7rem;

src/views/HomeView.vue

@@ -17,8 +17,12 @@
       </section>
       <section class="upgrade">
         <p>Guild level: {{ guild.level }}</p>
-        <button :disabled="guild.upgradeCost ? guild.gold < guild.upgradeCost : true" @click="guild.upgrade()">
+        <button
-          <span>Upgrade guild level</span><br>
+            class="button metal"
+            :disabled="guild.upgradeCost ? guild.gold < guild.upgradeCost : true"
+            @click="guild.upgrade()"
+        >
+          <span>Upgrade guild level </span>
           <span>({{ guild.displayUpgradeCost }})</span>
         </button>
       </section>
@@ -40,7 +44,7 @@ import {Guild} from "@/classes/Guild";
 
 import {version} from "../../package.json"
 import UpgradesList from "@/components/UpgradesList.vue";
-import formatGold from "../classes/NumberMagic";
+import {formatGold} from "@/classes/NumberMagic";
 
 export default defineComponent({
   name: "GuildView",