popup window with adventurer details

src/components/AdventurerDetails.vue

@@ -0,0 +1,91 @@
+<template>
+  <dialog ref="modal" class="adventurer-details" v-if="adventurer">
+
+      <div class="adventurer-portrait">
+        <img :src="adventurer.portrait" alt="" draggable="false"/>
+      </div>
+      <span class="name">{{ adventurer.name }}</span>
+      <div class="adventurer-data">
+        <p>Level: {{ adventurer.level }} / {{ adventurer.getMaxLevel() }}</p>
+        <p>Prestige level: {{ adventurer.prestige }}</p>
+
+        <p>Exp: {{ adventurer.exp }} / {{ adventurer.getNextLevelExpRequirement()}}</p>
+        <p>DPS: {{ adventurer.getDPS().toPrecision(2) }}</p>
+      </div>
+
+  </dialog>
+</template>
+
+<script lang="ts">
+import type {Adventurer} from "@/classes/Adventurer";
+import {defineComponent, type PropType} from "vue";
+
+export default defineComponent({
+  name: "AdventurerDetails",
+  props: {
+    adventurer: {
+      type: Object as PropType<Adventurer|null>,
+      default() {
+        return null as Adventurer|null;
+      },
+      required: true,
+    },
+  },
+  mounted() {
+      const refs = this.$refs as any;
+      refs.modal.showModal();
+  },
+
+});
+</script>
+
+<style lang="scss" scoped>
+.adventurer-details {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  min-height: 10rem;
+  max-width: 45rem;
+  background-image: url("/img/background/paper/small_tile_paper.png");
+  background-position: center;
+  background-size: cover;
+  user-select: none;
+  &::backdrop {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .adventurer-portrait {
+    width: 100%;
+    max-width: 15rem;
+    aspect-ratio: 1/1;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+  .name {
+    display: flex;
+    justify-content: center;
+    font-size: 2rem;
+    font-weight: bold;
+    width: 100%;
+  }
+  .adventurer-data {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    font-size: 1.2rem;
+    width: 100%;
+    & > * {
+      margin: 0;
+      width: calc(50% - 1rem);
+      text-align: center;
+      padding-inline: 0.5rem;
+    }
+  }
+}
+</style>

src/views/AdventurerView.vue

@@ -1,5 +1,10 @@
 <template>
   <div class="adventurer-section">
+    <AdventurerDetails
+        :adventurer="selectedAdventurer"
+        v-if="selectedAdventurer !== null"
+
+    />
     <section class="recruit panel pinned-paper">
       <h1>Applying adventurers</h1>
       <div class="adventurers">
@@ -32,7 +37,12 @@
       <h1>Recruited adventurers ({{ Object.keys(adventurers).length }} /
         {{ guild.adventurerCapacity.getAdventurerCapacity() }})</h1>
       <div class="adventurers">
-        <div class="adventurer-tile" v-for="adventurer in adventurers" :key="adventurer.id">
+        <div
+            class="adventurer-tile"
+            v-for="adventurer in adventurers"
+            :key="adventurer.id"
+            @click="selectedAdventurer = adventurer"
+        >
           <AdventurerTile class="entry" :adventurer="adventurer"/>
           <b>{{ adventurer.name }}</b>
         </div>
@@ -46,16 +56,17 @@ import type {PropType} from "vue";
 import {defineComponent} from "vue";
 import AdventurerTile from "@/components/AdventurerTile.vue";
 import type {Adventurer} from "@/classes/Adventurer";
-import {loadAdventurersForHire} from "@/GameData";
 import type {Guild} from "@/classes/Guild";
+import AdventurerDetails from "@/components/AdventurerDetails.vue";
 
 export default defineComponent({
   name: "RecruitView",
-  components: {AdventurerTile},
+  components: {AdventurerDetails, AdventurerTile},
   data: () => {
     return {
       currentlyForHire: null as Adventurer | null,
       adventurersForHire: [] as Array<Adventurer>,
+      selectedAdventurer: null as Adventurer | null,
     }
   },
   props: {