update news

GDD.md

@@ -1,23 +0,0 @@
-# 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 @@
-Almost complete rewrite coming soon. Probably. Maybe. Not sure yet.
+Major rewrite possibly, probably soon!

package.json

@@ -26,6 +26,7 @@
     "npm-run-all": "^4.1.5",
     "typescript": "~5.1.6",
     "vite": "4.4.9",
+    "vite-plugin-pwa": "^0.16.5",
     "vue-tsc": "^1.8.3"
   }
 }

src/App.vue

@@ -100,29 +100,41 @@ export default defineComponent({
     allAdventurers: {} as { [key: string]: Adventurer },
     adventurers: {} as { [key: string]: Adventurer },
     quests: {} as { [key: string]: { [key: string]: Quest } },
-    missives: [] as Array<Quest>,
+    missives: {
+      F: {} as { [key: string]: Quest },
+      E: {} as { [key: string]: Quest },
+      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 } },
   }),
   methods: {
     async updateMissives() {
-      for (const missive of this.missives) {
+      for (const missiveRank in this.missives) {
+        const rank = getFromString(missiveRank as QuestRank);
+        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();
             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) {
 
@@ -161,10 +173,7 @@ export default defineComponent({
         adventurer.busy = false;
       }
       missive.adventurers = [];
-      const missiveIndex = this.missives.indexOf(missive);
-      if (missiveIndex > -1) {
-        this.missives.splice(missiveIndex, 1);
-      }
+      delete this.missives[missive.rank.toString() as QuestRank][missive.id];
     },
     getRandomQuest(rank: QuestRank): Quest | null {
       const keys = Object.keys(this.quests[rank]);
@@ -174,10 +183,11 @@ export default defineComponent({
       const randomIdString = keys[randomId] as string;
       return getQuestWithRewards(questsForRank[randomIdString], this.guild.expModifier.getModifier(), this.guild.goldModifier.getModifier());
     },
-    createMissive(questToAdd: Quest) {
+    createMissive(questToAdd: Quest, rank: QuestRank) {
       const quest = JSON.parse(JSON.stringify(questToAdd));
-      quest.id = Math.random().toString(16).slice(2).toString();
-      this.missives.push(quest);
+      const newId = Math.random().toString(16).slice(2).toString();
+      quest.id = newId;
+      this.missives[rank][newId] = quest;
     },
     loadGame() {
       const saveData = loadGame();
@@ -229,21 +239,24 @@ export default defineComponent({
       }
       this.adventurers = adventurers;
 
-      if (Array.isArray(saveData.missives)) {
-        for (const data of saveData.missives) {
-          const quest = new Quest(data.id, getFromString(data.rank), data.title, data.text, data.maxProgress, data.expReward, data.goldReward);
+      const missives = {} as { [key: string]: { [key: string]: Quest } };
+
+      for (const id in saveData.missives) {
+        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) {
-            for (const adventurer of data.adventurers) {
-              const adventurerId = adventurer.id;
-              if (this.adventurers[adventurerId] == null) continue;
-              quest.adventurers.push(this.adventurers[adventurerId]);
+            quest.adventurers.push(this.adventurers[data.adventurers[0].id])
           }
+          missiveRank[questId] = quest;
         }
-          this.missives.push(quest)
-        }
+        missives[id] = missiveRank;
       }
 
+      this.missives = missives;
+
       this.lastRecruitHandled = saveData.lastRecruitAction ?? 0;
 
       if (saveData.adventurerForHireId != null) {
@@ -271,8 +284,7 @@ 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")
@@ -314,6 +326,7 @@ export default defineComponent({
       }));
     }, 10 * 1000));
 
+
     this.gameTickTask = Number(setInterval(() => {
       this.updateMissives();
 
@@ -328,64 +341,78 @@ export default defineComponent({
 
       if (Number(now) - Number(this.lastQuestGot.F) >= 12 * 1000) {
         this.lastQuestGot.F = now;
-        const currentQuestAmount = this.missives.filter(quest => quest.rank === QuestRank.F).length;
-        if (currentQuestAmount >= 5) return;
+        const keys = Object.keys(this.missives[QuestRank.F]);
+        if (keys.length >= 5) return;
         const quest = this.getRandomQuest(QuestRank.F);
-        if (quest !== null) this.createMissive(quest);
+        if (quest !== null) {
+          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 currentQuestAmount = this.missives.filter(quest => quest.rank === QuestRank.E).length;
-        if (currentQuestAmount >= 5) return;
+        const keys = Object.keys(this.missives[QuestRank.E]);
+        if (keys.length >= 5) return;
         const quest = this.getRandomQuest(QuestRank.E);
-        if (quest !== null) this.createMissive(quest);
+        if (quest !== null) {
+          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 currentQuestAmount = this.missives.filter(quest => quest.rank === QuestRank.D).length;
-        if (currentQuestAmount >= 5) return;
+        const keys = Object.keys(this.missives[QuestRank.D]);
+        if (keys.length >= 5) return;
         const quest = this.getRandomQuest(QuestRank.D);
-        if (quest !== null) this.createMissive(quest);
+        if (quest !== null) {
+          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 currentQuestAmount = this.missives.filter(quest => quest.rank === QuestRank.C).length;
-        if (currentQuestAmount >= 5) return;
+        const keys = Object.keys(this.missives[QuestRank.C]);
+        if (keys.length >= 5) return;
         const quest = this.getRandomQuest(QuestRank.C);
-        if (quest !== null) this.createMissive(quest);
+        if (quest !== null) {
+          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 currentQuestAmount = this.missives.filter(quest => quest.rank === QuestRank.B).length;
-        if (currentQuestAmount >= 5) return;
+        const keys = Object.keys(this.missives[QuestRank.B]);
+        if (keys.length >= 5) return;
         const quest = this.getRandomQuest(QuestRank.B);
-        if (quest !== null) this.createMissive(quest);
+        if (quest !== null) {
+          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 currentQuestAmount = this.missives.filter(quest => quest.rank === QuestRank.A).length;
-        if (currentQuestAmount >= 5) return;
+        const keys = Object.keys(this.missives[QuestRank.A]);
+        if (keys.length >= 5) return;
         const quest = this.getRandomQuest(QuestRank.A);
-        if (quest !== null) this.createMissive(quest);
+        if (quest !== null) {
+          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 currentQuestAmount = this.missives.filter(quest => quest.rank === QuestRank.S).length;
-        if (currentQuestAmount >= 5) return;
+        const keys = Object.keys(this.missives[QuestRank.S]);
+        if (keys.length >= 5) return;
         const quest = this.getRandomQuest(QuestRank.S);
-        if (quest !== null) this.createMissive(quest);
+        if (quest !== null) {
+          this.createMissive(quest, QuestRank.S);
+        }
       }
 
     }, 250));
@@ -477,7 +504,6 @@ nav {
     width: 80px;
     height: 80px;
   }
-
   .lds-ring div {
     box-sizing: border-box;
     display: block;
@@ -490,19 +516,15 @@ 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,7 +6,7 @@ import {getFromString, QuestRank} from "@/classes/QuestRank";
 export class GameData {
   guild: Guild;
   adventurers: { [key: string]: Adventurer };
-  missives: Array<Quest>;
+  missives: { [key: string]: { [key: string]: 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 Array<Quest>;
+    this.missives = data.missives ?? {} as { [key: string]: { [key: string]: Quest } };
     this.lastQuestGot = data.lastQuestGot ?? {} as { [key: string]: null | number };
     this.lastRecruitAction = data.lastRecruitAction ?? null;
     this.adventurerForHireId = data.adventurerForHireId ?? null;

src/classes/Quest.ts

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

src/components/QuestGroup.vue

@@ -59,31 +59,27 @@ h1 {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  justify-content: flex-start;
+  justify-content: start;
+  align-items: stretch;
   gap: 1rem;
   padding-block: 0.5rem;
-  padding-inline: 5rem;
+  padding-inline: 40%;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
-  width: 100vw;
+  width: max-content;
   max-width: 100%;
 }
 
 @media(min-width: 800px) {
   .missives-wrapper {
     padding-inline: 1rem;
-    max-width: 100vw;
-    overflow-x: hidden;
   }
 
   .missives {
-    display: grid;
+    justify-content: center;
+    flex-wrap: wrap;
+    overflow-x: inherit;
     padding-inline: 0;
-    max-width: 1200px;
-    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
-    grid-auto-rows: auto;
-    gap: 1rem;
-
   }
 }
 </style>

src/components/QuestMissive.vue

@@ -12,7 +12,6 @@
     <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">
@@ -37,7 +36,7 @@
     </div>
     <div class="progressWrap">
       <span class="progress"></span>
-      <span class="percentage">{{ `${progressPercentage.toFixed(2)}%` }}</span>
+      <span class="percentage">{{ progressPercentage }}</span>
     </div>
     <h3>Rewards</h3>
     <div class="rewards">
@@ -59,11 +58,6 @@ 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>,
@@ -79,7 +73,7 @@ export default defineComponent({
   },
   data: () => {
     return {
-      progressPercentage: 0,
+      progressPercentage: "0%",
       stain: false,
       drinkStain: {
         exists: false,
@@ -91,7 +85,8 @@ export default defineComponent({
   methods: {
     updateProgress() {
       if (this.missive === undefined) return;
-      this.progressPercentage = this.missive.progressPoints / this.missive.maxProgress * 100;
+      const progress = (this.missive.progressPoints / this.missive.maxProgress * 100).toFixed(2);
+      this.progressPercentage = `${progress}%`;
     },
     randomNumber(min: number, max: number) {
       return Math.random() * (max - min) + min;
@@ -107,7 +102,7 @@ export default defineComponent({
     }
   },
   watch: {
-    "missive.progressPoints": {
+    missive: {
       handler() {
         this.updateProgress();
       },
@@ -126,7 +121,6 @@ export default defineComponent({
   padding: 0.5rem;
   position: relative;
   scroll-snap-align: center;
-  margin: 0 auto;
 
   .parchment {
     position: absolute;
@@ -167,7 +161,7 @@ export default defineComponent({
       left: 0;
       height: 100%;
       display: block;
-      width: v-bind(progressPercentageValue);
+      width: v-bind(progressPercentage);
       background-color: rgba(0, 128, 0, 0.65);
       transition: width 250ms linear;
     }
@@ -184,16 +178,6 @@ 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;

src/views/QuestView.vue

@@ -1,18 +1,55 @@
 <template>
   <section>
     <QuestGroup
+        v-if="guild.level >= 7 && Object.keys(quests.S).length > 0"
         :adventurers="adventurers"
-        :quests="quests.filter(quest => quest.progressPoints < quest.maxProgress)"
+        :quests="quests.S"
         :finalizeQuest="finalizeQuest"
-        label="Quests"
-        v-show="quests.filter(quest => quest.progressPoints < quest.maxProgress).length > 0"
+        label="Rank S Quests"
     />
     <QuestGroup
-      :finalize-quest="finalizeQuest"
+        v-if="guild.level >= 6 && Object.keys(quests.A).length > 0"
         :adventurers="adventurers"
-      :quests="quests.filter(quest => quest.progressPoints >= quest.maxProgress)"
-      label="Completed Quests"
-      v-show="quests.filter(quest => quest.progressPoints >= quest.maxProgress).length > 0"
+        :quests="quests.A"
+        :finalizeQuest="finalizeQuest"
+        label="Rank A Quests"
+    />
+    <QuestGroup
+        v-if="guild.level >= 5 && Object.keys(quests.B).length > 0"
+        :adventurers="adventurers"
+        :quests="quests.B"
+        :finalizeQuest="finalizeQuest"
+        label="Rank B Quests"
+    />
+
+    <QuestGroup
+        v-if="guild.level >= 4 && Object.keys(quests.C).length > 0"
+        :adventurers="adventurers"
+        :quests="quests.C"
+        :finalizeQuest="finalizeQuest"
+        label="Rank C Quests"
+    />
+
+    <QuestGroup
+        v-if="guild.level >= 3 && Object.keys(quests.D).length > 0"
+        :adventurers="adventurers"
+        :quests="quests.D"
+        :finalizeQuest="finalizeQuest"
+        label="Rank D Quests"
+    />
+    <QuestGroup
+        v-if="guild.level >= 2 && Object.keys(quests.E).length > 0"
+        :adventurers="adventurers"
+        :quests="quests.E"
+        :finalizeQuest="finalizeQuest"
+        label="Rank E Quests"
+    />
+    <QuestGroup
+        v-if="Object.keys(quests.F).length > 0"
+        :adventurers="adventurers"
+        :quests="quests.F"
+        :finalizeQuest="finalizeQuest"
+        label="Rank F Quests"
     />
   </section>
 </template>
@@ -39,7 +76,7 @@ export default defineComponent({
       required: true,
     },
     quests: {
-      type: Object as PropType<Array<Quest>>,
+      type: Object as PropType<{ [key: string]: Quest }>,
       required: true,
     },
     lastRecruitTime: {
@@ -61,19 +98,13 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-section {
+.guild {
   display: flex;
   flex-direction: column;
-  justify-content: flex-start;
+  justify-content: center;
   align-items: center;
   width: 100%;
   padding-bottom: 0.5rem;
 }
 
-@media(min-width: 800px) {
-  section {
-    flex-direction: column-reverse;
-  }
-}
-
 </style>

vite.config.ts

@@ -2,10 +2,21 @@ import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import {VitePWA} from "vite-plugin-pwa";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    VitePWA({
+      registerType: 'prompt',
+      injectRegister: 'script',
+      filename: 'service-worker.js',
+      workbox: {
+        globPatterns: ['**/*.{js,css,html,ico,png,jpeg,svg,json}'],
+      }
+    })
+  ],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))