From d30bde5c4d5edc91148f607a6dbaeed57bb64352 Mon Sep 17 00:00:00 2001
From: Annika Merris <me@annikamerris.com>
Date: Sun, 21 Jan 2024 22:14:29 -0500
Subject: [PATCH] More Bug Fixes and Tooltip Adjustments

---
 public/items/fellowPowerItems.json            |  4 +--
 public/items/intimacyPowerItems.json          |  2 +-
 .../BlessingPower/SpecialItemsCard.vue        | 14 +++++++---
 .../BlessingPower/StandardItemsCard.vue       | 28 +++++++++++--------
 .../FellowPower/SpecialItemsCard.vue          | 14 +++++++---
 .../FellowPower/StandardItemsCard.vue         | 14 +++++++---
 .../IntimacyPower/SpecialItemsCard.vue        | 22 ++++-----------
 .../IntimacyPower/StandardItemsCard.vue       | 14 +++++++---
 8 files changed, 66 insertions(+), 46 deletions(-)

diff --git a/public/items/fellowPowerItems.json b/public/items/fellowPowerItems.json
index 42167dd..6249a76 100644
--- a/public/items/fellowPowerItems.json
+++ b/public/items/fellowPowerItems.json
@@ -123,7 +123,7 @@
     "maxItemPower": 50000,
     "rarity": 4,
     "origin": "Wrestling Championship",
