From 4619a39706705473ec6a7f4456cad4ce11c8ea34 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Fri, 17 Feb 2023 07:28:45 -0600
Subject: [PATCH] Add tooltips to characters

---
 src/data/CharacterSlot.vue | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/data/CharacterSlot.vue b/src/data/CharacterSlot.vue
index b2b6711..0e0a4c3 100644
--- a/src/data/CharacterSlot.vue
+++ b/src/data/CharacterSlot.vue
@@ -1,11 +1,20 @@
 <template>
-    <div class="character" :class="{ selected }">
-        <span class="character-display">{{ character?.type }}</span>
-    </div>
+    <Tooltip
+        :display="character ? characters[character.type].nickname : ''"
+        :direction="Direction.Up"
+    >
+        <div class="character" :class="{ selected, empty: character == null }">
+            <span class="character-display">{{ character?.type }}</span>
+        </div>
+    </Tooltip>
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{
+import Tooltip from "features/tooltips/Tooltip.vue";
+import { Direction } from "util/common";
+import { characters } from "./projEntry";
+
+defineProps<{
     character?: {
         type: string;
         relevancy: number;
@@ -21,8 +30,12 @@ const props = defineProps<{
     position: relative;
     margin: 50px;
     justify-content: center;
-    cursor: pointer;
     user-select: none;
+    display: flex;
+}
+
+.character:not(.empty) {
+    cursor: pointer;
 }
 
 .character-display {