add more adventurers

src/views/AdventurerView.vue

@@ -0,0 +1,98 @@
+<template>
+<div class="adventurer-section">
+  <section class="recruit">
+    <h1>Applying to recruit</h1>
+    <div class="adventurers">
+
+    </div>
+  </section>
+  <section class="collection">
+    <h1>Recruited adventurers</h1>
+    <div class="adventurers">
+      <div class="adventurer-tile" v-for="adventurer in adventurers" :key="adventurer.id">
+        <AdventurerTile class="entry" :adventurer="adventurer" />
+        <b>{{ adventurer.name }}</b>
+      </div>
+    </div>
+  </section>
+</div>
+</template>
+
+<script lang="ts">
+import type {PropType} from "vue";
+import {defineComponent} from "vue";
+import AdventurerTile from "@/components/AdventurerTile.vue";
+import {Adventurer} from "@/classes/Adventurer";
+
+export default defineComponent({
+  name: "RecruitView",
+  components: {AdventurerTile},
+  data() {
+    return {
+      adventurersForHire: [
+        new Adventurer("rincewind-diskworld", "Rincewind", "/img/adventurers/rincewind.png", 2, 2),
+        new Adventurer("fran-sword-isekai", "Fran", "/img/adventurers/fran.png", 3, 1.5),
+        new Adventurer("kazuma-konosuba", "Kazuma", "/img/adventurers/kazuma.png", 2, 2),
+      ] as Array<Adventurer>,
+    }
+  },
+  props: {
+    adventurers: {
+      type: Object as PropType<{ [key: string]: Adventurer }>,
+      default() {
+        return {};
+      },
+    },
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.adventurer-section {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  section {
+    max-width: 1280px;
+    width: 100%;
+    text-align: center;
+    padding-block: 1rem;
+  }
+  h1 {
+    font-size: 2rem;
+    font-weight: bold;
+    margin: 0;
+  }
+  .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;
+      .entry {
+        height: 7rem;
+        width: 7rem;
+      }
+      b {
+        line-height: 1;
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+      }
+    }
+  }
+
+}
+</style>

src/views/HomeView.vue

@@ -3,6 +3,7 @@
     <section class="title">
       <h1>Guild Master</h1>
       <h3>Adventurer's guild management game</h3>
+      <small>v{{version}}</small>
     </section>
     <section class="coffer">
       <p>Coffer: {{guild.gold}} gold</p>
@@ -25,8 +26,15 @@ import {defineComponent} from "vue";
 import type {PropType} from "vue";
 import type {Guild} from "@/classes/Guild";
 
+import {version} from "../../package.json"
+
 export default defineComponent({
   name: "GuildView",
+  data() {
+    return {
+      version: version,
+    }
+  },
   props: {
     guild: {
       type: Object as PropType<Guild>,
@@ -55,6 +63,11 @@ export default defineComponent({
     margin: 0;
     line-height: 0.9;
   }
+  small {
+    font-size: 0.9rem;
+    font-weight: bold;
+    line-height: 0.25;
+  }
 }
 .coffer {
   text-align: center;

src/views/QuestView.vue

@@ -280,13 +280,14 @@ import {defineComponent, type PropType} from "vue";
 import AdventurerComponent from "@/components/AdventurerMiniComponent.vue";
 import type {Adventurer} from "@/classes/Adventurer";
 import type {Quest} from "@/classes/Quest";
+import type {Guild} from "@/classes/Guild";
 
 export default defineComponent({
   name: "GuildView",
   components: {AdventurerComponent},
   props: {
     guild: {
-      type: Object,
+      type: Object as PropType<Guild>,
     },
     adventurers: {
       type: Object as PropType<{ [key: string]: Adventurer }>,