-    "tooltip": "A champion's belt memorializing the time in the ring. Used ot increase a Fellow's Power by 20,000 to 50,000."
+    "tooltip": "A champion's belt memorializing the time in the ring. Used to increase a Fellow's Power by 20,000 to 50,000."
   },
   "ed1663c2-aff0-41b4-b5ed-7f86463c1d69": {
     "iconURL": "",
@@ -168,7 +168,7 @@
     "maxItemPower": 8000,
     "rarity": 1,
     "origin": "Muscle Hustle Gym",
-    "tooltip": "A pair of little dumbells. Even a b eginner can lift them easily after a little exerciase. Used to increase a Fellow's Power by 3,000 to 8,000."
+    "tooltip": "A pair of little dumbells. Even a beginner can lift them easily after a little exerciase. Used to increase a Fellow's Power by 3,000 to 8,000."
   },
   "b282b9cb-1802-4563-88a1-e7e267a0bcd4": {
     "iconURL": "",
diff --git a/public/items/intimacyPowerItems.json b/public/items/intimacyPowerItems.json
index 45d6431..32c2e8d 100644
--- a/public/items/intimacyPowerItems.json
+++ b/public/items/intimacyPowerItems.json
@@ -69,7 +69,7 @@
     "maxItemPower": 3,
     "rarity": 1,
     "origin": "Camping Under the Stars",
-    "tooltip": ""
+    "tooltip": "\"The Warrior Star meets the Demon Star again~ Shall their difficult love in past lives be continued?\" Used to increase a Family Member's Intimacy by 1 to 3"
   },
   "b2536feb-7dcb-4cec-93e5-581bc64e693b": {
     "iconURL": "",
diff --git a/src/components/BlessingPower/SpecialItemsCard.vue b/src/components/BlessingPower/SpecialItemsCard.vue
index 8f411e7..94d2da9 100644
--- a/src/components/BlessingPower/SpecialItemsCard.vue
+++ b/src/components/BlessingPower/SpecialItemsCard.vue
@@ -86,10 +86,10 @@ const getColor = computed(() => (rarity: number): string => {
         :headers="headers"
       >
         <template v-slot:item.1.itemName="{ item }">
-          <v-tooltip activator="parent" v-if="item[1].tooltip != undefined">
-            <v-card variant="text" density="compact">
-              <v-card-title>Origin: {{ item[1].origin }}</v-card-title>
-              <v-card-text>{{ item[1].tooltip }}</v-card-text>
+          <v-tooltip activator="parent" v-if="item[1].tooltip != undefined" content-class="custom-tooltip">
+            <v-card variant="text" density="compact" max-width="25vw">
+              <v-card-title class="px-2">Origin: {{ item[1].origin }}</v-card-title>
+              <v-card-text class="px-2" v-if="item[1].tooltip !== ''">{{ item[1].tooltip }}</v-card-text>
             </v-card>
           </v-tooltip>
           <v-chip :color="`${getColor(item[1].rarity)}`">
@@ -134,3 +134,9 @@ const getColor = computed(() => (rarity: number): string => {
     </v-card-item>
   </v-card>
 </template>
+
+<style lang="scss" scoped>
+:global(.custom-tooltip) {
+  padding: 0 !important;
+}
+</style>
diff --git a/src/components/BlessingPower/StandardItemsCard.vue b/src/components/BlessingPower/StandardItemsCard.vue
index e0c0f81..6048dd4 100644
--- a/src/components/BlessingPower/StandardItemsCard.vue
+++ b/src/components/BlessingPower/StandardItemsCard.vue
@@ -69,20 +69,20 @@ const getColor = computed(() => (rarity: number): string => {
       >
         <template v-slot:item.1.iconURL="{ item }">
           <v-card class="my-2" elevation="2" rounded width="41">
-            <v-tooltip activator="parent" v-if="item[1].tooltip != undefined">
-              <v-card variant="text" density="compact">
-                <v-card-title>Origin: {{ item[1].origin }}</v-card-title>
-                <v-card-text>{{ item[1].tooltip }}</v-card-text>
-              </v-card>
-            </v-tooltip>
+          <v-tooltip activator="parent" v-if="item[1].tooltip != undefined" content-class="custom-tooltip">
+            <v-card variant="text" density="compact" max-width="25vw">
+              <v-card-title class="px-2">Origin: {{ item[1].origin }}</v-card-title>
+              <v-card-text class="px-2" v-if="item[1].tooltip !== ''">{{ item[1].tooltip }}</v-card-text>
+            </v-card>
+          </v-tooltip>
             <v-img :src="`/images/${item[1].iconURL}`" height="41" width="41" cover></v-img>
           </v-card>
         </template>
         <template v-slot:item.1.itemName="{ item }">
-          <v-tooltip activator="parent" v-if="item[1].tooltip != undefined">
-            <v-card variant="text" density="compact">
-              <v-card-title>Origin: {{ item[1].origin }}</v-card-title>
-              <v-card-text>{{ item[1].tooltip }}</v-card-text>
+          <v-tooltip activator="parent" v-if="item[1].tooltip != undefined" content-class="custom-tooltip">
+            <v-card variant="text" density="compact" max-width="25vw">
+              <v-card-title class="px-2">Origin: {{ item[1].origin }}</v-card-title>
+              <v-card-text class="px-2" v-if="item[1].tooltip !== ''">{{ item[1].tooltip }}</v-card-text>
             </v-card>
           </v-tooltip>
           <v-chip :color="`${getColor(item[1].rarity)}`">
@@ -104,7 +104,7 @@ const getColor = computed(() => (rarity: number): string => {
           <tfoot>
             <tr>
               <td></td>
-              <td></td>
+              <td class="d-none d-lg-table-cell"></td>
               <td></td>
               <td></td>
               <td class="px-0 text-right font-weight-bold">{{ standardBlessingItemTotal }}</td>
@@ -115,3 +115,9 @@ const getColor = computed(() => (rarity: number): string => {
     </v-card-item>
   </v-card>
 </template>
+
+<style lang="scss" scoped>
+:global(.custom-tooltip) {
+  padding: 0 !important;
+}
+</style>
diff --git a/src/components/FellowPower/SpecialItemsCard.vue b/src/components/FellowPower/SpecialItemsCard.vue
index 6c27fee..7d14515 100644
--- a/src/components/FellowPower/SpecialItemsCard.vue
+++ b/src/components/FellowPower/SpecialItemsCard.vue
@@ -86,10 +86,10 @@ const getColor = computed(() => (rarity: number): string => {
         :headers="headers"
       >
         <template v-slot:item.1.itemName="{ item }">
-          <v-tooltip activator="parent" v-if="item[1].tooltip != undefined">
-            <v-card variant="text" density="compact">
-              <v-card-title>Origin: {{ item[1].origin }}</v-card-title>
-              <v-card-text>{{ item[1].tooltip }}</v-card-text>
+          <v-tooltip activator="parent" v-if="item[1].tooltip != undefined" content-class="custom-tooltip">
+            <v-card variant="text" density="compact" max-width="25vw">
+              <v-card-title class="px-2">Origin: {{ item[1].origin }}</v-card-title>
+              <v-card-text class="px-2" v-if="item[1].tooltip !== ''">{{ item[1].tooltip }}</v-card-text>
             </v-card>
           </v-tooltip>
           <v-chip :color="`${getColor(item[1].rarity)}`">
@@ -134,3 +134,9 @@ const getColor = computed(() => (rarity: number): string => {
     </v-card-item>
   </v-card>
 </template>
+
+<style lang="scss" scoped>
+:global(.custom-tooltip) {
+  padding: 0 !important;
+}
+</style>
diff --git a/src/components/FellowPower/StandardItemsCard.vue b/src/components/FellowPower/StandardItemsCard.vue
index 68771b0..3105092 100644
--- a/src/components/FellowPower/StandardItemsCard.vue
+++ b/src/components/FellowPower/StandardItemsCard.vue
@@ -62,10 +62,10 @@ const getColor = computed(() => (rarity: number): string => {
         :headers="headers"
       >
         <template v-slot:item.1.itemName="{ item }">
-          <v-tooltip activator="parent" v-if="item[1].tooltip != undefined">
-            <v-card variant="text" density="compact">
-              <v-card-title>Origin: {{ item[1].origin }}</v-card-title>
-              <v-card-text>{{ item[1].tooltip }}</v-card-text>
+          <v-tooltip activator="parent" v-if="item[1].tooltip != undefined" content-class="custom-tooltip">
+            <v-card variant="text" density="compact" max-width="25vw">
+              <v-card-title class="px-2">Origin: {{ item[1].origin }}</v-card-title>
+              <v-card-text class="px-2" v-if="item[1].tooltip !== ''">{{ item[1].tooltip }}</v-card-text>
             </v-card>
           </v-tooltip>
           <v-chip :color="`${getColor(item[1].rarity)}`">
@@ -97,3 +97,9 @@ const getColor = computed(() => (rarity: number): string => {
     </v-card-item>
   </v-card>
 </template>
+
+<style lang="scss" scoped>
+:global(.custom-tooltip) {
+  padding: 0 !important;
+}
+</style>
diff --git a/src/components/IntimacyPower/SpecialItemsCard.vue b/src/components/IntimacyPower/SpecialItemsCard.vue
index 59fbcc5..7508405 100644
--- a/src/components/IntimacyPower/SpecialItemsCard.vue
+++ b/src/components/IntimacyPower/SpecialItemsCard.vue
@@ -86,10 +86,10 @@ const getColor = computed(() => (rarity: number): string => {
         :headers="headers"
       >
         <template v-slot:item.1.itemName="{ item }">
-          <v-tooltip activator="parent" v-if="item[1].tooltip != undefined">
-            <v-card variant="text" density="compact">
-              <v-card-title>Origin: {{ item[1].origin }}</v-card-title>
-              <v-card-text>{{ item[1].tooltip }}</v-card-text>
+          <v-tooltip activator="parent" v-if="item[1].tooltip != undefined" content-class="custom-tooltip">
+            <v-card variant="text" density="compact" max-width="25vw">
+              <v-card-title class="px-2">Origin: {{ item[1].origin }}</v-card-title>
+              <v-card-text class="px-2" v-if="item[1].tooltip !== ''">{{ item[1].tooltip }}</v-card-text>
             </v-card>
           </v-tooltip>
           <v-chip :color="`${getColor(item[1].rarity)}`">
@@ -133,17 +133,7 @@ const getColor = computed(() => (rarity: number): string => {
 </template>
 
 <style lang="scss" scoped>
-@use '@/styles/settings.scss';
-.common {
-  background-color: map-get(settings.$green, 'lighten-4');
-}
-.rare {
-  background-color: map-get(settings.$blue, 'lighten-4');
-}
-.epic {
-  background-color: map-get(settings.$purple, 'lighten-4');
-}
-.legendary {
-  background-color: map-get(settings.$amber, 'lighten-4');
+:global(.custom-tooltip) {
+  padding: 0 !important;
 }
 </style>
diff --git a/src/components/IntimacyPower/StandardItemsCard.vue b/src/components/IntimacyPower/StandardItemsCard.vue
index 4b5eb75..be3689d 100644
--- a/src/components/IntimacyPower/StandardItemsCard.vue
+++ b/src/components/IntimacyPower/StandardItemsCard.vue
@@ -62,10 +62,10 @@ const getColor = computed(() => (rarity: number): string => {
         :headers="headers"
       >
         <template v-slot:item.1.itemName="{ item }">
-          <v-tooltip activator="parent" v-if="item[1].tooltip != undefined">
-            <v-card variant="text" density="compact">
-              <v-card-title>Origin: {{ item[1].origin }}</v-card-title>
-              <v-card-text>{{ item[1].tooltip }}</v-card-text>
+          <v-tooltip activator="parent" v-if="item[1].tooltip != undefined" content-class="custom-tooltip">
+            <v-card variant="text" density="compact" max-width="25vw">
+              <v-card-title class="px-2">Origin: {{ item[1].origin }}</v-card-title>
+              <v-card-text class="px-2" v-if="item[1].tooltip !== ''">{{ item[1].tooltip }}</v-card-text>
             </v-card>
           </v-tooltip>
           <v-chip :color="`${getColor(item[1].rarity)}`">
@@ -97,3 +97,9 @@ const getColor = computed(() => (rarity: number): string => {
     </v-card-item>
   </v-card>
 </template>
+
+<style scoped lang="scss">
+:global(.custom-tooltip) {
+  padding: 0 !important;
+}
+</style>