actually bearable mobile view for quests board

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,89 +1,56 @@
 <template>
   <section>
-    <div class="guild" v-if="guild.level >= 7 && Object.keys(quests.S).length > 0">
+    <QuestGroup
-      <h1>Rank S Quests</h1>
+        v-if="guild.level >= 7 && Object.keys(quests.S).length > 0"
-      <section class="missives">
+        :adventurers="adventurers"
-        <QuestMissive
+        :quests="quests.S"
-            v-for="(missive, key, index) in quests.S"
+        :finalizeQuest="finalizeQuest"
-            :key="key"
+        label="Rank S Quests"
-            :adventurers="adventurers"
+    />
-            :missive="missive"
+    <QuestGroup
-            @click="finalizeQuest(missive)"
+        v-if="guild.level >= 6 && Object.keys(quests.A).length > 0"
-        />
+        :adventurers="adventurers"
-      </section>
+        :quests="quests.A"
-    </div>
+        :finalizeQuest="finalizeQuest"
-    <div class="guild" v-if="guild.level >= 6 && Object.keys(quests.A).length > 0">
+        label="Rank A Quests"
-      <h1>Rank A Quests</h1>
+    />
-      <section class="missives">
+    <QuestGroup
-        <QuestMissive
+        v-if="guild.level >= 5 && Object.keys(quests.B).length > 0"
-            v-for="(missive, key, index) in quests.A"
+        :adventurers="adventurers"
-            :key="key"
+        :quests="quests.B"
-            :adventurers="adventurers"
+        :finalizeQuest="finalizeQuest"
-            :missive="missive"
+        label="Rank B Quests"
-            @click="finalizeQuest(missive)"
+    />
-        />
+
-      </section>
+    <QuestGroup
-    </div>
+        v-if="guild.level >= 4 && Object.keys(quests.C).length > 0"
-    <div class="guild" v-if="guild.level >= 5 && Object.keys(quests.B).length > 0">
+        :adventurers="adventurers"
-      <h1>Rank B Quests</h1>
+        :quests="quests.C"
-      <section class="missives">
+        :finalizeQuest="finalizeQuest"
-        <QuestMissive
+        label="Rank C Quests"
-            v-for="(missive, key, index) in quests.B"
+    />
-            :key="key"
+
-            :adventurers="adventurers"
+    <QuestGroup
-            :missive="missive"
+        v-if="guild.level >= 3 && Object.keys(quests.D).length > 0"
-            @click="finalizeQuest(missive)"
+        :adventurers="adventurers"
-        />
+        :quests="quests.D"
-      </section>
+        :finalizeQuest="finalizeQuest"
-    </div>
+        label="Rank D Quests"
-    <div class="guild" v-if="guild.level >= 4 && Object.keys(quests.C).length > 0">
+    />
-      <h1>Rank C Quests</h1>
+    <QuestGroup
-      <section class="missives">
+        v-if="guild.level >= 2 && Object.keys(quests.E).length > 0"
-        <QuestMissive
+        :adventurers="adventurers"
-            v-for="(missive, key, index) in quests.C"
+        :quests="quests.E"
-            :key="key"
+        :finalizeQuest="finalizeQuest"
-            :adventurers="adventurers"
+        label="Rank E Quests"
-            :missive="missive"
+    />
-            @click="finalizeQuest(missive)"
+    <QuestGroup
-        />
+        v-if="Object.keys(quests.F).length > 0"
-      </section>
+        :adventurers="adventurers"
-    </div>
+        :quests="quests.F"
-    <div class="guild" v-if="guild.level >= 3 && Object.keys(quests.D).length > 0">
+        :finalizeQuest="finalizeQuest"
-      <h1>Rank D Quests</h1>
+        label="Rank F Quests"
-      <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>
 
@@ -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>