guild upgrades, enum for quest ranks and quests now persist while clicking onto another tab

src/App.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import {RouterLink, RouterView} from 'vue-router'
-</script>
+import {RouterLink, RouterView} from 'vue-router'</script>
 
 <template>
   <header>
@@ -10,7 +9,12 @@ import {RouterLink, RouterView} from 'vue-router'
     </nav>
   </header>
 
-  <RouterView :guild="guild" :adventurers="adventurers" :quests="quests"/>
+    <RouterView
+        :guild="guild"
+        :adventurers="adventurers"
+        :quests="missives"
+        @finalizeQuest="finalizeQuest($event)"
+    />
 </template>
 
 <script lang="ts">
@@ -18,6 +22,7 @@ import {defineComponent} from "vue";
 import {Adventurer} from "@/classes/Adventurer";
 import {Quest} from "@/classes/Quest";
 import {Guild} from "@/classes/Guild";
+import {getFromString, QuestRank} from "@/classes/QuestRank";
 
 export default defineComponent({
   name: "GuildView",
@@ -43,13 +48,81 @@ export default defineComponent({
     } as { [key: string]: Adventurer },
     quests: {
       F: {
-        "1": new Quest("1", "Frog Frenzy", "Kill 10 demon frogs.", 30, 1),
-        "2": new Quest("2", "Rats!", "Get rid of the rats in someone's basement.", 21, 1),
-        "3": new Quest("3", "Herb gethering", "Colect medicinal herbs.", 25, 1),
-
+        "1": new Quest("1", QuestRank.F, "Frog Frenzy", "Kill 10 demon frogs.", 30, 1, 25),
+        "2": new Quest("2", QuestRank.F, "Rats!", "Get rid of the rats in someone's basement.", 21, 1, 15),
+        "3": new Quest("3", QuestRank.F, "Herb gethering", "Colect medicinal herbs.", 25, 1, 19),
       } as { [key: string]: Quest },
     } as { [key: string]: { [key: string]: Quest } },
+    missives: {
+      F: {} as { [key: string]: Quest },
+      E: {} as { [key: string]: Quest },
+      D: {} as { [key: string]: Quest },
+      C: {} as { [key: string]: Quest },
+      B: {} as { [key: string]: Quest },
+      A: {} as { [key: string]: Quest },
+      S: {} as { [key: string]: Quest },
+    },
   }),
+  methods: {
+    async updateMissives() {
+      for (const missiveRank in this.missives) {
+        const rank = getFromString(missiveRank as QuestRank);
+        for (const missiveId in this.missives[rank.toString() as QuestRank]) {
+          const missive = this.missives.F[missiveId];
+          if (missive.adventurers.length <= 0) {
+            missive.progressPoints = 0;
+            continue;
+          }
+          for (const adventurerId in missive.adventurers) {
+            const adventurer = missive.adventurers[adventurerId];
+            const attack = adventurer.attackPerLevel * adventurer.level;
+            missive.progressPoints = Math.min(missive.progressPoints + attack, missive.maxProgress);
+          }
+        }
+      }
+
+    },
+    finalizeQuest(missive: Quest) {
+      missive.progressPoints = 0;
+      this.guild.gold += missive.goldReward;
+      for (const adventurerId in missive.adventurers) {
+        const adventurer = missive.adventurers[adventurerId];
+        adventurer.exp += (missive.expReward / missive.adventurers.length);
+        adventurer.busy = false;
+      }
+      missive.adventurers = [];
+      delete this.missives[missive.rank.toString() as QuestRank][missive.id];
+    },
+    getRandomQuest(rank: QuestRank): Quest | null {
+      const keys = Object.keys(this.quests[rank]);
+      if (keys.length <= 0) return null;
+      const questsForRank = this.quests[rank] as { [key: string]: Quest };
+      const randomId = keys.length * Math.random() << 0;
+      const randomIdString = keys[randomId] as string;
+      return questsForRank[randomIdString];
+    },
+    createMissive(questToAdd: Quest, rank: QuestRank) {
+      const quest = JSON.parse(JSON.stringify(questToAdd));
+      const newId = Math.random().toString(16).slice(2).toString();
+      quest.id = newId;
+      this.missives[rank][newId] = quest;
+    }
+  },
+  mounted() {
+    setInterval(() => {
+      this.updateMissives();
+    }, 1000);
+
+
+    setInterval(() => {
+      const keys = Object.keys(this.missives[QuestRank.F]);
+      if (keys.length >= 5) return;
+      const quest = this.getRandomQuest(QuestRank.F);
+      if (quest !== null) {
+        this.createMissive(quest, QuestRank.F);
+      }
+    }, 10000);
+  }
 })
 </script>
 

