fix infinite loading screen on new save file

GDD.md

@@ -0,0 +1,23 @@
+# Game Design Document
+
+## 1. Introduction
+
+Guild Master is a game simulating being a fantasy guild master. The player will be able to recruit adventurers,
+send them on quests, and manage the guild's resources.
+
+## 2. Gameplay
+
+Player will recruit adventurers and assign then to quests. Adventurers will have different statistics and a passive
+ability that will make each character unique. Player will have to manage guild's resources to complete more and more
+resource intensive quests and assignments.
+
+## 3. Mechanics
+Menus. Lots of menus. Possibly with fancy animations.
+
+## 4. Characters
+Set amount of available adventurers. Each with their own inventory and passive ability. Items in the inventory will
+boost specific statistics of the character. They will be scaled based on level and the xp curve will be exponential.
+
+## 5. Quests
+There will always be a minimum set amount of quests available. Adventurers will have to be assigned to a quest that is
+within their level range. Quests will come in different difficulties within the level range.

news.txt

@@ -1 +1 @@
-Looking for artists for assets for this game! Need backgrounds and icons! Join discord for more info!
+This is alpha version. Saves can lose data across updates.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "adventurers-guild",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "adventurers-guild",
-      "version": "0.12.0",
+      "version": "0.14.0",
       "dependencies": {
         "@vueuse/components": "^9.13.0",
         "sass": "^1.66.1",
@@ -551,30 +551,31 @@
       }
     },
     "node_modules/@volar/language-core": {
-      "version": "1.10.1",
+      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.10.1.tgz",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.11.1.tgz",
-      "integrity": "sha512-JnsM1mIPdfGPxmoOcK1c7HYAsL6YOv0TCJ4aW3AXPZN/Jb4R77epDyMZIVudSGjWMbvv/JfUa+rQ+dGKTmgwBA==",
+      "integrity": "sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==",
       "dev": true,
       "dependencies": {
-        "@volar/source-map": "1.10.1"
+        "@volar/source-map": "1.11.1"
       }
     },
     "node_modules/@volar/source-map": {
-      "version": "1.10.1",
+      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-1.10.1.tgz",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-1.11.1.tgz",
-      "integrity": "sha512-3/S6KQbqa7pGC8CxPrg69qHLpOvkiPHGJtWPkI/1AXCsktkJ6gIk/5z4hyuMp8Anvs6eS/Kvp/GZa3ut3votKA==",
+      "integrity": "sha512-hJnOnwZ4+WT5iupLRnuzbULZ42L7BWWPMmruzwtLhJfpDVoZLjNBxHDi2sY2bgZXCKlpU5XcsMFoYrsQmPhfZg==",
       "dev": true,
       "dependencies": {
         "muggle-string": "^0.3.1"
       }
     },
     "node_modules/@volar/typescript": {
-      "version": "1.10.1",
+      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-1.10.1.tgz",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-1.11.1.tgz",
-      "integrity": "sha512-+iiO9yUSRHIYjlteT+QcdRq8b44qH19/eiUZtjNtuh6D9ailYM7DVR0zO2sEgJlvCaunw/CF9Ov2KooQBpR4VQ==",
+      "integrity": "sha512-iU+t2mas/4lYierSnoFOeRFQUhAEMgsFuQxoxvwn5EdQopw43j+J27a4lt9LMInx1gLJBC6qL14WYGlgymaSMQ==",
       "dev": true,
       "dependencies": {
-        "@volar/language-core": "1.10.1"
+        "@volar/language-core": "1.11.1",
+        "path-browserify": "^1.0.1"
       }
     },
     "node_modules/@vue/compiler-core": {
@@ -629,18 +630,19 @@
       "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
     },
     "node_modules/@vue/language-core": {
-      "version": "1.8.8",
+      "version": "1.8.27",
-      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-1.8.8.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-1.8.27.tgz",
-      "integrity": "sha512-i4KMTuPazf48yMdYoebTkgSOJdFraE4pQf0B+FTOFkbB+6hAfjrSou/UmYWRsWyZV6r4Rc6DDZdI39CJwL0rWw==",
+      "integrity": "sha512-L8Kc27VdQserNaCUNiSFdDl9LWT24ly8Hpwf1ECy3aFb9m6bDhBGQYOujDm21N7EW3moKIOKEanQwe1q5BK+mA==",
       "dev": true,
       "dependencies": {
-        "@volar/language-core": "~1.10.0",
+        "@volar/language-core": "~1.11.1",
-        "@volar/source-map": "~1.10.0",
+        "@volar/source-map": "~1.11.1",
         "@vue/compiler-dom": "^3.3.0",
-        "@vue/reactivity": "^3.3.0",
         "@vue/shared": "^3.3.0",
-        "minimatch": "^9.0.0",
+        "computeds": "^0.0.1",
+        "minimatch": "^9.0.3",
         "muggle-string": "^0.3.1",
+        "path-browserify": "^1.0.1",
         "vue-template-compiler": "^2.7.14"
       },
       "peerDependencies": {
@@ -662,9 +664,9 @@
       }
     },
     "node_modules/@vue/language-core/node_modules/minimatch": {
-      "version": "9.0.3",
+      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
       "dev": true,
       "dependencies": {
         "brace-expansion": "^2.0.1"
@@ -738,16 +740,6 @@
       "integrity": "sha512-CPuIReonid9+zOG/CGTT05FXrPYATEqoDGNrEaqS4hwcw5BUNM2FguC0mOwJD4Jr16UpRVl9N0pY3P+srIbqmg==",
       "dev": true
     },
-    "node_modules/@vue/typescript": {
-      "version": "1.8.8",
-      "resolved": "https://registry.npmjs.org/@vue/typescript/-/typescript-1.8.8.tgz",
-      "integrity": "sha512-jUnmMB6egu5wl342eaUH236v8tdcEPXXkPgj+eI/F6JwW/lb+yAU6U07ZbQ3MVabZRlupIlPESB7ajgAGixhow==",
-      "dev": true,
-      "dependencies": {
-        "@volar/typescript": "~1.10.0",
-        "@vue/language-core": "1.8.8"
-      }
-    },
     "node_modules/@vueuse/components": {
       "version": "9.13.0",
       "resolved": "https://registry.npmjs.org/@vueuse/components/-/components-9.13.0.tgz",
@@ -998,11 +990,11 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
+      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -1085,6 +1077,12 @@
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
       "dev": true
     },
+    "node_modules/computeds": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/computeds/-/computeds-0.0.1.tgz",
+      "integrity": "sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==",
+      "dev": true
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1092,9 +1090,9 @@
       "dev": true
     },
     "node_modules/cross-spawn": {
-      "version": "6.0.5",
+      "version": "6.0.6",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.6.tgz",
-      "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+      "integrity": "sha512-VqCUuhcd1iB+dsv8gxPttb5iZh/D0iubSP21g36KXdEuf6I5JiioesUVjpCdHV9MZRUfVFlvwtIUyPfxo5trtw==",
       "dev": true,
       "dependencies": {
         "nice-try": "^1.0.4",
@@ -1483,9 +1481,9 @@
       "dev": true
     },
     "node_modules/eslint/node_modules/cross-spawn": {
-      "version": "7.0.3",
+      "version": "7.0.6",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "dev": true,
       "dependencies": {
         "path-key": "^3.1.0",
@@ -1690,9 +1688,9 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
+      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -2474,9 +2472,9 @@
       "dev": true
     },
     "node_modules/nanoid": {
-      "version": "3.3.6",
+      "version": "3.3.11",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
       "funding": [
         {
           "type": "github",
@@ -2676,6 +2674,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "dev": true
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -2722,9 +2726,9 @@
       }
     },
     "node_modules/picocolors": {
-      "version": "1.0.0",
+      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -2759,9 +2763,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.28",
+      "version": "8.5.3",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.28.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
-      "integrity": "sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==",
+      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
       "funding": [
         {
           "type": "opencollective",
@@ -2777,9 +2781,9 @@
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.6",
+        "nanoid": "^3.3.8",
-        "picocolors": "^1.0.0",
+        "picocolors": "^1.1.1",
-        "source-map-js": "^1.0.2"
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -2930,9 +2934,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "3.28.0",
+      "version": "3.29.5",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.28.0.tgz",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.5.tgz",
-      "integrity": "sha512-d7zhvo1OUY2SXSM6pfNjgD5+d0Nz87CUp4mt8l/GgVP3oBsPwzNvSzyu1me6BSG9JIgWNTVcafIXBIyM8yQ3yw==",
+      "integrity": "sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==",
       "dev": true,
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -3052,9 +3056,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.0.2",
+      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3439,9 +3443,9 @@
       }
     },
     "node_modules/vue-template-compiler": {
-      "version": "2.7.14",
+      "version": "2.7.16",
-      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
+      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",
-      "integrity": "sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==",
+      "integrity": "sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==",
       "dev": true,
       "dependencies": {
         "de-indent": "^1.0.2",
@@ -3449,14 +3453,14 @@
       }
     },
     "node_modules/vue-tsc": {
-      "version": "1.8.8",
+      "version": "1.8.27",
-      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.8.8.tgz",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.8.27.tgz",
-      "integrity": "sha512-bSydNFQsF7AMvwWsRXD7cBIXaNs/KSjvzWLymq/UtKE36697sboX4EccSHFVxvgdBlI1frYPc/VMKJNB7DFeDQ==",
+      "integrity": "sha512-WesKCAZCRAbmmhuGl3+VrdWItEvfoFIPXOvUJkjULi+x+6G/Dy69yO3TBRJDr9eUlmsNAwVmxsNZxvHKzbkKdg==",
       "dev": true,
       "dependencies": {
-        "@vue/language-core": "1.8.8",
+        "@volar/typescript": "~1.11.1",
-        "@vue/typescript": "1.8.8",
+        "@vue/language-core": "1.8.27",
-        "semver": "^7.3.8"
+        "semver": "^7.5.4"
       },
       "bin": {
         "vue-tsc": "bin/vue-tsc.js"
@@ -3466,13 +3470,10 @@
       }
     },
     "node_modules/vue-tsc/node_modules/semver": {
-      "version": "7.5.2",
+      "version": "7.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
-      "integrity": "sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==",
+      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
       "dev": true,
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
       "bin": {
         "semver": "bin/semver.js"
       },
@@ -3839,30 +3840,31 @@
       "requires": {}
     },
     "@volar/language-core": {
-      "version": "1.10.1",
+      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.10.1.tgz",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.11.1.tgz",
-      "integrity": "sha512-JnsM1mIPdfGPxmoOcK1c7HYAsL6YOv0TCJ4aW3AXPZN/Jb4R77epDyMZIVudSGjWMbvv/JfUa+rQ+dGKTmgwBA==",
+      "integrity": "sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==",
       "dev": true,
       "requires": {
-        "@volar/source-map": "1.10.1"
+        "@volar/source-map": "1.11.1"
       }
     },
     "@volar/source-map": {
-      "version": "1.10.1",
+      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-1.10.1.tgz",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-1.11.1.tgz",
-      "integrity": "sha512-3/S6KQbqa7pGC8CxPrg69qHLpOvkiPHGJtWPkI/1AXCsktkJ6gIk/5z4hyuMp8Anvs6eS/Kvp/GZa3ut3votKA==",
+      "integrity": "sha512-hJnOnwZ4+WT5iupLRnuzbULZ42L7BWWPMmruzwtLhJfpDVoZLjNBxHDi2sY2bgZXCKlpU5XcsMFoYrsQmPhfZg==",
       "dev": true,
       "requires": {
         "muggle-string": "^0.3.1"
       }
     },
     "@volar/typescript": {
-      "version": "1.10.1",
+      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-1.10.1.tgz",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-1.11.1.tgz",
-      "integrity": "sha512-+iiO9yUSRHIYjlteT+QcdRq8b44qH19/eiUZtjNtuh6D9ailYM7DVR0zO2sEgJlvCaunw/CF9Ov2KooQBpR4VQ==",
+      "integrity": "sha512-iU+t2mas/4lYierSnoFOeRFQUhAEMgsFuQxoxvwn5EdQopw43j+J27a4lt9LMInx1gLJBC6qL14WYGlgymaSMQ==",
       "dev": true,
       "requires": {
-        "@volar/language-core": "1.10.1"
+        "@volar/language-core": "1.11.1",
+        "path-browserify": "^1.0.1"
       }
     },
     "@vue/compiler-core": {
@@ -3917,18 +3919,19 @@
       "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
     },
     "@vue/language-core": {
-      "version": "1.8.8",
+      "version": "1.8.27",
-      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-1.8.8.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-1.8.27.tgz",
-      "integrity": "sha512-i4KMTuPazf48yMdYoebTkgSOJdFraE4pQf0B+FTOFkbB+6hAfjrSou/UmYWRsWyZV6r4Rc6DDZdI39CJwL0rWw==",
+      "integrity": "sha512-L8Kc27VdQserNaCUNiSFdDl9LWT24ly8Hpwf1ECy3aFb9m6bDhBGQYOujDm21N7EW3moKIOKEanQwe1q5BK+mA==",
       "dev": true,
       "requires": {
-        "@volar/language-core": "~1.10.0",
+        "@volar/language-core": "~1.11.1",
-        "@volar/source-map": "~1.10.0",
+        "@volar/source-map": "~1.11.1",
         "@vue/compiler-dom": "^3.3.0",
-        "@vue/reactivity": "^3.3.0",
         "@vue/shared": "^3.3.0",
-        "minimatch": "^9.0.0",
+        "computeds": "^0.0.1",
+        "minimatch": "^9.0.3",
         "muggle-string": "^0.3.1",
+        "path-browserify": "^1.0.1",
         "vue-template-compiler": "^2.7.14"
       },
       "dependencies": {
@@ -3942,9 +3945,9 @@
           }
         },
         "minimatch": {
-          "version": "9.0.3",
+          "version": "9.0.5",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-          "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+          "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
           "dev": true,
           "requires": {
             "brace-expansion": "^2.0.1"
@@ -4011,16 +4014,6 @@
       "integrity": "sha512-CPuIReonid9+zOG/CGTT05FXrPYATEqoDGNrEaqS4hwcw5BUNM2FguC0mOwJD4Jr16UpRVl9N0pY3P+srIbqmg==",
       "dev": true
     },
-    "@vue/typescript": {
-      "version": "1.8.8",
-      "resolved": "https://registry.npmjs.org/@vue/typescript/-/typescript-1.8.8.tgz",
-      "integrity": "sha512-jUnmMB6egu5wl342eaUH236v8tdcEPXXkPgj+eI/F6JwW/lb+yAU6U07ZbQ3MVabZRlupIlPESB7ajgAGixhow==",
-      "dev": true,
-      "requires": {
-        "@volar/typescript": "~1.10.0",
-        "@vue/language-core": "1.8.8"
-      }
-    },
     "@vueuse/components": {
       "version": "9.13.0",
       "resolved": "https://registry.npmjs.org/@vueuse/components/-/components-9.13.0.tgz",
@@ -4178,11 +4171,11 @@
       }
     },
     "braces": {
-      "version": "3.0.2",
+      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "requires": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       }
     },
     "call-bind": {
@@ -4242,6 +4235,12 @@
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
       "dev": true
     },
+    "computeds": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/computeds/-/computeds-0.0.1.tgz",
+      "integrity": "sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==",
+      "dev": true
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -4249,9 +4248,9 @@
       "dev": true
     },
     "cross-spawn": {
-      "version": "6.0.5",
+      "version": "6.0.6",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.6.tgz",
-      "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+      "integrity": "sha512-VqCUuhcd1iB+dsv8gxPttb5iZh/D0iubSP21g36KXdEuf6I5JiioesUVjpCdHV9MZRUfVFlvwtIUyPfxo5trtw==",
       "dev": true,
       "requires": {
         "nice-try": "^1.0.4",
@@ -4501,9 +4500,9 @@
           "dev": true
         },
         "cross-spawn": {
-          "version": "7.0.3",
+          "version": "7.0.6",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
-          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+          "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
           "dev": true,
           "requires": {
             "path-key": "^3.1.0",
@@ -4698,9 +4697,9 @@
       }
     },
     "fill-range": {
-      "version": "7.0.1",
+      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "requires": {
         "to-regex-range": "^5.0.1"
       }
@@ -5262,9 +5261,9 @@
       "dev": true
     },
     "nanoid": {
-      "version": "3.3.6",
+      "version": "3.3.11",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA=="
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="
     },
     "natural-compare": {
       "version": "1.4.0",
@@ -5405,6 +5404,12 @@
         "json-parse-better-errors": "^1.0.1"
       }
     },
+    "path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "dev": true
+    },
     "path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -5439,9 +5444,9 @@
       }
     },
     "picocolors": {
-      "version": "1.0.0",
+      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
     },
     "picomatch": {
       "version": "2.3.1",
@@ -5461,13 +5466,13 @@
       "dev": true
     },
     "postcss": {
-      "version": "8.4.28",
+      "version": "8.5.3",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.28.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
-      "integrity": "sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==",
+      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
       "requires": {
-        "nanoid": "^3.3.6",
+        "nanoid": "^3.3.8",
-        "picocolors": "^1.0.0",
+        "picocolors": "^1.1.1",
-        "source-map-js": "^1.0.2"
+        "source-map-js": "^1.2.1"
       }
     },
     "postcss-selector-parser": {
@@ -5561,9 +5566,9 @@
       }
     },
     "rollup": {
-      "version": "3.28.0",
+      "version": "3.29.5",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.28.0.tgz",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.5.tgz",
-      "integrity": "sha512-d7zhvo1OUY2SXSM6pfNjgD5+d0Nz87CUp4mt8l/GgVP3oBsPwzNvSzyu1me6BSG9JIgWNTVcafIXBIyM8yQ3yw==",
+      "integrity": "sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==",
       "dev": true,
       "requires": {
         "fsevents": "~2.3.2"
@@ -5638,9 +5643,9 @@
       }
     },
     "source-map-js": {
-      "version": "1.0.2",
+      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="
     },
     "spdx-correct": {
       "version": "3.2.0",
@@ -5896,9 +5901,9 @@
       }
     },
     "vue-template-compiler": {
-      "version": "2.7.14",
+      "version": "2.7.16",
-      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
+      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",
-      "integrity": "sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==",
+      "integrity": "sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==",
       "dev": true,
       "requires": {
         "de-indent": "^1.0.2",
@@ -5906,24 +5911,21 @@
       }
     },
     "vue-tsc": {
-      "version": "1.8.8",
+      "version": "1.8.27",
-      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.8.8.tgz",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.8.27.tgz",
-      "integrity": "sha512-bSydNFQsF7AMvwWsRXD7cBIXaNs/KSjvzWLymq/UtKE36697sboX4EccSHFVxvgdBlI1frYPc/VMKJNB7DFeDQ==",
+      "integrity": "sha512-WesKCAZCRAbmmhuGl3+VrdWItEvfoFIPXOvUJkjULi+x+6G/Dy69yO3TBRJDr9eUlmsNAwVmxsNZxvHKzbkKdg==",
       "dev": true,
       "requires": {
-        "@vue/language-core": "1.8.8",
+        "@volar/typescript": "~1.11.1",
-        "@vue/typescript": "1.8.8",
+        "@vue/language-core": "1.8.27",
-        "semver": "^7.3.8"
+        "semver": "^7.5.4"
       },
       "dependencies": {
         "semver": {
-          "version": "7.5.2",
+          "version": "7.7.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.2.tgz",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
-          "integrity": "sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==",
+          "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
-          "dev": true,
+          "dev": true
-          "requires": {
-            "lru-cache": "^6.0.0"
-          }
         }
       }
     },

