update news

news.txt

@@ -1 +1 @@
-Looking for artists for assets for this game! Need backgrounds and icons! Join discord for more info!
+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/assets/main.scss

@@ -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;

src/components/QuestGroup.vue

@@ -0,0 +1,85 @@
+<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: start;
+  align-items: stretch;
+  gap: 1rem;
+  padding-block: 0.5rem;
+  padding-inline: 40%;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  width: max-content;
+  max-width: 100%;
+}
+
+@media(min-width: 800px) {
+  .missives-wrapper {
+    padding-inline: 1rem;
+  }
+
+  .missives {
+    justify-content: center;
+    flex-wrap: wrap;
+    overflow-x: inherit;
+    padding-inline: 0;
+  }
+}
+</style>

src/components/QuestMissive.vue

@@ -114,11 +114,13 @@ 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;
 
   .parchment {
     position: absolute;
@@ -257,4 +259,5 @@ export default defineComponent({
     }
   }
 }
+
 </style>

src/views/QuestView.vue

@@ -1,90 +1,57 @@
 <template>
   <section>
-    <div class="guild" v-if="guild.level >= 7 && Object.keys(quests.S).length > 0">
-      <h1>Rank S Quests</h1>
-      <section class="missives">
-        <QuestMissive
-            v-for="(missive, key, index) in quests.S"
-            :key="key"
+    <QuestGroup
+        v-if="guild.level >= 7 && Object.keys(quests.S).length > 0"
         :adventurers="adventurers"
-            :missive="missive"
-            @click="finalizeQuest(missive)"
+        :quests="quests.S"
+        :finalizeQuest="finalizeQuest"
+        label="Rank S Quests"
     />
-      </section>
-    </div>
-    <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"
+    <QuestGroup
+        v-if="guild.level >= 6 && Object.keys(quests.A).length > 0"
         :adventurers="adventurers"
-            :missive="missive"
-            @click="finalizeQuest(missive)"
+        :quests="quests.A"
+        :finalizeQuest="finalizeQuest"
+        label="Rank A Quests"
     />
-      </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"
+    <QuestGroup
+        v-if="guild.level >= 5 && Object.keys(quests.B).length > 0"
         :adventurers="adventurers"
-            :missive="missive"
-            @click="finalizeQuest(missive)"
+        :quests="quests.B"
+        :finalizeQuest="finalizeQuest"
+        label="Rank B Quests"
     />
-      </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"
+
+    <QuestGroup
+        v-if="guild.level >= 4 && Object.keys(quests.C).length > 0"
         :adventurers="adventurers"
-            :missive="missive"
-            @click="finalizeQuest(missive)"
+        :quests="quests.C"
+        :finalizeQuest="finalizeQuest"
+        label="Rank C Quests"
     />
-      </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"
+
+    <QuestGroup
+        v-if="guild.level >= 3 && Object.keys(quests.D).length > 0"
         :adventurers="adventurers"
-            :missive="missive"
-            @click="finalizeQuest((missive))"
+        :quests="quests.D"
+        :finalizeQuest="finalizeQuest"
+        label="Rank D Quests"
     />
-      </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"
+    <QuestGroup
+        v-if="guild.level >= 2 && Object.keys(quests.E).length > 0"
         :adventurers="adventurers"
-            :missive="missive"
-            @click="finalizeQuest(missive)"
+        :quests="quests.E"
+        :finalizeQuest="finalizeQuest"
+        label="Rank E Quests"
     />
-      </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"
+    <QuestGroup
+        v-if="Object.keys(quests.F).length > 0"
         :adventurers="adventurers"
-            :missive="missive"
-            @click="finalizeQuest(missive)"
+        :quests="quests.F"
+        :finalizeQuest="finalizeQuest"
+        label="Rank F Quests"
     />
   </section>
-    </div>
-  </section>
 </template>
 
 <script lang="ts">
@@ -94,10 +61,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>,
@@ -137,21 +105,6 @@ export default defineComponent({
   align-items: center;
   width: 100%;
   padding-bottom: 0.5rem;
-
-  h1 {
-    font-size: 3rem;
-    text-align: center;
 }
 
-  .missives {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    width: calc(100% - 2rem);
-    justify-content: center;
-    align-items: stretch;
-    padding-inline: 1rem;
-    gap: 1rem;
-  }
-}
 </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))