0.0.2

- fixed all previous typescript errors to prepare for automatic deployments
- made available quests and adventurers data driven and imported from json files
- added duplicate protection on recruitment. Now it's guaranteed to get an adventurer every half an hour when there's at least one available
- quest rewards are now generated based on points required to complete them
- completely reworked math behind calculating adventurer speed of completing quests
- removed some unused concept variables from adventurer data
- added adventurer exp bars
- improved the look of quest progress bars and added percentage completion text
- maximum number of adventurers is now limited and can be increased via adventurer capacity (name tbd) upgrade
- adventurers now have a max level of 25. This will be expanded on later to allow increase of their max level.

package-lock.json

@@ -1,13 +1,14 @@
 {
   "name": "adventurers-guild",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "adventurers-guild",
-      "version": "0.0.0",
+      "version": "0.0.1",
       "dependencies": {
+        "@vueuse/components": "^9.13.0",
         "sass": "^1.59.3",
         "vue": "^3.2.45",
         "vue-router": "^4.1.6"
@@ -517,6 +518,11 @@
       "integrity": "sha512-p6ua9zBxz5otCmbpb5D3U4B5Nanw6Pk3PPyX05xnxbB/fRv71N7CPmORg7uAD5P70T0xmx1pzAx/FUfa5X+3cw==",
       "dev": true
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.1.0.tgz",
@@ -729,6 +735,124 @@
         }
       }
     },
+    "node_modules/@vueuse/components": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/components/-/components-9.13.0.tgz",
+      "integrity": "sha512-UJ8PjQ4SGb2rsVIy9vhEc6aCu+3+2cc+xEfGNX8/M1NKIuL2Vo6c2Kc2fYFaRzWZkP8HWXu+IcwvnAzL44IEFA==",
+      "dependencies": {
+        "@vueuse/core": "9.13.0",
+        "@vueuse/shared": "9.13.0",
+        "vue-demi": "*"
+      }
+    },
+    "node_modules/@vueuse/components/node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/core": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.13.0.tgz",
+      "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.16",
+        "@vueuse/metadata": "9.13.0",
+        "@vueuse/shared": "9.13.0",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.13.0.tgz",
+      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.13.0.tgz",
+      "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/acorn": {
       "version": "8.8.2",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
@@ -3700,6 +3824,11 @@
       "integrity": "sha512-p6ua9zBxz5otCmbpb5D3U4B5Nanw6Pk3PPyX05xnxbB/fRv71N7CPmORg7uAD5P70T0xmx1pzAx/FUfa5X+3cw==",
       "dev": true
     },
+    "@types/web-bluetooth": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
+    },
     "@vitejs/plugin-vue": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.1.0.tgz",
@@ -3892,6 +4021,64 @@
       "dev": true,
       "requires": {}
     },
