move title styles to global file

bump version
remove debug
2026-05-12 06:26:59 +00:00 · 2023-06-20 20:06:54 +02:00 · 2023-06-20 19:58:31 +02:00 · 2023-06-20 19:57:34 +02:00 · 2023-06-20 19:56:36 +02:00 · 2023-06-20 19:56:28 +02:00
67 changed files with 2870 additions and 1236 deletions
@@ -0,0 +1 @@
 guildmaster.yht.one
@@ -0,0 +1,6 @@
 <h1>Guild Master</h1>
 <h2>Adventurer's guild management game</h2>
 <p>It's a game where you manage an adventurer's guild. You can hire adventurers, assign them to quests to send them on adventures. </p>
 <h3>How to play</h3>
 Game is playable on <a href="https://guildmaster.yht.one/">guildmaster.yht.one</a> and is always automatically updated when new release is made.
@@ -8,6 +8,18 @@
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap" rel="stylesheet">
  <meta name="description"
        content="Guild Master is a browser game where you manage your own adventurer's guild!"/>
  <meta property="twitter:title" content="Guild Master - Adventurer's guild management game"/>
  <meta property="twitter:image" content="https://guildmaster.yht.one/img/compass_rose.png"/>
  <meta property="twitter:description"
        content="Guild Master is a browser game where you manage your own adventurer's guild!"/>
  <meta property="og:title" content="Guild Master - Adventurer's guild management game"/>
  <meta property="og:url" content="https://guildmaster.yht.one/"/>
  <meta property="og:description"
        content="Guild Master is a browser game where you manage your own adventurer's guild!"/>
  <meta property="og:image" content="https://guildmaster.yht.one/img/compass_rose.png"/>
 </head>
 <body>
 <div id="app"></div>
@@ -1,28 +1,29 @@
 {
  "name": "adventurers-guild",
-  "version": "0.0.1",
+  "version": "0.8.0",
  "private": true,
  "scripts": {
    "dev": "vite",
-    "build": "run-p type-check build-only",
+    "build": "run-p type-check build-only && cp -r CNAME dist/CNAME",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit"
  },
  "dependencies": {
-    "sass": "^1.59.3",
+    "@vueuse/components": "^9.13.0",
-    "vue": "^3.2.45",
+    "sass": "^1.63.4",
-    "vue-router": "^4.1.6"
+    "vue": "^3.3.4",
    "vue-router": "^4.2.2"
  },
  "devDependencies": {
-    "@types/node": "^18.11.12",
+    "@types/node": "^18.16.18",
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue": "^4.2.3",
-    "@vue/tsconfig": "^0.1.3",
+    "@vue/tsconfig": "^0.4.0",
-    "eslint": "^8.36.0",
+    "eslint": "^8.43.0",
-    "eslint-plugin-vue": "^9.9.0",
+    "eslint-plugin-vue": "^9.15.0",
    "npm-run-all": "^4.1.5",
-    "typescript": "~4.7.4",
+    "typescript": "~5.1.3",
-    "vite": "^4.0.0",
+    "vite": "4.3.9",
-    "vue-tsc": "^1.0.12"
+    "vue-tsc": "^1.8.1"
  }
 }
@@ -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
  }
 ]
@@ -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."
  }
 ]
@@ -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."
  }
 ]
@@ -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!"
  }
 ]
@@ -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."
  }
 ]
@@ -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."
  }
 ]
@@ -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."
  }
 ]
@@ -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."
  }
 ]
@@ -0,0 +1,40 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg fill="#000000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 	 width="800px" height="800px" viewBox="0 0 569.613 569.614"
 	 xml:space="preserve">
 <g>
 	<g>
 		<path d="M371.49,563.638l113.052-65.854c5.26-3.063,9.088-8.094,10.64-13.975c1.555-5.888,0.701-12.148-2.359-17.405
 			l-30.769-52.807c4.789-6.524,9.083-13.115,12.972-19.918c3.893-6.799,7.405-13.84,10.606-21.275l61.114-0.221
 			c6.086-0.021,11.915-2.464,16.202-6.781c4.287-4.32,6.687-10.165,6.665-16.255l-0.48-130.833
 			c-0.024-6.089-2.464-11.919-6.784-16.206c-4.299-4.269-10.113-6.662-16.166-6.662c-0.03,0-0.062,0-0.089,0l-61.182,0.242
 			c-6.444-14.462-14.428-28.14-23.871-40.913l30.417-53.143c6.294-11.001,2.481-25.025-8.52-31.316L369.403,5.335
 			c-5.281-3.023-11.545-3.822-17.424-2.231c-5.872,1.598-10.872,5.462-13.892,10.747L307.665,67
 			c-15.766-1.662-31.653-1.613-47.363,0.144l-30.796-52.892c-3.063-5.263-8.094-9.091-13.975-10.646
 			c-5.884-1.551-12.148-0.704-17.408,2.359L85.068,71.823c-10.949,6.38-14.657,20.429-8.28,31.38l30.765,52.831
 			c-4.761,6.484-9.048,13.076-12.953,19.899c-3.904,6.824-7.417,13.855-10.6,21.255l-61.139,0.235
 			C10.187,197.472-0.046,207.785,0,220.456L0.48,351.29c0.024,6.086,2.463,11.919,6.784,16.206
 			c4.299,4.269,10.11,6.661,16.166,6.661c0.028,0,0.058,0,0.086,0l61.203-0.229c6.432,14.452,14.413,28.131,23.868,40.915
 			l-30.413,53.141c-3.023,5.284-3.825,11.548-2.231,17.423c1.597,5.872,5.462,10.872,10.747,13.896l113.535,64.977
 			c3.596,2.056,7.513,3.032,11.38,3.032c7.962,0,15.701-4.146,19.942-11.552l30.417-53.149c15.799,1.671,31.684,1.619,47.348-0.144
 			l30.799,52.89c3.066,5.26,8.094,9.088,13.978,10.643C359.967,567.552,366.23,566.705,371.49,563.638z M341.129,465.911
 			c-4.902-8.418-14.599-12.815-24.137-10.994c-20.588,3.935-42.174,3.999-63.128,0.202c-9.572-1.735-19.184,2.741-24.015,11.181
 			l-26.748,46.745l-73.694-42.18l26.75-46.741c4.832-8.439,3.819-19.006-2.521-26.371c-13.978-16.239-24.685-34.594-31.818-54.554
 			c-3.265-9.131-11.918-15.227-21.61-15.227c-0.027,0-0.058,0-0.085,0l-53.825,0.199l-0.315-84.937l53.819-0.205
 			c9.722-0.04,18.366-6.197,21.576-15.374c3.69-10.557,7.962-20.019,13.06-28.917c5.101-8.914,11.089-17.387,18.311-25.897
 			c6.294-7.417,7.225-17.993,2.334-26.396l-27.081-46.509l73.385-42.754l27.078,46.497c4.893,8.4,14.544,12.821,24.095,11.004
 			c20.716-3.911,42.317-3.978,63.189-0.19c9.557,1.753,19.189-2.742,24.019-11.178l26.753-46.744l73.697,42.179l-26.753,46.742
 			c-4.826,8.437-3.816,19,2.521,26.368c13.956,16.221,24.669,34.587,31.842,54.59c3.271,9.119,11.919,15.202,21.604,15.202
 			c0.031,0,0.062,0,0.092,0l53.789-0.214l0.315,84.927l-53.783,0.192c-9.712,0.037-18.351,6.182-21.569,15.347
 			c-3.746,10.654-8.023,20.131-13.082,28.975c-5.064,8.847-11.067,17.338-18.356,25.958c-6.271,7.418-7.194,17.978-2.305,26.368
 			l27.078,46.472l-73.391,42.749L341.129,465.911z"/>
 		<path d="M392.531,346.458c16.472-28.773,20.746-62.24,12.047-94.232s-29.342-58.685-58.115-75.151
 			c-18.761-10.74-40.05-16.417-61.562-16.417c-44.446,0-85.762,23.944-107.822,62.485c-33.994,59.404-13.327,135.39,46.071,169.386
 			c18.764,10.737,40.052,16.411,61.564,16.411C329.158,408.943,370.475,385.001,392.531,346.458z M352.696,323.658
 			c-13.902,24.293-39.955,39.385-67.985,39.385c-13.528,0-26.934-3.58-38.764-10.349c-37.433-21.426-50.456-69.312-29.033-106.751
 			c13.905-24.291,39.958-39.385,67.987-39.385c13.528,0,26.932,3.58,38.762,10.355c18.136,10.379,31.142,27.197,36.628,47.359
 			C365.771,284.435,363.075,305.524,352.696,323.658z"/>
 	</g>
 </g>
 </svg>
@@ -0,0 +1 @@
 <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>
