add more adventurers

package.json

@@ -1,6 +1,6 @@
 {
   "name": "adventurers-guild",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "private": true,
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -6,6 +6,7 @@ import {RouterLink, RouterView} from 'vue-router'</script>
     <nav>
       <RouterLink to="/">Guild</RouterLink>
       <RouterLink to="/quests">Quests</RouterLink>
+      <RouterLink to="/adventurers">Adventurers</RouterLink>
     </nav>
   </header>
 
@@ -52,8 +53,11 @@ export default defineComponent({
       F: null as null|number,
     },
     adventurers: {
-      "1": new Adventurer("1", "Rincewind", "/img/adventurers/rincewind.png", 2, 2),
+      "rincewind-diskworld": new Adventurer("rincewind-diskworld", "Rincewind", "/img/adventurers/rincewind.png", 2, 2),
-      "2": new Adventurer("2", "Fran", "/img/adventurers/fran.png", 3, 1.5),
+      "fran-sword-isekai": new Adventurer("fran-sword-isekai", "Fran", "/img/adventurers/fran.png", 3, 1.5),
+      "kazuma-konosuba": new Adventurer("kazuma-konosuba", "Kazuma", "/img/adventurers/kazuma.png", 2, 2),
+      "rein-beast-tamer": new Adventurer("rein-beast-tamer", "Rein", "/img/adventurers/rein.png", 2, 2),
+      "momon-overlord": new Adventurer("momon-overlord", "Momon", "/img/adventurers/momon.png", 2, 2),
 
     } as { [key: string]: Adventurer },
     quests: {
@@ -316,6 +320,7 @@ nav {
   flex-direction: row;
   justify-content: center;
   align-items: center;
+  flex-wrap: wrap;
   gap: 1rem;
   padding: 2rem;
   background-size: 200px;

src/router/index.ts

@@ -13,6 +13,11 @@ const router = createRouter({
       path: '/quests',
       name: 'quests',
       component: () => import('../views/QuestView.vue')
+    },
+    {
+      path: '/adventurers',
+      name: 'adventurers',
+      component: () => import('../views/AdventurerView.vue')
     }
   ]
 })

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 }>,