src/classes/Guild.ts

@@ -1,9 +1,36 @@
 export class Guild {
     gold: number;
     level: number;
+    displayUpgradeCost: number|string;
 
     constructor(level: number, gold: number) {
         this.gold = gold;
         this.level = level;
+        this.displayUpgradeCost = this.getUpgradeCost() ?? "Max level";
+    }
+
+    upgrade(): void {
+        const cost = this.getUpgradeCost();
+        if (cost === null) return;
+        if (this.gold < cost) return;
+        this.gold -= cost;
+        this.level += 1;
+        if (this.level > 7) {
+            this.displayUpgradeCost = "Max level";
         }
     }
+
+    getUpgradeCost(): number|null {
+        return upgradeCosts[this.level] ?? null;
+    }
+}
+
+const upgradeCosts = {
+    "1": 1000,
+    "2": 2500,
+    "3": 5000,
+    "4": 10000,
+    "5": 25000,
+    "6": 50000,
+    "7": 100000,
+} as {[index:string]: number}

src/classes/Quest.ts

@@ -1,26 +1,27 @@
 import type {Adventurer} from "@/classes/Adventurer";
+import type {QuestRank} from "@/classes/QuestRank";
 
 export class Quest {
     id: string;
+    rank: QuestRank;
     title:  string;
     text: string;
     adventurers: Array<Adventurer>;
     progressPoints: number;
     maxProgress: number;
     expReward: number;
+    goldReward: number;
 
-    constructor(id: string, title: string, text: string, maxProgress: number, expReward: number) {
+    constructor(id: string, rank: QuestRank, title: string, text: string, maxProgress: number, expReward: number, goldReward: number) {
         this.id = id;
+        this.rank = rank;
         this.title = title;
         this.text = text;
         this.maxProgress = maxProgress;
         this.expReward = expReward;
+        this.goldReward = goldReward;
         this.progressPoints = 0;
         this.adventurers = [];
     }
 
 }
-
-export function createRandomQuest(budget: number) {
-
-}

src/classes/QuestRank.ts

@@ -0,0 +1,13 @@
+export enum QuestRank {
+    S = "S",
+    A = "A",
+    B = "B",
+    C = "C",
+    D = "D",
+    E = "E",
+    F = "F",
+}
+
+export function getFromString(string: keyof typeof QuestRank): QuestRank {
+    return QuestRank[string];
+}

src/views/HomeView.vue

@@ -9,9 +9,9 @@
     </section>
     <section class="upgrade">
       <p>Guild level: {{ guild.level }}</p>
-      <button :disabled="guild.gold < 1000">
+      <button :disabled="guild.gold < 1000" @click="guild.upgrade()">
         <span>Upgrade guild level</span><br>
-        <span>(1000 gold)</span>
+        <span>({{ guild.displayUpgradeCost }})</span>
       </button>
     </section>
   </main>

src/views/QuestView.vue

@@ -5,11 +5,11 @@
       <div
           class="missive"
           :class="{done: missive.maxProgress <= missive.progressPoints}"
-          v-for="missive in missives.F"
+          v-for="missive in quests.F"
           :key="missive.id"
           @click="() => {
             if (missive.progressPoints < missive.maxProgress) return;
-            finalizeQuest(missive, 'F');
+            $emit('finalizeQuest', missive)
           }"
       >
         <h2>{{ missive.title }}</h2>
@@ -44,11 +44,11 @@
       <div
           class="missive"
           :class="{done: missive.maxProgress <= missive.progressPoints}"
-          v-for="missive in missives.E"
+          v-for="missive in quests.E"
           :key="missive.id"
           @click="() => {
             if (missive.progressPoints < missive.maxProgress) return;
-            finalizeQuest(missive, 'E');
+            $emit('finalizeQuest', missive)
           }"
       >
         <h2>{{ missive.title }}</h2>
