export quest missive to its own component

src/assets/main.css

@@ -5,8 +5,8 @@
 
 body {
     margin: 0;
-    padding: 0;
+    padding: 0 0 10rem;
-    min-height: 100vh;
+    min-height: calc(100vh - 10rem);
     font-family: 'EB Garamond', serif;
     background-color: #654f32;
     overflow-y: scroll;

src/components/QuestMissive.vue

@@ -0,0 +1,94 @@
+<template>
+  <article
+      class="missive"
+      :class="{done: missive.maxProgress <= missive.progressPoints}"
+  >
+    <h2>{{ missive.title }}</h2>
+    <p>{{ missive.text }}</p>
+    <div class="slots">
+      <button class="slot">
+        <AdventurerComponent
+            :adventurer="missive.adventurers[0]"
+            :all-adventurers="adventurers"
+            @hire-adventurer="(id) => {
+                adventurers[id].busy = true;
+                missive.adventurers[0] = adventurers[id];
+              }"
+            @free-adventurer="(id) => {
+                if (missive.progressPoints >= missive.maxProgress) return;
+                adventurers[id].busy = false;
+                missive.adventurers.splice(0, 1);
+                if (missive.adventurers.length <= 0) {
+                  missive.progressPoints = 0;
+                }
+              }"
+        />
+      </button>
+    </div>
+    <progress :max="missive.maxProgress" :value="missive.progressPoints"></progress>
+  </article>
+</template>
+
+<script lang="ts">
+import type { Quest } from "@/classes/Quest";
+import AdventurerComponent from "@/components/AdventurerMiniComponent.vue";
+import type { Adventurer } from "@/classes/Adventurer";
+import {defineComponent, type PropType} from "vue";
+
+export default defineComponent({
+  name: "QuestMissive",
+  components: {AdventurerComponent},
+  props: {
+    missive: {
+      type: Object as PropType<Quest>,
+    },
+    adventurers: {
+      type: Object as PropType<{[key: string]: Adventurer}>,
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.missive {
+  width: min(100%, 14rem);
+  text-align: center;
+  border: 2px solid #000;
+  padding: 0.5rem;
+  position: relative;
+  background-color: rgba(255, 255, 255, 0.2);
+
+  &.done {
+    cursor: pointer;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      content: "✔";
+      font-size: 5rem;
+      color: green;
+      transform: translate(45%, -40%);
+    }
+  }
+
+  .slots {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+
+    .slot {
+      padding: 0;
+      width: 5rem;
+      height: 5rem;
+      border: 2px solid #000;
+      background-color: rgba(0, 0, 0, 0.2);
+      cursor: pointer;
+      border-radius: 0.2rem;
+      position: relative;
+    }
+  }
+}
+</style>

src/views/QuestView.vue

@@ -2,274 +2,106 @@
   <div class="guild" v-if="guild.level >= 7 && Object.keys(quests.S).length > 0">
     <h1>Rank S Quests</h1>
     <section class="missives">
-      <div
+      <QuestMissive
-          class="missive"
-          :class="{done: missive.maxProgress <= missive.progressPoints}"
           v-for="missive in quests.S"
           :key="missive.id"
+          :adventurers="adventurers"
+          :missive="missive"
           @click="() => {
             if (missive.progressPoints < missive.maxProgress) return;
             $emit('finalizeQuest', missive)
           }"
-      >
-        <h2>{{ missive.title }}</h2>
-        <p>{{ missive.text }}</p>
-        <div class="slots">
-          <button class="slot">
-            <AdventurerComponent
-                :adventurer="missive.adventurers[0]"
-                :all-adventurers="adventurers"
-                @hire-adventurer="(id) => {
-                adventurers[id].busy = true;
-                missive.adventurers[0] = adventurers[id];
-              }"
-                @free-adventurer="(id) => {
-                if (missive.progressPoints >= missive.maxProgress) return;
-                adventurers[id].busy = false;
-                missive.adventurers.splice(0, 1);
-                if (missive.adventurers.length <= 0) {
-                  missive.progressPoints = 0;
-                }
-              }"
       />
-          </button>
-        </div>
-        <progress :max="missive.maxProgress" :value="missive.progressPoints"></progress>
-      </div>
     </section>
   </div>
   <div class="guild" v-if="guild.level >= 6 && Object.keys(quests.A).length > 0">
     <h1>Rank A Quests</h1>
     <section class="missives">
-      <div
+      <QuestMissive
-          class="missive"
-          :class="{done: missive.maxProgress <= missive.progressPoints}"
           v-for="missive in quests.A"
           :key="missive.id"
+          :adventurers="adventurers"
+          :missive="missive"
           @click="() => {
             if (missive.progressPoints < missive.maxProgress) return;
             $emit('finalizeQuest', missive)
           }"
