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,25 +5,25 @@
       <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>
-        <p>{{missive.text}}</p>
+        <h2>{{ missive.title }}</h2>
+        <p>{{ missive.text }}</p>
         <div class="slots">
           <button class="slot">
             <AdventurerComponent
-              :adventurer="missive.adventurers[0]"
-              :all-adventurers="adventurers"
-              @hire-adventurer="(id) => {
+                :adventurer="missive.adventurers[0]"
+                :all-adventurers="adventurers"
+                @hire-adventurer="(id) => {
                 adventurers[id].busy = true;
                 missive.adventurers[0] = adventurers[id];
               }"
-              @free-adventurer="(id) => {
+                @free-adventurer="(id) => {
                 if (missive.progressPoints >= missive.maxProgress) return;
                 adventurers[id].busy = false;
                 missive.adventurers.splice(0, 1);
@@ -44,15 +44,15 @@
       <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>
-        <p>{{missive.text}}</p>
+        <h2>{{ missive.title }}</h2>
+        <p>{{ missive.text }}</p>
         <div class="slots">
           <button class="slot">
             <AdventurerComponent
@@ -83,7 +83,7 @@
 import {defineComponent, type PropType} from "vue";
 import AdventurerComponent from "@/components/AdventurerMiniComponent.vue";
 import type {Adventurer} from "@/classes/Adventurer";
-import type { Quest } from "@/classes/Quest";
+import type {Quest} from "@/classes/Quest";
 
 export default defineComponent({
   name: "GuildView",
@@ -93,153 +93,88 @@ export default defineComponent({
       type: Object,
     },
     adventurers: {
-      type: Object as PropType<{[key: string]: Adventurer}>,
+      type: Object as PropType<{ [key: string]: Adventurer }>,
       default() {
         return {};
       },
     },
     quests: {
-      type: Object as PropType<{[key: string]: Quest}>,
+      type: Object as PropType<{ [key: string]: Quest }>,
       default() {
         return {}
       },
     },
   },
   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>
 
 <style lang="scss" scoped>
-  .guild  {
+.guild {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+
+  h1 {
+    font-size: 3rem;
+  }
+
+  .missives {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: calc(100% - 2rem);
     justify-content: center;
     align-items: center;
-    width: 100%;
-    h1 {
-      font-size: 3rem;
-    }
-    .missives {
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      width: calc(100% - 2rem);
-      justify-content: center;
-      align-items: center;
-      padding-inline: 1rem;
-      gap: 1rem;
-      .missive {
-        width: min(100%, 14rem);
-        text-align: center;
-        border: 2px solid #000;
-        padding: 0.5rem;
-        position: relative;
-        background-color: rgba(255,255,255, 0.2);
-        &.done {
-          cursor: pointer;
-          &::after {
-            position: absolute;
-            top: 0;
-            right: 0;
-            content: "✔";
-            font-size: 5rem;
-            color: green;
-            transform: translate(45%, -40%);
-          }
+    padding-inline: 1rem;
+    gap: 1rem;
+
+    .missive {
+      width: min(100%, 14rem);
+      text-align: center;
+      border: 2px solid #000;
+      padding: 0.5rem;
+      position: relative;
+      background-color: rgba(255, 255, 255, 0.2);
+
+      &.done {
+        cursor: pointer;
+
+        &::after {
+          position: absolute;
+          top: 0;
+          right: 0;
+          content: "✔";
+          font-size: 5rem;
+          color: green;
+          transform: translate(45%, -40%);
         }
-        .slots {
-          display: flex;
-          flex-direction: row;
-          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);
-            cursor: pointer;
-            border-radius: 0.2rem;
-            position: relative;
-          }
+      }
+
+      .slots {
+        display: flex;
+        flex-direction: row;
+        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);
+          cursor: pointer;
+          border-radius: 0.2rem;
+          position: relative;
         }
       }
     }
   }
+}
 </style>