package.json

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

public/data/quests.json

@@ -0,0 +1,106 @@
+{
+  "ranks": {
+    "A": [
+      {
+        "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."
+      }
+    ],
+    "B": [
+      {
+        "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."
+      }
+    ],
+    "C": [
+      {
+        "title": "Scratchy, the butcher",
+        "text": "Scratchy turned evil and is terrorizing its victims. Put a stop to it!"
+      },
+      {
+        "title": "Hobgnoblin subjugation",
+        "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!"
+      }
+    ],
+    "D": [
+      {
+        "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."
+      }
+    ],
+    "E": [
+      {
+        "title": "Gnoblin subjugation",
+        "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."
+      }
+    ],
+    "F": [
+      {
+        "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."
+      }
+    ],
+    "S": [
+      {
+        "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."
+      }
+    ]
+  }
+}

public/data/quests/RankA.json

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

public/data/quests/RankB.json

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

public/data/quests/RankC.json

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

public/data/quests/RankD.json

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

public/data/quests/RankE.json

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

public/data/quests/RankF.json

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

public/data/quests/RankS.json

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

src/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {RouterLink, RouterView} from 'vue-router'
-import {version} from "../package.json"
+// @ts-ignore
+import {version} from "@/../package.json";
 </script>
 
 <template>