@@ -0,0 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <rect width="24" height="24" fill="none"/>
  <path d="M12,2A10,10,0,0,0,8.84,21.5c.5.08.66-.23.66-.5V19.31C6.73,19.91,6.14,18,6.14,18A2.69,2.69,0,0,0,5,16.5c-.91-.62.07-.6.07-.6a2.1,2.1,0,0,1,1.53,1,2.15,2.15,0,0,0,2.91.83,2.16,2.16,0,0,1,.63-1.34C8,16.17,5.62,15.31,5.62,11.5a3.87,3.87,0,0,1,1-2.71,3.58,3.58,0,0,1,.1-2.64s.84-.27,2.75,1a9.63,9.63,0,0,1,5,0c1.91-1.29,2.75-1,2.75-1a3.58,3.58,0,0,1,.1,2.64,3.87,3.87,0,0,1,1,2.71c0,3.82-2.34,4.66-4.57,4.91a2.39,2.39,0,0,1,.69,1.85V21c0,.27.16.59.67.5A10,10,0,0,0,12,2Z"/>
 </svg>
@@ -1,50 +1,70 @@
 <script setup lang="ts">
-import {RouterLink, RouterView} from 'vue-router'</script>
+import {RouterLink, RouterView} from 'vue-router'
 import {version} from "../package.json"
 </script>
 <template>
  <section class="loading-screen" :class="{disabled: !loading}">
    <div class="title panel note-paper">
      <h1>Guild Master</h1>
      <h3>Adventurer's guild management game</h3>
      <small>v{{ version }}</small>
      <div class="lds-ring">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <h3>Loading assets...</h3>
    </div>
  </section>
  <header>
    <nav>
-      <RouterLink to="/">Guild</RouterLink>
+      <RouterLink :to="{name: 'guild'}">Guild</RouterLink>
-      <RouterLink to="/quests">Quests</RouterLink>
+      <RouterLink :to="{name: 'quests'}">Quests</RouterLink>
-      <RouterLink to="/adventurers">Adventurers</RouterLink>
+      <RouterLink :to="{name: 'adventurers'}">Adventurers</RouterLink>
      <RouterLink :to="{name: 'technical'}"><img class="icon" src="/img/icons/cog.svg" alt="Technical"></RouterLink>
    </nav>
  </header>
  <RouterView
      :guild="guild"
      :adventurers="adventurers"
      :quests="missives"
-        :lastRecruitTime="lastRecruitHandled"
+      :adventurerForHire="adventurerForHire"
      @finalizeQuest="finalizeQuest($event)"
      @wipeSave="resetSave()"
-        @recruitActionTaken="lastRecruitHandled = Number(new Date())"
+      @recruitActionTaken="recruitAction($event)"
  />
 </template>
 <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,
  loadAdventurersForHire,
  loadAvailableQuests,
  loadGame,
  removeAlreadyHiredAdventurers,
  saveGame
 } from "@/GameData";
 import type {GuildUpgrade} from "@/classes/GuildUpgrade";
 import AdventurerCapacityUpgrade from "@/classes/guildUpgrades/AdventurerCapacityUpgrade";
 import {getNewAdventurerForHire} from "@/classes/Recruitment";
 import QuestExpUpgrade from "@/classes/guildUpgrades/QuestExpUpgrade";
 import QuestGoldUpgrade from "@/classes/guildUpgrades/QuestGoldUpgrade";
 import AutoFinishQuestsUpgrade from "@/classes/guildUpgrades/AutoFinishQuestsUpgrade";
 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: () => ({
    loading: true as boolean,
    guild: new Guild(1, 500),
    gameTickTask: null as null | number,
    gameSaveTask: null as null | number,
    lastQuestGot: {
      S: null as null | number,
      A: null as null | number,
@@ -53,48 +73,12 @@ 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: {
+    adventurerForHire: null as Adventurer | null,
-    } as { [key: string]: Adventurer },
+    adventurersDatabase: {} as Array<Adventurer>,
-    quests: {
+    adventurers: {} as { [key: string]: Adventurer },
-      F: {
+    quests: {} as { [key: string]: { [key: string]: Quest } },
        "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,21 +99,56 @@ export default defineComponent({
            missive.progressPoints = 0;
            continue;
          }
          if (missive.progressPoints >= missive.maxProgress) {
            if (this.guild.autoFinishQuestsUpgrade.getRanksToAutoFinishQuestsIn().includes(rank)) {
              this.finalizeQuest(missive);
              continue;
            }
            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);
          }
        }
      }
    },
    async checkForNewRecruit(currentTimestamp: number) {
      if (this.lastRecruitHandled == null) {
        this.lastRecruitHandled = 0;
      }
      if (Object.keys(this.adventurers).length <= 0) {
        this.adventurerForHire = this.adventurersDatabase[0];
      }
      if (currentTimestamp - this.lastRecruitHandled >= 1000 * 60 * 30 && this.adventurerForHire == null) {
        this.adventurerForHire = getNewAdventurerForHire(this.adventurersDatabase);
      }
    },
    recruitAction(adventurer: Adventurer | null): void {
      this.lastRecruitHandled = Number(new Date());
      this.adventurerForHire = null;
      if (adventurer === null) return;
      this.adventurers[adventurer.id] = adventurer;
      for (const id in this.adventurersDatabase) {
        const databaseAdventurer = this.adventurersDatabase[id];
        if (databaseAdventurer.id === adventurer.id) {
          this.adventurersDatabase.splice(Number(id), 1);
          break;
        }
      }
    },
    finalizeQuest(missive: Quest) {
      missive.progressPoints = 0;
      this.guild.gold += missive.goldReward;
      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 +160,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], this.guild.expModifier.getModifier());
    },
    createMissive(questToAdd: Quest, rank: QuestRank) {
      const quest = JSON.parse(JSON.stringify(questToAdd));
@@ -149,32 +168,46 @@ 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);
      }
      if (saveData.guild.expModifier) {
        guildUpgrades.expModifier = new QuestExpUpgrade(saveData.guild.expModifier.level);
      }
      if (saveData.guild.goldModifier) {
        guildUpgrades.goldModifier = new QuestGoldUpgrade(saveData.guild.goldModifier.level);
      }
      if (saveData.guild.autoFinishQuestsUpgrade) {
        guildUpgrades.autoFinishQuestsUpgrade = new AutoFinishQuestsUpgrade(saveData.guild.autoFinishQuestsUpgrade.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,
              data.prestige ?? 0,
          );
          adventurer.busy = data.busy;
          adventurers[data.id] = adventurer;
        } catch (e) {
        }
      }
      this.adventurers = adventurers;
@@ -196,7 +229,17 @@ export default defineComponent({
      this.missives = missives;
-       this.lastRecruitHandled = saveData.lastRecruitAction;
+      this.lastRecruitHandled = saveData.lastRecruitAction ?? 0;
      if (saveData.adventurerForHireId != null) {
        for (const id in this.adventurersDatabase) {
          const adventurer = this.adventurersDatabase[id];
          if (adventurer.id === saveData.adventurerForHireId) {
            this.adventurerForHire = adventurer;
            return;
          }
        }
      }
    },
    resetSave() {
      if (!confirm("You are about to wipe your save file. Are you sure?")) return;
@@ -204,18 +247,43 @@ export default defineComponent({
      window.location.reload();
    }
  },
-  mounted() {
+  async mounted() {
    console.debug("Loading game data")
    const promises = await Promise.all([
      loadAvailableQuests(),
      loadAdventurersForHire(),
    ]);
    this.quests = promises[0] as { [key: string]: { [key: string]: Quest } };
    this.adventurersDatabase = promises[1] as Array<Adventurer>;
    console.debug("Game data loaded!")
    this.loadGame();
    this.adventurersDatabase = removeAlreadyHiredAdventurers(this.adventurersDatabase, this.adventurers);
-    setInterval(() => {
+    // Wait a second to make sure at least most images load in behind the loader
-      this.saveGame();
+    setTimeout(() => {
-    }, 30*1000)
+      this.loading = false;
    }, 1000);
-    setInterval(() => {
+    this.gameSaveTask = Number(setInterval(() => {
      saveGame(new GameData({
        adventurers: this.adventurers,
        guild: this.guild,
        missives: this.missives,
        lastQuestGot: this.lastQuestGot,
        lastRecruitAction: this.lastRecruitHandled,
        adventurerForHireId: this.adventurerForHire?.id ?? null,
      }));
    }, 10 * 1000));
    this.gameTickTask = Number(setInterval(() => {
      this.updateMissives();
      const now = Number(new Date());
      this.checkForNewRecruit(now);
      for (const id in this.lastQuestGot) {
        const lastTime = this.lastQuestGot[getFromString(id as QuestRank)];
        if (lastTime === null) this.lastQuestGot[getFromString(id as QuestRank)] = 0;
@@ -297,8 +365,12 @@ export default defineComponent({
        }
      }
-    }, 1000);
+    }, 250));
  },
  beforeUnmount() {
    if (this.gameSaveTask) clearInterval(this.gameSaveTask);
    if (this.gameTickTask) clearInterval(this.gameTickTask);
  }
 })
 </script>
@@ -327,13 +399,83 @@ nav {
  background-blend-mode: darken;
  background-color: rgba(0, 0, 0, 0.65);
  .icon {
    width: 2rem;
    height: 2rem;
    fill: white;
    filter: invert(1);
    transform: translateY(0.35rem);
  }
  a {
    font-size: 2rem;
    color: #fff;
    text-decoration: none;
    &.router-link-active {
      text-decoration: underline;
    }
  }
-  &.router-link-exact-active {
+}
 .loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 5;
  user-select: none;
  background-size: 25rem;
  background-color: rgba(87, 50, 20, 0.45);
  background-image: url("/img/background/wood/cut_wood_background.png");
  background-blend-mode: darken;
  background-repeat: repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.25s linear;
  &.disabled {
    opacity: 0;
    pointer-events: none;
  }
  .lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #000 transparent transparent transparent;
  }
  .lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
  }
  .lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
  }
  .lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
  }
  @keyframes lds-ring {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
 }
