exit button for adventurer details popup

src/components/AdventurerDetails.vue

@@ -1,17 +1,18 @@
 <template>
   <dialog ref="modal" class="adventurer-details" v-if="adventurer">
+    <button class="close" @click="$emit('closeButtonClicked')">✗</button>
 
-      <div class="adventurer-portrait">
+    <div class="adventurer-portrait">
-        <img :src="adventurer.portrait" alt="" draggable="false"/>
+      <img :src="adventurer.portrait" alt="" draggable="false"/>
-      </div>
+    </div>
-      <span class="name">{{ adventurer.name }}</span>
+    <span class="name">{{ adventurer.name }}</span>
-      <div class="adventurer-data">
+    <div class="adventurer-data">
-        <p>Level: {{ adventurer.level }} / {{ adventurer.getMaxLevel() }}</p>
+      <p>Level: {{ adventurer.level }} / {{ adventurer.getMaxLevel() }}</p>
-        <p>Prestige level: {{ adventurer.prestige }}</p>
+      <p>Prestige level: {{ adventurer.prestige }}</p>
 
-        <p>Exp: {{ adventurer.exp }} / {{ adventurer.getNextLevelExpRequirement()}}</p>
+      <p>Exp: {{ adventurer.exp }} / {{ adventurer.getNextLevelExpRequirement() }}</p>
-        <p>DPS: {{ adventurer.getDPS().toPrecision(2) }}</p>
+      <p>DPS: {{ adventurer.getDPS().toPrecision(2) }}</p>
-      </div>
+    </div>
 
   </dialog>
 </template>
@@ -24,16 +25,16 @@ export default defineComponent({
   name: "AdventurerDetails",
   props: {
     adventurer: {
-      type: Object as PropType<Adventurer|null>,
+      type: Object as PropType<Adventurer | null>,
       default() {
-        return null as Adventurer|null;
+        return null as Adventurer | null;
       },
       required: true,
     },
   },
   mounted() {
-      const refs = this.$refs as any;
+    const refs = this.$refs as any;
-      refs.modal.showModal();
+    refs.modal.showModal();
   },
 
 });
@@ -42,6 +43,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .adventurer-details {
   display: flex;
+  position: absolute;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -52,19 +54,51 @@ export default defineComponent({
   background-position: center;
   background-size: cover;
   user-select: none;
+
   &::backdrop {
     background-color: rgba(0, 0, 0, 0.5);
   }
+
+  .close {
+    position: absolute;
+    top: 0.25rem;
+    right: 0.5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 3rem;
+    margin: 0;
+    cursor: pointer;
+    color: #ab0707;
+    background: transparent;
+    border: none;
+    font-family: 'EB Garamond', serif;
+
+    &:hover {
+      color: #ff0000;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: 2px solid #ff0000;
+    }
+  }
+
   .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;
@@ -72,6 +106,7 @@ export default defineComponent({
     font-weight: bold;
     width: 100%;
   }
+
   .adventurer-data {
     display: flex;
     flex-direction: row;
@@ -80,6 +115,7 @@ export default defineComponent({
     flex-wrap: wrap;
     font-size: 1.2rem;
     width: 100%;
+
     & > * {
       margin: 0;
       width: calc(50% - 1rem);

src/views/AdventurerView.vue

@@ -3,6 +3,7 @@
     <AdventurerDetails
         :adventurer="selectedAdventurer"
         v-if="selectedAdventurer !== null"
+        @closeButtonClicked="selectedAdventurer = null"
 
     />
     <section class="recruit panel pinned-paper">
@@ -85,7 +86,7 @@ export default defineComponent({
       required: true,
     },
     adventurerForHire: {
-      type: Object as PropType<Adventurer|null>,
+      type: Object as PropType<Adventurer | null>,
       default() {
         return null;
       }
@@ -148,6 +149,7 @@ export default defineComponent({
       flex-direction: column;
       gap: 0.25rem;
       font-size: 1.1rem;
+      cursor: pointer;
 
       .entry {
         height: 7rem;