@@ -48,10 +49,17 @@ import {version} from "../package.json"
     :guild="guild"
     :adventurers="adventurers"
     :quests="missives"
-      :adventurerForHire="adventurerForHire"
+    :adventurersForHire="adventurersForHire"
     :news="news"
     @finalizeQuest="finalizeQuest($event)"
-      @recruitActionTaken="recruitAction($event)"
+    @hireAdventurer="recruitAdventurer($event)"
+    @dismissAdventurer="dismissRecruit($event)"
+    @findNewRecruit="() => {
+      const newAdventurerForHire = getNewAdventurerForHire(Object.values(adventurersDatabase), Object.values(adventurers));
+      if (newAdventurerForHire === null) return;
+      adventurersForHire[newAdventurerForHire.id] = newAdventurerForHire;
+      setNextRecruitArrival(new Date().getTime())
+    }"
   />
 </template>
 
@@ -75,6 +83,7 @@ import {getNewAdventurerForHire} from "@/classes/Recruitment";
 import QuestExpUpgrade from "@/classes/guildUpgrades/QuestExpUpgrade";
 import QuestGoldUpgrade from "@/classes/guildUpgrades/QuestGoldUpgrade";
 import AutoFinishQuestsUpgrade from "@/classes/guildUpgrades/AutoFinishQuestsUpgrade";