@@ -0,0 +1,123 @@
 import {Guild} from "@/classes/Guild";
 import {Adventurer} from "@/classes/Adventurer";
 import {Quest} from "@/classes/Quest";
 import {getFromString, QuestRank} from "@/classes/QuestRank";
 export class GameData {
  guild: Guild;
  adventurers: { [key: string]: Adventurer };
  missives: { [key: string]: { [key: string]: Quest } };
  lastQuestGot: { [key: string]: null | number };
  lastRecruitAction: null | number;
  adventurerForHireId: string | null;
  constructor(
    data: any,
  ) {
    this.guild = data.guild ?? new Guild(1, 0);
    this.adventurers = data.adventurers ?? {} as { [key: string]: Adventurer };
    this.missives = data.missives ?? {} as { [key: string]: { [key: string]: Quest } };
    this.lastQuestGot = data.lastQuestGot ?? {} as { [key: string]: null | number };
    this.lastRecruitAction = data.lastRecruitAction ?? null;
    this.adventurerForHireId = data.adventurerForHireId ?? null;
  }
 }
 /**
 * 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,
    adventurerForHireId: data.adventurerForHireId,
  }));
 }
 export function loadGame(): GameData | null {
  const savedGame = window.localStorage.getItem("savedGame");
  if (!savedGame) return null;
  const parsedGame = JSON.parse(savedGame);
  console.debug("Loading game...");
  return new GameData(parsedGame);
 }
 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(): Promise<Array<Adventurer>> {
  const response = await fetch("data/adventurers.json");
  if (response.status !== 200) {
    console.error("Failed to load adventurers");
    alert("Failed to load adventurers. Please try refreshing the page.");
    return [];
  }
  const adventurerData = await response.json();
  const adventurers: Array<Adventurer> = [];
  for (const adventurer of adventurerData) {
    adventurers.push(new Adventurer(
      adventurer.id,
      adventurer.name,
      adventurer.portrait,
      adventurer.attackExponent,
      adventurer.level,
      adventurer.exp,
    ));
  }
  return adventurers;
 }
 export function removeAlreadyHiredAdventurers(
  adventurers: Array<Adventurer>,
  adventurersHired: { [key: string]: Adventurer }
 ): Array<Adventurer> {
  const adventurersForHire: Array<Adventurer> = [];
  for (const adventurer of adventurers) {
    if (adventurersHired[adventurer.id]) continue;
    adventurersForHire.push(adventurer);
  }
  return adventurersForHire;
 }
@@ -0,0 +1,114 @@
 body {
  margin: 0;
  padding: 0 0 10rem;
  min-height: calc(100vh - 10rem);
  font-family: 'EB Garamond', serif;
  overflow-y: scroll;
  user-select: none;
  background-size: 25rem;
  background-color: rgba(87, 50, 20, 0.45);
  background-image: url("/img/background/wood/cut_wood_background.png");
  background-blend-mode: darken;
  background-repeat: repeat;
 }
 #app {
  width: 100%;
 }
 .panel {
  &.pinned-paper {
    background-image: url("/img/quests/backgrounds/paper.png");
    position: relative;
    filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.25));
    .nail {
      position: absolute;
      width: 2rem;
      height: 2rem;
      filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.5));
      &.small {
        width: 1rem;
        height: 1rem;
      }
      img {
        width: 100%;
        height: 100%;
      }
      &.top-left {
        top: 1rem;
        left: 1rem;
      }
      &.top-right {
        top: 1rem;
        right: 1rem;
      }
    }
  }
  &.note-paper {
    background-image: url("/img/background/paper/small_tile_paper.png");
    position: relative;
    filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.25));
    border-image: url("/img/borders/metal_corner.png") 30 round;
  }
 }
 .button {
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  font-family: 'EB Garamond', serif;
  font-weight: bold;
  cursor: pointer;
  border: 2px solid rgb(0, 0, 0);
  transition: filter 0.05s linear;
  white-space: nowrap;
  &.metal {
    background-image: url("/img/borders/metal_strip.png");
    background-size: contain;
    background-blend-mode: darken;
    background-repeat: repeat;
    color: #dcdcdc;
  }
  &:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }
  &:hover:not(:disabled) {
    filter: brightness(1.2);
  }
 }
 .title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-block: 2.5rem;
  text-align: center;
  width: 100%;
  max-width: 45rem;
  gap: 0.5rem;
  h1 {
    font-size: 4rem;
    line-height: 0.75;
    white-space: pre-wrap;
    margin: 0;
  }
  h3 {
    margin: 0;
    line-height: 0.9;
  }
  small {
    font-size: 0.9rem;
    font-weight: bold;
    line-height: 0.25;
  }
 }
@@ -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,61 @@ export class Adventurer {
        this.level += 1;
    }
    prestigeUp(): void {
        this.level = 1;
        this.exp = 0;
        this.prestige += 1;
    }
    canLevelUp(): boolean {
-        const requirement = this.level * 3;
+        if (this.level >= this.getMaxLevel()) return false;
-        return this.exp >= requirement;
+        return this.exp >= this.getNextLevelExpRequirement();
    }
    canPrestigeUp(): boolean {
        if (this.busy) return false;
        if (this.level < getMaxLevelForPrestige(this.prestige)) return false;
        return this.prestige < 5
    }
    getNextLevelExpRequirement(): number {
        return Math.max(1, Math.floor((3 * Math.pow(1.2, this.level - 1)) * Math.pow(1.025, this.level - 1)));
    }
    /**
     * 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);
 }
@@ -1,12 +1,34 @@
 import type {GuildUpgrade} from "@/classes/GuildUpgrade";
 import AdventurerCapacityUpgrade from "@/classes/guildUpgrades/AdventurerCapacityUpgrade";
 import {formatGold} from "@/classes/NumberMagic";
 import QuestExpUpgrade from "@/classes/guildUpgrades/QuestExpUpgrade";
 import QuestGoldUpgrade from "@/classes/guildUpgrades/QuestGoldUpgrade";
 import AutoFinishQuestsUpgrade from "@/classes/guildUpgrades/AutoFinishQuestsUpgrade";
 const MAX_LEVEL: number = 8;
 export class Guild {
    gold: number;
    level: number;
    displayUpgradeCost: number|string;
    upgradeCost: number|null = null;
    adventurerCapacity: AdventurerCapacityUpgrade;
    expModifier: QuestExpUpgrade;
    goldModifier: QuestGoldUpgrade;
    autoFinishQuestsUpgrade: AutoFinishQuestsUpgrade;
-    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";
+        const rawDisplayUpgradeCost = this.getUpgradeCost();
        this.displayUpgradeCost = rawDisplayUpgradeCost ? formatGold(rawDisplayUpgradeCost) : "Max level";
        this.upgradeCost = this.getUpgradeCost();
        this.adventurerCapacity = upgrades.adventurerCapacity as AdventurerCapacityUpgrade ?? new AdventurerCapacityUpgrade();
        this.expModifier = upgrades.expModifier as QuestExpUpgrade ?? new QuestExpUpgrade();
        this.goldModifier = upgrades.goldModifier as QuestGoldUpgrade ?? new QuestGoldUpgrade();
        this.autoFinishQuestsUpgrade = upgrades.autoFinishQuestsUpgrade as AutoFinishQuestsUpgrade ?? new AutoFinishQuestsUpgrade();
    }
    upgrade(): void {
@@ -15,18 +37,24 @@ export class Guild {
        if (this.gold < cost) return;
        this.gold -= cost;
        this.level += 1;
-        if (this.level >= 7) {
+        if (this.level >= MAX_LEVEL) {
            this.displayUpgradeCost = "Max level";
            this.upgradeCost = null;
        } else {
            const newCost = this.getUpgradeCost();
            if (newCost === null) return;
-            this.displayUpgradeCost = newCost;
+            this.displayUpgradeCost = formatGold(newCost);
            this.upgradeCost = newCost;
        }
    }
    getUpgradeCost(): number|null {
        return upgradeCosts[this.level] ?? null;
    }
    isMaxLevel(): boolean {
        return this.level >= MAX_LEVEL;
    }
 }
 const upgradeCosts = {
@@ -35,5 +63,6 @@ const upgradeCosts = {
    "3": 5000,
    "4": 10000,
    "5": 25000,
-    "6": 50000,
+    "6": 100000,
    "7": 750000,
 } as {[index:string]: number}
@@ -0,0 +1,7 @@
 export class GuildUpgrade {
    level: number = 1;
    nextLevelCost: number | null = null;
    guildLevelRequirement: number = 1;
 }
@@ -0,0 +1,7 @@
 export default interface MaxLevellable {
  maxLevel: number;
  isMaxLevel(): boolean;
 }
@@ -0,0 +1,21 @@
 const goldFormatter = new Intl.NumberFormat('en-US', {
    maximumFractionDigits: 3,
    // @ts-ignore - typescript doesn't know about this option for some godforsaken reason
    notation: "compact",
    useGrouping: true,
 });
 const damageFormatter = new Intl.NumberFormat('en-US', {
    maximumFractionDigits: 2,
    // @ts-ignore - typescript doesn't know about this option for some godforsaken reason
    notation: "compact",
 });
 export function formatGold(number: number | null): string {
    if (number === null) return "";
    return goldFormatter.format(number);
 }
 export function formatDamage(number: number): string {
    return damageFormatter.format(number);
 }
@@ -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,62 @@ 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
 * @param expModifier - multiplification modifier for the exp reward
 */
 export function getQuestWithRewards(quest: Quest, expModifier: number = 1) {
    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) * expModifier);
    // 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;
 }