+    "@vueuse/components": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/components/-/components-9.13.0.tgz",
+      "integrity": "sha512-UJ8PjQ4SGb2rsVIy9vhEc6aCu+3+2cc+xEfGNX8/M1NKIuL2Vo6c2Kc2fYFaRzWZkP8HWXu+IcwvnAzL44IEFA==",
+      "requires": {
+        "@vueuse/core": "9.13.0",
+        "@vueuse/shared": "9.13.0",
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.13.11",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+          "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+          "requires": {}
+        }
+      }
+    },
+    "@vueuse/core": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.13.0.tgz",
+      "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
+      "requires": {
+        "@types/web-bluetooth": "^0.0.16",
+        "@vueuse/metadata": "9.13.0",
+        "@vueuse/shared": "9.13.0",
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.13.11",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+          "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+          "requires": {}
+        }
+      }
+    },
+    "@vueuse/metadata": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.13.0.tgz",
+      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ=="
+    },
+    "@vueuse/shared": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.13.0.tgz",
+      "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
+      "requires": {
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.13.11",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+          "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+          "requires": {}
+        }
+      }
+    },
     "acorn": {
       "version": "8.8.2",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "adventurers-guild",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -10,6 +10,7 @@
     "type-check": "vue-tsc --noEmit"
   },
   "dependencies": {
+    "@vueuse/components": "^9.13.0",
     "sass": "^1.59.3",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6"

public/data/adventurers.json

@@ -0,0 +1,38 @@
+[
+  {
+    "id": "rincewind-diskworld",
+    "name": "Rincewind",
+    "portrait": "/img/adventurers/rincewind.png",
+    "attackExponent": 1.09
+  },
+  {
+    "id": "fran-sword-isekai",
+    "name": "Fran",
+    "portrait": "/img/adventurers/fran.png",
+    "attackExponent": 1.115
+  },
+  {
+    "id": "kazuma-konosuba",
+    "name": "Kazuma",
+    "portrait": "/img/adventurers/kazuma.png",
+    "attackExponent": 1.1
+  },
+  {
+    "id": "rein-beast-tamer",
+    "name": "Rein",
+    "portrait": "/img/adventurers/rein.png",
+    "attackExponent": 1.1
+  },
+  {
+    "id": "momon-overlord",
+    "name": "Momon",
+    "portrait": "/img/adventurers/momon.png",
+    "attackExponent": 1.11
+  },
+  {
+    "id": "goblin-slayer",
+    "name": "Goblin Slayer",
+    "portrait": "/img/adventurers/goblin-slayer.png",
+    "attackExponent": 1.1
+  }
+]

public/data/quests/RankA.json

@@ -0,0 +1,14 @@
+[
+  {
+    "title": "Ogre king",
+    "text": "Ogres have chosen a new king through democratic vote. They all voted for the strongest ogre."
+  },
+  {
+    "title": "Devilish dungeon",
+    "text": "New dungeon was discovered. It needs to be mapped and explored so lower rank adventurers can enter."
+  },
+  {
+    "title": "Eater of Worlds",
+    "text": "A giant worm emerged from the ground and appears to be consuming the ground itself."
+  }
+]

public/data/quests/RankB.json

@@ -0,0 +1,14 @@
+[
+  {
+    "title": "Undead horde",
+    "text": "Due to the spillage of necromancy potion at nearby graveyard we now have an undead army on our doorstep."
+  },
+  {
+    "title": "Runaway prisoner",
+    "text": "During the last prison guard strike a prisoner managed to escape. Bring them back to their cell."
+  },
+  {
+    "title": "The aristocrats",
+    "text": "Royalty wants an escort for one of their carriages."
+  }
+]

public/data/quests/RankC.json

@@ -0,0 +1,14 @@
+[
+  {
+    "title": "Scratchy, the butcher",
+    "text": "Scratchy turned evil and is terrorizing its victims. Put a stop to it!"
+  },
+  {
+    "title": "Hobgnoblin subjegation",
+    "text": "Gnoblins evolved and are back for vengeance."
+  },
+  {
+    "title": "Holy",
+    "text": "Gnoblins summoned their machine god and it started going haywire on everything around it. Destroy it!"
+  }
+]

public/data/quests/RankD.json

@@ -0,0 +1,14 @@
+[
+  {
+    "title": "Caravan escort",
+    "text": "Escort a merchant caravan."
+  },
+  {
+    "title": "Rare ore",
+    "text": "Obtain laudanium ore for town's blacksmith."
+  },
+  {
+    "title": "Demonic pests!",
+    "text": "Clear the fields from cabbage imps."
+  }
+]

public/data/quests/RankE.json

@@ -0,0 +1,14 @@
+[
+  {
+    "title": "Gnoblin subjegation",
+    "text": "Kill 3 gnoblins."
+  },
+  {
+    "title": "Phantom menace",
+    "text": "Exorcise ghosts out of someone's apartment."
+  },
+  {
+    "title": "Scratchy in peril",
+    "text": "Get Scratchy the cat from the tree safe onto the ground."
+  }
+]

public/data/quests/RankF.json

@@ -0,0 +1,18 @@
+[
+  {
+    "title": "Frog Frenzy",
+    "text": "Kill 10 demon frogs."
+  },
+  {
+    "title": "Rats!",
+    "text": "Get rid of the rats from someone's basement."
+  },
+  {
+    "title": "Herb gathering",
+    "text": "Collect medicinal herbs."
+  },
+  {
+    "title": "Big pile of rubble",
+    "text": "Tavern collapsed. Again. Help clean up the debris."
+  }
+]

public/data/quests/RankS.json

@@ -0,0 +1,14 @@
+[
+  {
+    "title": "The Demon King",
+    "text": "Demon King has awoken and is a threat to whole existence. Heroes needed."
+  },
+  {
+    "title": "Scratchy, Destruction Incarnate",
+    "text": "Scratchy was reborn as a machine of pure destruction and needs to be stopped."
+  },
+  {
+    "title": "Jiggly Jungle",
+    "text": "A jungle south began rapidly expanding and experts think arson is our only option."
+  }
+]

src/App.vue

@@ -9,7 +9,6 @@ import {RouterLink, RouterView} from 'vue-router'</script>
       <RouterLink to="/adventurers">Adventurers</RouterLink>
     </nav>
   </header>
-
     <RouterView
         :guild="guild"
         :adventurers="adventurers"
@@ -24,25 +23,15 @@ import {RouterLink, RouterView} from 'vue-router'</script>
 <script lang="ts">
 import {defineComponent} from "vue";
 import {Adventurer} from "@/classes/Adventurer";
-import {Quest} from "@/classes/Quest";
+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 type {GuildUpgrade} from "@/classes/GuildUpgrade";
+import {AdventurerCapacityUpgrade} from "@/classes/guildUpgrades/AdventurerCapacityUpgrade";
 
 export default defineComponent({
   name: "GuildView",
-  watch: {
-    adventurers: {
-      deep: true,
-      handler(newAdventurers) {
-        for (const adventurerId in newAdventurers) {
-          const adventurer = newAdventurers[adventurerId] as Adventurer;
-          if (adventurer.canLevelUp()) {
-            adventurer.levelUp();
-          }
-        }
-      }
-    }
-  },
   data: () => ({
     guild: new Guild(1, 500),
     lastQuestGot: {
@@ -53,48 +42,10 @@ export default defineComponent({
       D: null as null|number,
       E: null as null|number,
       F: null as null|number,
-    },
+    } as { [key: string]: null|number },
     lastRecruitHandled: null as null|number,
-    adventurers: {
+    adventurers: {} as { [key: string]: Adventurer },
-    } as { [key: string]: Adventurer },
+    quests: {} as { [key: string]: { [key: string]: Quest } },
-    quests: {
-      F: {
-        "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),
-        "4": new Quest("4", QuestRank.F, "Big pile of rubble", "Tavern collapsed. Again. Help clean up the debris.", 27, 1, 10),
-      } as { [key: string]: Quest },
-      E: {
-        "1": new Quest("1", QuestRank.E, "Gnoblin subjegation", "Kill 3 gnoblins.", 500, 2, 30),
-        "2": new Quest("2", QuestRank.E, "Phantom menace", "Exorcise ghosts out of someone's apartment.", 510, 2, 28),
-        "3": new Quest("3", QuestRank.E, "Scratchy in peril", "Get Scratchy the cat from the tree safe to the ground.", 550, 2, 32),
-      } as { [key: string]: Quest },
-      D: {
-        "1": new Quest("1", QuestRank.D, "Caravan escort", "Escort a merchant caravan.", 2000, 3, 47),
-        "2": new Quest("2", QuestRank.D, "Rare ore", "Obtain laudanium ore for town's blacksmith.", 2200, 3, 54),
-        "3": new Quest("3", QuestRank.D, "Demonic pests!", "Clear the fields from cabbage imps.", 2149, 3, 49),
-      } as { [key: string]: Quest },
-      C: {
-        "1": new Quest("1", QuestRank.C, "Scratchy, the butcher", "Scratchy turned evil and is terrorizing its victims. Put a stop to it!", 7500, 5, 150),
-        "2": new Quest("2", QuestRank.C, "Hobgnoblin subjegation", "Gnoblins evolved and are back for vengance.", 7600, 5, 150),
-        "3": new Quest("3", QuestRank.C, "Holy", "Gnoblins summoned their machine god and it started going haywire on everything around it. Destroy it!", 7777, 5, 49),
-      } as { [key: string]: Quest },
-      B: {
-        "1": new Quest("1", QuestRank.B, "Undead horde", "Due to the spillage of necromancy potion at nearby graveyard we now have an undead army on our doorstep.", 25000, 8, 200),
-        "2": new Quest("2", QuestRank.B, "Runaway prisoner", "During the last prison guard strike a prisoner managed to escape. Bring them back to their cell.", 26000, 8, 210),
-        "3": new Quest("3", QuestRank.B, "The aristocrats", "Royalty wants an escort for one of their carriages.", 25000, 8, 200),
-      } as { [key: string]: Quest },
-      A: {
-        "1": new Quest("1", QuestRank.A, "Ogre king", "Ogres have chosen a new king through democratic vote. They all voted for the strongest ogre.", 100000, 12, 200),
-        "2": new Quest("2", QuestRank.A, "Devilish dungeon", "New dungeon was discovered. It needs to be mapped and explored so lower rank adventurers can enter.", 100000, 12, 210),
-        "3": new Quest("3", QuestRank.A, "Eater of Worlds", "A giant worm emerged from the ground and appears to be consuming the ground itself.", 100000, 12, 200),
-      } as { [key: string]: Quest },
-      S: {
-        "1": new Quest("1", QuestRank.S, "The Demon King", "Demon King has awoken and is a threat to whole existence. Heroes needed.", 1000000, 20, 200),
-        "2": new Quest("2", QuestRank.S, "Scratchy, Destruction Incarnate", "Scratchy was reborn as a machine of pure destruction and needs to be stopped.", 1000000, 20, 210),
-        "3": new Quest("3", QuestRank.S, "Jiggly Jungle", "A jungle south began rapidly expanding and experts think arson is our only option.", 1000000, 20, 200),
-      } as { [key: string]: Quest },
-    } as { [key: string]: { [key: string]: Quest } },
     missives: {
       F: {} as { [key: string]: Quest },
       E: {} as { [key: string]: Quest },
@@ -115,9 +66,10 @@ export default defineComponent({
             missive.progressPoints = 0;
             continue;
           }
+          if (missive.progressPoints >= missive.maxProgress) continue;
           for (const adventurerId in missive.adventurers) {
             const adventurer = missive.adventurers[adventurerId];
-            const attack = adventurer.attackPerLevel * adventurer.level;
+            const attack = adventurer.getAttack();
             missive.progressPoints = Math.min(missive.progressPoints + attack, missive.maxProgress);
           }
         }
@@ -129,7 +81,7 @@ export default defineComponent({
       this.guild.gold += missive.goldReward;
       for (const adventurerId in missive.adventurers) {
         const adventurer = missive.adventurers[adventurerId];
-        adventurer.exp += (missive.expReward / missive.adventurers.length);
+        adventurer.addExp(missive.expReward / missive.adventurers.length);
         adventurer.busy = false;
       }
       missive.adventurers = [];
@@ -141,7 +93,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 questsForRank[randomIdString];
+      return getQuestWithRewards(questsForRank[randomIdString]);
     },
     createMissive(questToAdd: Quest, rank: QuestRank) {
       const quest = JSON.parse(JSON.stringify(questToAdd));
@@ -149,32 +101,35 @@ export default defineComponent({
       quest.id = newId;
       this.missives[rank][newId] = quest;
     },
-    saveGame() {
-      console.debug("Saving game...");
-      window.localStorage.setItem("savedGame", JSON.stringify({
-        guild: this.guild,
-        adventurers: this.adventurers,
-        missives: this.missives,
-        lastQuestGot: this.lastQuestGot,
-        lastRecruitAction: this.lastRecruitHandled,
-      }));
-    },
     loadGame() {
-       const rawData = window.localStorage.getItem("savedGame");
+       const saveData = loadGame();
-       if (!rawData) return;
+       if (saveData === null) return;
-       const saveData = JSON.parse(rawData);
 
        this.lastQuestGot = saveData.lastQuestGot;
 
-       this.guild = new Guild(saveData.guild.level, saveData.guild.gold);
+       const guildUpgrades = {} as { [key: string]: GuildUpgrade };
+       if (saveData.guild.adventurerCapacity) {
+         guildUpgrades.adventurerCapacity = new AdventurerCapacityUpgrade(saveData.guild.adventurerCapacity.level);
+       }
+
+       this.guild = new Guild(saveData.guild.level, saveData.guild.gold, guildUpgrades);
 
        const adventurers = {} as { [key: string]: Adventurer };
 
        for (const id in saveData.adventurers) {
          const data = saveData.adventurers[id];
-         const adventurer = new Adventurer(data.id, data.name, data.portrait, data.attackPerLevel, data.defensePerLevel, data.level);
+         try {
+           const adventurer = new Adventurer(
+               data.id,
+               data.name,
+               data.portrait,
+               data.attackExponent ?? 1.1,
+               data.level ?? 1,
+               data.exp ?? 0
+           );
            adventurer.busy = data.busy;
            adventurers[data.id] = adventurer;
+         } catch (e) {}
        }
        this.adventurers = adventurers;
 
@@ -196,7 +151,7 @@ export default defineComponent({
 
        this.missives = missives;
 
-       this.lastRecruitHandled = saveData.lastRecruitAction;
+       this.lastRecruitHandled = saveData.lastRecruitAction ?? 0;
     },
     resetSave() {
       if (!confirm("You are about to wipe your save file. Are you sure?")) return;
@@ -204,12 +159,20 @@ export default defineComponent({
       window.location.reload();
     }
   },
-  mounted() {
+  async mounted() {
     this.loadGame();
+    this.quests = await loadAvailableQuests();
 
     setInterval(() => {
-      this.saveGame();
+      saveGame(new GameData(
-    }, 30*1000)
+          this.guild,
+          this.adventurers,
+          this.missives,
+          this.lastQuestGot,
+          this.lastRecruitHandled
+          )
+      );
+    }, 10*1000)
 
     setInterval(() => {
       this.updateMissives();
@@ -297,7 +260,7 @@ export default defineComponent({
         }
       }
 
-    }, 1000);
+    }, 250);
 
   }
 })

src/GameData.ts

@@ -0,0 +1,113 @@
+import type {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;
+    adventurers: { [key: string]: Adventurer };
+    missives: { [key: string]: { [key: string]: Quest } };
+    lastQuestGot: { [key: string]: null | number };
+    lastRecruitAction: null | number;
+
+    constructor(guild: Guild, adventurers: { [key: string]: Adventurer }, missives: { [key: string]: { [key: string]: Quest } }, lastQuestGot: { [key: string]: null | number }, lastRecruitAction: null | number) {
+        this.guild = guild;
+        this.adventurers = adventurers;
+        this.missives = missives;
+        this.lastQuestGot = lastQuestGot;
+        this.lastRecruitAction = lastRecruitAction;
+    }
+}
+
+
+/**
+ * Save the game to local storage
+ */
+export function saveGame(
+    data: GameData
+): void {
+    console.debug("Saving game...");
+    window.localStorage.setItem("savedGame", JSON.stringify({
+        guild: data.guild,
+        adventurers: data.adventurers,
+        missives: data.missives,
+        lastQuestGot: data.lastQuestGot,
+        lastRecruitAction: data.lastRecruitAction,
+    }));
+}
+
+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(
+        parsedGame.guild,
+        parsedGame.adventurers,
+        parsedGame.missives,
+        parsedGame.lastQuestGot,
+        parsedGame.lastRecruitAction
+    );
+}
+
+export async function loadAvailableQuests(): Promise<{ [key: string]: { [key: string]: Quest } }> {
+    const quests = {
+        S: {} as { [key: string]: Quest },
+        A: {} as { [key: string]: Quest },
+        B: {} as { [key: string]: Quest },
+        C: {} as { [key: string]: Quest },
+        D: {} as { [key: string]: Quest },
+        E: {} as { [key: string]: Quest },
+        F: {} as { [key: string]: Quest },
+    } as { [key: string]: { [key: string]: Quest } };
+
+    for (const rank in quests) {
+        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");
+        alert("Failed to load adventurers. Please try refreshing the page.");
+        return [];
+    }
+    const adventurerData = await response.json();
+
+    const adventurers = [] as Array<Adventurer>;
+    for (const adventurer of adventurerData) {
+        if (currentAdventurerIds.includes(adventurer.id)) continue;
+        adventurers.push(new Adventurer(
+            adventurer.id,
+            adventurer.name,
+            adventurer.portrait,
+            adventurer.attackExponent,
+            adventurer.level,
+            adventurer.exp,
+        ));
+    }
+
+    return adventurers;
+}

src/classes/Adventurer.ts

@@ -4,18 +4,26 @@ export class Adventurer {
     portrait: string;
     level: number;
     exp: number;
-    attackPerLevel: number;
+    attackExponent: number;
-    defensePerLevel: number;
+    prestige: number;
     busy: boolean;
 
-    constructor(id: string, name: string, portrait: string, attackPerLevel: number, defensePerLevel: number, level: number = 1) {
+    constructor(
+        id: string,
+        name: string,
+        portrait: string,
+        attackExponent: number,
+        level: number = 1,
+        exp: number = 0,
+        prestige: number = 0
+    ) {
         this.id = id;
         this.name = name;
         this.portrait = portrait;
-        this.attackPerLevel = attackPerLevel;
+        this.attackExponent = attackExponent;
-        this.defensePerLevel = defensePerLevel;
         this.level = level;
-        this.exp = 0;
+        this.exp = exp;
+        this.prestige = prestige;
         this.busy = false;
     }
 
@@ -24,8 +32,60 @@ export class Adventurer {
         this.level += 1;
     }
 
-    canLevelUp(): boolean {
+    prestigeUp(): void {
-        const requirement = this.level * 3;
+        this.level = 1;
-        return this.exp >= requirement;
+        this.exp = 0;
+        this.prestige += 1;
     }
+
+    canLevelUp(): boolean {
+        if (this.level >= this.getMaxLevel()) return false;
+        return this.exp >= this.getNextLevelExpRequirement();
+    }
+
+    canPrestigeUp(): boolean {
+        if (this.level < getMaxLevelForPrestige(this.prestige)) return false;
+        return this.prestige < 5
+    }
+
+    getNextLevelExpRequirement(): number {
+        return this.level * 3;
+    }
+
+    /**
+     * Returns the percentage of exp to the next level
+     */
+    getExpPercentage(): number {
+        return (this.exp / this.getNextLevelExpRequirement()) * 100;
+    }
+
+    addExp(exp: number): void {
+        if (this.isMaxLevel()) return;
+        this.exp += exp;
+        if (this.canLevelUp()) {
+            this.levelUp();
+        }
+    }
+
+    getAttack(): number {
+        const scalingFactor = Math.pow(1.05, this.level - 1);
+        return (2 * scalingFactor) * Math.pow(this.attackExponent, this.level - 1);
+    }
+
+    getDPS(): number {
+        return this.getAttack() * 4;
+    }
+
+    getMaxLevel(): number {
+        return getMaxLevelForPrestige(this.prestige);
+    }
+
+    isMaxLevel(): boolean {
+        return this.level >= this.getMaxLevel();
+    }
+
+}
+
+function getMaxLevelForPrestige(prestige: number): number {
+    return 25 + (prestige * 5);
 }

src/classes/Guild.ts

@@ -1,12 +1,21 @@
+import type {GuildUpgrade} from "@/classes/GuildUpgrade";
+import {AdventurerCapacityUpgrade} from "@/classes/guildUpgrades/AdventurerCapacityUpgrade";
+
 export class Guild {
     gold: number;
     level: number;
     displayUpgradeCost: number|string;
+    upgradeCost: number|null = null;
+    adventurerCapacity: AdventurerCapacityUpgrade;
 
-    constructor(level: number, gold: number) {
+    constructor(level: number, gold: number, upgrades: {[index:string]: GuildUpgrade} = {}) {
         this.gold = gold;
         this.level = level;
         this.displayUpgradeCost = this.getUpgradeCost() ?? "Max level";
+        this.upgradeCost = this.getUpgradeCost();
+
+        this.adventurerCapacity = upgrades.adventurerCapacity as AdventurerCapacityUpgrade ?? new AdventurerCapacityUpgrade();
+
     }
 
     upgrade(): void {
@@ -17,16 +26,22 @@ export class Guild {
         this.level += 1;
         if (this.level >= 7) {
             this.displayUpgradeCost = "Max level";
+            this.upgradeCost = null;
         } else {
             const newCost = this.getUpgradeCost();
             if (newCost === null) return;
             this.displayUpgradeCost = newCost;
+            this.upgradeCost = newCost;
         }
     }
 
     getUpgradeCost(): number|null {
         return upgradeCosts[this.level] ?? null;
     }
+
+    isMaxLevel(): boolean {
+        return this.level >= 7;
+    }
 }
 
 const upgradeCosts = {

src/classes/GuildUpgrade.ts

@@ -0,0 +1,7 @@
+export class GuildUpgrade {
+
+    level: number = 1;
+    nextLevelCost: number | null = null;
+    guildLevelRequirement: number = 1;
+
+}

src/classes/Quest.ts

@@ -1,5 +1,5 @@
 import type {Adventurer} from "@/classes/Adventurer";
-import type {QuestRank} from "@/classes/QuestRank";
+import {QuestRank} from "@/classes/QuestRank";
 
 export class Quest {
     id: string;
@@ -24,4 +24,61 @@ export class Quest {
         this.adventurers = [];
     }
 
+    getPercentProgress(): number {
+        return Math.round(this.progressPoints / this.maxProgress * 100);
+    }
+
+}
+
+/**
+ * Generate rewards for a quest and return it
+ * @param quest
+ */
+export function getQuestWithRewards(quest: Quest) {
+
+    let maxProgress = 1;
+
+    switch (quest.rank) {
+        case QuestRank.S:
+            // at level 30 adventurers have ~6513 dps, this will take 30 seconds on level 30
+            maxProgress = 195390;
+            break;
+        case QuestRank.A:
+            // at level 25 adventurers have ~2051 dps, this will take 15 seconds on level 25
+            maxProgress = 30770;
+            break;
+        case QuestRank.B:
+            // at level 20 adventurers have ~645 dps, this will take 15 seconds on level 20
+            maxProgress = 9690;
+            break;
+        case QuestRank.C:
+            // at level 15 adventurers have ~203 dps, this will take 15 seconds on level 15
+            maxProgress = 3045;
+            break;
+        case QuestRank.D:
+            // at level 10 adventurers have ~64 dps, this will take 15 seconds on level 10
+            maxProgress = 960;
+            break;
+        case QuestRank.E:
+            // at level 5 adventurers have ~20 dps, this will take 15 seconds on level 5
+            maxProgress = 300;
+            break;
+        case QuestRank.F:
+            // at level 1 adventurers have ~8 dps, this will take 15 seconds on level 1
+            maxProgress = 120;
+            break;
+    }
+
+    let goldReward = Math.floor(maxProgress/6);
+    let expReward = Math.floor(Math.floor(maxProgress/120) - maxProgress/1000);
+
+    // add some randomness to the rewards
+    goldReward = Math.floor(randomNumberBetween(goldReward * 0.95, goldReward * 1.1));
+    expReward = Math.max(1, Math.floor(randomNumberBetween(expReward * 0.95, expReward * 1.2)));
+
+    return new Quest(quest.id, quest.rank, quest.title, quest.text, maxProgress, expReward, goldReward);
+}
+
+function randomNumberBetween(min: number, max: number) {
+    return Math.random() * (max - min) + min;
 }

src/classes/guildUpgrades/AdventurerCapacityUpgrade.ts

@@ -0,0 +1,27 @@
+import {GuildUpgrade} from "@/classes/GuildUpgrade";
+
+export class AdventurerCapacityUpgrade extends GuildUpgrade {
+    constructor(level: number = 1) {
+        super();
+        this.level = level;
+        this.nextLevelCost = this.getCostForLevel(this.level);
+        this.guildLevelRequirement = 1;
+    }
+
+    upgrade(): void {
+        this.level += 1;
+        this.nextLevelCost = this.getCostForLevel(this.level);
+    }
+
+    getCostForLevel(level: number): number {
+        const scalingFactor = Math.pow(1.25, level - 1);
+        return Math.floor(1500 * scalingFactor * Math.pow(level, 1.25));
+    }
+
+    /**
+     * Returns the number of adventurers the guild can have
+     */
+    getAdventurerCapacity(): number {
+        return 1 + this.level ;
+    }
+}

src/components/AdventurerList.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from "vue";
+import {defineComponent, type PropType} from "vue";
 import AdventurerMiniComponent from "@/components/AdventurerMiniComponent.vue";
 import type {Adventurer} from "@/classes/Adventurer";
 
@@ -22,14 +22,12 @@ export default defineComponent({
   }),
   props: {
     adventurers: {
-      type: Array<Adventurer>
+      type: Object as PropType<{[key: string]: Adventurer}>,
+      default() {
+        return {} as {[key: string]: Adventurer};
+      },
     },
   },
-  methods: {
-    print(a: string) {
-      console.log(a);
-    }
-  }
 
 })
 </script>

src/components/AdventurerMiniComponent.vue

@@ -1,3 +1,7 @@
+<script setup lang="ts">
+import { vOnClickOutside } from '@vueuse/components'
+</script>
+
 <template>
   <AdventurerTile
     v-if="adventurer"
@@ -16,7 +20,7 @@
   >
     <span>+</span>
   </article>
-  <div class="selection" v-if="selection">
+  <div class="selection" v-if="selection" v-on-click-outside="closeSelect">
     <button
         class="slot"
         v-for="adventurer in allAdventurers"
@@ -44,23 +48,32 @@ export default defineComponent({
   name: "AdventurerMiniComponent",
   components: {AdventurerTile},
   emits: [ "freeAdventurer", "hireAdventurer" ],
-  data() {
+  data: () => {
     return {
       selection: false,
     }
   },
   props: {
     adventurer: {
-      type: Object as PropType<Adventurer>,
+      type: Object as PropType<Adventurer|null|any>,
+      default() {
+        return null as Adventurer|null;
+      },
     },
     allAdventurers: {
       type: Object as PropType<{[key: string]: Adventurer}>,
+      default() {
+        return {} as {[key: string]: Adventurer};
+      },
     },
   },
   methods: {
     print(a:string) {
       console.log(a);
     },
+    closeSelect() {
+      this.selection = false;
+    }
   }
 })
 </script>
@@ -72,7 +85,7 @@ export default defineComponent({
   bottom: 0;
   left: 50%;
   width: max-content;
-  max-width: 16rem;
+  max-width: 17rem;
   transform: translateX(-50%) translateY(104%);
   display: flex;
   flex-direction: row;
@@ -83,6 +96,9 @@ export default defineComponent({
   padding: 0.5rem;
   background-color: rgba(0,0,0, 0.2);
   z-index: 2;
+  cursor: default;
+  max-height: 12rem;
+  overflow-y: auto;
   .slot {
     width: 5rem;
     height: 5rem;

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">{{adventurer.level}}</div>
+    <div class="level" :title="adventurer.isMaxLevel() ? 'Max level' : ''">{{adventurer.level}}<span v-if="adventurer.isMaxLevel()">⇪</span></div>
+    <div class="exp"></div>
   </article>
 </template>
 
@@ -18,7 +19,25 @@ export default defineComponent({
   props: {
     adventurer: {
       type: Object as PropType<Adventurer>,
+      default() {
+        return {} as Adventurer;
+      },
     }
+  },
+  data: () => ({
+    expProgress: "0%",
+  }),
+  watch: {
+    adventurer: {
+      deep: true,
+      handler: function (adventurer: Adventurer) {
+        this.expProgress = adventurer.getExpPercentage() + "%";
+      },
+    }
+  },
+  mounted() {
+    if (this.adventurer === undefined) return;
+    this.expProgress = this.adventurer.getExpPercentage() + "%";
   }
 });
 </script>
@@ -37,11 +56,21 @@ export default defineComponent({
     top: 0;
     left: 0;
     font-size: 1rem;
+    min-width: 1rem;
     background-color: rgba(0,0,0, 0.75);
     border-bottom-right-radius: 0.2rem;
     padding: 0.1rem;
     color: #fff;
   }
+  .exp {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: v-bind(expProgress);
+    height: 3.5%;
+    background-color: rgba(203, 33, 213, 0.75);
+    transition: width 1s linear;
+  }
   img {
     width: 100%;
     height: 100%;

src/components/QuestMissive.vue

@@ -0,0 +1,169 @@
+<template>
+  <article
+      class="missive"
+      :class="{done: missive.maxProgress <= missive.progressPoints}"
+  >
+    <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) => {
+                adventurers[id].busy = true;
+                missive.adventurers[0] = adventurers[id];
+              }"
+            @free-adventurer="(id) => {
+                if (missive.progressPoints >= missive.maxProgress) return;
+                adventurers[id].busy = false;
+                missive.adventurers.splice(0, 1);
+                if (missive.adventurers.length <= 0) {
+                  missive.progressPoints = 0;
+                }
+              }"
+        />
+      </button>
+    </div>
+    <div class="progressWrap">
+      <span>{{ progressPercentage }}</span>
+      <span class="progress"></span>
+
+    </div>
+    <h3>Rewards</h3>
+    <div class="rewards">
+      <span>Gold: <b>{{missive.goldReward}}</b></span>
+      <span>Exp: <b>{{missive.expReward}}</b></span>
+    </div>
+  </article>
+</template>
+
+<script lang="ts">
+import type {Quest} from "@/classes/Quest";
+import AdventurerComponent from "@/components/AdventurerMiniComponent.vue";
+import type {Adventurer} from "@/classes/Adventurer";
+import {defineComponent, type PropType} from "vue";
+
+export default defineComponent({
+  name: "QuestMissive",
+  components: {AdventurerComponent},
+  props: {
+    missive: {
+      type: Object as PropType<Quest|any>,
+      default() {
+        return {} as Quest;
+      },
+    },
+    adventurers: {
+      type: Object as PropType<{[key: string]: Adventurer}>,
+      default() {
+        return {} as {[key: string]: Adventurer};
+      },
+    },
+  },
+  data: () => {
+    return {
+      progressPercentage: "0%",
+    }
+  },
+  methods: {
+    updateProgress() {
+      if (this.missive === undefined) return;
+      const progress = (this.missive.progressPoints / this.missive.maxProgress * 100).toFixed(2);
+      this.progressPercentage = `${progress}%`;
+    }
+  },
+  mounted() {
+    this.updateProgress();
+  },
+  watch: {
+    missive: {
+      handler() {
+        this.updateProgress();
+      },
+      deep: true,
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.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);
+  h2 {
+    font-size: 1.5rem;
+
+  }
+  h3 {
+    font-size: 1.15rem;
+    margin: 0;
+  }
+
+  .progressWrap {
+    width: 80%;
+    border: 1px solid #000;
+    margin: 0.5rem auto;
+    position: relative;
+    .progress {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      display: block;
+      width: v-bind(progressPercentage);
+      background-color: rgba(0, 128, 0, 0.75);
+      transition: width 250ms linear;
+      z-index: -1;
+    }
+  }
+
+
+
+  .rewards {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  &.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;
+    }
+  }
+}
+</style>

src/components/UpgradesList.vue

@@ -0,0 +1,68 @@
+<template>
+<section class="upgrades">
+<h2>Upgrades</h2>
+  <div class="upgrade">
+    <span>Adventurer capacity (level {{ guild.adventurerCapacity.level }})</span>
+    <button
+        v-if="guild.adventurerCapacity.nextLevelCost"
+        :disabled="guild.gold < guild.adventurerCapacity.nextLevelCost"
+        @click="upgradeAdventurerCapacity()"
+    >
+      Upgrade ({{guild.adventurerCapacity.nextLevelCost.toFixed(0)}} gold)
+    </button>
+  </div>
+</section>
+</template>
+
+<script lang="ts">
+import { Guild } from "@/classes/Guild";
+import {defineComponent, type PropType} from "vue";
+
+export default defineComponent({
+  name: "UpgradesList",
+  props: {
+    guild: {
+      type: Object as PropType<Guild>,
+      default() {
+        return new Guild(1, 0) as Guild;
+      }
+    }
+  },
+  methods: {
+    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();
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.upgrades {
+  display: flex;
+  flex-direction: column;
+  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-wrap: wrap;
+    width: min(25rem, 100%);
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+  }
+}
+</style>

src/views/AdventurerView.vue

@@ -9,11 +9,12 @@
           <span
               title="Hire"
               @click="hireAdventurer(currentlyForHire)"
+              :class="{disabled: Object.keys(adventurers).length >= guild.adventurerCapacity.getAdventurerCapacity()}"
           >
             ✔
           </span>
           <span
-              title="Dismiss"
+              :title="Object.keys(adventurers).length > 0 ? 'Dismiss' : ''"
               :class="{disabled: Object.keys(adventurers).length <= 0}"
               @click="dismissAdventurer()"
           >
@@ -28,7 +29,7 @@
     </div>
   </section>
   <section class="collection">
-    <h1>Recruited adventurers</h1>
+    <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" />
@@ -43,34 +44,36 @@
 import type {PropType} from "vue";
 import {defineComponent} from "vue";
 import AdventurerTile from "@/components/AdventurerTile.vue";
-import {Adventurer} from "@/classes/Adventurer";
+import type {Adventurer} from "@/classes/Adventurer";
+import { loadAdventurersForHire } from "@/GameData";
+import type {Guild} from "@/classes/Guild";
 
 export default defineComponent({
   name: "RecruitView",
   components: {AdventurerTile},
-  data() {
+  data: () => {
     return {
       currentlyForHire: null as Adventurer|null,
-      adventurersForHire: [
+      adventurersForHire: [] as Array<Adventurer>,
-        new Adventurer("rincewind-diskworld", "Rincewind", "/img/adventurers/rincewind.png", 2, 2),
-        new Adventurer("fran-sword-isekai", "Fran", "/img/adventurers/fran.png", 3, 1.5),
-        new Adventurer("kazuma-konosuba", "Kazuma", "/img/adventurers/kazuma.png", 2, 2),
-        new Adventurer("rein-beast-tamer", "Rein", "/img/adventurers/rein.png", 2, 2),
-        new Adventurer("momon-overlord", "Momon", "/img/adventurers/momon.png", 2, 2),
-      ] as Array<Adventurer>,
     }
   },
   props: {
+    guild: {
+      type: Object as PropType<Guild>,
+      default() {
+        return {} as Guild
+      },
+    },
     adventurers: {
       type: Object as PropType<{ [key: string]: Adventurer }>,
       default() {
-        return {};
+        return {} as { [key: string]: Adventurer };
       },
     },
     lastRecruitTime: {
-      type: Number as PropType<null|number>,
+      type: Number as PropType<number>,
       default() {
-        return null;
+        return 0;
       }
     },
   },
@@ -96,19 +99,24 @@ export default defineComponent({
       window.localStorage.setItem("currentlyForHire", adventurer.id);
 
     },
-    hireAdventurer(adventurer: Adventurer): void {
+    hireAdventurer(adventurer: Adventurer|any): void {
+      if (Object.keys(this.adventurers).length >= this.guild.adventurerCapacity.getAdventurerCapacity()) return;
       this.adventurers[adventurer.id] = adventurer;
       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");
     }
   },
-  mounted() {
+  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);
@@ -197,7 +205,8 @@ export default defineComponent({
         color: #fff;
       }
       &.disabled {
-        color: rgba(0,0,0, 0.5)
+        color: rgba(0,0,0, 0.5);
+        cursor: default;
       }
     }
   }

src/views/HomeView.vue

@@ -10,11 +10,14 @@
     </section>
     <section class="upgrade">
       <p>Guild level: {{ guild.level }}</p>
-      <button :disabled="guild.gold < 1000" @click="guild.upgrade()">
+      <button :disabled="guild.upgradeCost ? guild.gold < guild.upgradeCost : true" @click="guild.upgrade()">
         <span>Upgrade guild level</span><br>
         <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>
@@ -24,13 +27,15 @@
 <script lang="ts">
 import {defineComponent} from "vue";
 import type {PropType} from "vue";
-import type {Guild} from "@/classes/Guild";
+import {Guild} from "@/classes/Guild";
 
 import {version} from "../../package.json"
+import UpgradesList from "@/components/UpgradesList.vue";
 
 export default defineComponent({
   name: "GuildView",
-  data() {
+  components: {UpgradesList},
+  data: () => {
     return {
       version: version,
     }
@@ -38,6 +43,7 @@ export default defineComponent({
   props: {
     guild: {
       type: Object as PropType<Guild>,
+      default: () => new Guild(1, 0) as Guild,
     },
   }
 });

src/views/QuestView.vue

@@ -2,274 +2,85 @@
   <div class="guild" v-if="guild.level >= 7 && Object.keys(quests.S).length > 0">
     <h1>Rank S Quests</h1>
     <section class="missives">
-      <div
+      <QuestMissive
-          class="missive"
+          v-for="(missive, key, index) in quests.S"
-          :class="{done: missive.maxProgress <= missive.progressPoints}"
+          :key="key"
-          v-for="missive in quests.S"
+          :adventurers="adventurers"
-          :key="missive.id"
+          :missive="missive"
-          @click="() => {
+          @click="finalizeQuest(missive)"
-            if (missive.progressPoints < missive.maxProgress) return;
-            $emit('finalizeQuest', missive)
-          }"
-      >
-        <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) => {
-                adventurers[id].busy = true;
-                missive.adventurers[0] = adventurers[id];
-              }"
-                @free-adventurer="(id) => {
-                if (missive.progressPoints >= missive.maxProgress) return;
-                adventurers[id].busy = false;
-                missive.adventurers.splice(0, 1);
-                if (missive.adventurers.length <= 0) {
-                  missive.progressPoints = 0;
-                }
-              }"
       />
-          </button>
-        </div>
-        <progress :max="missive.maxProgress" :value="missive.progressPoints"></progress>
-      </div>
     </section>
   </div>
   <div class="guild" v-if="guild.level >= 6 && Object.keys(quests.A).length > 0">
     <h1>Rank A Quests</h1>
     <section class="missives">
-      <div
+      <QuestMissive
-          class="missive"
+          v-for="(missive, key, index) in quests.A"
-          :class="{done: missive.maxProgress <= missive.progressPoints}"
+          :key="key"
-          v-for="missive in quests.A"
+          :adventurers="adventurers"
-          :key="missive.id"
+          :missive="missive"
-          @click="() => {
+          @click="finalizeQuest(missive)"
-            if (missive.progressPoints < missive.maxProgress) return;
-            $emit('finalizeQuest', missive)
-          }"
-      >
-        <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) => {
-                adventurers[id].busy = true;
-                missive.adventurers[0] = adventurers[id];
-              }"
-                @free-adventurer="(id) => {
-                if (missive.progressPoints >= missive.maxProgress) return;
-                adventurers[id].busy = false;
-                missive.adventurers.splice(0, 1);
-                if (missive.adventurers.length <= 0) {
-                  missive.progressPoints = 0;
-                }
-              }"
       />
-          </button>
-        </div>
-        <progress :max="missive.maxProgress" :value="missive.progressPoints"></progress>
-      </div>
     </section>
   </div>
   <div class="guild" v-if="guild.level >= 5 && Object.keys(quests.B).length > 0">
     <h1>Rank B Quests</h1>
     <section class="missives">
-      <div
+      <QuestMissive
-          class="missive"
+          v-for="(missive, key, index) in quests.B"
-          :class="{done: missive.maxProgress <= missive.progressPoints}"
+          :key="key"
-          v-for="missive in quests.B"
+          :adventurers="adventurers"
-          :key="missive.id"
+          :missive="missive"
-          @click="() => {
+          @click="finalizeQuest(missive)"
-            if (missive.progressPoints < missive.maxProgress) return;
-            $emit('finalizeQuest', missive)
-          }"
-      >
-        <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) => {
-                adventurers[id].busy = true;
-                missive.adventurers[0] = adventurers[id];
-              }"
-                @free-adventurer="(id) => {
-                if (missive.progressPoints >= missive.maxProgress) return;
-                adventurers[id].busy = false;
-                missive.adventurers.splice(0, 1);
-                if (missive.adventurers.length <= 0) {
-                  missive.progressPoints = 0;
-                }
-              }"
       />
-          </button>
-        </div>
-        <progress :max="missive.maxProgress" :value="missive.progressPoints"></progress>
-      </div>
     </section>
   </div>
   <div class="guild" v-if="guild.level >= 4 && Object.keys(quests.C).length > 0">
     <h1>Rank C Quests</h1>
     <section class="missives">
-      <div
+      <QuestMissive
-          class="missive"
+          v-for="(missive, key, index) in quests.C"
-          :class="{done: missive.maxProgress <= missive.progressPoints}"
+          :key="key"
-          v-for="missive in quests.C"
+          :adventurers="adventurers"
-          :key="missive.id"
+          :missive="missive"
-          @click="() => {
+          @click="finalizeQuest(missive)"
-            if (missive.progressPoints < missive.maxProgress) return;
-            $emit('finalizeQuest', missive)
-          }"
-      >
-        <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) => {
-                adventurers[id].busy = true;
-                missive.adventurers[0] = adventurers[id];
-              }"
-                @free-adventurer="(id) => {
-                if (missive.progressPoints >= missive.maxProgress) return;
-                adventurers[id].busy = false;
-                missive.adventurers.splice(0, 1);
-                if (missive.adventurers.length <= 0) {
-                  missive.progressPoints = 0;
-                }
-              }"
       />
-          </button>
-        </div>
-        <progress :max="missive.maxProgress" :value="missive.progressPoints"></progress>
-      </div>
     </section>
   </div>
   <div class="guild" v-if="guild.level >= 3 && Object.keys(quests.D).length > 0">
     <h1>Rank D Quests</h1>
     <section class="missives">
-      <div
+      <QuestMissive
-          class="missive"
+          v-for="(missive, key, index) in quests.D"
-          :class="{done: missive.maxProgress <= missive.progressPoints}"
+          :key="key"
-          v-for="missive in quests.D"
+          :adventurers="adventurers"
-          :key="missive.id"
+          :missive="missive"
-          @click="() => {
+          @click="finalizeQuest((missive))"
-            if (missive.progressPoints < missive.maxProgress) return;
-            $emit('finalizeQuest', missive)
-          }"
-      >
-        <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) => {
-                adventurers[id].busy = true;
-                missive.adventurers[0] = adventurers[id];
-              }"
-                @free-adventurer="(id) => {
-                if (missive.progressPoints >= missive.maxProgress) return;
-                adventurers[id].busy = false;
-                missive.adventurers.splice(0, 1);
-                if (missive.adventurers.length <= 0) {
-                  missive.progressPoints = 0;
-                }
-              }"
       />
-          </button>
-        </div>
-        <progress :max="missive.maxProgress" :value="missive.progressPoints"></progress>
-      </div>
     </section>
   </div>
   <div class="guild" v-if="guild.level >= 2 && Object.keys(quests.E).length > 0">
     <h1>Rank E Quests</h1>
     <section class="missives">
-      <div
+      <QuestMissive
-          class="missive"
+          v-for="(missive, key, index) in quests.E"
-          :class="{done: missive.maxProgress <= missive.progressPoints}"
+          :key="key"
-          v-for="missive in quests.E"
+          :adventurers="adventurers"
-          :key="missive.id"
+          :missive="missive"
-          @click="() => {
+          @click="finalizeQuest(missive)"
-            if (missive.progressPoints < missive.maxProgress) return;
-            $emit('finalizeQuest', missive)
-          }"
-      >
-        <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) => {
-                adventurers[id].busy = true;
-                missive.adventurers[0] = adventurers[id];
-              }"
-                @free-adventurer="(id) => {
-                if (missive.progressPoints >= missive.maxProgress) return;
-                adventurers[id].busy = false;
-                missive.adventurers.splice(0, 1);
-                if (missive.adventurers.length <= 0) {
-                  missive.progressPoints = 0;
-                }
-              }"
       />
-          </button>
-        </div>
-        <progress :max="missive.maxProgress" :value="missive.progressPoints"></progress>
-      </div>
     </section>
   </div>
-  <div class="guild">
+  <div class="guild" v-if="Object.keys(quests.F).length > 0">
     <h1>Rank F Quests</h1>
     <section class="missives">
-      <div
+      <QuestMissive
-          class="missive"
+          v-for="(missive, key, index) in quests.F"
-          :class="{done: missive.maxProgress <= missive.progressPoints}"
+          :key="key"
-          v-for="missive in quests.F"
+          :adventurers="adventurers"
-          :key="missive.id"
+          :missive="missive"
-          @click="() => {
+          @click="finalizeQuest(missive)"
-            if (missive.progressPoints < missive.maxProgress) return;
-            $emit('finalizeQuest', missive)
-          }"
-      >
-        <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) => {
-                adventurers[id].busy = true;
-                missive.adventurers[0] = adventurers[id];
-              }"
-                @free-adventurer="(id) => {
-                if (missive.progressPoints >= missive.maxProgress) return;
-                adventurers[id].busy = false;
-                missive.adventurers.splice(0, 1);
-                if (missive.adventurers.length <= 0) {
-                  missive.progressPoints = 0;
-                }
-              }"
       />
-          </button>
-        </div>
-        <progress :max="missive.maxProgress" :value="missive.progressPoints"></progress>
-      </div>
     </section>
   </div>
 
@@ -280,38 +91,46 @@ 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 {Guild} from "@/classes/Guild";
+import {Guild} from "@/classes/Guild";
+import QuestMissive from "@/components/QuestMissive.vue";
 
 export default defineComponent({
   name: "QuestView",
-  components: {AdventurerComponent},
+  components: {QuestMissive, AdventurerComponent},
   props: {
     guild: {
       type: Object as PropType<Guild>,
+      default() {
+        return new Guild(1, 0);
+      },
     },
     adventurers: {
       type: Object as PropType<{ [key: string]: Adventurer }>,
       default() {
-        return {};
+        return {} as { [key: string]: Adventurer };
       },
     },
     quests: {
       type: Object as PropType<{ [key: string]: Quest }>,
       default() {
-        return {};
+        return {} as { [key: string]: Quest };
       },
     },
     lastRecruitTime: {
-      type: Number as PropType<null|number>,
+      type: Number as PropType<number>,
       default() {
-        return null;
+        return 0;
       }
     },
   },
-  data() {
-    return {};
-  },
   emits: [ 'finalizeQuest', 'wipeSave', 'recruitActionTaken'],
+  methods: {
+    // This is a workaround for vue not reporting Quest as Quest in v-for
+    finalizeQuest(quest: any|Quest): void {
+      if (quest.progressPoints < quest.maxProgress) return;
+      this.$emit('finalizeQuest', quest)
+    },
+  }
 })
 </script>
 
@@ -326,6 +145,7 @@ export default defineComponent({
 
   h1 {
     font-size: 3rem;
+    text-align: center;
   }
 
   .missives {
@@ -334,51 +154,9 @@ export default defineComponent({
     flex-wrap: wrap;
     width: calc(100% - 2rem);
     justify-content: center;
-    align-items: center;
+    align-items: stretch;
     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;
-        }
-      }
-    }
   }
 }
 </style>