new experimental quest view

create GDD for the next iteration of the game
update news
2026-05-12 06:26:59 +00:00 · 2025-05-08 21:08:03 +02:00 · 2024-11-19 20:35:55 +01:00 · 2024-08-23 23:55:24 +02:00 · 2023-09-23 15:29:47 +02:00 · 2023-09-16 15:58:54 +02:00
94 changed files with 1229 additions and 727 deletions
@@ -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.
@@ -0,0 +1,21 @@
 /**
 * This file is used to import the character portraits to base64 from raw assets
 */
 const fs = require('fs');
 const characterData = require('./rawAssets/data/adventurers.json');
 for (const character of characterData) {
    try {
        const base64 = base64_encode(`./rawAssets/img/portraits/${character.id}.png`);
        character.portrait = "data:image/png;base64,"+base64;
    } catch (e) {
        console.error(`Error: Didn't find portrait for ${character.id}`);
    }
 }
 fs.writeFileSync('./public/data/adventurers.json', JSON.stringify(characterData, null, 2), "utf-8");
 function base64_encode(file) {
    return fs.readFileSync(file, "base64");
 }
@@ -8,18 +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">
-
+  <link rel="manifest" href="/manifest.json" />
  <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:image" content="https://guildmaster.yht.one/img/app-icons/icon.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"/>
+  <meta property="og:image" content="https://guildmaster.yht.one/img/app-icons/icon.png"/>
 </head>
 <body>
 <div id="app"></div>
@@ -1 +1 @@
-Looking for artists for assets for this game! Need backgrounds, icons and character portraits! Join discord for more info!
+Almost complete rewrite coming soon. Probably. Maybe. Not sure yet.
@@ -1,29 +1,31 @@
 {
  "name": "adventurers-guild",
-  "version": "0.10.0",
+  "version": "0.13.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "dev-public": "vite --host",
    "build": "run-p type-check build-only && cp -r CNAME dist/CNAME",
    "preview": "vite preview",
    "build-only": "vite build",
-    "type-check": "vue-tsc --noEmit"
+    "type-check": "vue-tsc --noEmit",
    "gen-character-data": "node characterDataGenerator.js"
  },
  "dependencies": {
    "@vueuse/components": "^9.13.0",
-    "sass": "^1.63.6",
+    "sass": "^1.66.1",
    "vue": "^3.3.4",
-    "vue-router": "^4.2.2"
+    "vue-router": "^4.2.4"
  },
  "devDependencies": {
-    "@types/node": "^18.16.19",
+    "@types/node": "^18.17.6",
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue": "^4.3.1",
    "@vue/tsconfig": "^0.4.0",
-    "eslint": "^8.44.0",
+    "eslint": "^8.47.0",
-    "eslint-plugin-vue": "^9.15.1",
+    "eslint-plugin-vue": "^9.17.0",
    "npm-run-all": "^4.1.5",
    "typescript": "~5.1.6",
-    "vite": "4.3.9",
+    "vite": "4.4.9",
    "vue-tsc": "^1.8.3"
  }
 }
@@ -0,0 +1,59 @@
 {
  "name": "Guild Master - Adventurer's guild management game",
  "short_name": "Guild Master",
  "theme_color": "#3C2114",
  "background_color": "#d9c8b3",
  "display": "standalone",
  "scope": "./",
  "start_url": "./",
  "icons": [
    {
      "src": "img/app-icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "img/app-icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "img/app-icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "img/app-icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "img/app-icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "img/app-icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "img/app-icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "img/app-icons/icon.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable any"
    }
  ]
 }
