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
59 changed files with 1070 additions and 670 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.11.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"
  }
 }
@@ -1 +0,0 @@
 <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>
@@ -1,5 +0,0 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <rect width="24" height="24" fill="none"/>
  <path d="M12,2A10,10,0,0,0,8.84,21.5c.5.08.66-.23.66-.5V19.31C6.73,19.91,6.14,18,6.14,18A2.69,2.69,0,0,0,5,16.5c-.91-.62.07-.6.07-.6a2.1,2.1,0,0,1,1.53,1,2.15,2.15,0,0,0,2.91.83,2.16,2.16,0,0,1,.63-1.34C8,16.17,5.62,15.31,5.62,11.5a3.87,3.87,0,0,1,1-2.71,3.58,3.58,0,0,1,.1-2.64s.84-.27,2.75,1a9.63,9.63,0,0,1,5,0c1.91-1.29,2.75-1,2.75-1a3.58,3.58,0,0,1,.1,2.64,3.87,3.87,0,0,1,1,2.71c0,3.82-2.34,4.66-4.57,4.91a2.39,2.39,0,0,1,.69,1.85V21c0,.27.16.59.67.5A10,10,0,0,0,12,2Z"/>
 </svg>
@@ -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
  }
 ]
@@ -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;
@@ -1,6 +1,10 @@
 * {
  box-sizing: border-box;
 }
 body {
  margin: 0;
-  padding: 0 0 10rem;
+  padding: 0 0 2rem;
  min-height: calc(100vh - 10rem);
  font-family: 'EB Garamond', serif;
  overflow-y: scroll;
@@ -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 {
@@ -131,5 +131,6 @@ export default defineComponent({
  width: 100%;
  height: 100%;
  font-size: 4.5rem;
  color: #000;
 }
 </style>
@@ -50,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>
@@ -12,6 +12,7 @@
    <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">
@@ -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,11 @@ 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}%`;
    },
  },
  props: {
    missive: {
      type: Object as PropType<Quest | any>,
@@ -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>
@@ -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,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,
-    }
+    },
  ]
 })
@@ -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>
@@ -10,11 +10,11 @@
      <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>
@@ -30,10 +30,18 @@ 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: {Nail, SaveManagerComponent, ChangelogComponent},
+  components: {
    DiscordLogo,
    GithubLogo,
    Nail,
    SaveManagerComponent,
    ChangelogComponent,
  },
 });
 </script>
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
		`@@ -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 +0,0 @@`
			<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>