adventurer recruitment

src/App.vue

@@ -14,8 +14,10 @@ import {RouterLink, RouterView} from 'vue-router'</script>
         :guild="guild"
         :adventurers="adventurers"
         :quests="missives"
+        :lastRecruitTime="lastRecruitHandled"
         @finalizeQuest="finalizeQuest($event)"
         @wipeSave="resetSave()"
+        @recruitActionTaken="lastRecruitHandled = Number(new Date())"
     />
 </template>
 
@@ -52,6 +54,7 @@ export default defineComponent({
       E: null as null|number,
       F: null as null|number,
     },
+    lastRecruitHandled: null as null|number,
     adventurers: {
     } as { [key: string]: Adventurer },
     quests: {
@@ -153,6 +156,7 @@ export default defineComponent({
         adventurers: this.adventurers,
         missives: this.missives,
         lastQuestGot: this.lastQuestGot,
+        lastRecruitAction: this.lastRecruitHandled,
       }));
     },
     loadGame() {
@@ -191,6 +195,8 @@ export default defineComponent({
        }
 
        this.missives = missives;
+
+       this.lastRecruitHandled = saveData.lastRecruitAction;
     },
     resetSave() {
       if (!confirm("You are about to wipe your save file. Are you sure?")) return;

src/components/AdventurerMiniComponent.vue

@@ -72,11 +72,13 @@ export default defineComponent({
   bottom: 0;
   left: 50%;
   width: max-content;
+  max-width: 16rem;
   transform: translateX(-50%) translateY(104%);
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
+  flex-wrap: wrap;
   gap: 0.5rem;
   padding: 0.5rem;
   background-color: rgba(0,0,0, 0.2);

src/views/AdventurerView.vue

@@ -1,11 +1,30 @@
 <template>
 <div class="adventurer-section">
   <section class="recruit">
-    <h1>Applying to recruit</h1>
+    <h1>Applying adventurers</h1>
     <div class="adventurers">
       <div v-if="currentlyForHire">
-        <adventurer-tile :adventurer="currentlyForHire"/>
+        <adventurer-tile class="hire-tile" :adventurer="currentlyForHire"/>
+        <div class="decision">
+          <span
+              title="Hire"
+              @click="hireAdventurer(currentlyForHire)"
+          >
+            ✔
+          </span>
+          <span
+              title="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>
   <section class="collection">
@@ -48,6 +67,12 @@ export default defineComponent({
         return {};
       },
     },
+    lastRecruitTime: {
+      type: Number as PropType<null|number>,
+      default() {
+        return null;
+      }
+    },
   },
   methods: {
     getRandomAdventurer(): Adventurer|null {
@@ -68,12 +93,47 @@ export default defineComponent({
       }
 
       this.currentlyForHire = adventurer;
+      window.localStorage.setItem("currentlyForHire", adventurer.id);
 
+    },
+    hireAdventurer(adventurer: Adventurer): void {
+      this.adventurers[adventurer.id] = adventurer;
+      this.currentlyForHire = null;
+      window.localStorage.removeItem("currentlyForHire");
+      this.$emit("recruitActionTaken", adventurer);
+    },
+    dismissAdventurer() {
+      this.currentlyForHire = null;
+      this.$emit("recruitActionTaken", null);
+      window.localStorage.removeItem("currentlyForHire");
     }
   },
   mounted() {
-    this.currentlyForHire = this.adventurersForHire[0]
-  }
+    if (Object.keys(this.adventurers).length <= 0) {
+      this.currentlyForHire = this.adventurersForHire[0];
+      window.localStorage.setItem("currentlyForHire", this.adventurersForHire[0].id);
+      return;
+    }
+
+    const savedCurrentForHire = window.localStorage.getItem("currentlyForHire");
+    if (savedCurrentForHire !== null) {
+      for (const id in this.adventurersForHire) {
+        const adventurer = this.adventurersForHire[id];
+        if (adventurer.id === savedCurrentForHire) {
+          this.currentlyForHire = adventurer;
+          return;
+        }
+      }
+    }
+
+    const now = Number(new Date());
+
+    if (now - this.lastRecruitTime >= 1000 * 60 * 30 && this.currentlyForHire === null) {
+      this.getNewAdventurerForHire();
+    }
+
+  },
+  emits: ["recruitActionTaken"]
 
 });
 </script>
@@ -124,6 +184,27 @@ export default defineComponent({
       }
     }
   }
+  .decision {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    font-size: 2rem;
+    gap: 1rem;
+    span {
+      cursor: pointer;
+      &:hover {
+        color: #fff;
+      }
+      &.disabled {
+        color: rgba(0,0,0, 0.5)
+      }
+    }
+  }
+  .hire-tile {
+    width: 8rem;
+    height: 8rem;
+  }
 
 }
 </style>

src/views/QuestView.vue

@@ -301,11 +301,17 @@ export default defineComponent({
         return {};
       },
     },
+    lastRecruitTime: {
+      type: Number as PropType<null|number>,
+      default() {
+        return null;
+      }
+    },
   },
   data() {
     return {};
   },
-  emits: [ 'finalizeQuest', 'wipeSave' ],
+  emits: [ 'finalizeQuest', 'wipeSave', 'recruitActionTaken'],
 })
 </script>