allowed more than 1 recruit to show up

src/views/AdventurerView.vue

@@ -1,50 +1,29 @@
 <template>
   <div class="adventurer-section">
     <AdventurerDetails
-        :adventurer="selectedAdventurer"
-        v-if="selectedAdventurer !== null"
-        @closeButtonClicked="selectedAdventurer = null"
+      :adventurer="selectedAdventurer"
+      v-if="selectedAdventurer !== null"
+      @closeButtonClicked="selectedAdventurer = null"
 
     />
-    <section class="recruit panel pinned-paper">
-      <h1>Applying adventurers</h1>
-      <div class="adventurers">
-        <div v-if="adventurerForHire">
-          <adventurer-tile class="hire-tile" :adventurer="adventurerForHire"/>
-          <div class="decision">
-          <span
-              title="Hire"
-              @click="hireAdventurer()"
-              :class="{disabled: Object.keys(adventurers).length >= guild.adventurerCapacity.getAdventurerCapacity()}"
-          >
-            ✔
-          </span>
-            <span
-                :title="Object.keys(adventurers).length > 0 ? 'Dismiss' : ''"
-                :class="{disabled: Object.keys(adventurers).length <= 0}"
-                @click="dismissAdventurer()"
-            >
-            ✗
-          </span>
-          </div>
-        </div>
-        <div v-else>
-          <span>Noone applied as of now. Check back later!</span>
-        </div>
-
-      </div>
-    </section>
+    <AdventurerRecruitment
+      :guild="guild"
+      :adventurers-for-hire="adventurersForHire"
+      @hireAdventurer="$emit('hireAdventurer', $event)"
+      @dismissAdventurer="$emit('dismissAdventurer', $event)"
+    />
     <section class="collection panel pinned-paper">
       <h1>
-        Recruited adventurers ({{ Object.keys(adventurers).length }} / {{ guild.adventurerCapacity.getAdventurerCapacity() }})
+        Recruited adventurers ({{ Object.keys(adventurers).length }} /
+        {{ guild.adventurerCapacity.getAdventurerCapacity() }})
       </h1>
       <small>Click an adventurer to see details about them</small>
       <div class="adventurers">
         <div
-            class="adventurer-tile"
-            v-for="adventurer in adventurers"
-            :key="adventurer.id"
-            @click="selectedAdventurer = adventurer"
+          class="adventurer-tile"
+          v-for="adventurer in adventurers"
+          :key="adventurer.id"
+          @click="selectedAdventurer = adventurer"
         >
           <AdventurerTile class="entry" :adventurer="adventurer"/>
           <b>{{ adventurer.name }}</b>
@@ -61,14 +40,13 @@ import AdventurerTile from "@/components/AdventurerTile.vue";
 import type {Adventurer} from "@/classes/Adventurer";
 import type {Guild} from "@/classes/Guild";
 import AdventurerDetails from "@/components/AdventurerDetails.vue";
+import AdventurerRecruitment from "@/components/AdventurerRecruitment.vue";
 
 export default defineComponent({
-  name: "RecruitView",
-  components: {AdventurerDetails, AdventurerTile},
+  name: "AdventurerView",
+  components: {AdventurerDetails, AdventurerTile, AdventurerRecruitment},
   data: () => {
     return {
-      currentlyForHire: null as Adventurer | null,
-      adventurersForHire: [] as Array<Adventurer>,
       selectedAdventurer: null as Adventurer | null,
     }
   },
@@ -81,27 +59,14 @@ export default defineComponent({
       type: Object as PropType<{ [key: string]: Adventurer }>,
       required: true,
     },
-    adventurerForHire: {
-      type: Object as PropType<Adventurer | null>,
+    adventurersForHire: {
+      type: Object as PropType<{ [key: string]: Adventurer }>,
       default() {
-        return null;
+        return {};
       }
     },
   },
-  methods: {
-    hireAdventurer(): void {
-      if (Object.keys(this.adventurers).length >= this.guild.adventurerCapacity.getAdventurerCapacity()) return;
-      this.$emit("recruitActionTaken", this.adventurerForHire);
-    },
-    dismissAdventurer() {
-      if (Object.keys(this.adventurers).length <= 0) return;
-      this.$emit("recruitActionTaken", null);
-    }
-  },
-  async mounted() {
-
-  },
-  emits: ["recruitActionTaken"]
+  emits: ["hireAdventurer", "dismissAdventurer"],
 
 });
 </script>