@@ -0,0 +1,13 @@
 import type {Adventurer} from "@/classes/Adventurer";
 /**
 * Get a random adventurer from the pool
 * @param adventurerPool
 * @returns {Adventurer|null} null if the pool is empty
 */
 export function getNewAdventurerForHire(adventurerPool: Array<Adventurer>): Adventurer|null {
    if (adventurerPool.length <= 0) return null;
    const randomId = adventurerPool.length * Math.random() << 0;
    return adventurerPool[randomId];
 }
@@ -0,0 +1,27 @@
 import {GuildUpgrade} from "@/classes/GuildUpgrade";
 export default 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.35, level - 1);
        return Math.floor(1500 * scalingFactor * Math.pow(level, 1.35));
    }
    /**
     * Returns the number of adventurers the guild can have
     */
    getAdventurerCapacity(): number {
        return 1 + this.level ;
    }
 }
@@ -0,0 +1,52 @@
 import {GuildUpgrade} from "@/classes/GuildUpgrade";
 import type MaxLevellable from "@/classes/MaxLevellable";
 import {QuestRank} from "@/classes/QuestRank";
 export default class AutoFinishQuestsUpgrade extends GuildUpgrade implements MaxLevellable {
    maxLevel: number;
    constructor(level: number = 1) {
        super();
        this.level = level;
        this.nextLevelCost = this.getCostForLevel(this.level);
        this.guildLevelRequirement = 7;
        this.maxLevel = 8;
    }
    upgrade(): void {
        this.level += 1;
        this.nextLevelCost = this.getCostForLevel(this.level);
    }
    getCostForLevel(level: number): number {
        const scalingFactor = Math.pow(4.2, level - 1);
        return Math.floor(25000 * scalingFactor * Math.pow(level, 1.05));
    }
    isMaxLevel(): boolean {
        return this.level >= this.maxLevel;
    }
    getRanksToAutoFinishQuestsIn(): Array<QuestRank> {
        switch (this.level) {
            case 1:
            default:
                return [];
            case 2:
                return [QuestRank.F];
            case 3:
                return [QuestRank.F, QuestRank.E];
            case 4:
                return [QuestRank.F, QuestRank.E, QuestRank.D];
            case 5:
                return [QuestRank.F, QuestRank.E, QuestRank.D, QuestRank.C];
            case 6:
                return [QuestRank.F, QuestRank.E, QuestRank.D, QuestRank.C, QuestRank.B];
            case 7:
                return [QuestRank.F, QuestRank.E, QuestRank.D, QuestRank.C, QuestRank.B, QuestRank.A];
            case 8:
                return [QuestRank.F, QuestRank.E, QuestRank.D, QuestRank.C, QuestRank.B, QuestRank.A, QuestRank.S];
        }
    }
 }
@@ -0,0 +1,24 @@
 import {GuildUpgrade} from "@/classes/GuildUpgrade";
 export default class QuestExpUpgrade extends GuildUpgrade {
  constructor(level: number = 1) {
    super();
    this.level = level;
    this.nextLevelCost = this.getCostForLevel(this.level);
    this.guildLevelRequirement = 8;
  }
  upgrade(): void {
    this.level += 1;
    this.nextLevelCost = this.getCostForLevel(this.level);
  }
  getCostForLevel(level: number): number {
    const scalingFactor = Math.pow(1.05, level - 1);
    return Math.floor(2500000 * scalingFactor * Math.pow(level, 1.01));
  }
  getModifier(): number {
    return 1 + (this.level * 0.1);
  }
 }
@@ -0,0 +1,24 @@
 import {GuildUpgrade} from "@/classes/GuildUpgrade";
 export default class QuestGoldUpgrade extends GuildUpgrade {
  constructor(level: number = 1) {
    super();
    this.level = level;
    this.nextLevelCost = this.getCostForLevel(this.level);
    this.guildLevelRequirement = 8;
  }
  upgrade(): void {
    this.level += 1;
    this.nextLevelCost = this.getCostForLevel(this.level);
  }
  getCostForLevel(level: number): number {
    const scalingFactor = Math.pow(1.05, level - 1);
    return Math.floor(2500000 * scalingFactor * Math.pow(level, 1.01));
  }
  getModifier(): number {
    return 1 + (this.level * 0.1);
  }
 }
@@ -0,0 +1,144 @@
 <template>
  <dialog ref="modal" class="adventurer-details" v-if="adventurer">
    <button class="close" @click="$emit('closeButtonClicked')">✗</button>
    <div class="adventurer-portrait">
      <img :src="adventurer.portrait" alt="" draggable="false"/>
    </div>
    <span class="name">{{ adventurer.name }}</span>
    <div class="adventurer-data">
      <p>Level: {{ adventurer.level }} / {{ adventurer.getMaxLevel() }}</p>
      <p>Prestige level: {{ adventurer.prestige }}</p>
      <p>Exp: {{ adventurer.exp }} / {{ adventurer.getNextLevelExpRequirement() }}</p>
      <p>DPS: {{ formatDamage(adventurer.getDPS()) }}</p>
    </div>
    <div class="adventurer-upgrades">
      <button
          class="button metal"
          :disabled="!adventurer.canPrestigeUp()"
          :title="!adventurer.canPrestigeUp() ? 'Adventurer needs to be at max level to prestige up' : ''"
          @click="() => {
            if (adventurer === null) return;
            if (!adventurer.canPrestigeUp()) return;
            adventurer.prestigeUp();
          }"
      >
        Prestige up
      </button>
    </div>
  </dialog>
 </template>
 <script lang="ts">
 import type {Adventurer} from "@/classes/Adventurer";
 import {defineComponent, type PropType} from "vue";
 import {formatDamage} from "../classes/NumberMagic";
 export default defineComponent({
  name: "AdventurerDetails",
  methods: {formatDamage},
  props: {
    adventurer: {
      type: Object as PropType<Adventurer | null>,
      default() {
        return null as Adventurer | null;
      },
      required: true,
    },
  },
  mounted() {
    const refs = this.$refs as any;
    refs.modal.showModal();
  },
 });
 </script>
 <style lang="scss" scoped>
 .adventurer-details {
  display: flex;
  position: absolute;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 10rem;
  max-width: 45rem;
  background-image: url("/img/background/paper/small_tile_paper.png");
  background-position: center;
  background-size: cover;
  user-select: none;
  &::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
  }
  .close {
    position: absolute;
    top: 0.25rem;
    right: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    margin: 0;
    cursor: pointer;
    color: #ab0707;
    background: transparent;
    border: none;
    font-family: 'EB Garamond', serif;
    transition: color 0.05s linear;
    &:hover {
      color: #ff0000;
    }
    &:focus {
      outline: none;
    }
    &:focus-visible {
      outline: 2px solid #ff0000;
    }
  }
  .adventurer-portrait {
    width: 100%;
    max-width: 15rem;
    aspect-ratio: 1/1;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .name {
    display: flex;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    width: 100%;
  }
  .adventurer-data {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    font-size: 1.2rem;
    width: 100%;
    & > * {
      margin: 0;
      width: calc(50% - 1rem);
      text-align: center;
      padding-inline: 0.5rem;
    }
  }
 }
 </style>