@@ -0,0 +1,102 @@
 [
  {
    "id": "aldek",
    "name": "Aldek",
    "attackExponent": 1.1
  },
  {
    "id": "aria",
    "name": "Aria",
    "attackExponent": 1.1
  },
  {
    "id": "burnett",
    "name": "Burnett",
    "attackExponent": 1.1
  },
  {
    "id": "charlotte",
    "name": "Charlotte",
    "attackExponent": 1.1
  },
  {
    "id": "ella",
    "name": "Ella",
    "attackExponent": 1.1
  },
  {
    "id": "elyza",
    "name": "Elyza",
    "attackExponent": 1.1
  },
  {
    "id": "emille",
    "name": "Emille",
    "attackExponent": 1.1
  },
  {
    "id": "garret",
    "name": "Garret",
    "attackExponent": 1.1
  },
  {
    "id": "gryza",
    "name": "Gryza",
    "attackExponent": 1.1
  },
  {
    "id": "lestat",
    "name": "Lestat",
    "attackExponent": 1.1
  },
  {
    "id": "lydia",
    "name": "Lydia",
    "attackExponent": 1.1
  },
  {
    "id": "noor",
    "name": "Noor",
    "attackExponent": 1.1
  },
  {
    "id": "noron",
    "name": "Noron",
    "attackExponent": 1.1
  },
  {
    "id": "oola",
    "name": "Oola",
    "attackExponent": 1.1
  },
  {
    "id": "owen",
    "name": "Owen",
    "attackExponent": 1.1
  },
  {
    "id": "ryslette",
    "name": "Ryslette",
    "attackExponent": 1.1
  },
  {
    "id": "sally",
    "name": "Sally",
    "attackExponent": 1.1
  },
  {
    "id": "tovu",
    "name": "Tovu",
    "attackExponent": 1.1
  },
  {
    "id": "wrydio",
    "name": "Wrydio",
    "attackExponent": 1.1
  },
  {
    "id": "xarya",
    "name": "Xarya",
    "attackExponent": 1.1
  }
 ]
@@ -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>
@@ -6,7 +6,7 @@ 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;
  adventurerForHireId: string | null;
