allowed more than 1 recruit to show up

2026-05-12 06:26:59 +00:00 · 2025-05-28 19:52:28 +02:00
parent 85ed1224c0
commit 2cb9221da1
4 changed files with 215 additions and 109 deletions
@@ -0,0 +1,129 @@
+<template>
+  <section class="recruit panel pinned-paper">
+    <h1>Applying adventurers</h1>
+    <div class="adventurers">
+      <div v-for="adventurerForHire in currentlyForHire" :key="adventurerForHire.id">
+        <div class="adventurer-tile">
+          <adventurer-tile class="hire-tile" :adventurer="adventurerForHire"/>
+          <div class="decision">
+          <span
+            title="Hire"
+            @click="hireAdventurer(adventurerForHire)"
+            :class="{disabled: Object.keys(adventurersForHire).length >= guild.adventurerCapacity.getAdventurerCapacity()}"
+          >
+            ✔
+          </span>
+            <span
+              :title="Object.keys(adventurersForHire).length > 0 ? 'Dismiss' : ''"
+              :class="{disabled: Object.keys(adventurersForHire).length <= 0}"
+              @click="dismissAdventurer(adventurerForHire)"
+            >
+            ✗
+          </span>
+          </div>
+        </div>
+
+      </div>
+      <div v-if="Object.keys(adventurersForHire).length == 0">
+        <span>Noone applied as of now. Check back later!</span>
+      </div>
+
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+
+import {defineComponent, type PropType} from "vue";
+import AdventurerTile from "@/components/AdventurerTile.vue";
+import type {Guild} from "@/classes/Guild";
+import type {Adventurer} from "@/classes/Adventurer";
+
+export default defineComponent({
+  name: "RecruitView",
+  components: {AdventurerTile},
+  computed: {
+    currentlyForHire(): Array<Adventurer> {
+      return Object.values(this.adventurersForHire);
+    },
+  },
+  methods: {
+    hireAdventurer(adventurer: Adventurer): void {
+      if (Object.keys(this.adventurersForHire).length >= this.guild.adventurerCapacity.getAdventurerCapacity()) return;
+      this.$emit("hireAdventurer", adventurer);
+    },
+    dismissAdventurer(adventurer: Adventurer) {
+      if (Object.keys(this.adventurersForHire).length <= 0) return;
+      this.$emit("dismissAdventurer", adventurer);
+    }
+  },
+  props: {
+    guild: {
+      type: Object as PropType<Guild>,
+      required: true,
+    },
+    adventurersForHire: {
+      type: Object as PropType<{ [key: string]: Adventurer }>,
+      required: true,
+    },
+  },
+  emits: ["dismissAdventurer", "hireAdventurer"],
+})
+</script>
+
+<style scoped lang="scss">
+.adventurers {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+
+  .adventurer-tile {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: 0.25rem;
+    font-size: 1.1rem;
+    cursor: pointer;
+
+    .entry {
+      height: 7rem;
+      width: 7rem;
+    }
+
+    b {
+      line-height: 1;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+    }
+  }
+}
+
+.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);
+      cursor: default;
+    }
+  }
+}
+</style>