@@ -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,13 @@ export default defineComponent({
  }),
  props: {
    adventurers: {
-      type: Array<Adventurer>
+      type: Object as PropType<{ [key: string]: Adventurer }>,
      default() {
        return {} as { [key: string]: Adventurer };
      },
      required: true,
    },
  },
  methods: {
    print(a: string) {
      console.log(a);
    }
  }
 })
 </script>
@@ -41,6 +40,7 @@ export default defineComponent({
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  .slot {
    padding: 0;
    width: 5rem;
@@ -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,30 @@ 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};
      },
      required: true,
    },
  },
  methods: {
-    print(a:string) {
+    closeSelect() {
-      console.log(a);
+      this.selection = false;
-    },
+    }
  }
 })
 </script>
@@ -72,7 +83,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 +94,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;
@@ -4,7 +4,9 @@
      :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 +20,26 @@ export default defineComponent({
  props: {
    adventurer: {
      type: Object as PropType<Adventurer>,
      default() {
        return {} as Adventurer;
      },
      required: true,
    }
  },
  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>
@@ -32,16 +53,29 @@ export default defineComponent({
  line-height: 1;
  color: rgba(0, 0, 0, 0.75);
  position: relative;
  .level {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1rem;
    min-width: 1rem;
    background-color: rgba(0, 0, 0, 0.75);
    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%;
@@ -0,0 +1,113 @@
 <template>
  <div class="changelog panel pinned-paper">
    <div class="nail top-left">
      <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
    </div>
    <div class="nail top-right">
      <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
    </div>
    <h1>Changelog</h1>
    <div class="changelog-entry" v-for="release in releases">
      <hr>
      <h2><span>Version {{ release.name }}</span><small class="date">{{ timeFormat.format(release.createdAt) }}</small></h2>
      <pre>{{ release.body }}</pre>
    </div>
  </div>
 </template>
 <script lang="ts">
 import {defineComponent} from "vue";
 export default defineComponent({
  name: "ChangelogComponent",
  data: () => ({
    timeFormat: Intl.DateTimeFormat(Intl.DateTimeFormat().resolvedOptions().locale, {
      year: "numeric",
      month: "numeric",
      day: "numeric",
    }),
    releases: [] as Array<{body: string, name: string, createdAt: Date}>,
    lastPage: 1,
  }),
  methods: {
    async getReleases(page: number): Promise<void> {
      const result = await fetch("https://api.github.com/repos/YouHaveTrouble/GuildMaster/releases?per_page=10")
          .catch((e) => {
            return null;
          });
      if (result === null) return;
      const json = await result.json();
      for (const release of json) {
        const version = {} as any;
        version.body = release.body.trim();
        version.name = release.name;
        version.createdAt = new Date(release.published_at);
        if (release.body.length === 0) continue;
        this.releases.push(version);
      }
    }
  },
  async mounted() {
    this.getReleases(1);
  }
 });
 </script>
 <style lang="scss" scoped>
 .changelog {
  padding-block: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  max-width: 45rem;
  width: 100%;
  h1 {
    font-size: 3rem;
    line-height: 1;
    margin: 0;
    text-align: center;
  }
  .changelog-entry {
    width: 100%;
    h2 {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: flex-end;
      margin: 0;
      padding-inline: 1rem;
      gap: 0.5rem;
    }
    .date {
      color: rgba(0,0,0, 0.6);
      font-size: 1rem;
    }
    hr {
      border: 0;
      width: calc(100% - 2rem);
      border-bottom: 1px solid black;
    }
    pre {
      line-height: 1.2;
      margin: 0;
      white-space: pre-wrap;
      font-family: 'EB Garamond', serif;
      padding-inline: 1rem;
    }
  }
 }
 </style>
@@ -0,0 +1,260 @@
 <template>
  <article
      class="missive"
      :class="{done: missive.maxProgress <= missive.progressPoints}"
  >
    <div class="parchment">
      <img src="/img/quests/backgrounds/dirty_paper.png" alt="parchment">
    </div>
    <div class="stain" v-if="stain">
      <img src="/img/quests/overlays/water_stain.png" alt="stain">
    </div>
    <div class="drink-stain" v-if="drinkStain.exists">
      <img src="/img/quests/overlays/drink_stain.png" alt="stain">
    </div>
    <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 class="progress"></span>
      <span class="percentage">{{ progressPercentage }}</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;
      },
      required: true,
    },
    adventurers: {
      type: Object as PropType<{ [key: string]: Adventurer }>,
      default() {
        return {} as { [key: string]: Adventurer };
      },
      required: true,
    },
  },
  data: () => {
    return {
      progressPercentage: "0%",
      stain: false,
      drinkStain: {
        exists: false,
        offsetX: "0%",
        offsetY: "0%",
      },
    }
  },
  methods: {
    updateProgress() {
      if (this.missive === undefined) return;
      const progress = (this.missive.progressPoints / this.missive.maxProgress * 100).toFixed(2);
      this.progressPercentage = `${progress}%`;
    },
    randomNumber(min: number, max: number) {
      return Math.random() * (max - min) + min;
    },
  },
  mounted() {
    this.updateProgress();
    this.stain = Math.random() < 0.35;
    this.drinkStain.exists = Math.random() < 0.15;
    if (this.drinkStain.exists) {
      this.drinkStain.offsetX = `${this.randomNumber(-1, 1) * 100}%`;
      this.drinkStain.offsetY = `${this.randomNumber(-1, 1) * 100}%`;
    }
  },
  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;
  .parchment {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -5;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  h2 {
    font-size: 1.5rem;
    line-height: 1;
  }
  h3 {
    font-size: 1.15rem;
    margin: 0;
  }
  .progressWrap {
    width: 80%;
    border: 1px solid #000;
    margin: 0.5rem auto;
    position: relative;
    height: 1.25rem;
    .progress {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      display: block;
      width: v-bind(progressPercentage);
      background-color: rgba(0, 128, 0, 0.65);
      transition: width 250ms linear;
    }
    .percentage {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
    }
  }
  .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;
    }
  }
  .stain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    opacity: 1;
    z-index: -4;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(0.8);
    }
  }
  .drink-stain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.45;
    z-index: -1;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 45%;
      height: 35%;
      filter: grayscale(0.8);
      transform: translate(v-bind("drinkStain.offsetX"), v-bind("drinkStain.offsetY"));
    }
  }
 }
 </style>
