More Styling and Added Tooltips

src/components/BlessingPower/SpecialItemsCard.vue

@@ -86,6 +86,12 @@ 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-card>
+          </v-tooltip>
           <v-chip :color="`${getColor(item[1].rarity)}`">
             {{ item[1].itemName }}
           </v-chip>

src/components/BlessingPower/StandardItemsCard.vue

@@ -1,19 +1,25 @@
 <script setup lang="ts">
 import { usePowerItems } from '@/stores/powerItems'
 import { storeToRefs } from 'pinia'
-import { computed, ref } from 'vue';
+import { computed, ref } from 'vue'
 
 const { standardBlessingItems, standardBlessingItemTotal } = storeToRefs(usePowerItems())
 const headers = ref([
   {
-    title: 'Name',
+    title: '',
     align: 'start',
+    sortable: false,
+    value: '1.iconURL'
+  },
+  {
+    title: 'Name',
+    align: ' d-none d-lg-table-cell start',
     sortable: true,
     value: '1.itemName'
   },
   {
     title: 'Power',
-    align: 'end',
+    align: ' d-none d-lg-table-cell',
     sortable: true,
     key: '1.minItemPower'
   },
@@ -38,7 +44,6 @@ const sortBy = ref([
 ])
 
 const getColor = computed(() => (rarity: number): string => {
-  console.log('getting rarity')
   if (rarity === 4) {
     return 'amber'
   } else if (rarity === 3) {
@@ -62,7 +67,24 @@ const getColor = computed(() => (rarity: number): string => {
         :items="[...standardBlessingItems.entries()]"
         :headers="headers"
       >
+        <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-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-card>
+          </v-tooltip>
           <v-chip :color="`${getColor(item[1].rarity)}`">
             {{ item[1].itemName }}
           </v-chip>
@@ -84,6 +106,7 @@ const getColor = computed(() => (rarity: number): string => {
               <td></td>
               <td></td>
               <td></td>
+              <td></td>
               <td class="px-0 text-right font-weight-bold">{{ standardBlessingItemTotal }}</td>
             </tr>
           </tfoot>

src/components/ChangeLogEntry.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const props = defineProps({
+    date: {
+        type: String,
+        required: true
+    },
+    entries: {
+        type: Array<String>,
+        required: true
+    }
+})
+</script>
+
+<template>
+  <v-sheet class="py-1 px-4">
+    <div class="v-list-item-title">
+        {{ props.date }}
+    </div>
+    <div v-for="(cur, idx) in entries" :key="idx" class="v-list-item-subtitle">
+        <p>{{ cur }}</p>
+    </div>
+  </v-sheet>
+</template>

src/components/FellowPower/SpecialItemsCard.vue

@@ -86,6 +86,12 @@ 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-card>
+          </v-tooltip>
           <v-chip :color="`${getColor(item[1].rarity)}`">
             {{ item[1].itemName }}
           </v-chip>

src/components/FellowPower/StandardItemsCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { usePowerItems } from '@/stores/powerItems'
 import { storeToRefs } from 'pinia'
-import { computed, ref } from 'vue';
+import { computed, ref } from 'vue'
 
 const { standardFellowItems, standardFellowItemTotal } = storeToRefs(usePowerItems())
 const headers = ref([
@@ -13,7 +13,7 @@ const headers = ref([
   },
   {
     title: 'Power',
-    align: 'end',
+    align: ' d-none d-lg-table-cell',
     sortable: true,
     key: '1.minItemPower'
   },
@@ -38,7 +38,6 @@ const sortBy = ref([
 ])
 
 const getColor = computed(() => (rarity: number): string => {
-  console.log('getting rarity')
   if (rarity === 4) {
     return 'amber'
   } else if (rarity === 3) {
@@ -63,6 +62,12 @@ 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-card>
+          </v-tooltip>
           <v-chip :color="`${getColor(item[1].rarity)}`">
             {{ item[1].itemName }}
           </v-chip>

src/components/IntimacyPower/SpecialItemsCard.vue

@@ -86,6 +86,12 @@ 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-card>
+          </v-tooltip>
           <v-chip :color="`${getColor(item[1].rarity)}`">
             {{ item[1].itemName }}
           </v-chip>

src/components/IntimacyPower/StandardItemsCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { usePowerItems } from '@/stores/powerItems'
 import { storeToRefs } from 'pinia'
-import { computed, ref } from 'vue';
+import { computed, ref } from 'vue'
 
 const { standardIntimacyItems, standardIntimacyItemTotal } = storeToRefs(usePowerItems())
 const headers = ref([
@@ -13,7 +13,7 @@ const headers = ref([
   },
   {
     title: 'Power',
-    align: 'end',
+    align: ' d-none d-lg-table-cell',
     sortable: true,
     key: '1.minItemPower'
   },
@@ -62,6 +62,12 @@ 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-card>
+          </v-tooltip>
           <v-chip :color="`${getColor(item[1].rarity)}`">
             {{ item[1].itemName }}
           </v-chip>

src/types/PowerItem.ts

@@ -5,4 +5,6 @@ export type PowerItem = {
   maxItemPower: number
   owned: number
   rarity: number
+  origin: string
+  tooltip: string
 }

src/views/HomeView.vue

@@ -1,4 +1,14 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import ChangeLogEntry from '@/components/ChangeLogEntry.vue'
+import { ref } from 'vue'
+
+const entries20240120 = ref([
+  'Added text to the landing page',
+  'Cleaned up some styling across the site',
+  'Added a default sort to all of the tables',
+  'Added a couple of icons, and started working on adding tooltips'
+])
+</script>
 
 <template>
   <v-sheet class="flex-fill pa-2">
@@ -36,9 +46,7 @@
         </v-list-item>
         <v-list-item>
           <v-list-item-title>Missing Icons</v-list-item-title>
-          <v-list-item-subtitle>
-            I'd love to add icons for everything
-          </v-list-item-subtitle>
+          <v-list-item-subtitle> I'd love to add icons for everything </v-list-item-subtitle>
         </v-list-item>
         <v-list-item>
           <v-list-item-title>Sorting and Grouping</v-list-item-title>
@@ -50,7 +58,7 @@
     </v-sheet>
     <v-sheet :elevation="1" class="ma-2 my-4">
       <h2>Changelog</h2>
-      <v-list lines="two">
+      <v-list>
         <v-list-item>
           <v-list-item-title>2024-01-16</v-list-item-title>
           <v-list-item-subtitle>
@@ -69,23 +77,24 @@
             <p>First pass that I'm comfortable letting other people see</p>
           </v-list-item-subtitle>
         </v-list-item>
-        <v-list-item>
-          <v-list-item-title>2024-01-21</v-list-item-title>
-          <v-list-item-subtitle>
-            <p>Added text to the landing page</p>
-            <p>Cleaned up some styling across the site</p>
-            <p>Added a default sort to all of the tables</p>
-          </v-list-item-subtitle>
-        </v-list-item>
+        <ChangeLogEntry date="2024-01-20" :entries="entries20240120"> </ChangeLogEntry>
       </v-list>
     </v-sheet>
     <v-sheet :elevation="1" class="ma-2 my-4">
       <h2>Thanks</h2>
       <p>
         Special thanks to <span class="font-weight-bold">@marstache</span> from
-        <span class="font-weight-bold">S-183</span> for sharing his version of this in Google Sheets
+        <span class="font-weight-bold">S-183</span> for sharing her version of this in Google Sheets
         and inspiring me to create this.
       </p>
+      <p>
+        Thanks to <span class="font-weight-bold">@kathinja</span> for her assistance with flavor
+        text and proof reading.
+      </p>
+      <p>
+        Thanks <span class="font-weight-bold">@werewaffle</span> for all of his help with
+        proofreading and design.
+      </p>
     </v-sheet>
   </v-sheet>
 </template>