@@ -16,7 +16,7 @@ export class GameData {
  ) {
    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.missives = data.missives ?? [] as Array<Quest>;
    this.lastQuestGot = data.lastQuestGot ?? {} as { [key: string]: null | number };
    this.lastRecruitAction = data.lastRecruitAction ?? null;
    this.adventurerForHireId = data.adventurerForHireId ?? null;
@@ -31,9 +31,17 @@ export function saveGame(
  data: GameData
 ): void {
  console.debug("Saving game...");
  const adventurers = {} as { [key: string]: any };
  for (const adventurerId in data.adventurers) {
    const adventurer: {[key: string]: any} = JSON.parse(JSON.stringify(data.adventurers[adventurerId]));
    delete adventurer.portrait;
    adventurers[adventurerId] = adventurer;
  }
  window.localStorage.setItem("savedGame", JSON.stringify({
    guild: data.guild,
-    adventurers: data.adventurers,
+    adventurers: adventurers,
    missives: data.missives,
    lastQuestGot: data.lastQuestGot,
    lastRecruitAction: data.lastRecruitAction,
@@ -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,
      expReward: number,
      goldReward: number,
      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 {
@@ -26,7 +26,6 @@ export default defineComponent({
      default() {
        return {} as { [key: string]: Adventurer };
      },
      required: true,
    },
  },
@@ -65,7 +65,6 @@ export default defineComponent({
      default() {
        return {} as {[key: string]: Adventurer};
      },
      required: true,
    },
  },
  methods: {
@@ -132,5 +131,6 @@ export default defineComponent({
  width: 100%;
  height: 100%;
  font-size: 4.5rem;
  color: #000;
 }
 </style>
@@ -20,9 +20,6 @@ export default defineComponent({
  props: {
    adventurer: {
      type: Object as PropType<Adventurer>,
      default() {
        return {} as Adventurer;
      },
      required: true,
    }
  },
@@ -53,6 +50,8 @@ export default defineComponent({
  line-height: 1;
  color: rgba(0, 0, 0, 0.75);
  position: relative;
  background: rgb(2,0,36);
  background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgb(69, 69, 84) 57%, rgb(85, 112, 117) 100%);
  .level {
    position: absolute;
@@ -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: auto;
  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;
  }
 }
 </style>
@@ -4,14 +4,15 @@
      :class="{done: missive.maxProgress <= missive.progressPoints}"
  >
    <div class="parchment">
-      <img src="/img/quests/backgrounds/dirty_paper.png" alt="parchment">
+      <Parchment/>
    </div>
    <div class="stain" v-if="stain">
-      <img src="/img/quests/overlays/water_stain.png" alt="stain">
+      <WaterStain/>
    </div>
    <div class="drink-stain" v-if="drinkStain.exists">
-      <img src="/img/quests/overlays/drink_stain.png" alt="stain">
+      <DrinkStain/>
    </div>
    <div class="rank">{{missive.rank}}</div>
    <h2>{{ missive.title }}</h2>
    <p>{{ missive.text }}</p>
    <div class="slots">
@@ -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">
@@ -51,16 +52,21 @@ import type {Quest} from "@/classes/Quest";
 import AdventurerComponent from "@/components/AdventurerMiniComponent.vue";
 import type {Adventurer} from "@/classes/Adventurer";
 import {defineComponent, type PropType} from "vue";
 import DrinkStain from "@/components/misc/DrinkStain.vue";
 import WaterStain from "@/components/misc/WaterStain.vue";
 import Parchment from "@/components/misc/Parchment.vue";
 export default defineComponent({
  name: "QuestMissive",
-  components: {AdventurerComponent},
+  components: {Parchment, WaterStain, DrinkStain, AdventurerComponent},
  computed: {
    progressPercentageValue(): string {
      return `${this.missive.progressPoints / this.missive.maxProgress * 100}%`;
    },
  },
  props: {
    missive: {
      type: Object as PropType<Quest | any>,
      default() {
        return {} as Quest;
      },
      required: true,
    },
    adventurers: {
@@ -73,7 +79,7 @@ export default defineComponent({
  },
  data: () => {
    return {
-      progressPercentage: "0%",
+      progressPercentage: 0,
      stain: false,
      drinkStain: {
        exists: false,
@@ -85,8 +91,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 +107,7 @@ export default defineComponent({
    }
  },
  watch: {
-    missive: {
+    "missive.progressPoints": {
      handler() {
        this.updateProgress();
      },
@@ -114,11 +119,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 +167,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 +184,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;
@@ -257,4 +275,5 @@ export default defineComponent({
    }
  }
 }
 </style>
@@ -63,9 +63,6 @@ export default defineComponent({
  props: {
    guild: {
      type: Object as PropType<Guild>,
      default() {
        return new Guild(1, 0) as Guild;
      },
      required: true,
    }
  },
@@ -0,0 +1,35 @@
 <script lang="ts">
 import {defineComponent} from 'vue'
 export default defineComponent({
  name: "DiscordLogo",
  props: {
    width: {
      type: String,
      default: "2rem",
    },
    height: {
      type: String,
      default: "2rem",
    },
  },
 })
 </script>
 <template>
  <svg
      :width="width"
      :height="height"
      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>
 </template>
 <style scoped lang="scss">
 svg {
 }
 </style>
@@ -0,0 +1,33 @@
 <script lang="ts">
 import {defineComponent} from 'vue'
 export default defineComponent({
  name: "GithubLogo",
  props: {
    width: {
      type: String,
      default: "2rem",
    },
    height: {
      type: String,
      default: "2rem",
    },
  },
 })
 </script>
 <template>
  <svg
      :width="width"
      :height="height"
      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>
 </template>
 <style scoped lang="scss">
 </style>
@@ -1,26 +1,30 @@
 <template>
  <div class="changelog panel pinned-paper">
    <div class="nail top-left">
-      <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
+      <Nail/>
    </div>
    <div class="nail top-right">
-      <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
+      <Nail/>
    </div>
    <h1>Changelog</h1>
    <div class="changelog-list">
      <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>
  </div>
 </template>
 <script lang="ts">
 import {defineComponent} from "vue";
 import Nail from "@/components/misc/Nail.vue";
 export default defineComponent({
  name: "ChangelogComponent",
  components: {Nail},
  data: () => ({
    timeFormat: Intl.DateTimeFormat(Intl.DateTimeFormat().resolvedOptions().locale, {
      year: "numeric",
@@ -40,7 +44,6 @@ export default defineComponent({
      if (result === null) return;
      const json = await result.json();
      for (const release of json) {
        const version = {} as any;
        version.body = release.body.trim();
@@ -62,11 +65,14 @@ export default defineComponent({
  padding-block: 3rem;
  display: flex;
  flex-direction: column;
-  justify-content: center;
+  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  max-width: 45rem;
  min-height: 30rem;
  max-height: 30rem;
  width: 100%;
  overflow-y: auto;
  h1 {
    font-size: 3rem;
@@ -75,6 +81,16 @@ export default defineComponent({
    text-align: center;
  }
  .changelog-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    width: 100%;
    overflow-y: auto;
  }
  .changelog-entry {
    width: 100%;
@@ -1,28 +1,33 @@
 import {createRouter, createWebHashHistory} from 'vue-router'
 import HomeView from '@/views/HomeView.vue';
 import QuestView from "@/views/QuestView.vue";
 import AdventurerView from "@/views/AdventurerView.vue";
 import TechnicalView from "@/views/TechnicalView.vue";
 const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'guild',
-      component: () => import('@/views/HomeView.vue')
+      component: HomeView,
    },
    {
      path: '/quests',
      name: 'quests',
-      component: () => import('@/views/QuestView.vue')
+      component: QuestView,
    },
    {
      path: '/adventurers',
      name: 'adventurers',
-      component: () => import('@/views/AdventurerView.vue')
+      component: AdventurerView,
    },
    {
      path: '/technical',
      name: 'technical',
-      component: () => import('@/views/TechnicalView.vue')
+      component: TechnicalView,
-    }
+    },
  ]
 })
@@ -75,16 +75,10 @@ export default defineComponent({
  props: {
    guild: {
      type: Object as PropType<Guild>,
      default() {
        return {} as Guild
      },
      required: true,
    },
    adventurers: {
      type: Object as PropType<{ [key: string]: Adventurer }>,
      default() {
        return {} as { [key: string]: Adventurer };
      },
      required: true,
    },
    adventurerForHire: {
@@ -8,10 +8,10 @@
    </section>
    <section class="upgrades panel pinned-paper">
      <div class="nail top-left">
-        <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
+        <Nail/>
      </div>
      <div class="nail top-right">
-        <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
+        <Nail/>
      </div>
      <section class="coffer">
        <p>Coffer: {{ formatGold(guild.gold) }} gold</p>
@@ -43,11 +43,12 @@ import {Guild} from "@/classes/Guild";
 import {version} from "../../package.json"
 import UpgradesList from "@/components/UpgradesList.vue";
 import {formatGold} from "@/classes/NumberMagic";
 import Nail from "@/components/misc/Nail.vue";
 export default defineComponent({
  name: "GuildView",
  methods: {formatGold},
-  components: {UpgradesList},
+  components: {Nail, UpgradesList},
  data: () => {
    return {
      version: version,
@@ -60,7 +61,6 @@ export default defineComponent({
    },
    guild: {
      type: Object as PropType<Guild>,
      default: () => new Guild(1, 0) as Guild,
      required: true,
    },
  }
@@ -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,30 +24,22 @@ 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>,
      default() {
        return new Guild(1, 0);
      },
      required: true,
    },
    adventurers: {
      type: Object as PropType<{ [key: string]: Adventurer }>,
      default() {
        return {} as { [key: string]: Adventurer };
      },
      required: true,
    },
    quests: {
-      type: Object as PropType<{ [key: string]: Quest }>,
+      type: Object as PropType<Array<Quest>>,
      default() {
        return {} as { [key: string]: Quest };
      },
      required: true,
    },
    lastRecruitTime: {
@@ -135,32 +57,23 @@ export default defineComponent({
      this.$emit('finalizeQuest', quest)
    },
  }
-})
+});
 </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>
@@ -2,19 +2,19 @@
  <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"/>
+        <Nail/>
      </div>
      <div class="nail top-right small">
-        <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
+        <Nail/>
      </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"/>
+          <DiscordLogo/>
          Discord
        </a>
        <a class="link" href="https://github.com/YouHaveTrouble/GuildMaster">
-          <img class="icon" src="/img/icons/github.svg" alt="GitHub"/>
+          <GithubLogo/>
          GitHub
        </a>
      </div>
@@ -29,12 +29,20 @@
 import {defineComponent} from "vue";
 import ChangelogComponent from "@/components/technical/ChangelogComponent.vue";
 import SaveManagerComponent from "@/components/technical/SaveManagerComponent.vue";
 import Nail from "@/components/misc/Nail.vue";
 import DiscordLogo from "@/components/misc/DiscordLogo.vue";
 import GithubLogo from "@/components/misc/GithubLogo.vue";
 export default defineComponent({
  name: "TechnicalView",
-  components: {SaveManagerComponent, ChangelogComponent},
+  components: {
-
+    DiscordLogo,
-})
+    GithubLogo,
    Nail,
    SaveManagerComponent,
    ChangelogComponent,
  },
 });
 </script>
 <style lang="scss" scoped>
Author	SHA1	Message	Date
YouHaveTrouble	20567be96d	new experimental quest view	2025-05-08 21:08:03 +02:00
YouHaveTrouble	3c79074c4c	create GDD for the next iteration of the game	2024-11-19 20:35:55 +01:00
YouHaveTrouble	571dee6cc9	update news	2024-08-23 23:55:24 +02:00
YouHaveTrouble	b49a30bb6e	actually bearable mobile view for quests board	2023-09-23 15:29:47 +02:00
YouHaveTrouble	2a38461a47	move icon svgs to components, so they can load along everything else	2023-09-16 15:58:54 +02:00
YouHaveTrouble	52c340be26	bump version	2023-09-16 15:39:23 +02:00
YouHaveTrouble	f2c5304643	don't load paths dynamically to allow offline play	2023-09-16 15:26:36 +02:00
YouHaveTrouble	b6aefde9da	add / to the path	2023-09-16 14:29:29 +02:00
YouHaveTrouble	f31a0013a9	Merge pull request #11 from xYundy/fix-quest-button-on-ios Fix select button color for iOS Safari	2023-09-15 12:04:09 +02:00
Wojciech 'xYundy' Zięciak	e4af877358	Add missing empty line at EOF	2023-09-15 12:03:48 +02:00
YouHaveTrouble	d162771749	Merge pull request #10 from xYundy/public-testing Add script which allow to test app on external devices	2023-09-15 12:03:15 +02:00
YouHaveTrouble	f53644119a	Merge pull request #9 from xYundy/pwa-mobile-icon Add PWA icons and manifest	2023-09-15 12:02:21 +02:00
Wojciech 'xYundy' Zięciak	34999a27b7	add PWA icons and manifest	2023-09-15 11:59:11 +02:00
Wojciech 'xYundy' Zięciak	6e23f9a7b4	Fix select button color for iOS Safar	2023-09-15 11:55:27 +02:00
Wojciech 'xYundy' Zięciak	d852f6fd96	Add script which allow to test app on ext. devices	2023-09-15 11:47:43 +02:00
YouHaveTrouble	0e0c133f6f	swap meta image	2023-09-07 19:06:29 +02:00
YouHaveTrouble	8a6b581981	bump version	2023-09-07 18:39:53 +02:00
YouHaveTrouble	5497717605	have enough portraits for now	2023-09-07 18:38:11 +02:00
YouHaveTrouble	85fa53b16e	add gradient background for adventurer portraits	2023-09-07 18:23:36 +02:00
YouHaveTrouble	9feab73fd2	small tool to automatically merge data and portraits into one file	2023-09-07 18:23:17 +02:00
YouHaveTrouble	ed7c9e66ec	add new adventurers and their assets	2023-09-07 18:22:22 +02:00
YouHaveTrouble	82350c6c42	new loading screen	2023-08-28 19:33:44 +02:00
YouHaveTrouble	0b7489b21f	add new assets	2023-08-28 19:33:29 +02:00
YouHaveTrouble	21fb2c5f72	update depends	2023-08-20 17:20:29 +02:00
YouHaveTrouble	20e7af41ae	bump version	2023-07-26 00:24:44 +02:00
YouHaveTrouble	17a091bec8	stop changelog from bumping the page when loading	2023-07-26 00:18:57 +02:00
YouHaveTrouble	13cb2c5a55	don't save possibly heavy adventurer portraits and load them from global data	2023-07-26 00:01:24 +02:00
YouHaveTrouble	28fe055f32	cleanup	2023-07-23 22:38:59 +02:00
YouHaveTrouble	b35de64cea	move most assets to components and use base64 versions of them	2023-07-23 22:24:43 +02:00
YouHaveTrouble	1e7eb5c750	move adventurer portraits to the data to make sure they load along with everything else	2023-07-23 17:27:20 +02:00
		`@@ -1 +1 @@`
			`Looking for artists for assets for this game! Need backgrounds, icons and character portraits! Join discord for more info!`				`Almost complete rewrite coming soon. Probably. Maybe. Not sure yet.`