@@ -0,0 +1,137 @@
 <template>
  <section class="upgrades">
    <h2>Upgrades</h2>
    <div class="upgrade">
      <span>Adventurer capacity (level {{ guild.adventurerCapacity.level }})</span>
      <small>Increases the maximum amount of recruited adventurers</small>
      <button
          class="button metal"
          v-if="guild.adventurerCapacity.nextLevelCost"
          :disabled="guild.gold < guild.adventurerCapacity.nextLevelCost"
          @click="upgradeAdventurerCapacity()"
      >
        Upgrade ({{ formatGold(guild.adventurerCapacity.nextLevelCost) }} gold)
      </button>
    </div>
    <div class="upgrade" v-if="guild.level >= guild.autoFinishQuestsUpgrade.guildLevelRequirement">
      <span>Auto-finish quests (level {{ guild.autoFinishQuestsUpgrade.level - 1 }})</span>
      <small>Automatically finish quests when they are completed.</small>
      <button
          class="button metal"
          v-if="guild.autoFinishQuestsUpgrade.nextLevelCost"
          :disabled="guild.gold < guild.autoFinishQuestsUpgrade.nextLevelCost || guild.autoFinishQuestsUpgrade.isMaxLevel()"
          @click="upgradeAutoFinishQuests()"
      >
        <span v-if="!guild.autoFinishQuestsUpgrade.isMaxLevel()">Upgrade ({{  formatGold(guild.autoFinishQuestsUpgrade.nextLevelCost) }} gold)</span>
        <span v-else>Max level</span>
      </button>
    </div>
    <div class="upgrade" v-if="guild.level >= guild.expModifier.guildLevelRequirement">
      <span>Quest exp modifier (level {{ guild.expModifier.level }})</span>
      <small>Increases exp from newly offered quests by 10% per level</small>
      <button
          class="button metal"
          v-if="guild.expModifier.nextLevelCost"
          :disabled="guild.gold < guild.expModifier.nextLevelCost"
          @click="upgradeQuestExpModifier()"
      >
        Upgrade ({{ formatGold(guild.expModifier.nextLevelCost) }} gold)
      </button>
    </div>
    <div class="upgrade" v-if="guild.level >= guild.goldModifier.guildLevelRequirement">
      <span>Quest gold modifier (level {{ guild.goldModifier.level }})</span>
      <small>Increases gold from newly offered quests by 10% per level</small>
      <button
          class="button metal"
          v-if="guild.goldModifier.nextLevelCost"
          :disabled="guild.gold < guild.goldModifier.nextLevelCost"
          @click="upgradeQuestGoldModifier()"
      >
        Upgrade ({{ formatGold(guild.goldModifier.nextLevelCost) }} gold)
      </button>
    </div>
  </section>
 </template>
 <script lang="ts">
 import {Guild} from "@/classes/Guild";
 import {defineComponent, type PropType} from "vue";
 import {formatGold} from "@/classes/NumberMagic";
 export default defineComponent({
  name: "UpgradesList",
  props: {
    guild: {
      type: Object as PropType<Guild>,
      default() {
        return new Guild(1, 0) as Guild;
      },
      required: true,
    }
  },
  methods: {
    formatGold,
    upgradeAdventurerCapacity(): void {
      if (!this.guild.adventurerCapacity) return;
      if (!this.guild.adventurerCapacity.nextLevelCost) return;
      if (this.guild.gold < this.guild.adventurerCapacity.nextLevelCost) return;
      this.guild.gold -= this.guild.adventurerCapacity.nextLevelCost;
      this.guild.adventurerCapacity.upgrade();
    },
    upgradeAutoFinishQuests(): void {
      if (!this.guild.autoFinishQuestsUpgrade) return;
      if (this.guild.autoFinishQuestsUpgrade.isMaxLevel()) return;
      if (!this.guild.autoFinishQuestsUpgrade.nextLevelCost) return;
      if (this.guild.gold < this.guild.autoFinishQuestsUpgrade.nextLevelCost) return;
      this.guild.gold -= this.guild.autoFinishQuestsUpgrade.nextLevelCost;
      this.guild.autoFinishQuestsUpgrade.upgrade();
    },
    upgradeQuestExpModifier(): void {
      if (!this.guild.expModifier) return;
      if (!this.guild.expModifier.nextLevelCost) return;
      if (this.guild.gold < this.guild.expModifier.nextLevelCost) return;
      this.guild.gold -= this.guild.expModifier.nextLevelCost;
      this.guild.expModifier.upgrade();
    },
    upgradeQuestGoldModifier(): void {
      if (!this.guild.goldModifier) return;
      if (!this.guild.goldModifier.nextLevelCost) return;
      if (this.guild.gold < this.guild.goldModifier.nextLevelCost) return;
      this.guild.gold -= this.guild.goldModifier.nextLevelCost;
      this.guild.goldModifier.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: column;
    width: min(25rem, 100%);
    justify-content: center;
    align-items: center;
    gap: 0.2rem;
    small {
      font-weight: normal;
      line-height: 1;
    }
  }
 }
 </style>
@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-import './assets/main.css'
+import '@/assets/main.scss'
 const app = createApp(App)
@@ -1,5 +1,4 @@
 import {createRouter, createWebHashHistory} from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
@@ -7,17 +6,22 @@ const router = createRouter({
    {
      path: '/',
      name: 'guild',
-      component: HomeView
+      component: () => import('@/views/HomeView.vue')
    },
    {
      path: '/quests',
      name: 'quests',
-      component: () => import('../views/QuestView.vue')
+      component: () => import('@/views/QuestView.vue')
    },
    {
      path: '/adventurers',
      name: 'adventurers',
-      component: () => import('../views/AdventurerView.vue')
+      component: () => import('@/views/AdventurerView.vue')
    },
    {
      path: '/technical',
      name: 'technical',
      component: () => import('@/views/TechnicalView.vue')
    }
  ]
 })
@@ -1,19 +1,26 @@
 <template>
  <div class="adventurer-section">
-  <section class="recruit">
+    <AdventurerDetails
        :adventurer="selectedAdventurer"
        v-if="selectedAdventurer !== null"
        @closeButtonClicked="selectedAdventurer = null"
    />
    <section class="recruit panel pinned-paper">
      <h1>Applying adventurers</h1>
      <div class="adventurers">
-      <div v-if="currentlyForHire">
+        <div v-if="adventurerForHire">
-        <adventurer-tile class="hire-tile" :adventurer="currentlyForHire"/>
+          <adventurer-tile class="hire-tile" :adventurer="adventurerForHire"/>
          <div class="decision">
          <span
              title="Hire"
-              @click="hireAdventurer(currentlyForHire)"
+              @click="hireAdventurer()"
              :class="{disabled: Object.keys(adventurers).length >= guild.adventurerCapacity.getAdventurerCapacity()}"
          >
            ✔
          </span>
            <span
-              title="Dismiss"
+                :title="Object.keys(adventurers).length > 0 ? 'Dismiss' : ''"
                :class="{disabled: Object.keys(adventurers).length <= 0}"
                @click="dismissAdventurer()"
            >
@@ -27,10 +34,18 @@
      </div>
    </section>
-  <section class="collection">
+    <section class="collection panel pinned-paper">
-    <h1>Recruited adventurers</h1>
+      <h1>
        Recruited adventurers ({{ Object.keys(adventurers).length }} / {{ guild.adventurerCapacity.getAdventurerCapacity() }})
      </h1>
      <small>Click an adventurer to see details about them</small>
      <div class="adventurers">
-      <div class="adventurer-tile" v-for="adventurer in adventurers" :key="adventurer.id">
+        <div
            class="adventurer-tile"
            v-for="adventurer in adventurers"
            :key="adventurer.id"
            @click="selectedAdventurer = adventurer"
        >
          <AdventurerTile class="entry" :adventurer="adventurer"/>
          <b>{{ adventurer.name }}</b>
        </div>
@@ -43,94 +58,53 @@
 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 type {Guild} from "@/classes/Guild";
 import AdventurerDetails from "@/components/AdventurerDetails.vue";
 export default defineComponent({
  name: "RecruitView",
-  components: {AdventurerTile},
+  components: {AdventurerDetails, 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),
+      selectedAdventurer: null as Adventurer | null,
        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
      },
      required: true,
    },
    adventurers: {
      type: Object as PropType<{ [key: string]: Adventurer }>,
      default() {
-        return {};
+        return {} as { [key: string]: Adventurer };
      },
      required: true,
    },
-    lastRecruitTime: {
+    adventurerForHire: {
-      type: Number as PropType<null|number>,
+      type: Object as PropType<Adventurer | null>,
      default() {
        return null;
      }
    },
  },
  methods: {
-    getRandomAdventurer(): Adventurer|null {
+    hireAdventurer(): void {
-      if (this.adventurersForHire.length <= 0) return null;
+      if (Object.keys(this.adventurers).length >= this.guild.adventurerCapacity.getAdventurerCapacity()) return;
-      const randomId = this.adventurersForHire.length * Math.random() << 0;
+      this.$emit("recruitActionTaken", this.adventurerForHire);
      return this.adventurersForHire[randomId];
    },
    getNewAdventurerForHire(): void {
      const adventurer = this.getRandomAdventurer();
      if (adventurer === null) {
        this.currentlyForHire = null;
        return;
      }
      if (this.adventurers[adventurer.id] != null) {
        this.currentlyForHire = null;
        return;
      }
      this.currentlyForHire = adventurer;
      window.localStorage.setItem("currentlyForHire", adventurer.id);
    },
    hireAdventurer(adventurer: Adventurer): void {
      this.adventurers[adventurer.id] = adventurer;
      this.currentlyForHire = null;
      window.localStorage.removeItem("currentlyForHire");
      this.$emit("recruitActionTaken", adventurer);
    },
    dismissAdventurer() {
-      this.currentlyForHire = null;
+      if (Object.keys(this.adventurers).length <= 0) return;
      this.$emit("recruitActionTaken", null);
      window.localStorage.removeItem("currentlyForHire");
    }
  },
-  mounted() {
+  async mounted() {
    if (Object.keys(this.adventurers).length <= 0) {
      this.currentlyForHire = this.adventurersForHire[0];
      window.localStorage.setItem("currentlyForHire", this.adventurersForHire[0].id);
      return;
    }
    const savedCurrentForHire = window.localStorage.getItem("currentlyForHire");
    if (savedCurrentForHire !== null) {
      for (const id in this.adventurersForHire) {
        const adventurer = this.adventurersForHire[id];
        if (adventurer.id === savedCurrentForHire) {
          this.currentlyForHire = adventurer;
          return;
        }
      }
    }
    const now = Number(new Date());
    if (now - this.lastRecruitTime >= 1000 * 60 * 30 && this.currentlyForHire === null) {
      this.getNewAdventurerForHire();
    }
  },
  emits: ["recruitActionTaken"]
@@ -140,22 +114,36 @@ export default defineComponent({
 <style lang="scss" scoped>
 .adventurer-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  section {
    max-width: 1280px;
    width: 100%;
    text-align: center;
  padding-block: 1rem;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  section {
    text-align: center;
    padding: 1rem;
    width: calc(100% - 2rem);
    max-width: 45rem;
    margin: 0 auto;
  }
  h1 {
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
  }
  .collection {
    small {
      font-size: 1rem;
      display: block;
      margin-bottom: 0.5rem;
    }
  }
  .adventurers {
    display: flex;
    flex-direction: row;
@@ -163,6 +151,7 @@ export default defineComponent({
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    .adventurer-tile {
      display: flex;
      justify-content: center;
@@ -170,10 +159,13 @@ export default defineComponent({
      flex-direction: column;
      gap: 0.25rem;
      font-size: 1.1rem;
      cursor: pointer;
      .entry {
        height: 7rem;
        width: 7rem;
      }
      b {
        line-height: 1;
        text-align: center;
@@ -184,6 +176,7 @@ export default defineComponent({
      }
    }
  }
  .decision {
    display: flex;
    flex-direction: row;
@@ -191,16 +184,21 @@ export default defineComponent({
    align-items: center;
    font-size: 2rem;
    gap: 1rem;
    span {
      cursor: pointer;
      &:hover {
        color: #fff;
      }
      &.disabled {
-        color: rgba(0,0,0, 0.5)
+        color: rgba(0, 0, 0, 0.5);
        cursor: default;
      }
    }
  }
  .hire-tile {
    width: 8rem;
    height: 8rem;
@@ -1,36 +1,56 @@
 <template>
  <main>
-    <section class="title">
+    <section class="title panel note-paper">
      <h1>Guild Master</h1>
      <h3>Adventurer's guild management game</h3>
      <small>v{{ version }}</small>
    </section>
    <section class="upgrades panel pinned-paper">
      <div class="nail top-left">
        <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
      </div>
      <div class="nail top-right">
        <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
      </div>
      <section class="coffer">
-      <p>Coffer: {{guild.gold}} gold</p>
+        <p>Coffer: {{ formatGold(guild.gold) }} gold</p>
      </section>
      <section class="upgrade">
        <p>Guild level: {{ guild.level }}</p>
-      <button :disabled="guild.gold < 1000" @click="guild.upgrade()">
+        <button
-        <span>Upgrade guild level</span><br>
+            class="button metal"
            :disabled="guild.upgradeCost ? guild.gold < guild.upgradeCost : true"
            @click="guild.upgrade()"
        >
          <span>Upgrade guild level </span>
          <span>({{ guild.displayUpgradeCost }})</span>
        </button>
      </section>
      <section class="upgrade">
        <UpgradesList :guild="guild"/>
      </section>
      <section class="upgrade">
        <span class="wipe-save" @click="$emit('wipeSave')">Wipe your save data</span>
      </section>
    </section>
  </main>
 </template>
 <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";
 import {formatGold} from "@/classes/NumberMagic";
 export default defineComponent({
  name: "GuildView",
-  data() {
+  methods: {formatGold},
  components: {UpgradesList},
  data: () => {
    return {
      version: version,
    }
@@ -38,46 +58,40 @@ export default defineComponent({
  props: {
    guild: {
      type: Object as PropType<Guild>,
      default: () => new Guild(1, 0) as Guild,
      required: true,
    },
  }
 });
 </script>
 <style lang="scss">
-.title {
+main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
-  padding: 2.5rem;
+  padding-block: 1rem;
-  text-align: center;
+  gap: 1rem;
-  gap: 0.5rem;
+  .upgrades {
-  h1 {
+    max-width: 45rem;
-    font-size: 4rem;
+    width: 100%;
-    line-height: 0.75;
+  }
 }
    margin: 0;
  }
  h3 {
    margin: 0;
    line-height: 0.9;
  }
  small {
    font-size: 0.9rem;
    font-weight: bold;
    line-height: 0.25;
  }
 }
 .coffer {
  text-align: center;
  p {
    font-size: 1.5rem;
    font-weight: bold;
  }
 }
 .upgrade {
  text-align: center;
  .wipe-save {
    display: inline-flex;
    font-weight: bold;
@@ -85,6 +99,7 @@ export default defineComponent({
    color: #d52121;
    cursor: pointer;
  }
  p {
    margin: 0;
    font-size: 1.5rem;
@@ -1,278 +1,90 @@
 <template>
  <section>
    <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>
-
+  </section>
 </template>
 <script lang="ts">
@@ -280,38 +92,49 @@ 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);
      },
      required: true,
    },
    adventurers: {
      type: Object as PropType<{ [key: string]: Adventurer }>,
      default() {
-        return {};
+        return {} as { [key: string]: Adventurer };
      },
      required: true,
    },
    quests: {
      type: Object as PropType<{ [key: string]: Quest }>,
      default() {
-        return {};
+        return {} as { [key: string]: Quest };
      },
      required: true,
    },
    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 +149,7 @@ export default defineComponent({
  h1 {
    font-size: 3rem;
    text-align: center;
  }
  .missives {
@@ -334,51 +158,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>
@@ -0,0 +1,89 @@
 <template>
  <section class="technical-view">
    <div class="socials panel pinned-paper">
      <div class="nail top-left small">
        <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
      </div>
      <div class="nail top-right small">
        <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
      </div>
      <h1>Socials</h1>
      <div class="links">
        <a class="link" href="https://discord.gg/j8KK5dGBps">
          <img class="icon" src="/img/icons/discord.svg" alt="Discord"/>
          Discord
        </a>
        <a class="link" href="https://github.com/YouHaveTrouble/GuildMaster">
          <img class="icon" src="/img/icons/github.svg" alt="GitHub"/>
          GitHub
        </a>
      </div>
    </div>
    <ChangelogComponent/>
  </section>
 </template>
 <script lang="ts">
 import {defineComponent} from "vue";
 import ChangelogComponent from "@/components/ChangelogComponent.vue";
 export default defineComponent({
  name: "TechnicalView",
  components: {ChangelogComponent},
 })
 </script>
 <style lang="scss" scoped>
 .technical-view {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding-block: 1rem;
  h1 {
    font-size: 3rem;
    line-height: 1;
    margin: 0;
  }
  .socials {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    .links {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      .link {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.05rem;
        text-decoration: underline;
        font-size: 1.5rem;
        color: #000;
        font-weight: bold;
      }
    }
  }
  .icon {
    width: 2rem;
    height: 2rem;
  }
 }
 </style>
@@ -1,5 +1,5 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.node.json",
+  "extends": "@vue/tsconfig/tsconfig.json",
  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
  "compilerOptions": {
    "composite": true,
@@ -1,5 +1,5 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "extends": "@vue/tsconfig/tsconfig.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "compilerOptions": {
    "baseUrl": ".",
@@ -11,5 +11,5 @@ export default defineConfig({
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
-  base: "/GuildMaster/"
+  base: "/"
 })
Author	SHA1	Message	Date
YouHaveTrouble	6625a5b9de	move title styles to global file	2023-06-20 20:06:54 +02:00
YouHaveTrouble	cf69b92934	bump version	2023-06-20 19:58:31 +02:00
YouHaveTrouble	005cde4a01	remove debug	2023-06-20 19:57:34 +02:00
YouHaveTrouble	1b94d676e7	minor fixes	2023-06-20 19:56:36 +02:00
YouHaveTrouble	7cda820a99	add metadata	2023-06-20 19:56:28 +02:00
YouHaveTrouble	7281fdab60	dynamically load home view	2023-06-20 19:39:13 +02:00
YouHaveTrouble	3b9441b555	improve loading process	2023-06-20 19:37:27 +02:00
YouHaveTrouble	c2abfd6dfd	add loading screen to hide loading assets and not yet loaded gamestate	2023-06-20 19:18:50 +02:00
YouHaveTrouble	f05c393600	new favicon	2023-06-20 19:18:09 +02:00
YouHaveTrouble	23b6f4b4f8	update packages and fix breaking changes	2023-06-20 18:12:20 +02:00
YouHaveTrouble	d5195aa157	bump version	2023-05-12 21:52:06 +02:00
YouHaveTrouble	15072fe2c8	fix up ts errors	2023-05-12 21:52:00 +02:00
YouHaveTrouble	ba4a6cb2a2	add quest auto-finish upgrade	2023-05-12 21:47:23 +02:00
YouHaveTrouble	4847d22f7e	cancel update and save tasks on main component unload	2023-05-12 19:58:47 +02:00
YouHaveTrouble	2c053cc3eb	increased cost of adventurer capacity upgrade	2023-05-12 19:13:48 +02:00
YouHaveTrouble	c55e0c8bb6	added quest gold modifier upgrade	2023-05-12 18:41:40 +02:00
YouHaveTrouble	29aafedcfa	fix max guild level being displayed on level 7 when upgraded to it	2023-05-12 18:25:45 +02:00
YouHaveTrouble	8070c855a0	drastically reduce price and scaling of exp modifier upgrade	2023-05-12 18:24:59 +02:00
YouHaveTrouble	aaf0eb6546	bump version	2023-04-23 15:24:59 +02:00
YouHaveTrouble	c14a135c94	display release date of an update next to its title	2023-04-23 15:22:59 +02:00
YouHaveTrouble	40d5a876b8	add quest exp modifier upgrade	2023-04-23 15:22:40 +02:00
YouHaveTrouble	3b47ed1bed	bump version	2023-04-09 23:58:14 +02:00
YouHaveTrouble	fdc5d370de	Merge pull request #8 from YouHaveTrouble/adventurer-details Adventurer details	2023-04-09 23:57:37 +02:00
YouHaveTrouble	19c4a3f7ac	adjust adventurer exp scaling from linear to exponential	2023-04-09 23:55:34 +02:00
YouHaveTrouble	2dad283de9	fix already recruited adventurers showing up again	2023-04-09 16:22:42 +02:00
YouHaveTrouble	61ff80b69f	style buttons and fix up number formatting	2023-04-09 15:35:56 +02:00
YouHaveTrouble	a185bc2153	prestige feature	2023-04-09 13:59:19 +02:00
YouHaveTrouble	b213cae62b	fix the game not properly saving/loading adventurers for hire	2023-04-07 22:23:16 +02:00
YouHaveTrouble	19d3dd5515	exit button for adventurer details popup	2023-04-07 22:22:26 +02:00
YouHaveTrouble	4f2d742284	fix lack of gold formatting on guild upgrade button on game load	2023-04-07 20:45:08 +02:00
YouHaveTrouble	a0b7db1bf6	popup window with adventurer details	2023-04-05 22:56:52 +02:00
YouHaveTrouble	c569a1110c	Merge remote-tracking branch 'origin/master'	2023-04-02 21:54:26 +02:00
YouHaveTrouble	56407505ea	add formatting to gold display	2023-04-02 21:54:11 +02:00
YouHaveTrouble	5e4a78530a	Unfrick the savefile Unfrick the savefile	2023-04-02 20:38:49 +02:00
YouHaveTrouble	7be4d2b9ca	Merge branch 'master' of https://github.com/YouHaveTrouble/adventurers-guild-game into unfrick-the-savefile # Conflicts: # src/views/AdventurerView.vue	2023-03-31 22:25:16 +02:00
YouHaveTrouble	eb4b0fba00	bump version	2023-03-31 21:47:32 +02:00
YouHaveTrouble	3f22b4511d	Better look for the eyes Better look for the eyes	2023-03-31 21:46:57 +02:00
YouHaveTrouble	6f777332a4	fix up styles for the pages, fix up some code formatting to be more consistent	2023-03-31 21:44:56 +02:00
YouHaveTrouble	101ea0ffb5	provide backgrounds for the guild page components	2023-03-31 20:22:10 +02:00
YouHaveTrouble	af11324fb7	Merge pull request #4 from RhythmicSys/new_assets New assets	2023-03-31 19:10:07 +02:00
RhythmicSys	6903774f97	Adds more assets	2023-03-30 20:32:31 -07:00
RhythmicSys	1a9d2d0d9f	Adds more assets	2023-03-29 22:37:38 -07:00
YouHaveTrouble	359abd3ab4	make generic panel css class	2023-03-29 22:45:30 +02:00
YouHaveTrouble	1a3a493df4	swap background to better looking wood	2023-03-29 22:06:56 +02:00
YouHaveTrouble	0890efd1ec	move recruitment logic from the adventurer view to the main save data	2023-03-29 00:31:14 +02:00
YouHaveTrouble	5b4278cf30	bump version	2023-03-28 19:00:04 +02:00
YouHaveTrouble	8665506160	add settings button, link socials and get the changelog from github	2023-03-28 18:34:41 +02:00
YouHaveTrouble	fdd0a8bbb1	add readme	2023-03-27 23:07:13 +02:00
YouHaveTrouble	8499782fdd	0.1.0 0.1.0	2023-03-27 22:06:26 +02:00
YouHaveTrouble	124cc85d82	add more style to the quest board	2023-03-27 22:04:44 +02:00
YouHaveTrouble	2c39bb9eef	Merge pull request #2 from RhythmicSys/new_assets Add to available assets	2023-03-27 19:54:13 +02:00
RhythmicSys	e05f47e2cb	Remove second wall panel and nail shadow, rename first wall panel to 'wall_panel_diagonal'	2023-03-27 10:42:16 -07:00
YouHaveTrouble	630219a546	move the cname file after build for gh pages	2023-03-27 18:05:17 +02:00
RhythmicSys	7386742c1b	Add to available assets	2023-03-26 12:18:57 -07:00
YouHaveTrouble	b19ecd29f8	Merge remote-tracking branch 'origin/master'	2023-03-26 20:41:39 +02:00
YouHaveTrouble	0bca77a3c7	change the url base to match gh pages	2023-03-26 20:41:35 +02:00
YouHaveTrouble	6230d4b050	Create CNAME	2023-03-26 20:29:31 +02:00
YouHaveTrouble	54a052bb23	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.	2023-03-26 20:26:44 +02:00
YouHaveTrouble	9dcb403289	upgrade section and first upgrade, correctly update guild upgrade cost	2023-03-26 20:16:52 +02:00
YouHaveTrouble	fae1faded5	remove redundant loggers	2023-03-26 15:01:15 +02:00
YouHaveTrouble	e6654858a1	adventurer limit, base classes for guild upgrades	2023-03-26 14:20:00 +02:00
YouHaveTrouble	b6e2a7e813	more balanced math, adventurer max levels, recruits duplicate protection	2023-03-25 16:32:14 +01:00
YouHaveTrouble	c71eeda11f	hook in data sources for adventurers and quests, programatically generate quest rewards, change damage math,	2023-03-25 14:42:17 +01:00
YouHaveTrouble	9ac13c4cae	cleanup	2023-03-25 02:42:08 +01:00
YouHaveTrouble	4e3f13e77e	fix adventurer not being nullable	2023-03-25 02:41:57 +01:00
YouHaveTrouble	5f875af0a6	bump the version	2023-03-25 02:11:48 +01:00
YouHaveTrouble	247a87b41c	fix remaining typescript errors	2023-03-25 02:07:05 +01:00
YouHaveTrouble	31bf1d8b8f	fix more ts errors	2023-03-25 01:40:17 +01:00
YouHaveTrouble	abca7e3cd1	fix possibly null prop	2023-03-25 00:50:23 +01:00
YouHaveTrouble	11d2e831df	this fixes 5 ts errors, apparently. don't ask me.	2023-03-25 00:47:07 +01:00
YouHaveTrouble	b89d041064	fix over 30 ts errors	2023-03-25 00:36:42 +01:00
YouHaveTrouble	28295e69d5	Merge branch 'master' of https://github.com/YouHaveTrouble/adventurers-guild-game into 0.0.2	2023-03-24 23:34:24 +01:00
YouHaveTrouble	e979923712	data driven quests	2023-03-24 02:42:05 +01:00
YouHaveTrouble	189fe142d1	data driven adventurers	2023-03-24 02:00:59 +01:00
YouHaveTrouble	5acc51534d	make guild button disable when cannot afford upgrade	2023-03-24 02:00:43 +01:00
YouHaveTrouble	9fb64e7539	save/load logic moved to its own file	2023-03-24 01:43:17 +01:00
YouHaveTrouble	01152a9ad4	remove defense, properly load adventurer exp	2023-03-24 01:42:40 +01:00
YouHaveTrouble	f605ef0f08	quest display enchancements	2023-03-23 23:35:07 +01:00
YouHaveTrouble	2131d70d6c	click outside adventurer choice closes the choice	2023-03-23 20:19:53 +01:00
YouHaveTrouble	91d91f26f2	export quest missive to its own component	2023-03-23 19:58:47 +01:00
YouHaveTrouble	10cb19c10d	make scrollbar always visible to reduce width jumping	2023-03-23 19:46:25 +01:00
YouHaveTrouble	8d8e669bb3	adventurer exp bars	2023-03-23 19:17:31 +01:00
YouHaveTrouble	3864d042ab	don't let new players dismiss rincewind. he really wants to join.	2023-03-23 18:25:34 +01:00
YouHaveTrouble	fd01ac366d	type cleanup	2023-03-23 18:25:08 +01:00
YouHaveTrouble	9ca26e2a7a	Revert "properly pass props in routing" This reverts commit `a7d1748c80`.	2023-03-23 18:17:54 +01:00
YouHaveTrouble	a7d1748c80	properly pass props in routing	2023-03-23 18:09:07 +01:00
		`@@ -0,0 +1 @@`
							<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>