+import RecruitmentCapacityUpgrade from "@/classes/guildUpgrades/RecruitmentCapacityUpgrade";
 
 export default defineComponent({
   name: "GuildView",
@@ -94,75 +103,79 @@ export default defineComponent({
       E: null as null | number,
       F: null as null | number,
     } as { [key: string]: null | number },
-    lastRecruitHandled: null as null | number,
+    adventurersForHire: {} as { [key: string]: Adventurer },
-    adventurerForHire: null as Adventurer | null,
+    adventurersDatabase: {} as { [key: string]: Adventurer },
-    adventurersDatabase: {} as Array<Adventurer>,
     allAdventurers: {} as { [key: string]: Adventurer },
     adventurers: {} as { [key: string]: Adventurer },
     quests: {} as { [key: string]: { [key: string]: Quest } },
-    missives: {
+    missives: [] as Array<Quest>,
-      F: {} as { [key: string]: Quest },
+    nextRecruitArrival: new Date() as Date,
-      E: {} as { [key: string]: Quest },
+    tickCounter: 0 as number,
-      D: {} as { [key: string]: Quest },
-      C: {} as { [key: string]: Quest },
-      B: {} as { [key: string]: Quest },
-      A: {} as { [key: string]: Quest },
-      S: {} as { [key: string]: Quest },
-    } as { [key: string]: { [key: string]: Quest } },
   }),
+  computed: {
+    recruitmentSlotsFull(): boolean {
+      return Object.keys(this.adventurersForHire).length >= this.guild.recruitmentCapacity.getRecruitmentCapacity();
+    },
+  },
   methods: {
     async updateMissives() {
-      for (const missiveRank in this.missives) {
+      for (const missive of this.missives) {
-        const rank = getFromString(missiveRank as QuestRank);
+        if (missive.adventurers.length < missive.maxAdventurers) {
-        for (const missiveId in this.missives[rank.toString() as QuestRank]) {
-          const missive = this.missives[rank.toString()][missiveId];
-          if (missive.adventurers.length <= 0) {
           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.getAttack();
+          adventurer.busy = true;
           missive.progressPoints = Math.min(missive.progressPoints + attack, missive.maxProgress);
         }
+        if (
+          missive.progressPoints >= missive.maxProgress
+          && this.guild.autoFinishQuestsUpgrade.getRanksToAutoFinishQuestsIn().includes(missive.rank)
+        ) {
+          this.finalizeQuest(missive);
         }
       }
 
     },
-    async checkForNewRecruit(currentTimestamp: number) {
+    async checkForNewRecruit(currentTimestamp: number, cooldownModifier: number = 1) {
+      const recruitCapacity = this.guild.recruitmentCapacity.getRecruitmentCapacity();
 
-      if (this.lastRecruitHandled == null) {
+      if (Object.keys(this.adventurersForHire).length >= recruitCapacity) return;
-        this.lastRecruitHandled = 0;
+
-      }
+      const deltaTime = this.nextRecruitArrival.getTime() - currentTimestamp;
+      if (deltaTime > 0) return; // not yet time for a new recruit
 
       if (Object.keys(this.adventurers).length <= 0) {
-        this.adventurerForHire = this.adventurersDatabase[0];
+        const firstAdventurer = this.adventurersDatabase["aldek"];
+        this.adventurersForHire[firstAdventurer.id] = firstAdventurer;
+        this.setNextRecruitArrival(currentTimestamp, cooldownModifier)
+        return;
       }
 
-      if (currentTimestamp - this.lastRecruitHandled >= 1000 * 60 * 30 && this.adventurerForHire == null) {
+      const newAdventurerForHire = getNewAdventurerForHire(Object.values(this.adventurersDatabase), Object.values(this.adventurers));
-        this.adventurerForHire = getNewAdventurerForHire(this.adventurersDatabase);
+      if (newAdventurerForHire === null) return;
-      }
+      this.adventurersForHire[newAdventurerForHire.id] = newAdventurerForHire;
+
+      this.setNextRecruitArrival(currentTimestamp, cooldownModifier)
     },
-    recruitAction(adventurer: Adventurer | null): void {
+    setNextRecruitArrival(currentTimestamp: number, cooldownModifier: number = 1): void {
-      this.lastRecruitHandled = Number(new Date());
+      const timerValue = ((5 + (Math.random() * 15)) * 60 * 1000) * cooldownModifier;
-      this.adventurerForHire = null;
+      this.nextRecruitArrival = new Date(currentTimestamp + timerValue);
-      if (adventurer === null) return;
+    },
-
+    recruitAdventurer(adventurer: Adventurer): void {
+      if (adventurer == null) return;
+      if (this.recruitmentSlotsFull) this.setNextRecruitArrival(new Date().getTime())
       this.adventurers[adventurer.id] = adventurer;
-      for (const id in this.adventurersDatabase) {
+      delete this.adventurersForHire[adventurer.id];
-        const databaseAdventurer = this.adventurersDatabase[id];
+      delete this.adventurersDatabase[adventurer.id];
-        if (databaseAdventurer.id === adventurer.id) {
+    },
-          this.adventurersDatabase.splice(Number(id), 1);
+    dismissRecruit(adventurer: Adventurer): void {
-          break;
+      if (adventurer == null) return;
-        }
+      if (this.recruitmentSlotsFull) this.setNextRecruitArrival(new Date().getTime())
-      }
+      if (this.adventurersForHire[adventurer.id] == null) return;
+      delete this.adventurersForHire[adventurer.id];
     },
     finalizeQuest(missive: Quest) {
       missive.progressPoints = 0;
@@ -173,7 +186,10 @@ export default defineComponent({
         adventurer.busy = false;
       }
       missive.adventurers = [];
-      delete this.missives[missive.rank.toString() as QuestRank][missive.id];
+      const missiveIndex = this.missives.indexOf(missive);
+      if (missiveIndex > -1) {
+        this.missives.splice(missiveIndex, 1);
+      }
     },
     getRandomQuest(rank: QuestRank): Quest | null {
       const keys = Object.keys(this.quests[rank]);
@@ -183,11 +199,10 @@ export default defineComponent({
       const randomIdString = keys[randomId] as string;
       return getQuestWithRewards(questsForRank[randomIdString], this.guild.expModifier.getModifier(), this.guild.goldModifier.getModifier());
     },
-    createMissive(questToAdd: Quest, rank: QuestRank) {
+    createMissive(questToAdd: Quest) {
       const quest = JSON.parse(JSON.stringify(questToAdd));
-      const newId = Math.random().toString(16).slice(2).toString();
+      quest.id = Math.random().toString(16).slice(2).toString();
-      quest.id = newId;
+      this.missives.push(quest);
-      this.missives[rank][newId] = quest;
     },
     loadGame() {
       const saveData = loadGame();
@@ -199,6 +214,9 @@ export default defineComponent({
       if (saveData.guild.adventurerCapacity) {
         guildUpgrades.adventurerCapacity = new AdventurerCapacityUpgrade(saveData.guild.adventurerCapacity.level);
       }
+      if (saveData.guild.recruitmentCapacity) {
+        guildUpgrades.recruitmentCapacity = new RecruitmentCapacityUpgrade(saveData.guild.recruitmentCapacity.level);
+      }
       if (saveData.guild.expModifier) {
         guildUpgrades.expModifier = new QuestExpUpgrade(saveData.guild.expModifier.level);
       }
@@ -223,7 +241,7 @@ export default defineComponent({
         }
 
         try {
-          const adventurer = new Adventurer(
+          adventurers[data.id] = new Adventurer(
             data.id,
             data.name,
             portrait,
@@ -232,42 +250,53 @@ export default defineComponent({
             data.exp ?? 0,
             data.prestige ?? 0,
           );
-          adventurer.busy = data.busy;
-          adventurers[data.id] = adventurer;
         } catch (e) {
         }
       }
       this.adventurers = adventurers;
 
-      const missives = {} as { [key: string]: { [key: string]: Quest } };
+      if (Array.isArray(saveData.missives)) {
-
+        for (const data of saveData.missives) {
-      for (const id in saveData.missives) {
+          const quest = new Quest(data.id, getFromString(data.rank), data.title, data.text, data.maxProgress, data.expReward, data.goldReward);
-        const missiveRank = {} as { [key: string]: Quest }
-        for (const questId in saveData.missives[id]) {
-          const data = saveData.missives[id][questId];
-          const quest = new Quest(questId, getFromString(data.rank), data.title, data.text, data.maxProgress, data.expReward, data.goldReward);
           quest.progressPoints = data.progressPoints;
           if (data.adventurers.length > 0) {
-            quest.adventurers.push(this.adventurers[data.adventurers[0].id])
+            for (const adventurer of data.adventurers) {
+              const adventurerId = adventurer.id;
+              if (this.adventurers[adventurerId] == null) continue;
+              quest.adventurers.push(this.adventurers[adventurerId]);
             }
-          missiveRank[questId] = quest;
           }
-        missives[id] = missiveRank;
+          this.missives.push(quest)
+        }
       }
 
-      this.missives = missives;
+      this.nextRecruitArrival = saveData.nextRecruitArrival ? new Date(saveData.nextRecruitArrival) : new Date();
 
-      this.lastRecruitHandled = saveData.lastRecruitAction ?? 0;
+      const recruits = {} as { [key: string]: Adventurer };
 
-      if (saveData.adventurerForHireId != null) {
+      for (const id in saveData.adventurersForHire) {
-        for (const id in this.adventurersDatabase) {
+        const data = saveData.adventurersForHire[id];
-          const adventurer = this.adventurersDatabase[id];
+        let portrait: string = "";
-          if (adventurer.id === saveData.adventurerForHireId) {
+
-            this.adventurerForHire = adventurer;
+        const adventurer = this.allAdventurers[data.id];
-            return;
+        if (adventurer) {
-          }
+          portrait = adventurer.portrait;
+        }
+
+        try {
+          recruits[data.id] = new Adventurer(
+            data.id,
+            data.name,
+            portrait,
+            data.attackExponent ?? 1.1,
+            data.level ?? 1,
+            data.exp ?? 0,
+            data.prestige ?? 0,
+          );
+        } catch (e) {
         }
       }
+      this.adventurersForHire = recruits;
     },
     async updateNews() {
       const result = await fetch("https://raw.githubusercontent.com/YouHaveTrouble/GuildMaster/master/news.txt").catch(() => {
@@ -284,7 +313,8 @@ export default defineComponent({
       try {
         this.screenWakeLock = await navigator.wakeLock.request("screen");
         console.debug("Screen wake lock acquired");
-      } catch (e) {}
+      } catch (e) {
+      }
     }, 1000);
 
     console.debug("Loading game data")
@@ -300,7 +330,7 @@ export default defineComponent({
     });
 
     this.quests = promises[0] as { [key: string]: { [key: string]: Quest } };
-    this.adventurersDatabase = promises[1] as Array<Adventurer>;
+    this.adventurersDatabase = promises[1] as { [key: string]: Adventurer };
     for (const adventurerId in this.adventurersDatabase) {
       const adventurer = this.adventurersDatabase[adventurerId];
       this.allAdventurers[adventurer.id] = new Adventurer(adventurer.id, adventurer.name, adventurer.portrait, adventurer.attackExponent, adventurer.level, adventurer.exp, adventurer.prestige);
@@ -310,6 +340,17 @@ export default defineComponent({
     this.loadGame();
     this.adventurersDatabase = removeAlreadyHiredAdventurers(this.adventurersDatabase, this.adventurers);
 
+    if (Object.keys(this.adventurers).length > 0 && Object.keys(this.adventurersForHire).length < this.guild.recruitmentCapacity.getRecruitmentCapacity()) {
+      // check if more time passed than next recruit arrival and simulate next recruit arrivals up to now
+      const now = new Date();
+      if (this.nextRecruitArrival.getTime() < now.getTime()) {
+        const slotsLeft = this.guild.recruitmentCapacity.getRecruitmentCapacity() - Object.keys(this.adventurersForHire).length;
+        for (let i = 0; i < slotsLeft; i++) {
+          await this.checkForNewRecruit(this.nextRecruitArrival.getTime());
+        }
+      }
+    }
+
     // Wait a second to make sure at least most images load in behind the loader
     setTimeout(() => {
       this.loading = false;
@@ -321,18 +362,18 @@ export default defineComponent({
         guild: this.guild,
         missives: this.missives,
         lastQuestGot: this.lastQuestGot,
-        lastRecruitAction: this.lastRecruitHandled,
+        adventurersForHire: this.adventurersForHire ?? null,
-        adventurerForHireId: this.adventurerForHire?.id ?? null,
+        nextRecruitArrival: this.nextRecruitArrival,
       }));
     }, 10 * 1000));
 
-
     this.gameTickTask = Number(setInterval(() => {
+      this.tickCounter++;
       this.updateMissives();
 
       const now = Number(new Date());
 
-      this.checkForNewRecruit(now);
+      if (this.tickCounter % 8 === 0) this.checkForNewRecruit(now);
 
       for (const id in this.lastQuestGot) {
         const lastTime = this.lastQuestGot[getFromString(id as QuestRank)];
@@ -341,78 +382,64 @@ export default defineComponent({
 
       if (Number(now) - Number(this.lastQuestGot.F) >= 12 * 1000) {
         this.lastQuestGot.F = now;
-        const keys = Object.keys(this.missives[QuestRank.F]);
+        const currentQuestAmount = this.missives.filter(quest => quest.rank === QuestRank.F).length;
-        if (keys.length >= 5) return;
+        if (currentQuestAmount >= 5) return;
         const quest = this.getRandomQuest(QuestRank.F);
-        if (quest !== null) {
+        if (quest !== null) this.createMissive(quest);
-          this.createMissive(quest, QuestRank.F);
-        }
       }
 
       if (this.guild.level < 2) return;
       if (Number(now) - Number(this.lastQuestGot.E) >= 20 * 1000) {
         this.lastQuestGot.E = now;
-        const keys = Object.keys(this.missives[QuestRank.E]);
+        const currentQuestAmount = this.missives.filter(quest => quest.rank === QuestRank.E).length;
-        if (keys.length >= 5) return;
+        if (currentQuestAmount >= 5) return;
         const quest = this.getRandomQuest(QuestRank.E);
-        if (quest !== null) {
+        if (quest !== null) this.createMissive(quest);
-          this.createMissive(quest, QuestRank.E);
-        }
       }
 
       if (this.guild.level < 3) return;
       if (Number(now) - Number(this.lastQuestGot.D) >= 50 * 1000) {
         this.lastQuestGot.D = now;
-        const keys = Object.keys(this.missives[QuestRank.D]);
+        const currentQuestAmount = this.missives.filter(quest => quest.rank === QuestRank.D).length;
-        if (keys.length >= 5) return;
+        if (currentQuestAmount >= 5) return;
         const quest = this.getRandomQuest(QuestRank.D);
-        if (quest !== null) {
+        if (quest !== null) this.createMissive(quest);
-          this.createMissive(quest, QuestRank.D);
-        }
       }
 
       if (this.guild.level < 4) return;
       if (Number(now) - Number(this.lastQuestGot.C) >= 2 * 60 * 1000) {
         this.lastQuestGot.C = now;
-        const keys = Object.keys(this.missives[QuestRank.C]);
+        const currentQuestAmount = this.missives.filter(quest => quest.rank === QuestRank.C).length;
-        if (keys.length >= 5) return;
+        if (currentQuestAmount >= 5) return;
         const quest = this.getRandomQuest(QuestRank.C);
-        if (quest !== null) {
+        if (quest !== null) this.createMissive(quest);
-          this.createMissive(quest, QuestRank.C);
-        }
       }
 
       if (this.guild.level < 5) return;
       if (Number(now) - Number(this.lastQuestGot.B) >= 2 * 60 * 1000) {
         this.lastQuestGot.B = now;
-        const keys = Object.keys(this.missives[QuestRank.B]);
+        const currentQuestAmount = this.missives.filter(quest => quest.rank === QuestRank.B).length;
-        if (keys.length >= 5) return;
+        if (currentQuestAmount >= 5) return;
         const quest = this.getRandomQuest(QuestRank.B);
-        if (quest !== null) {
+        if (quest !== null) this.createMissive(quest);
-          this.createMissive(quest, QuestRank.B);
-        }
       }
 
       if (this.guild.level < 6) return;
       if (Number(now) - Number(this.lastQuestGot.A) >= 3 * 60 * 1000) {
         this.lastQuestGot.A = now;
-        const keys = Object.keys(this.missives[QuestRank.A]);
+        const currentQuestAmount = this.missives.filter(quest => quest.rank === QuestRank.A).length;
-        if (keys.length >= 5) return;
+        if (currentQuestAmount >= 5) return;
         const quest = this.getRandomQuest(QuestRank.A);
-        if (quest !== null) {
+        if (quest !== null) this.createMissive(quest);
-          this.createMissive(quest, QuestRank.A);
-        }
       }
 
       if (this.guild.level < 6) return;
       if (Number(now) - Number(this.lastQuestGot.S) >= 5 * 60 * 1000) {
         this.lastQuestGot.S = now;
-        const keys = Object.keys(this.missives[QuestRank.S]);
+        const currentQuestAmount = this.missives.filter(quest => quest.rank === QuestRank.S).length;
-        if (keys.length >= 5) return;
+        if (currentQuestAmount >= 5) return;
         const quest = this.getRandomQuest(QuestRank.S);
-        if (quest !== null) {
+        if (quest !== null) this.createMissive(quest);
-          this.createMissive(quest, QuestRank.S);
-        }
       }
 
     }, 250));
@@ -504,6 +531,7 @@ nav {
     width: 80px;
     height: 80px;
   }
+
   .lds-ring div {
     box-sizing: border-box;
     display: block;
@@ -516,15 +544,19 @@ nav {
     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);

src/GameData.ts

@@ -6,20 +6,23 @@ import {getFromString, QuestRank} from "@/classes/QuestRank";
 export class GameData {
   guild: Guild;
   adventurers: { [key: string]: Adventurer };
-  missives: { [key: string]: { [key: string]: Quest } };
+  missives: Array<Quest>;
   lastQuestGot: { [key: string]: null | number };
-  lastRecruitAction: null | number;
+  adventurersForHire: {[key: string]: Adventurer};
-  adventurerForHireId: string | null;
+  nextRecruitArrival: Date;
 
   constructor(
     data: any,
   ) {
     this.guild = data.guild ?? new Guild(1, 0);
-    this.adventurers = data.adventurers ?? {} as { [key: string]: Adventurer };
+    this.adventurers = data.adventurers ?? {};
-    this.missives = data.missives ?? {} as { [key: string]: { [key: string]: Quest } };
+    this.missives = data.missives ?? [] as Array<Quest>;
-    this.lastQuestGot = data.lastQuestGot ?? {} as { [key: string]: null | number };
+    this.lastQuestGot = data.lastQuestGot ?? {};
-    this.lastRecruitAction = data.lastRecruitAction ?? null;
+    this.adventurersForHire = data.adventurersForHire ?? {};
-    this.adventurerForHireId = data.adventurerForHireId ?? null;
+    this.nextRecruitArrival = data.nextRecruitArrival ? new Date(data.nextRecruitArrival) : new Date();
+    if (isNaN(this.nextRecruitArrival.getTime())) {
+      this.nextRecruitArrival = new Date();
+    }
   }
 }
 
@@ -39,13 +42,20 @@ export function saveGame(
     adventurers[adventurerId] = adventurer;
   }
 
+  const adventurersForHire = {} as { [key: string]: any };
+  for (const adventurerId in data.adventurersForHire) {
+    const adventurer: {[key: string]: any} = JSON.parse(JSON.stringify(data.adventurersForHire[adventurerId]));
+    delete adventurer.portrait;
+    adventurersForHire[adventurerId] = adventurer;
+  }
+
   window.localStorage.setItem("savedGame", JSON.stringify({
     guild: data.guild,
     adventurers: adventurers,
     missives: data.missives,
     lastQuestGot: data.lastQuestGot,
-    lastRecruitAction: data.lastRecruitAction,
+    adventurersForHire: adventurersForHire,
-    adventurerForHireId: data.adventurerForHireId,
+    nextRecruitArrival: data.nextRecruitArrival.getTime(),
   }));
 }
 
@@ -68,64 +78,69 @@ export async function loadAvailableQuests(): Promise<{ [key: string]: { [key: st
     F: {} as { [key: string]: Quest },
   } as { [key: string]: { [key: string]: Quest } };
 
-  for (const rank in quests) {
+  const questsResponse = await fetch(`data/quests.json`);
-    const response = await fetch(`data/quests/Rank${rank}.json`);
+
-    if (response.status !== 200) {
+  if (questsResponse.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;
+  const questsData = await questsResponse.json();
-    for (const quest of questData) {
+
-      id++;
+  for (const rank of Object.keys(questsData.ranks)) {
-      quests[rank.toString()][id] = new Quest(
+    const questRank = getFromString(rank as keyof typeof QuestRank);
-        id.toString(),
+    if (!questRank) {
-        getFromString(rank as QuestRank),
+      console.error(`Invalid quest rank: ${rank}`);
+      continue;
+    }
+    const questRankData = questsData.ranks[questRank];
+
+    for (const quest of questRankData) {
+      const id = quest.id;
+      quests[questRank][id] = new Quest(
+        id,
+        questRank,
         quest.title,
         quest.text,
-        1,
-        0,
-        0
       );
     }
   }
   return quests;
 }
 
-export async function loadAdventurersForHire(): Promise<Array<Adventurer>> {
+export async function loadAdventurersForHire(): Promise<{[key: string]: 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 [];
+    return {};
   }
   const adventurerData = await response.json();
 
-  const adventurers: Array<Adventurer> = [];
+  const adventurers: {[key: string]: Adventurer} = {};
   for (const adventurer of adventurerData) {
-    adventurers.push(new Adventurer(
+    const loadedAdventurer = new Adventurer(
       adventurer.id,
       adventurer.name,
       adventurer.portrait,
       adventurer.attackExponent,
       adventurer.level,
       adventurer.exp,
-    ));
+    )
+    adventurers[loadedAdventurer.id] = loadedAdventurer;
   }
-
   return adventurers;
 }
 
 export function removeAlreadyHiredAdventurers(
-  adventurers: Array<Adventurer>,
+  adventurers: { [key: string]: Adventurer },
   adventurersHired: { [key: string]: Adventurer }
-): Array<Adventurer> {
+): { [key: string]: Adventurer } {
-  const adventurersForHire: Array<Adventurer> = [];
+  const adventurersForHire: { [key: string]: Adventurer } = {};
-  for (const adventurer of adventurers) {
+  for (const adventurer of Object.values(adventurers)) {
     if (adventurersHired[adventurer.id]) continue;
-    adventurersForHire.push(adventurer);
+    adventurersForHire[adventurer.id] = adventurer;
   }
   return adventurersForHire;
 }

src/assets/main.scss

@@ -1,8 +1,13 @@
+* {
+  box-sizing: border-box;
+  font-family: 'EB Garamond', serif;
+  scrollbar-color: #8f7256 rgba(0, 0, 0, 0.1);
+}
+
 body {
   margin: 0;
-  padding: 0 0 10rem;
+  padding: 0 0 2rem;
   min-height: calc(100vh - 10rem);
-  font-family: 'EB Garamond', serif;
   overflow-y: scroll;
   user-select: none;
   background-size: 25rem;

src/classes/Guild.ts

@@ -4,6 +4,7 @@ import {formatGold} from "@/classes/NumberMagic";
 import QuestExpUpgrade from "@/classes/guildUpgrades/QuestExpUpgrade";
 import QuestGoldUpgrade from "@/classes/guildUpgrades/QuestGoldUpgrade";
 import AutoFinishQuestsUpgrade from "@/classes/guildUpgrades/AutoFinishQuestsUpgrade";
+import RecruitmentCapacityUpgrade from "@/classes/guildUpgrades/RecruitmentCapacityUpgrade";
 
 const MAX_LEVEL: number = 8;
 
@@ -16,6 +17,7 @@ export class Guild {
     expModifier: QuestExpUpgrade;
     goldModifier: QuestGoldUpgrade;
     autoFinishQuestsUpgrade: AutoFinishQuestsUpgrade;
+    recruitmentCapacity: RecruitmentCapacityUpgrade;
 
     constructor(level: number, gold: number, upgrades: {[index:string]: GuildUpgrade} = {}) {
         this.gold = gold;
@@ -28,7 +30,7 @@ export class Guild {
         this.expModifier = upgrades.expModifier as QuestExpUpgrade ?? new QuestExpUpgrade();
         this.goldModifier = upgrades.goldModifier as QuestGoldUpgrade ?? new QuestGoldUpgrade();
         this.autoFinishQuestsUpgrade = upgrades.autoFinishQuestsUpgrade as AutoFinishQuestsUpgrade ?? new AutoFinishQuestsUpgrade();
-
+        this.recruitmentCapacity = upgrades.recruitmentCapacity as RecruitmentCapacityUpgrade ?? new RecruitmentCapacityUpgrade();
     }
 
     upgrade(): void {

src/classes/Quest.ts

@@ -7,12 +7,22 @@ export class Quest {
     title:  string;
     text: string;
     adventurers: Array<Adventurer>;
+    maxAdventurers: number;
     progressPoints: number;
     maxProgress: number;
     expReward: number;
     goldReward: number;
 
-    constructor(id: string, rank: QuestRank, title: string, text: string, maxProgress: number, expReward: number, goldReward: number) {
+    constructor(
+      id: string,
+      rank: QuestRank,
+      title: string,
+      text: string,
+      maxProgress: number = 1,
+      expReward: number = 0,
+      goldReward: number = 0,
+      maxAdventurers: number = 1
+    ) {
         this.id = id;
         this.rank = rank;
         this.title = title;
@@ -22,6 +32,7 @@ export class Quest {
         this.goldReward = goldReward;
         this.progressPoints = 0;
         this.adventurers = [];
+        this.maxAdventurers = maxAdventurers;
     }
 
     getPercentProgress(): number {

src/classes/Recruitment.ts

@@ -4,10 +4,14 @@ import type {Adventurer} from "@/classes/Adventurer";
 /**
  * Get a random adventurer from the pool
  * @param adventurerPool
+ * @param exceptions
  * @returns {Adventurer|null} null if the pool is empty
  */
-export function getNewAdventurerForHire(adventurerPool: Array<Adventurer>): Adventurer|null {
+export function getNewAdventurerForHire(adventurerPool: Array<Adventurer>, exceptions: Array<Adventurer> = []): Adventurer|null {
     if (adventurerPool.length <= 0) return null;
+    const pool = Array.from(adventurerPool);
+    const exceptionSet = new Set(exceptions);
+    pool.filter((adventurer) => !exceptionSet.has(adventurer));
     const randomId = adventurerPool.length * Math.random() << 0;
     return adventurerPool[randomId];
 }

src/classes/guildUpgrades/RecruitmentCapacityUpgrade.ts

@@ -0,0 +1,36 @@
+import {GuildUpgrade} from "@/classes/GuildUpgrade";
+import type MaxLevellable from "@/classes/MaxLevellable";
+
+export default class AdventurerCapacityUpgrade extends GuildUpgrade implements MaxLevellable {
+
+    maxLevel: number;
+
+    constructor(level: number = 1) {
+        super();
+        this.level = level;
+        this.nextLevelCost = this.getCostForLevel(this.level);
+        this.guildLevelRequirement = 3;
+        this.maxLevel = 3;
+    }
+
+    upgrade(): void {
+        this.level += 1;
+        this.nextLevelCost = this.getCostForLevel(this.level);
+    }
+
+    getCostForLevel(level: number): number {
+        if (level === 1) return 1500;
+        return Math.floor(1500 * (level * 4));
+    }
+
+    /**
+     * Returns the number of adventurers the guild can have
+     */
+    getRecruitmentCapacity(): number {
+        return this.level ;
+    }
+
+    isMaxLevel(): boolean {
+        return this.level >= this.maxLevel;
+    }
+}

src/components/AdventurerList.vue

@@ -22,9 +22,9 @@ export default defineComponent({
   }),
   props: {
     adventurers: {
-      type: Object as PropType<{ [key: string]: Adventurer }>,
+      type: Object as PropType<Array<Adventurer>>,
       default() {
-        return {} as { [key: string]: Adventurer };
+        return [] as Array<Adventurer>;
       },
     },
   },

src/components/AdventurerMiniComponent.vue

@@ -21,6 +21,8 @@ import { vOnClickOutside } from '@vueuse/components'
     <span>+</span>
   </article>
   <div class="selection" v-if="selection" v-on-click-outside="closeSelect">
+    <span>Choose adventurer</span>
+    <div class="list">
       <button
         class="slot"
         v-for="adventurer in allAdventurers"
@@ -37,6 +39,7 @@ import { vOnClickOutside } from '@vueuse/components'
         />
       </button>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -61,9 +64,9 @@ export default defineComponent({
       },
     },
     allAdventurers: {
-      type: Object as PropType<{[key: string]: Adventurer}>,
+      type: Object as PropType<Array<Adventurer>>,
       default() {
-        return {} as {[key: string]: Adventurer};
+        return [] as Array<Adventurer>;
       },
     },
   },
@@ -82,22 +85,35 @@ export default defineComponent({
 .selection {
   position: absolute;
   bottom: 0;
-  left: 50%;
+  left: 0;
-  width: max-content;
+  width: 100%;
-  max-width: 17rem;
+  max-width: 100%;
-  transform: translateX(-50%) translateY(104%);
   display: flex;
   flex-direction: row;
   justify-content: center;
-  align-items: center;
+  align-items: flex-start;
   flex-wrap: wrap;
   gap: 0.5rem;
   padding: 0.5rem;
-  background-color: rgba(0,0,0, 0.2);
+  background-color: rgba(0,0,0, 0.6);
+  backdrop-filter: blur(4px);
   z-index: 2;
   cursor: default;
-  max-height: 12rem;
+  height: 100%;
-  overflow-y: auto;
+  overflow-y: scroll;
+  scrollbar-gutter: stable;
+  .list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1rem;
+    max-width: 100%;
+  }
+  span {
+    font-size: 1.5rem;
+    color: #fff;
+  }
   .slot {
     width: 5rem;
     height: 5rem;
@@ -132,5 +148,8 @@ export default defineComponent({
   height: 100%;
   font-size: 4.5rem;
   color: #000;
+  span {
+    transform: translateY(-0.5rem);
+  }
 }
 </style>

src/components/AdventurerRecruitment.vue

@@ -0,0 +1,230 @@
+<template>
+  <section class="recruit panel pinned-paper">
+    <h1>Applying adventurers
+      {{ `(${Object.keys(adventurersForHire).length}/${guild.recruitmentCapacity.getRecruitmentCapacity()})` }}</h1>
+    <div class="adventurers">
+      <div class="adventurer-tile" v-for="adventurerForHire in currentlyForHire" :key="adventurerForHire.id">
+        <adventurer-tile
+          class="hire-tile"
+          :adventurer="adventurerForHire"
+          @click="previewAdventurer(adventurerForHire)"
+        />
+        <div class="decision">
+          <span
+            title="Hire"
+            @click="hireAdventurer(adventurerForHire)"
+            :class="{disabled: !canRecruitMore}"
+          >
+            ✔
+          </span>
+          <span
+            :title="Object.keys(adventurersForHire).length > 0 ? 'Dismiss' : ''"
+            :class="{disabled: Object.keys(adventurersForHire).length <= 0}"
+            @click="dismissAdventurer(adventurerForHire)"
+          >
+            ✗
+          </span>
+        </div>
+      </div>
+      <div v-if="Object.keys(adventurersForHire).length == 0">
+        <span>No one applied as of now. Check back later!</span>
+      </div>
+    </div>
+    <div>
+      <button
+        class="button metal find-recruit"
+        :disabled="recruitSlotsFilled || guild.gold < newRecruitCost"
+        @click="findNewRecruit()"
+      >Find a recruit now {{(`(${formatGold(newRecruitCost)}) gold`)}}</button>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+
+import {defineComponent, type PropType} from "vue";
+import AdventurerTile from "@/components/AdventurerTile.vue";
+import type {Guild} from "@/classes/Guild";
+import type {Adventurer} from "@/classes/Adventurer";
+import {formatGold} from "@/classes/NumberMagic";
+
+export default defineComponent({
+  name: "RecruitView",
+  components: {AdventurerTile},
+  computed: {
+    currentlyForHire(): Array<Adventurer> {
+      return Object.values(this.adventurersForHire);
+    },
+    canRecruitMore() {
+      return Object.keys(this.adventurers).length < this.guild.adventurerCapacity.getAdventurerCapacity();
+    },
+    newRecruitCost(): number {
+      const guildLevel = this.guild.level;
+      return Math.max(500, 500 * Math.pow(2.2, guildLevel - 1));
+    },
+    recruitSlotsFilled(): boolean {
+      return Object.keys(this.adventurersForHire).length >= this.guild.recruitmentCapacity.getRecruitmentCapacity();
+    }
+  },
+  methods: {
+    formatGold,
+    hireAdventurer(adventurer: Adventurer): void {
+      if (!this.canRecruitMore) return;
+      this.$emit("hireAdventurer", adventurer);
+    },
+    dismissAdventurer(adventurer: Adventurer) {
+      if (Object.keys(this.adventurersForHire).length <= 0) return;
+      this.$emit("dismissAdventurer", adventurer);
+    },
+    previewAdventurer(adventurer: Adventurer): void {
+      this.$emit("previewAdventurer", adventurer);
+    },
+    findNewRecruit(): void {
+      if (this.recruitSlotsFilled) return;
+      this.$emit("findNewRecruit");
+    },
+  },
+  props: {
+    guild: {
+      type: Object as PropType<Guild>,
+      required: true,
+    },
+    adventurersForHire: {
+      type: Object as PropType<{ [key: string]: Adventurer }>,
+      required: true,
+    },
+    adventurers: {
+      type: Object as PropType<{ [key: string]: Adventurer }>,
+      required: true,
+    },
+  },
+  emits: ["dismissAdventurer", "hireAdventurer", "previewAdventurer", "findNewRecruit"],
+})
+</script>
+
+<style scoped lang="scss">
+
+section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow-x: hidden;
+}
+
+.find-recruit {
+  text-wrap: wrap;
+}
+
+.adventurers {
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 1rem;
+  scroll-snap-type: x mandatory;
+  overflow-x: scroll;
+  width: 100%;
+  min-height: 12rem;
+
+  @media (min-width: 800px) {
+    flex-wrap: wrap;
+    justify-content: center;
+    overflow-x: hidden;
+    scroll-snap-type: none;
+    width: auto;
+  }
+
+  .adventurer-tile {
+    display: flex;
+    position: relative;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: 0.25rem;
+    font-size: 1.1rem;
+    cursor: pointer;
+    padding-block: 1rem;
+    padding-inline: 0.5rem;
+    min-width: 100%;
+    scroll-snap-align: center;
+
+    &:not(:first-of-type) {
+      &::before {
+        position: absolute;
+        left: 0;
+        top: 4rem;
+        content: "⇠";
+        width: 1rem;
+        height: 1rem;
+        line-height: 1;
+      }
+    }
+
+    &:not(:last-of-type) {
+      &::after {
+        position: absolute;
+        right: 0;
+        top: 4rem;
+        content: "⇢";
+        width: 1rem;
+        height: 1rem;
+        line-height: 1;
+      }
+    }
+
+
+
+    @media (min-width: 800px) {
+      min-width: auto;
+      scroll-snap-align: none;
+
+      &::before {
+        content: none !important;
+      }
+
+      &::after {
+        content: none !important;
+      }
+    }
+
+    .hire-tile {
+      height: 7rem;
+      width: 7rem;
+    }
+
+    b {
+      line-height: 1;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+    }
+  }
+}
+
+.decision {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  font-size: 2rem;
+  gap: 1rem;
+  line-height: 1;
+  width: 100%;
+
+  span {
+    cursor: pointer;
+
+    &:hover {
+      color: #fff;
+    }
+
+    &.disabled {
+      color: rgba(0, 0, 0, 0.5);
+      cursor: default;
+    }
+  }
+}
+</style>

src/components/AdventurerTile.vue

@@ -48,6 +48,7 @@ export default defineComponent({
   overflow: clip;
   font-size: 5rem;
   line-height: 1;
+  aspect-ratio: 1/1;
   color: rgba(0, 0, 0, 0.75);
   position: relative;
   background: rgb(2,0,36);

src/components/QuestGroup.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="missives-wrapper">
+    <h1 v-if="label !== undefined">{{ label }}</h1>
+    <section class="missives">
+      <QuestMissive
+        v-for="(missive, key) in quests"
+        :key="key"
+        :adventurers="adventurers"
+        :missive="missive"
+        @click="finalizeQuest(missive)"
+      />
+    </section>
+  </div>
+
+</template>
+
+<script lang="ts">
+import {defineComponent} from 'vue'
+import QuestMissive from "@/components/QuestMissive.vue";
+
+export default defineComponent({
+  name: "QuestGroup",
+  components: {QuestMissive},
+  props: {
+    quests: {
+      type: Object,
+      required: true,
+    },
+    adventurers: {
+      type: Object,
+      required: true,
+    },
+    finalizeQuest: {
+      type: Function,
+      required: true,
+    },
+    label: {
+      type: String,
+      default: undefined,
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+
+h1 {
+  text-align: center;
+}
+
+.missives-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.missives {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  gap: 1rem;
+  padding-block: 0.5rem;
+  padding-inline: 5rem;
+  overflow-x: scroll;
+  scroll-snap-type: x mandatory;
+  width: 100vw;
+  max-width: 100%;
+}
+
+@media(min-width: 800px) {
+  .missives-wrapper {
+    padding-inline: 1rem;
+    max-width: 100vw;
+    overflow-x: hidden;
+  }
+
+  .missives {
+    display: grid;
+    padding-inline: 0;
+    max-width: 1200px;
+    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+    grid-auto-rows: auto;
+    gap: 1rem;
+    overflow-x: visible;
+  }
+}
+</style>

src/components/QuestMissive.vue

@@ -12,13 +12,14 @@
     <div class="drink-stain" v-if="drinkStain.exists">
       <DrinkStain/>
     </div>
+    <div class="rank">{{missive.rank}}</div>
     <h2>{{ missive.title }}</h2>
     <p>{{ missive.text }}</p>
     <div class="slots">
       <button class="slot">
         <AdventurerComponent
             :adventurer="missive.adventurers[0]"
-            :all-adventurers="adventurers"
+            :all-adventurers="notBusyAdventurers"
             @hire-adventurer="(id) => {
                 adventurers[id].busy = true;
                 missive.adventurers[0] = adventurers[id];
@@ -36,7 +37,7 @@
     </div>
     <div class="progressWrap">
       <span class="progress"></span>
-      <span class="percentage">{{ progressPercentage }}</span>
+      <span class="percentage">{{ `${progressPercentage.toFixed(2)}%` }}</span>
     </div>
     <h3>Rewards</h3>
     <div class="rewards">
@@ -58,6 +59,14 @@ import Parchment from "@/components/misc/Parchment.vue";
 export default defineComponent({
   name: "QuestMissive",
   components: {Parchment, WaterStain, DrinkStain, AdventurerComponent},
+  computed: {
+    progressPercentageValue(): string {
+      return `${this.missive.progressPoints / this.missive.maxProgress * 100}%`;
+    },
+    notBusyAdventurers(): Adventurer[] {
+      return Object.values(this.adventurers).filter(adventurer => !adventurer.busy);
+    },
+  },
   props: {
     missive: {
       type: Object as PropType<Quest | any>,
@@ -73,7 +82,7 @@ export default defineComponent({
   },
   data: () => {
     return {
-      progressPercentage: "0%",
+      progressPercentage: 0,
       stain: false,
       drinkStain: {
         exists: false,
@@ -85,8 +94,7 @@ export default defineComponent({
   methods: {
     updateProgress() {
       if (this.missive === undefined) return;
-      const progress = (this.missive.progressPoints / this.missive.maxProgress * 100).toFixed(2);
+      this.progressPercentage = this.missive.progressPoints / this.missive.maxProgress * 100;
-      this.progressPercentage = `${progress}%`;
     },
     randomNumber(min: number, max: number) {
       return Math.random() * (max - min) + min;
@@ -102,7 +110,7 @@ export default defineComponent({
     }
   },
   watch: {
-    missive: {
+    "missive.progressPoints": {
       handler() {
         this.updateProgress();
       },
@@ -114,11 +122,14 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .missive {
-  width: min(100%, 14rem);
+  width: 14rem;
+  min-width: 14rem;
   text-align: center;
   border: 2px solid #000;
   padding: 0.5rem;
   position: relative;
+  scroll-snap-align: center;
+  margin: 0 auto;
 
   .parchment {
     position: absolute;
@@ -159,7 +170,7 @@ export default defineComponent({
       left: 0;
       height: 100%;
       display: block;
-      width: v-bind(progressPercentage);
+      width: v-bind(progressPercentageValue);
       background-color: rgba(0, 128, 0, 0.65);
       transition: width 250ms linear;
     }
@@ -176,6 +187,16 @@ export default defineComponent({
     }
   }
 
+  .rank {
+    position: absolute;
+    top: -0.5rem;
+    left: 0.25rem;
+    font-size: 3rem;
+    font-weight: bold;
+    color: #ab0707;
+    z-index: -1;
+  }
+
   .rewards {
     display: flex;
     flex-direction: row;
@@ -214,7 +235,6 @@ export default defineComponent({
       background-color: rgba(0, 0, 0, 0.2);
       cursor: pointer;
       border-radius: 0.2rem;
-      position: relative;
     }
   }
 
@@ -257,4 +277,5 @@ export default defineComponent({
     }
   }
 }
+
 </style>

src/components/UpgradesList.vue

@@ -13,6 +13,19 @@
         Upgrade ({{ formatGold(guild.adventurerCapacity.nextLevelCost) }} gold)
       </button>
     </div>
+    <div class="upgrade">
+      <span>Recruitment capacity (level {{ guild.recruitmentCapacity.level }})</span>
+      <small>Increases the maximum amount of adventurers that await recruitment</small>
+      <button
+        class="button metal"
+        v-if="guild.recruitmentCapacity.nextLevelCost"
+        :disabled="guild.gold < guild.recruitmentCapacity.nextLevelCost || guild.recruitmentCapacity.isMaxLevel()"
+        @click="upgradeRecruitmentCapacity()"
+      >
+        <span v-if="!guild.recruitmentCapacity.isMaxLevel()">Upgrade ({{  formatGold(guild.recruitmentCapacity.nextLevelCost) }} gold)</span>
+        <span v-else>Max level</span>
+      </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>
@@ -75,6 +88,14 @@ export default defineComponent({
       this.guild.gold -= this.guild.adventurerCapacity.nextLevelCost;
       this.guild.adventurerCapacity.upgrade();
     },
+    upgradeRecruitmentCapacity(): void {
+      if (!this.guild.recruitmentCapacity) return;
+      if (this.guild.recruitmentCapacity.isMaxLevel()) return;
+      if (!this.guild.recruitmentCapacity.nextLevelCost) return;
+      if (this.guild.gold < this.guild.recruitmentCapacity.nextLevelCost) return;
+      this.guild.gold -= this.guild.recruitmentCapacity.nextLevelCost;
+      this.guild.recruitmentCapacity.upgrade();
+    },
     upgradeAutoFinishQuests(): void {
       if (!this.guild.autoFinishQuestsUpgrade) return;
       if (this.guild.autoFinishQuestsUpgrade.isMaxLevel()) return;

src/components/technical/ChangelogComponent.vue

@@ -70,10 +70,13 @@ export default defineComponent({
   gap: 1rem;
   max-width: 45rem;
   min-height: 30rem;
-  max-height: 30rem;
   width: 100%;
   overflow-y: auto;
 
+  @media(min-width: 800px) {
+    max-height: 30rem;
+  }
+
   h1 {
     font-size: 3rem;
     line-height: 1;
@@ -88,7 +91,7 @@ export default defineComponent({
     align-items: center;
     gap: 1rem;
     width: 100%;
-    overflow-y: auto;
+    user-select: text;
   }
 
   .changelog-entry {

src/views/AdventurerView.vue

@@ -4,39 +4,21 @@
       :adventurer="selectedAdventurer"
       v-if="selectedAdventurer !== null"
       @closeButtonClicked="selectedAdventurer = null"
-
+      :show-prestige-button="adventurers[selectedAdventurer?.id] !== undefined"
+    />
+    <AdventurerRecruitment
+      :guild="guild"
+      :adventurers-for-hire="adventurersForHire"
+      :adventurers="adventurers"
+      @hireAdventurer="$emit('hireAdventurer', $event)"
+      @dismissAdventurer="$emit('dismissAdventurer', $event)"
+      @previewAdventurer="selectedAdventurer = $event"
+      @findNewRecruit="$emit('findNewRecruit')"
     />
-    <section class="recruit panel pinned-paper">
-      <h1>Applying adventurers</h1>
-      <div class="adventurers">
-        <div v-if="adventurerForHire">
-          <adventurer-tile class="hire-tile" :adventurer="adventurerForHire"/>
-          <div class="decision">
-          <span
-              title="Hire"
-              @click="hireAdventurer()"
-              :class="{disabled: Object.keys(adventurers).length >= guild.adventurerCapacity.getAdventurerCapacity()}"
-          >
-            ✔
-          </span>
-            <span
-                :title="Object.keys(adventurers).length > 0 ? 'Dismiss' : ''"
-                :class="{disabled: Object.keys(adventurers).length <= 0}"
-                @click="dismissAdventurer()"
-            >
-            ✗
-          </span>
-          </div>
-        </div>
-        <div v-else>
-          <span>Noone applied as of now. Check back later!</span>
-        </div>
-
-      </div>
-    </section>
     <section class="collection panel pinned-paper">
       <h1>
-        Recruited adventurers ({{ Object.keys(adventurers).length }} / {{ guild.adventurerCapacity.getAdventurerCapacity() }})
+        Recruited adventurers ({{ Object.keys(adventurers).length }} /
+        {{ guild.adventurerCapacity.getAdventurerCapacity() }})
       </h1>
       <small>Click an adventurer to see details about them</small>
       <div class="adventurers">
@@ -61,14 +43,13 @@ import AdventurerTile from "@/components/AdventurerTile.vue";
 import type {Adventurer} from "@/classes/Adventurer";
 import type {Guild} from "@/classes/Guild";
 import AdventurerDetails from "@/components/AdventurerDetails.vue";
+import AdventurerRecruitment from "@/components/AdventurerRecruitment.vue";
 
 export default defineComponent({
-  name: "RecruitView",
+  name: "AdventurerView",
-  components: {AdventurerDetails, AdventurerTile},
+  components: {AdventurerDetails, AdventurerTile, AdventurerRecruitment},
   data: () => {
     return {
-      currentlyForHire: null as Adventurer | null,
-      adventurersForHire: [] as Array<Adventurer>,
       selectedAdventurer: null as Adventurer | null,
     }
   },
@@ -81,27 +62,14 @@ export default defineComponent({
       type: Object as PropType<{ [key: string]: Adventurer }>,
       required: true,
     },
-    adventurerForHire: {
+    adventurersForHire: {
-      type: Object as PropType<Adventurer | null>,
+      type: Object as PropType<{ [key: string]: Adventurer }>,
       default() {
-        return null;
+        return {};
       }
     },
   },
-  methods: {
+  emits: ["hireAdventurer", "dismissAdventurer", "findNewRecruit"],
-    hireAdventurer(): void {
-      if (Object.keys(this.adventurers).length >= this.guild.adventurerCapacity.getAdventurerCapacity()) return;
-      this.$emit("recruitActionTaken", this.adventurerForHire);
-    },
-    dismissAdventurer() {
-      if (Object.keys(this.adventurers).length <= 0) return;
-      this.$emit("recruitActionTaken", null);
-    }
-  },
-  async mounted() {
-
-  },
-  emits: ["recruitActionTaken"]
 
 });
 </script>

src/views/QuestView.vue

@@ -1,90 +1,20 @@
 <template>
   <section>
-    <div class="guild" v-if="guild.level >= 7 && Object.keys(quests.S).length > 0">
+    <QuestGroup
-      <h1>Rank S Quests</h1>
-      <section class="missives">
-        <QuestMissive
-            v-for="(missive, key, index) in quests.S"
-            :key="key"
         :adventurers="adventurers"
-            :missive="missive"
+        :quests="quests.filter(quest => quest.progressPoints < quest.maxProgress)"
-            @click="finalizeQuest(missive)"
+        :finalizeQuest="finalizeQuest"
+        label="Quests"
+        v-show="quests.filter(quest => quest.progressPoints < quest.maxProgress).length > 0"
     />
-      </section>
+    <QuestGroup
-    </div>
+      :finalize-quest="finalizeQuest"
-    <div class="guild" v-if="guild.level >= 6 && Object.keys(quests.A).length > 0">
-      <h1>Rank A Quests</h1>
-      <section class="missives">
-        <QuestMissive
-            v-for="(missive, key, index) in quests.A"
-            :key="key"
       :adventurers="adventurers"
-            :missive="missive"
+      :quests="quests.filter(quest => quest.progressPoints >= quest.maxProgress)"
-            @click="finalizeQuest(missive)"
+      label="Completed Quests"
+      v-show="quests.filter(quest => quest.progressPoints >= quest.maxProgress).length > 0"
     />
   </section>
-    </div>
-    <div class="guild" v-if="guild.level >= 5 && Object.keys(quests.B).length > 0">
-      <h1>Rank B Quests</h1>
-      <section class="missives">
-        <QuestMissive
-            v-for="(missive, key, index) in quests.B"
-            :key="key"
-            :adventurers="adventurers"
-            :missive="missive"
-            @click="finalizeQuest(missive)"
-        />
-      </section>
-    </div>
-    <div class="guild" v-if="guild.level >= 4 && Object.keys(quests.C).length > 0">
-      <h1>Rank C Quests</h1>
-      <section class="missives">
-        <QuestMissive
-            v-for="(missive, key, index) in quests.C"
-            :key="key"
-            :adventurers="adventurers"
-            :missive="missive"
-            @click="finalizeQuest(missive)"
-        />
-      </section>
-    </div>
-    <div class="guild" v-if="guild.level >= 3 && Object.keys(quests.D).length > 0">
-      <h1>Rank D Quests</h1>
-      <section class="missives">
-        <QuestMissive
-            v-for="(missive, key, index) in quests.D"
-            :key="key"
-            :adventurers="adventurers"
-            :missive="missive"
-            @click="finalizeQuest((missive))"
-        />
-      </section>
-    </div>
-    <div class="guild" v-if="guild.level >= 2 && Object.keys(quests.E).length > 0">
-      <h1>Rank E Quests</h1>
-      <section class="missives">
-        <QuestMissive
-            v-for="(missive, key, index) in quests.E"
-            :key="key"
-            :adventurers="adventurers"
-            :missive="missive"
-            @click="finalizeQuest(missive)"
-        />
-      </section>
-    </div>
-    <div class="guild" v-if="Object.keys(quests.F).length > 0">
-      <h1>Rank F Quests</h1>
-      <section class="missives">
-        <QuestMissive
-            v-for="(missive, key, index) in quests.F"
-            :key="key"
-            :adventurers="adventurers"
-            :missive="missive"
-            @click="finalizeQuest(missive)"
-        />
-      </section>
-    </div>
-  </section>
 </template>
 
 <script lang="ts">
@@ -94,10 +24,11 @@ import type {Adventurer} from "@/classes/Adventurer";
 import type {Quest} from "@/classes/Quest";
 import {Guild} from "@/classes/Guild";
 import QuestMissive from "@/components/QuestMissive.vue";
+import QuestGroup from "@/components/QuestGroup.vue";
 
 export default defineComponent({
   name: "QuestView",
-  components: {QuestMissive, AdventurerComponent},
+  components: {QuestGroup, QuestMissive, AdventurerComponent},
   props: {
     guild: {
       type: Object as PropType<Guild>,
@@ -108,7 +39,7 @@ export default defineComponent({
       required: true,
     },
     quests: {
-      type: Object as PropType<{ [key: string]: Quest }>,
+      type: Object as PropType<Array<Quest>>,
       required: true,
     },
     lastRecruitTime: {
@@ -130,28 +61,19 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.guild {
+section {
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
   width: 100%;
   padding-bottom: 0.5rem;
-
-  h1 {
-    font-size: 3rem;
-    text-align: center;
 }
 
-  .missives {
+@media(min-width: 800px) {
-    display: flex;
+  section {
-    flex-direction: row;
+    flex-direction: column-reverse;
-    flex-wrap: wrap;
-    width: calc(100% - 2rem);
-    justify-content: center;
-    align-items: stretch;
-    padding-inline: 1rem;
-    gap: 1rem;
   }
 }
+
 </style>