From b49a30bb6e0606ce72306d5ba41480807f242b69 Mon Sep 17 00:00:00 2001
From: youhavetrouble <youhavetrouble@youhavetrouble.me>
Date: Sat, 23 Sep 2023 15:29:47 +0200
Subject: [PATCH] actually bearable mobile view for quests board

---
 src/assets/main.scss                 |   6 +-
 src/components/AdventurerDetails.vue |   3 +-
 src/components/QuestGroup.vue        |  85 +++++++++++++++
 src/components/QuestMissive.vue      |   5 +-
 src/views/QuestView.vue              | 155 ++++++++++-----------------
 5 files changed, 149 insertions(+), 105 deletions(-)
 create mode 100644 src/components/QuestGroup.vue

diff --git a/src/assets/main.scss b/src/assets/main.scss
index 21f6215..9406143 100644
--- a/src/assets/main.scss
+++ b/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;
diff --git a/src/components/AdventurerDetails.vue b/src/components/AdventurerDetails.vue
index 7c8793e..af9e725 100644
--- a/src/components/AdventurerDetails.vue
+++ b/src/components/AdventurerDetails.vue
@@ -59,9 +59,8 @@ export default defineComponent({
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  width: 100%;
   min-height: 10rem;
-  max-width: 45rem;
+  max-width: min(45rem, 100%);
   background-image: url("data:image/jpeg;base64,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");
   background-position: center;
   background-size: cover;
diff --git a/src/components/QuestGroup.vue b/src/components/QuestGroup.vue
new file mode 100644
index 0000000..1afe564
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/QuestMissive.vue b/src/components/QuestMissive.vue
index d8c3957..081309b 100644
--- a/src/components/QuestMissive.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/views/QuestView.vue b/src/views/QuestView.vue
index cedb31d..af25f84 100644
--- a/src/views/QuestView.vue
+++ b/src/views/QuestView.vue
@@ -1,89 +1,56 @@
 <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"
-            :adventurers="adventurers"
-            :missive="missive"
-            @click="finalizeQuest(missive)"
-        />
-      </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"
-            :adventurers="adventurers"
-            :missive="missive"
-            @click="finalizeQuest(missive)"
-        />
-      </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>
+    <QuestGroup
+        v-if="guild.level >= 7 && Object.keys(quests.S).length > 0"
+        :adventurers="adventurers"
+        :quests="quests.S"
+        :finalizeQuest="finalizeQuest"
+        label="Rank S Quests"
+    />
+    <QuestGroup
+        v-if="guild.level >= 6 && Object.keys(quests.A).length > 0"
+        :adventurers="adventurers"
+        :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>
 
@@ -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>