-      >
-        <h2>{{ missive.title }}</h2>
-        <p>{{ missive.text }}</p>
-        <div class="slots">
-          <button class="slot">
-            <AdventurerComponent
-                :adventurer="missive.adventurers[0]"
-                :all-adventurers="adventurers"
-                @hire-adventurer="(id) => {
-                adventurers[id].busy = true;
-                missive.adventurers[0] = adventurers[id];
-              }"
-                @free-adventurer="(id) => {
-                if (missive.progressPoints >= missive.maxProgress) return;
-                adventurers[id].busy = false;
-                missive.adventurers.splice(0, 1);
-                if (missive.adventurers.length <= 0) {
-                  missive.progressPoints = 0;
-                }
-              }"
       />
-          </button>
-        </div>
-        <progress :max="missive.maxProgress" :value="missive.progressPoints"></progress>
-      </div>
     </section>
   </div>
   <div class="guild" v-if="guild.level >= 5 && Object.keys(quests.B).length > 0">
     <h1>Rank B Quests</h1>
     <section class="missives">
-      <div
+      <QuestMissive
-          class="missive"
-          :class="{done: missive.maxProgress <= missive.progressPoints}"
           v-for="missive in quests.B"
           :key="missive.id"
+          :adventurers="adventurers"
+          :missive="missive"
           @click="() => {
             if (missive.progressPoints < missive.maxProgress) return;
             $emit('finalizeQuest', missive)
           }"
-      >
-        <h2>{{ missive.title }}</h2>
-        <p>{{ missive.text }}</p>
-        <div class="slots">
-          <button class="slot">
-            <AdventurerComponent
-                :adventurer="missive.adventurers[0]"
-                :all-adventurers="adventurers"
-                @hire-adventurer="(id) => {
-                adventurers[id].busy = true;
-                missive.adventurers[0] = adventurers[id];
-              }"
-                @free-adventurer="(id) => {
-                if (missive.progressPoints >= missive.maxProgress) return;
-                adventurers[id].busy = false;
-                missive.adventurers.splice(0, 1);
-                if (missive.adventurers.length <= 0) {
-                  missive.progressPoints = 0;
-                }
-              }"
       />
-          </button>
-        </div>
-        <progress :max="missive.maxProgress" :value="missive.progressPoints"></progress>
-      </div>
     </section>
   </div>
   <div class="guild" v-if="guild.level >= 4 && Object.keys(quests.C).length > 0">
     <h1>Rank C Quests</h1>
     <section class="missives">
-      <div
+      <QuestMissive
-          class="missive"
-          :class="{done: missive.maxProgress <= missive.progressPoints}"
           v-for="missive in quests.C"
           :key="missive.id"
+          :adventurers="adventurers"
+          :missive="missive"
           @click="() => {
             if (missive.progressPoints < missive.maxProgress) return;
             $emit('finalizeQuest', missive)
           }"
-      >
-        <h2>{{ missive.title }}</h2>
-        <p>{{ missive.text }}</p>
-        <div class="slots">
-          <button class="slot">
-            <AdventurerComponent
-                :adventurer="missive.adventurers[0]"
-                :all-adventurers="adventurers"
-                @hire-adventurer="(id) => {
-                adventurers[id].busy = true;
-                missive.adventurers[0] = adventurers[id];
-              }"
-                @free-adventurer="(id) => {
-                if (missive.progressPoints >= missive.maxProgress) return;
-                adventurers[id].busy = false;
-                missive.adventurers.splice(0, 1);
-                if (missive.adventurers.length <= 0) {
-                  missive.progressPoints = 0;
-                }
-              }"
       />
-          </button>
-        </div>
-        <progress :max="missive.maxProgress" :value="missive.progressPoints"></progress>
-      </div>
     </section>
   </div>
   <div class="guild" v-if="guild.level >= 3 && Object.keys(quests.D).length > 0">
     <h1>Rank D Quests</h1>
     <section class="missives">
-      <div
+      <QuestMissive
-          class="missive"
-          :class="{done: missive.maxProgress <= missive.progressPoints}"
           v-for="missive in quests.D"
           :key="missive.id"
+          :adventurers="adventurers"
+          :missive="missive"
           @click="() => {
             if (missive.progressPoints < missive.maxProgress) return;
             $emit('finalizeQuest', missive)
           }"
-      >
-        <h2>{{ missive.title }}</h2>
-        <p>{{ missive.text }}</p>
-        <div class="slots">
-          <button class="slot">
-            <AdventurerComponent
-                :adventurer="missive.adventurers[0]"
-                :all-adventurers="adventurers"
-                @hire-adventurer="(id) => {
-                adventurers[id].busy = true;
-                missive.adventurers[0] = adventurers[id];
-              }"
-                @free-adventurer="(id) => {
-                if (missive.progressPoints >= missive.maxProgress) return;
-                adventurers[id].busy = false;
-                missive.adventurers.splice(0, 1);
-                if (missive.adventurers.length <= 0) {
-                  missive.progressPoints = 0;
-                }
-              }"
       />
