better quest adventurer choice ux

src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {RouterLink, RouterView} from 'vue-router'
+import {version} from "@/../package.json";
 </script>
 
 <template>
@@ -104,7 +105,7 @@ export default defineComponent({
   methods: {
     async updateMissives() {
       for (const missive of this.missives) {
-        if (missive.adventurers.length <= 0) {
+        if (missive.adventurers.length < missive.maxAdventurers) {
           missive.progressPoints = 0;
           continue;
         }

src/assets/main.scss

@@ -1,12 +1,13 @@
 * {
   box-sizing: border-box;
+  font-family: 'EB Garamond', serif;
+  scrollbar-color: #8f7256 rgba(0, 0, 0, 0.1);
 }
 
 body {
   margin: 0;
   padding: 0 0 2rem;
   min-height: calc(100vh - 10rem);
-  font-family: 'EB Garamond', serif;
   overflow-y: scroll;
   user-select: none;
   background-size: 25rem;

src/components/AdventurerMiniComponent.vue

@@ -21,6 +21,8 @@ import { vOnClickOutside } from '@vueuse/components'
     <span>+</span>
   </article>
   <div class="selection" v-if="selection" v-on-click-outside="closeSelect">
+    <span>Choose adventurer</span>
+    <div class="list">
       <button
         class="slot"
         v-for="adventurer in allAdventurers"
@@ -37,6 +39,7 @@ import { vOnClickOutside } from '@vueuse/components'
         />
       </button>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -61,9 +64,9 @@ export default defineComponent({
       },
     },
     allAdventurers: {
-      type: Object as PropType<{[key: string]: Adventurer}>,
+      type: Object as PropType<Array<Adventurer>>,
       default() {
-        return {} as {[key: string]: Adventurer};
+        return [] as Array<Adventurer>;
       },
     },
   },
@@ -82,22 +85,35 @@ export default defineComponent({
 .selection {
   position: absolute;
   bottom: 0;
-  left: 50%;
-  width: max-content;
-  max-width: 17rem;
-  transform: translateX(-50%) translateY(104%);
+  left: 0;
+  width: 100%;
+  max-width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: center;
-  align-items: center;
+  align-items: flex-start;
   flex-wrap: wrap;
   gap: 0.5rem;
   padding: 0.5rem;
-  background-color: rgba(0,0,0, 0.2);
+  background-color: rgba(0,0,0, 0.6);
+  backdrop-filter: blur(4px);
   z-index: 2;
   cursor: default;
-  max-height: 12rem;
-  overflow-y: auto;
+  height: 100%;
+  overflow-y: scroll;
+  scrollbar-gutter: stable;
+  .list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1rem;
+    max-width: 100%;
+  }
+  span {
+    font-size: 1.5rem;
+    color: #fff;
+  }
   .slot {
     width: 5rem;
     height: 5rem;
@@ -132,5 +148,8 @@ export default defineComponent({
   height: 100%;
   font-size: 4.5rem;
   color: #000;
+  span {
+    transform: translateY(-0.5rem);
+  }
 }
 </style>

src/components/QuestGroup.vue

@@ -83,7 +83,7 @@ h1 {
     grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
     grid-auto-rows: auto;
     gap: 1rem;
-
+    overflow-x: visible;
   }
 }
 </style>

src/components/QuestMissive.vue

@@ -19,7 +19,7 @@
       <button class="slot">
         <AdventurerComponent
             :adventurer="missive.adventurers[0]"
-            :all-adventurers="adventurers"
+            :all-adventurers="notBusyAdventurers"
             @hire-adventurer="(id) => {
                 adventurers[id].busy = true;
                 missive.adventurers[0] = adventurers[id];
@@ -63,6 +63,9 @@ export default defineComponent({
     progressPercentageValue(): string {
       return `${this.missive.progressPoints / this.missive.maxProgress * 100}%`;
     },
+    notBusyAdventurers(): Adventurer[] {
+      return Object.values(this.adventurers).filter(adventurer => !adventurer.busy);
+    },
   },
   props: {
     missive: {
@@ -232,7 +235,6 @@ export default defineComponent({
       background-color: rgba(0, 0, 0, 0.2);
       cursor: pointer;
       border-radius: 0.2rem;
-      position: relative;
     }
   }