@@ -106,81 +106,9 @@ export default defineComponent({
     },
   },
   data() {
-    return {
-      missiveUpdateTask: null as null|number,
-      newMissiveTask: null as null|number,
-      missives: {
-        F: {} as { [key: string]: Quest },
-        E: {} as { [key: string]: Quest },
-        D: {} as { [key: string]: Quest },
-        C: {} as { [key: string]: Quest },
-        B: {} as { [key: string]: Quest },
-        A: {} as { [key: string]: Quest },
-        S: {} as { [key: string]: Quest },
+    return {};
   },
-    }
-  },
-  methods: {
-    updateMissives() {
-      for (const missiveId in this.missives.F) {
-        const missive = this.missives.F[missiveId];
-        if (missive.adventurers.length <= 0) {
-          missive.progressPoints = 0;
-          continue;
-        }
-        for (const adventurerId in missive.adventurers) {
-          const adventurer = missive.adventurers[adventurerId];
-          const attack = adventurer.attackPerLevel * adventurer.level;
-          missive.progressPoints = Math.min(missive.progressPoints + attack, missive.maxProgress);
-        }
-      }
-    },
-    finalizeQuest(missive: Quest, rank: "F"|"E"|"D"|"C"|"B"|"A"|"S") {
-      missive.progressPoints = 0;
-      for (const adventurerId in missive.adventurers) {
-        const adventurer = missive.adventurers[adventurerId];
-        adventurer.exp += (missive.expReward / missive.adventurers.length);
-        adventurer.busy = false;
-      }
-      missive.adventurers = [];
-      delete this.missives[rank][missive.id];
-    },
-    getRandomQuest(rank: "F"|"E"|"D"|"C"|"B"|"A"|"S"): Quest|null {
-      const keys = Object.keys(this.quests[rank]);
-      if (keys.length <= 0) return null;
-      const questsForRank = this.quests[rank] as unknown as { [key: string]: Quest };
-      const randomId = keys.length * Math.random() << 0;
-      const randomIdString = keys[randomId] as string;
-      return questsForRank[randomIdString];
-    },
-    createMissive(questToAdd: Quest, rank: "F"|"E"|"D"|"C"|"B"|"A"|"S") {
-      const quest = JSON.parse(JSON.stringify(questToAdd));
-      const newId = Math.random().toString(16).slice(2).toString();
-      quest.id = newId;
-      this.missives[rank][newId] = quest;
-    }
-  },
-  mounted() {
-    const quest = this.getRandomQuest("F");
-    if (quest !== null) {
-      this.createMissive(quest, "F");
-    }
-    this.missiveUpdateTask = setInterval(() => {
-      this.updateMissives();
-    }, 1000)
-    this.newMissiveTask = setInterval(() => {
-      const keys = Object.keys(this.missives["F"]);
-      if (keys.length >= 5) return;
-      const quest = this.getRandomQuest("F");
-      if (quest !== null) {
-        this.createMissive(quest, "F");
-      }
-    }, 10000)
-  },
-  beforeUnmount() {
-    if (this.missiveUpdateTask) clearInterval(this.missiveUpdateTask);
-    if (this.newMissiveTask) clearInterval(this.newMissiveTask);
-  }
+  emits: [ 'finalizeQuest' ],
 })
 </script>
 
@@ -191,9 +119,11 @@ export default defineComponent({
   justify-content: center;
   align-items: center;
   width: 100%;
+
   h1 {
     font-size: 3rem;
   }
+
   .missives {
     display: flex;
     flex-direction: row;
@@ -203,6 +133,7 @@ export default defineComponent({
     align-items: center;
     padding-inline: 1rem;
     gap: 1rem;
+
     .missive {
       width: min(100%, 14rem);
       text-align: center;
@@ -210,8 +141,10 @@ export default defineComponent({
       padding: 0.5rem;
       position: relative;
       background-color: rgba(255, 255, 255, 0.2);
+
       &.done {
         cursor: pointer;
+
         &::after {
           position: absolute;
           top: 0;
@@ -222,12 +155,14 @@ export default defineComponent({
           transform: translate(45%, -40%);
         }
       }
+
       .slots {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
         justify-content: center;
         align-items: center;
+
         .slot {
           padding: 0;
           width: 5rem;