prestige feature

src/components/AdventurerDetails.vue

@@ -13,6 +13,19 @@
       <p>Exp: {{ adventurer.exp }} / {{ adventurer.getNextLevelExpRequirement() }}</p>
       <p>DPS: {{ adventurer.getDPS().toPrecision(2) }}</p>
     </div>
+    <div class="adventurer-upgrades">
+      <button
+          :disabled="!adventurer.canPrestigeUp()"
+          :title="!adventurer.canPrestigeUp() ? 'Adventurer needs to be at max level to prestige up' : ''"
+          @click="() => {
+            if (adventurer === null) return;
+            if (!adventurer.canPrestigeUp()) return;
+            adventurer.prestigeUp();
+          }"
+      >
+        Prestige up
+      </button>
+    </div>
 
   </dialog>
 </template>
@@ -73,6 +86,7 @@ export default defineComponent({
     background: transparent;
     border: none;
     font-family: 'EB Garamond', serif;
+    transition: color 0.05s linear;
 
     &:hover {
       color: #ff0000;

src/views/AdventurerView.vue

@@ -35,8 +35,10 @@
       </div>
     </section>
     <section class="collection panel pinned-paper">
-      <h1>Recruited adventurers ({{ Object.keys(adventurers).length }} /
+      <h1>
-        {{ guild.adventurerCapacity.getAdventurerCapacity() }})</h1>
+        Recruited adventurers ({{ Object.keys(adventurers).length }} / {{ guild.adventurerCapacity.getAdventurerCapacity() }})
+      </h1>
+      <small>Click an adventurer to see details about them</small>
       <div class="adventurers">
         <div
             class="adventurer-tile"
@@ -134,6 +136,14 @@ export default defineComponent({
     margin: 0;
   }
 
+  .collection {
+    small {
+      font-size: 1rem;
+      display: block;
+      margin-bottom: 0.5rem;
+    }
+  }
+
   .adventurers {
     display: flex;
     flex-direction: row;