-          </button>
-        </div>
-        <progress :max="missive.maxProgress" :value="missive.progressPoints"></progress>
-      </div>
     </section>
   </div>
   <div class="guild" v-if="guild.level >= 2 && Object.keys(quests.E).length > 0">
     <h1>Rank E Quests</h1>
     <section class="missives">
-      <div
+      <QuestMissive
-          class="missive"
-          :class="{done: missive.maxProgress <= missive.progressPoints}"
           v-for="missive in quests.E"
           :key="missive.id"
+          :adventurers="adventurers"
+          :missive="missive"
           @click="() => {
             if (missive.progressPoints < missive.maxProgress) return;
             $emit('finalizeQuest', missive)
           }"
-      >
-        <h2>{{ missive.title }}</h2>
-        <p>{{ missive.text }}</p>
-        <div class="slots">
-          <button class="slot">
-            <AdventurerComponent
-                :adventurer="missive.adventurers[0]"
-                :all-adventurers="adventurers"
-                @hire-adventurer="(id) => {
-                adventurers[id].busy = true;
-                missive.adventurers[0] = adventurers[id];
-              }"
-                @free-adventurer="(id) => {
-                if (missive.progressPoints >= missive.maxProgress) return;
-                adventurers[id].busy = false;
-                missive.adventurers.splice(0, 1);
-                if (missive.adventurers.length <= 0) {
-                  missive.progressPoints = 0;
-                }
-              }"
       />
-          </button>
-        </div>
-        <progress :max="missive.maxProgress" :value="missive.progressPoints"></progress>
-      </div>
     </section>
   </div>
-  <div class="guild">
+  <div class="guild" v-if="Object.keys(quests.F).length > 0">
     <h1>Rank F Quests</h1>
     <section class="missives">
-      <div
+      <QuestMissive
-          class="missive"
-          :class="{done: missive.maxProgress <= missive.progressPoints}"
           v-for="missive in quests.F"
           :key="missive.id"
+          :adventurers="adventurers"
+          :missive="missive"
           @click="() => {
             if (missive.progressPoints < missive.maxProgress) return;
             $emit('finalizeQuest', missive)
           }"
-      >
-        <h2>{{ missive.title }}</h2>
-        <p>{{ missive.text }}</p>
-        <div class="slots">
-          <button class="slot">
-            <AdventurerComponent
-                :adventurer="missive.adventurers[0]"
-                :all-adventurers="adventurers"
-                @hire-adventurer="(id) => {
-                adventurers[id].busy = true;
-                missive.adventurers[0] = adventurers[id];
-              }"
-                @free-adventurer="(id) => {
-                if (missive.progressPoints >= missive.maxProgress) return;
-                adventurers[id].busy = false;
-                missive.adventurers.splice(0, 1);
-                if (missive.adventurers.length <= 0) {
-                  missive.progressPoints = 0;
-                }
-              }"
       />
-          </button>
-        </div>
-        <progress :max="missive.maxProgress" :value="missive.progressPoints"></progress>
-      </div>
     </section>
   </div>
 
@@ -281,10 +113,11 @@ import AdventurerComponent from "@/components/AdventurerMiniComponent.vue";
 import type {Adventurer} from "@/classes/Adventurer";
 import type {Quest} from "@/classes/Quest";
 import type {Guild} from "@/classes/Guild";
+import QuestMissive from "@/components/QuestMissive.vue";
 
 export default defineComponent({
   name: "QuestView",
-  components: {AdventurerComponent},
+  components: {QuestMissive, AdventurerComponent},
   props: {
     guild: {
       type: Object as PropType<Guild>,
@@ -337,48 +170,6 @@ export default defineComponent({
     align-items: center;
     padding-inline: 1rem;
     gap: 1rem;
-
-    .missive {
-      width: min(100%, 14rem);
-      text-align: center;
-      border: 2px solid #000;
-      padding: 0.5rem;
-      position: relative;
-      background-color: rgba(255, 255, 255, 0.2);
-
-      &.done {
-        cursor: pointer;
-
-        &::after {
-          position: absolute;
-          top: 0;
-          right: 0;
-          content: "✔";
-          font-size: 5rem;
-          color: green;
-          transform: translate(45%, -40%);
-        }
-      }
-
-      .slots {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: center;
-        align-items: center;
-
-        .slot {
-          padding: 0;
-          width: 5rem;
-          height: 5rem;
-          border: 2px solid #000;
-          background-color: rgba(0, 0, 0, 0.2);
-          cursor: pointer;
-          border-radius: 0.2rem;
-          position: relative;
-        }
-      }
-    }
   }
 }
 </style>