Many Changes

Added a 'default' image for spots where one is missing. Not the best solution, but it looks better on the site.
Cleaned up my code to avoid some duplication.
Added better 'Select All' logic to the event filter.

public/items/blessingPowerItems.json

@@ -20,7 +20,7 @@
       "isEventItem": false
   },
   "ddd29671-ca7f-4132-8784-80346e154059": {
-      "iconURL": "",
+      "iconURL": "isl_logo.png",
       "itemName": "Blessing Power Gachapon",
       "minItemPower": 10,
       "maxItemPower": 30,
@@ -30,7 +30,7 @@
       "isEventItem": true
   },
   "c1e029ff-b82c-48bd-a1f1-ea6291fad948": {
-      "iconURL": "",
+      "iconURL": "isl_logo.png",
       "itemName": "Mandrake",
       "minItemPower": 1,
       "maxItemPower": 3,
@@ -40,7 +40,7 @@
       "isEventItem": true
   },
   "52cd4a48-ff8a-4493-8030-b4e7754cd227": {
-      "iconURL": "",
+      "iconURL": "isl_logo.png",
       "itemName": "Muddled Mushroom",
       "minItemPower": 2,
       "maxItemPower": 5,
@@ -50,7 +50,7 @@
       "isEventItem": true
   },
   "636b7384-1389-4012-933c-9063baa7a38d": {
-      "iconURL": "",
+      "iconURL": "isl_logo.png",
       "itemName": "Grassy Bunny",
       "minItemPower": 3,
       "maxItemPower": 6,
@@ -60,7 +60,7 @@
       "isEventItem": true
   },
   "2563b5f8-8fd5-4795-af86-33200605cf3e": {
-      "iconURL": "",
+      "iconURL": "isl_logo.png",
       "itemName": "Chirping Chick",
       "minItemPower": 4,
       "maxItemPower": 10,
@@ -70,7 +70,7 @@
       "isEventItem": true
   },
   "54e9bcf5-f1a5-4350-a75d-88af02b4fc13": {
-      "iconURL": "",
+      "iconURL": "isl_logo.png",
       "itemName": "Gorgeous Horse",
       "minItemPower": 5,
       "maxItemPower": 16,
@@ -80,7 +80,7 @@
       "isEventItem": true
   },
   "e736d2b9-a8ec-4a4e-a721-24880c8a6038": {
-      "iconURL": "",
+      "iconURL": "isl_logo.png",
       "itemName": "Blooming Fox",
       "minItemPower": 7,
       "maxItemPower": 24,
@@ -90,7 +90,7 @@
       "isEventItem": true
   },
   "9fb7f9ba-e7ed-4e99-b161-386f48299443": {
-      "iconURL": "",
+      "iconURL": "isl_logo.png",
       "itemName": "Frozen Dragon",
       "minItemPower": 10,
       "maxItemPower": 32,
@@ -100,7 +100,7 @@
       "isEventItem": true
   },
   "e2472929-1218-4cd6-a73b-b783c17bbc31": {
-      "iconURL": "",
+      "iconURL": "isl_logo.png",
       "itemName": "Flaming Lion",
       "minItemPower": 14,
       "maxItemPower": 48,
@@ -110,7 +110,7 @@
       "isEventItem": true
   },
   "0e21a6ea-8262-44f7-91c3-0c51ace7613f": {
-      "iconURL": "",
+      "iconURL": "isl_logo.png",
       "itemName": "Touno Souvenir 1",
       "minItemPower": 5,
       "maxItemPower": 5,
@@ -120,7 +120,7 @@
       "isEventItem": true
   },
   "700ffd61-c0bf-4f41-abd1-b6fd74a645bb": {
-      "iconURL": "",
+      "iconURL": "isl_logo.png",
       "itemName": "Touno Souvenir 2",
       "minItemPower": 10,
       "maxItemPower": 10,

public/items/fellowPowerItems.json

@@ -1,6 +1,6 @@
 {
   "1f7aff96-030d-4007-9a70-82db7a8be3e3": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Contestant Portrait (Wolf)",
     "minItemPower": 15000,
     "maxItemPower": 40000,
@@ -10,7 +10,7 @@
     "isEventItem": true
   },
   "2006c92e-8e32-4c9f-a913-3b2d1ed8dea0": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Potion of Bravery",
     "minItemPower": 800,
     "maxItemPower": 800,
@@ -20,7 +20,7 @@
     "isEventItem": false
   },
   "30d05d98-a615-4e3a-94da-8aa6e4ad03a9": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Basic Elixir",
     "minItemPower": 3000,
     "maxItemPower": 3000,
@@ -30,7 +30,7 @@
     "isEventItem": false
   },
   "3eccaaac-5afe-415a-ac8f-55df213cf015": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Potion of Freedom",
     "minItemPower": 800,
     "maxItemPower": 800,
@@ -40,7 +40,7 @@
     "isEventItem": false
   },
   "68a7a68a-2123-4a8e-b64d-9dbdf0637521": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Potion of Erudition",
     "minItemPower": 800,
     "maxItemPower": 800,
@@ -50,7 +50,7 @@
     "isEventItem": false
   },
   "7075da2f-a617-42a1-b142-fe2401ad87ec": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Potion of Inspiration",
     "minItemPower": 800,
     "maxItemPower": 800,
@@ -60,7 +60,7 @@
     "isEventItem": false
   },
   "762a2775-ca50-4c13-8797-2f03b045ed10": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Contestant Portrait (Lion)",
     "minItemPower": 10000,
     "maxItemPower": 25000,
@@ -70,7 +70,7 @@
     "isEventItem": true
   },
   "9c95396d-e5d8-4f7d-9d37-1469e7dc0ee1": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Signed Towel (Yellow)",
     "minItemPower": 4500,
     "maxItemPower": 10000,
@@ -80,7 +80,7 @@
     "isEventItem": true
   },
   "a351a27b-765b-46b5-95fc-99c47e63176d": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Potion of Diligence",
     "minItemPower": 800,
     "maxItemPower": 800,
@@ -90,7 +90,7 @@
     "isEventItem": false
   },
   "a44b763b-833b-49d0-91d6-e5fcb8c6ce7c": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Signed Handkerchief (Yellow)",
     "minItemPower": 2000,
     "maxItemPower": 5000,
@@ -100,7 +100,7 @@
     "isEventItem": true
   },
   "bc5fc5c6-65e1-41c8-822d-d6e06ec0894e": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Advanced Elixir",
     "minItemPower": 30000,
     "maxItemPower": 30000,
@@ -110,7 +110,7 @@
     "isEventItem": false
   },
   "cd50f711-36a4-4b3b-b4ef-84b52c8a18e2": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Champion's Statue",
     "minItemPower": 30000,
     "maxItemPower": 80000,
@@ -120,7 +120,7 @@
     "isEventItem": true
   },
   "ce522371-80bd-4266-b473-8f5ace7099c7": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Signed Handkerchief (Red)",
     "minItemPower": 3000,
     "maxItemPower": 8000,
@@ -130,7 +130,7 @@
     "isEventItem": true
   },
   "d7d705d3-9562-4f03-98d8-3b0da81fcf47": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Champion's Belt",
     "minItemPower": 20000,
     "maxItemPower": 50000,
@@ -140,7 +140,7 @@
     "isEventItem": true
   },
   "ed1663c2-aff0-41b4-b5ed-7f86463c1d69": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Signed Towel (Red)",
     "minItemPower": 6000,
     "maxItemPower": 15000,
@@ -150,7 +150,7 @@
     "isEventItem": true
   },
   "472d229e-3541-4115-8104-53af579f24a4": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Demonic Exercise Bike",
     "minItemPower": 20000,
     "maxItemPower": 50000,
@@ -160,7 +160,7 @@
     "isEventItem": true
   },
   "6214eeeb-c77b-415c-a055-6d15b04ca026": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Steel Barbell",
     "minItemPower": 15000,
     "maxItemPower": 40000,
@@ -170,7 +170,7 @@
     "isEventItem": true
   },
   "732f16e3-6de7-4bc7-af77-9cdbaf68b695": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Pac-Ball",
     "minItemPower": 4500,
     "maxItemPower": 10000,
@@ -180,7 +180,7 @@
     "isEventItem": true
   },
   "a64b4819-5b32-41c5-8fe0-293ea8695a0c": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Stone Dumbbell",
     "minItemPower": 3000,
     "maxItemPower": 8000,
@@ -190,7 +190,7 @@
     "isEventItem": true
   },
   "b282b9cb-1802-4563-88a1-e7e267a0bcd4": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Rock Kettlebell",
     "minItemPower": 6000,
     "maxItemPower": 15000,
@@ -200,7 +200,7 @@
     "isEventItem": true
   },
   "bf1611c0-ddec-4ad8-8299-a2e19818186f": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Screaming Punching Bag",
     "minItemPower": 30000,
     "maxItemPower": 80000,
@@ -210,7 +210,7 @@
     "isEventItem": true
   },
   "daca4964-69c4-4167-b7bf-2e8eb49a8f1b": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Ivy Jump Rope",
     "minItemPower": 2000,
     "maxItemPower": 5000,
@@ -220,7 +220,7 @@
     "isEventItem": true
   },
   "fff5a89a-1691-47ea-af30-c811f1c1dbfc": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Fairy Shuttlecock",
     "minItemPower": 10000,
     "maxItemPower": 25000,

public/items/intimacyPowerItems.json

@@ -1,6 +1,6 @@
 {
   "09b1fff4-c1a3-49d5-acf1-b996d93a7217": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Song: \"Unhappy Elder\"",
     "minItemPower": 2,
     "maxItemPower": 5,
@@ -10,7 +10,7 @@
     "isEventItem": true
   },
   "0dbbda4c-0e4c-4cc2-b204-0301178ae667": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Gold Ring",
     "minItemPower": 1,
     "maxItemPower": 1,
@@ -20,7 +20,7 @@
     "isEventItem": false
   },
   "590ebe99-0fdd-4216-bb51-88d48f07d518": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Song: \"Forbidden Love\"",
     "minItemPower": 10,
     "maxItemPower": 32,
@@ -30,7 +30,7 @@
     "isEventItem": true
   },
   "62c5fe6d-92d2-458d-8ce4-c206eeb6245a": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Song: \"Prince's Wish\"",
     "minItemPower": 4,
     "maxItemPower": 10,
@@ -40,7 +40,7 @@
     "isEventItem": true
   },
   "67e7598f-f687-4ea0-b9f5-f89aaa965d44": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Song: \"Otherworld Stars\"",
     "minItemPower": 7,
     "maxItemPower": 24,
@@ -50,7 +50,7 @@
     "isEventItem": true
   },
   "71c7537b-ef33-4f64-91d4-e7e9c3915cad": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Diamond Ring",
     "minItemPower": 5,
     "maxItemPower": 5,
@@ -60,7 +60,7 @@
     "isEventItem": false
   },
   "73ddfbbf-3071-4103-9893-b9b77af05ce9": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Song: \"Single Golden Mushroom\"",
     "minItemPower": 5,
     "maxItemPower": 16,
@@ -70,7 +70,7 @@
     "isEventItem": true
   },
   "910cfd8f-9e75-4ca1-b776-e6b4df78e80b": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Song: \"Starry Love\"",
     "minItemPower": 1,
     "maxItemPower": 3,
@@ -80,7 +80,7 @@
     "isEventItem": true
   },
   "b2536feb-7dcb-4cec-93e5-581bc64e693b": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Song: \"Princess's Wish\"",
     "minItemPower": 3,
     "maxItemPower": 6,
@@ -90,7 +90,7 @@
     "isEventItem": true
   },
   "b2ebc786-79c3-47df-b0d9-330bb8e85a5f": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Song: \"Unlucky Succubus\"",
     "minItemPower": 14,
     "maxItemPower": 48,
@@ -100,7 +100,7 @@
     "isEventItem": true
   },
   "d5eb513d-68e0-4cd3-bb44-e3e8d36cfecd": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Gemstone Ring",
     "minItemPower": 2,
     "maxItemPower": 2,
@@ -110,7 +110,7 @@
     "isEventItem": false
   },
   "bcd9068a-c3b1-4914-ac50-af3369a7a8e5": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Intamacy Gachapon",
     "minItemPower": 10,
     "maxItemPower": 30,
@@ -119,7 +119,7 @@
     "isEventItem": true
   },
   "6459b278-9e0d-48ab-b6bb-aa4bfc88011b": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Touno Speciality 1",
     "minItemPower": 5,
     "maxItemPower": 5,
@@ -128,7 +128,7 @@
     "origin": "Touno Island"
   },
   "223aafe8-450f-4343-8df3-d96117d28642": {
-    "iconURL": "",
+    "iconURL": "isl_logo.png",
     "itemName": "Touno Speciality 2",
     "minItemPower": 10,
     "maxItemPower": 10,

src/App.vue

@@ -1,13 +1,25 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
 import GlobalHeader from '@/components/GlobalHeader.vue'
+import { storeToRefs } from 'pinia'
+import { usePowerItems } from './stores/powerItems'
+import { computed } from 'vue'
+
+const { blessingPowerItems, fellowPowerItems, intimacyPowerItems } = storeToRefs(usePowerItems())
+
+const isLoaded = computed(
+  () =>
+    !blessingPowerItems.value.keys().next().done &&
+    !fellowPowerItems.value.keys().next().done &&
+    !intimacyPowerItems.value.keys().next().done
+)
 </script>
 
 <template>
   <v-app>
     <GlobalHeader />
     <v-main class="d-flex">
-      <RouterView />
+      <RouterView v-if="isLoaded" />
     </v-main>
     <v-footer app>
       <div>Copyright Annika Merris 2024</div>

src/components/BlessingPower/SpecialItemsCard.vue

@@ -1,187 +0,0 @@
-<script setup lang="ts">
-import { usePowerItems } from '@/stores/powerItems'
-import { storeToRefs } from 'pinia'
-import type { Ref } from 'vue';
-import { computed, ref } from 'vue'
-
-const {
-  specialBlessingItems,
-  specialBlessingItemsMinTotal,
-  specialBlessingItemsMaxTotal,
-  specialBlessingItemsAveTotal
-} = storeToRefs(usePowerItems())
-
-const headers = ref([
-  {
-    title: "Event",
-    align: ' d-none d-lg-table-cell start',
-    sortable: true,
-    value: '1.origin'
-  },
-  {
-    title: 'Name',
-    align: 'start',
-    sortable: true,
-    value: '1.itemName'
-  },
-  {
-    title: 'Min.',
-    align: ' d-none d-lg-table-cell',
-    sortable: true,
-    key: '1.minItemPower'
-  },
-  {
-    title: 'Max.',
-    align: ' d-none d-lg-table-cell',
-    sortable: true,
-    key: '1.maxItemPower'
-  },
-  {
-    title: 'Owned',
-    align: 'end',
-    sortable: true,
-    key: `1.owned`
-  },
-  {
-    title: 'Min. Total',
-    align: ' d-none d-lg-table-cell',
-    sortable: false,
-    key: `1.minTotalPower`
-  },
-  {
-    title: 'Max. Total',
-    align: ' d-none d-lg-table-cell',
-    sortable: false,
-    key: `1.maxTotalPower`
-  },
-  {
-    title: 'Mean Total Power',
-    align: 'end',
-    sortable: false,
-    key: `1.aveTotalPower`
-  }
-])
-const sortBy = ref([
-  {
-    key: '1.minItemPower',
-    order: 'asc'
-  }
-])
-const selectedEvents: Ref<string[]> = ref(['All'])
-
-const getEventImageUrl = function(eventName: string): string {
-  return eventName !== undefined ? "/images/" + eventName.replace(/\s/g, '_').toLocaleLowerCase() + ".png" : ''
-}
-
-const events = computed(() =>
-  [...specialBlessingItems.value.values()]
-    .map((cur) => cur.origin)
-    .filter((value: string, idx: number, arr: string[]) => arr.indexOf(value) === idx)
-    .concat('All')
-)
-const filteredItems = computed(() =>
-  [...specialBlessingItems.value.entries()]
-    .map((value) =>
-      selectedEvents.value.indexOf('All') !== -1 ||
-      selectedEvents.value.indexOf(value[1].origin) !== -1
-        ? value
-        : undefined
-    )
-    .filter((value) => value !== undefined)
-)
-const getColor = computed(() => (rarity: number): string => {
-  if (rarity === 5) {
-    return 'red'
-  } else if (rarity === 4) {
-    return 'amber'
-  } else if (rarity === 3) {
-    return 'purple'
-  } else if (rarity === 2) {
-    return 'blue'
-  } else {
-    return 'green'
-  }
-})
-</script>
-
-<template>
-  <v-card fluid>
-    <v-card-title>Special Items</v-card-title>
-    <v-card-subtitle>Items from events</v-card-subtitle>
-    <v-card-item>
-      <v-select
-        clearable
-        chips
-        label="Event"
-        :items="events"
-        multiple
-        density="compact"
-        v-model="selectedEvents"
-      ></v-select>
-      <v-data-table
-        density="compact"
-        v-model:sort-by="sortBy"
-        :items="filteredItems"
-        :headers="headers"
-      >
-      <template v-slot:item.1.origin="{ item }">
-        <v-card class="my-2" elevation="2" rounded width="39" v-if="getEventImageUrl(item[1].origin) !== ''" color="transparent">
-          <v-img :src="getEventImageUrl(item[1].origin)"></v-img>
-        </v-card>
-      </template>
-        <template v-slot:item.1.itemName="{ item }">
-          <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)}`">
-            {{ item[1].itemName }}
-          </v-chip>
-        </template>
-        <template v-slot:item.1.owned="{ item }">
-          <v-text-field
-            density="compact"
-            hide-details="auto"
-            v-model.number="item[1].owned"
-            @update:model-value="usePowerItems().updateOwned(item[0], item[1].owned)"
-          ></v-text-field>
-        </template>
-        <template v-slot:item.1.minTotalPower="{ item }">
-          {{ item[1].minItemPower * item[1].owned }}
-        </template>
-        <template v-slot:item.1.maxTotalPower="{ item }">
-          {{ item[1].maxItemPower * item[1].owned }}
-        </template>
-        <template v-slot:item.1.aveTotalPower="{ item }">
-          {{ ((item[1].minItemPower + item[1].maxItemPower) / 2) * item[1].owned }}
-        </template>
-        <template v-slot:tfoot>
-          <tfoot>
-            <tr>
-              <td class="d-none d-lg-table-cell"></td>
-              <td></td>
-              <td class="d-none d-lg-table-cell"></td>
-              <td class="d-none d-lg-table-cell"></td>
-              <td></td>
-              <td class="px-0 text-right font-weight-bold d-none d-lg-table-cell">
-                {{ specialBlessingItemsMinTotal }}
-              </td>
-              <td class="px-0 text-right font-weight-bold d-none d-lg-table-cell">
-                {{ specialBlessingItemsMaxTotal }}
-              </td>
-              <td class="px-0 text-right font-weight-bold">{{ specialBlessingItemsAveTotal }}</td>
-            </tr>
-          </tfoot>
-        </template>
-      </v-data-table>
-    </v-card-item>
-  </v-card>
-</template>
-
-<style lang="scss" scoped>
-:global(.custom-tooltip) {
-  padding: 0 !important;
-}
-</style>

src/components/FellowPower/StandardItemsCard.vue

@@ -1,107 +0,0 @@
-<script setup lang="ts">
-import { usePowerItems } from '@/stores/powerItems'
-import { storeToRefs } from 'pinia'
-import { computed, ref } from 'vue'
-
-const { standardFellowItems, standardFellowItemTotal } = storeToRefs(usePowerItems())
-const headers = ref([
-  {
-    title: 'Name',
-    align: 'start',
-    sortable: true,
-    value: '1.itemName'
-  },
-  {
-    title: 'Power',
-    align: ' d-none d-lg-table-cell',
-    sortable: true,
-    key: '1.minItemPower'
-  },
-  {
-    title: 'Owned',
-    align: 'end',
-    sortable: true,
-    key: `1.owned`
-  },
-  {
-    title: 'Total Power',
-    align: 'end',
-    sortable: false,
-    key: `1.totalPower`
-  }
-])
-const sortBy = ref([
-  {
-    key: '1.minItemPower',
-    order: 'asc'
-  }
-])
-
-const getColor = computed(() => (rarity: number): string => {
-  if (rarity === 5) {
-    return 'red'
-  } else if (rarity === 4) {
-    return 'amber'
-  } else if (rarity === 3) {
-    return 'purple'
-  } else if (rarity === 2) {
-    return 'blue'
-  } else {
-    return 'green'
-  }
-})
-</script>
-
-<template>
-  <v-card>
-    <v-card-title>Standard Items</v-card-title>
-    <v-card-subtitle>Items that exist all the time</v-card-subtitle>
-    <v-card-item>
-      <v-data-table
-        density="compact"
-        v-model:sort-by="sortBy"
-        :items="[...standardFellowItems.entries()]"
-        :headers="headers"
-      >
-        <template v-slot:item.1.itemName="{ item }">
-          <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)}`">
-            {{ item[1].itemName }}
-          </v-chip>
-        </template>
-        <template v-slot:item.1.owned="{ item }">
-          <v-text-field
-            density="compact"
-            hide-details="auto"
-            v-model.number="item[1].owned"
-            @update:model-value="usePowerItems().updateOwned(item[0], item[1].owned)"
-          ></v-text-field>
-        </template>
-        <template v-slot:item.1.totalPower="{ item }">
-          {{ item[1].minItemPower * item[1].owned }}
-        </template>
-        <template v-slot:tfoot>
-          <tfoot>
-            <tr>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td class="px-0 text-right font-weight-bold">{{ standardFellowItemTotal }}</td>
-            </tr>
-          </tfoot>
-        </template>
-      </v-data-table>
-    </v-card-item>
-  </v-card>
-</template>
-
-<style lang="scss" scoped>
-:global(.custom-tooltip) {
-  padding: 0 !important;
-}
-</style>

src/components/FellowPower/SummaryCard.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { usePowerItems } from '@/stores/powerItems';
-import { storeToRefs } from 'pinia';
-import { computed } from 'vue';
-
-const { standardFellowItemTotal, specialFellowItemsMinTotal, specialFellowItemsMaxTotal, specialFellowItemsAveTotal} = storeToRefs(usePowerItems())
-
-const minIncrease = computed(() => standardFellowItemTotal.value + specialFellowItemsMinTotal.value)
-const maxIncrease = computed(() => standardFellowItemTotal.value + specialFellowItemsMaxTotal.value)
-const aveIncrease = computed(() => standardFellowItemTotal.value + specialFellowItemsAveTotal.value)
-</script>
-
-<template>
-  <v-card>
-    <v-card-title>Overall Fellow Power Increase</v-card-title>
-    <v-card-item>
-      <v-list density="compact">
-        <v-list-item>
-            <v-list-item-title>Minimum: {{ minIncrease }}</v-list-item-title>
-        </v-list-item>
-        <v-list-item>
-            <v-list-item-title>Maximum: {{ maxIncrease }}</v-list-item-title>
-        </v-list-item>
-        <v-list-item>
-            <v-list-item-title>Mean: {{ aveIncrease }}</v-list-item-title>
-        </v-list-item>
-      </v-list>
-    </v-card-item>
-  </v-card>
-</template>

src/components/IntimacyPower/SpecialItemsCard.vue

@@ -1,183 +0,0 @@
-<script setup lang="ts">
-import { usePowerItems } from '@/stores/powerItems'
-import { storeToRefs } from 'pinia'
-import { computed, ref, type Ref } from 'vue'
-
-const {
-  specialIntimacyItems,
-  specialIntimacyItemsMinTotal,
-  specialIntimacyItemsMaxTotal,
-  specialIntimacyItemsAveTotal
-} = storeToRefs(usePowerItems())
-
-const headers = ref([
-  {
-    title: "Event",
-    align: ' d-none d-lg-table-cell start',
-    sortable: true,
-    value: '1.origin'
-  },
-  {
-    title: 'Name',
-    align: 'start',
-    sortable: true,
-    value: '1.itemName'
-  },
-  {
-    title: 'Min.',
-    align: ' d-none d-lg-table-cell',
-    sortable: true,
-    key: '1.minItemPower'
-  },
-  {
-    title: 'Max.',
-    align: ' d-none d-lg-table-cell',
-    sortable: true,
-    key: '1.maxItemPower'
-  },
-  {
-    title: 'Owned',
-    align: 'end',
-    sortable: true,
-    key: `1.owned`
-  },
-  {
-    title: 'Min. Total',
-    align: ' d-none d-lg-table-cell',
-    sortable: false,
-    key: `1.minTotalPower`
-  },
-  {
-    title: 'Max. Total',
-    align: ' d-none d-lg-table-cell',
-    sortable: false,
-    key: `1.maxTotalPower`
-  },
-  {
-    title: 'Mean Total',
-    align: 'end',
-    sortable: false,
-    key: `1.aveTotalPower`
-  }
-])
-const sortBy = ref([
-  {
-    key: '1.minItemPower',
-    order: 'asc'
-  }
-])
-const selectedEvents: Ref<string[]> = ref(['All'])
-
-const getEventImageUrl = function(eventName: string): string {
-  return eventName !== undefined ? "/images/" + eventName.replace(/\s/g, '_').toLocaleLowerCase() + ".png" : ''
-}
-
-const events = computed(() =>
-  [...specialIntimacyItems.value.values()]
-    .map((cur) => cur.origin)
-    .filter((value: string, idx: number, arr: string[]) => arr.indexOf(value) === idx)
-    .concat('All')
-)
-const filteredItems = computed(() =>
-  [...specialIntimacyItems.value.entries()]
-    .map((value) =>
-      selectedEvents.value.indexOf('All') !== -1 ||
-      selectedEvents.value.indexOf(value[1].origin) !== -1
-        ? value
-        : undefined
-    )
-    .filter((value) => value !== undefined)
-)
-const getColor = computed(() => (rarity: number): string => {
-  if (rarity === 5) {
-    return 'red'
-  } else if (rarity === 4) {
-    return 'amber'
-  } else if (rarity === 3) {
-    return 'purple'
-  } else if (rarity === 2) {
-    return 'blue'
-  } else {
-    return 'green'
-  }
-})
-</script>
-
-<template>
-  <v-card fluid>
-    <v-card-title>Special Items</v-card-title>
-    <v-card-subtitle>Items from events</v-card-subtitle>
-    <v-card-item>
-      <v-select
-        clearable
-        chips
-        label="Event"
-        :items="events"
-        multiple
-        density="compact"
-        v-model="selectedEvents"
-      ></v-select>
-      <v-data-table
-        density="compact"
-        v-model:sort-by="sortBy"
-        :items="filteredItems"
-        :headers="headers"
-      >
-      <template v-slot:item.1.origin="{ item }">
-        <v-card class="my-2" elevation="2" rounded width="39" v-if="getEventImageUrl(item[1].origin) !== ''" color="transparent">
-          <v-img :src="getEventImageUrl(item[1].origin)"></v-img>
-        </v-card>
-      </template>
-        <template v-slot:item.1.itemName="{ item }">
-          <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)}`">
-            {{ item[1].itemName }}
-          </v-chip>
-        </template>
-        <template v-slot:item.1.owned="{ item }">
-          <v-text-field
-            reverse
-            density="compact"
-            hide-details="auto"
-            v-model.number="item[1].owned"
-            @update:model-value="usePowerItems().updateOwned(item[0], item[1].owned)"
-          ></v-text-field>
-        </template>
-        <template v-slot:item.1.minTotalPower="{ item }">
-          {{ item[1].minItemPower * item[1].owned }}
-        </template>
-        <template v-slot:item.1.maxTotalPower="{ item }">
-          {{ item[1].maxItemPower * item[1].owned }}
-        </template>
-        <template v-slot:item.1.aveTotalPower="{ item }">
-          {{ ((item[1].minItemPower + item[1].maxItemPower) / 2) * item[1].owned }}
-        </template>
-        <template v-slot:tfoot>
-          <tfoot>
-            <tr>
-              <td class="d-none d-lg-table-cell"></td>
-              <td></td>
-              <td class="d-none d-lg-table-cell"></td>
-              <td class="d-none d-lg-table-cell"></td>
-              <td></td>
-              <td class="px-0 text-right font-weight-bold d-none d-lg-table-cell">{{ specialIntimacyItemsMinTotal }}</td>
-              <td class="px-0 text-right font-weight-bold d-none d-lg-table-cell">{{ specialIntimacyItemsMaxTotal }}</td>
-              <td class="px-0 text-right font-weight-bold">{{ specialIntimacyItemsAveTotal }}</td>
-            </tr>
-          </tfoot>
-        </template>
-      </v-data-table>
-    </v-card-item>
-  </v-card>
-</template>
-
-<style lang="scss" scoped>
-:global(.custom-tooltip) {
-  padding: 0 !important;
-}
-</style>

src/components/IntimacyPower/StandardItemsCard.vue

@@ -1,107 +0,0 @@
-<script setup lang="ts">
-import { usePowerItems } from '@/stores/powerItems'
-import { storeToRefs } from 'pinia'
-import { computed, ref } from 'vue'
-
-const { standardIntimacyItems, standardIntimacyItemTotal } = storeToRefs(usePowerItems())
-const headers = ref([
-  {
-    title: 'Name',
-    align: 'start',
-    sortable: true,
-    value: '1.itemName'
-  },
-  {
-    title: 'Power',
-    align: ' d-none d-lg-table-cell',
-    sortable: true,
-    key: '1.minItemPower'
-  },
-  {
-    title: 'Owned',
-    align: 'end',
-    sortable: true,
-    key: `1.owned`
-  },
-  {
-    title: 'Total Power',
-    align: 'end',
-    sortable: false,
-    key: `1.totalPower`
-  }
-])
-const sortBy = ref([
-  {
-    key: '1.minItemPower',
-    order: 'asc'
-  }
-])
-
-const getColor = computed(() => (rarity: number): string => {
-  if (rarity === 5) {
-    return 'red'
-  } else if (rarity === 4) {
-    return 'amber'
-  } else if (rarity === 3) {
-    return 'purple'
-  } else if (rarity === 2) {
-    return 'blue'
-  } else {
-    return 'green'
-  }
-})
-</script>
-
-<template>
-  <v-card>
-    <v-card-title>Standard Items</v-card-title>
-    <v-card-subtitle>Items that exist all the time</v-card-subtitle>
-    <v-card-item>
-      <v-data-table
-        density="compact"
-        v-model:sort-by="sortBy"
-        :items="[...standardIntimacyItems.entries()]"
-        :headers="headers"
-      >
-        <template v-slot:item.1.itemName="{ item }">
-          <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)}`">
-            {{ item[1].itemName }}
-          </v-chip>
-        </template>
-        <template v-slot:item.1.owned="{ item }">
-          <v-text-field
-            density="compact"
-            hide-details="auto"
-            v-model.number="item[1].owned"
-            @update:model-value="usePowerItems().updateOwned(item[0], item[1].owned)"
-          ></v-text-field>
-        </template>
-        <template v-slot:item.1.totalPower="{ item }">
-          {{ item[1].minItemPower * item[1].owned }}
-        </template>
-        <template v-slot:tfoot>
-          <tfoot>
-            <tr>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td class="px-0 text-right font-weight-bold">{{ standardIntimacyItemTotal }}</td>
-            </tr>
-          </tfoot>
-        </template>
-      </v-data-table>
-    </v-card-item>
-  </v-card>
-</template>
-
-<style scoped lang="scss">
-:global(.custom-tooltip) {
-  padding: 0 !important;
-}
-</style>

src/components/IntimacyPower/SummaryCard.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { usePowerItems } from '@/stores/powerItems';
-import { storeToRefs } from 'pinia';
-import { computed } from 'vue';
-
-const { standardIntimacyItemTotal, specialIntimacyItemsMinTotal, specialIntimacyItemsMaxTotal, specialIntimacyItemsAveTotal} = storeToRefs(usePowerItems())
-
-const minIncrease = computed(() => standardIntimacyItemTotal.value + specialIntimacyItemsMinTotal.value)
-const maxIncrease = computed(() => standardIntimacyItemTotal.value + specialIntimacyItemsMaxTotal.value)
-const aveIncrease = computed(() => standardIntimacyItemTotal.value + specialIntimacyItemsAveTotal.value)
-</script>
-
-<template>
-  <v-card>
-    <v-card-title>Overall Intimacy Power Increase</v-card-title>
-    <v-card-item>
-      <v-list density="compact">
-        <v-list-item>
-            <v-list-item-title>Minimum: {{ minIncrease }}</v-list-item-title>
-        </v-list-item>
-        <v-list-item>
-            <v-list-item-title>Maximum: {{ maxIncrease }}</v-list-item-title>
-        </v-list-item>
-        <v-list-item>
-            <v-list-item-title>Mean: {{ aveIncrease }}</v-list-item-title>
-        </v-list-item>
-      </v-list>
-    </v-card-item>
-  </v-card>
-</template>

src/components/SpecialItemsCard.vue

@@ -1,16 +1,19 @@
 <script setup lang="ts">
 import { usePowerItems } from '@/stores/powerItems'
-import type { PowerItem } from '@/types/PowerItem'
+import type { PowerItem } from '@/types/PowerItem';
-import { storeToRefs } from 'pinia'
 import type { Ref } from 'vue'
 import { computed, ref } from 'vue'
 
-const {
+export interface Props {
-  specialFellowItems,
+    items: Map<string, PowerItem>
-  specialFellowItemsMinTotal,
+    minimumTotal: number
-  specialFellowItemsMaxTotal,
+    maximumTotal: number
-  specialFellowItemsAveTotal
+    averageTotal: number
-} = storeToRefs(usePowerItems())
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    items: () => new Map<string, PowerItem>
+})
 
 const headers = ref([
   {
@@ -56,7 +59,7 @@ const headers = ref([
     key: `1.maxTotalPower`
   },
   {
-    title: 'Mean Total',
+    title: 'Mean Total Power',
     align: 'end',
     sortable: false,
     key: `1.aveTotalPower`
@@ -68,22 +71,28 @@ const sortBy = ref([
     order: 'asc'
   }
 ])
-const selectedEvents: Ref<string[]> = ref(['All'])
+const selectedEvents: Ref<string[]> = ref([])
 
 const getEventImageUrl = function (eventName: string): string {
   return eventName !== undefined
     ? '/images/' + eventName.replace(/\s/g, '_').toLocaleLowerCase() + '.png'
     : ''
 }
+const toggle = function () {
+  if (allSelected.value) {
+    selectedEvents.value = []
+  } else {
+    selectedEvents.value = events.value.slice()
+  }
+}
 
 const events = computed(() =>
-  [...specialFellowItems.value.values()]
+  [...props.items.values()]
     .map((cur) => cur.origin)
     .filter((value: string, idx: number, arr: string[]) => arr.indexOf(value) === idx)
-    .concat('All')
 )
 const filteredItems = computed(() =>
-  [...specialFellowItems.value.entries()]
+  [...props.items.entries()]
     .map((value) =>
       selectedEvents.value.indexOf('All') !== -1 ||
       selectedEvents.value.indexOf(value[1].origin) !== -1
@@ -105,6 +114,9 @@ const getColor = computed(() => (rarity: number): string => {
     return 'green'
   }
 })
+const allSelected = computed(() => events.value.length === selectedEvents.value.length)
+const partialSelected = computed(() => selectedEvents.value.length > 0)
+toggle()
 </script>
 
 <template>
@@ -120,7 +132,19 @@ const getColor = computed(() => (rarity: number): string => {
         multiple
         density="compact"
         v-model="selectedEvents"
-      ></v-select>
+      >
+        <template v-slot:prepend-item>
+          <v-list-item title="Select All" @click="toggle">
+            <template v-slot:prepend>
+              <v-checkbox-btn
+                :color="partialSelected ? 'indigo-darken-2' : undefined"
+                :indeterminate="partialSelected && !allSelected"
+                :model-value="partialSelected"
+              ></v-checkbox-btn>
+            </template>
+          </v-list-item>
+        </template>
+      </v-select>
       <v-data-table
         density="compact"
         v-model:sort-by="sortBy"
@@ -137,6 +161,7 @@ const getColor = computed(() => (rarity: number): string => {
             color="transparent"
           >
             <v-img :src="getEventImageUrl(item[1].origin)"></v-img>
+            <v-tooltip activator="parent">{{ item?.[1].origin }}</v-tooltip>
           </v-card>
         </template>
         <template v-slot:item.1.itemName="{ item }">
@@ -182,12 +207,12 @@ const getColor = computed(() => (rarity: number): string => {
               <td class="d-none d-lg-table-cell"></td>
               <td></td>
               <td class="px-0 text-right font-weight-bold d-none d-lg-table-cell">
-                {{ specialFellowItemsMinTotal }}
+                {{ minimumTotal }}
               </td>
               <td class="px-0 text-right font-weight-bold d-none d-lg-table-cell">
-                {{ specialFellowItemsMaxTotal }}
+                {{ maximumTotal }}
               </td>
-              <td class="px-0 text-right font-weight-bold">{{ specialFellowItemsAveTotal }}</td>
+              <td class="px-0 text-right font-weight-bold">{{ averageTotal }}</td>
             </tr>
           </tfoot>
         </template>

src/components/StandardItemsCard.vue

@@ -1,9 +1,17 @@
 <script setup lang="ts">
 import { usePowerItems } from '@/stores/powerItems'
-import { storeToRefs } from 'pinia'
+import type { PowerItem } from '@/types/PowerItem'
 import { computed, ref } from 'vue'
 
-const { standardBlessingItems, standardBlessingItemTotal } = storeToRefs(usePowerItems())
+export interface Props {
+    items: Map<string, PowerItem>
+    total: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    items: () => new Map<string, PowerItem>
+})
+
 const headers = ref([
   {
     title: '',
@@ -66,7 +74,7 @@ const getColor = computed(() => (rarity: number): string => {
       <v-data-table
         density="compact"
         v-model:sort-by="sortBy"
-        :items="[...standardBlessingItems.entries()]"
+        :items="[...items.entries()]"
         :headers="headers"
       >
         <template v-slot:item.1.iconURL="{ item }">
@@ -109,7 +117,7 @@ const getColor = computed(() => (rarity: number): string => {
               <td class="d-none d-lg-table-cell"></td>
               <td></td>
               <td></td>
-              <td class="px-0 text-right font-weight-bold">{{ standardBlessingItemTotal }}</td>
+              <td class="px-0 text-right font-weight-bold">{{ total }}</td>
             </tr>
           </tfoot>
         </template>

src/components/SummaryCard.vue

@@ -1,13 +1,18 @@
 <script setup lang="ts">
-import { usePowerItems } from '@/stores/powerItems';
-import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
 
-const { standardBlessingItemTotal, specialBlessingItemsMinTotal, specialBlessingItemsMaxTotal, specialBlessingItemsAveTotal} = storeToRefs(usePowerItems())
+export interface Props {
+    standardTotal: number
+    minimumTotal: number
+    maximumTotal: number
+    averageTotal: number
+}
 
-const minIncrease = computed(() => standardBlessingItemTotal.value + specialBlessingItemsMinTotal.value)
+const props = defineProps<Props>()
-const maxIncrease = computed(() => standardBlessingItemTotal.value + specialBlessingItemsMaxTotal.value)
+
-const aveIncrease = computed(() => standardBlessingItemTotal.value + specialBlessingItemsAveTotal.value)
+const minIncrease = computed(() => props.standardTotal + props.minimumTotal)
+const maxIncrease = computed(() => props.standardTotal + props.maximumTotal)
+const aveIncrease = computed(() => props.standardTotal + props.averageTotal)
 </script>
 
 <template>

src/router/index.ts

@@ -23,6 +23,11 @@ const router = createRouter({
       path: "/intimacy-power",
       name: "intimacy-power",
       component: () => import('@/views/IntimacyPowerView.vue')
+    },
+    {
+      path: "/test",
+      name: "test",
+      component: () => import('@/views/Test.vue')
     }
   ]
 })

src/stores/powerItems.ts

@@ -10,6 +10,7 @@ export const usePowerItems = defineStore('powerItems', () => {
   const blessingPowerItems = ref(new Map<string, PowerItem>())
   const fellowPowerItems = ref(new Map<string, PowerItem>())
   const intimacyPowerItems = ref(new Map<string, PowerItem>())
+  const isLoadComplete = ref(false)
 
   async function fetchPowerItems() {
     axios
@@ -78,6 +79,7 @@ export const usePowerItems = defineStore('powerItems', () => {
       .catch((err) => {
         console.log(err)
       })
+    isLoadComplete.value = true
   }
 
   function updateOwned(key: string, newOwned: number) {
@@ -134,12 +136,7 @@ export const usePowerItems = defineStore('powerItems', () => {
   )
 
   const standardBlessingItems = computed(
-    () =>
+    () => new Map([...blessingPowerItems.value.entries()].filter((cur) => !cur[1].isEventItem))
-      new Map(
-        [...blessingPowerItems.value.entries()].filter(
-          (cur) => !(cur[1].isEventItem)
-        )
-      )
   )
 
   const standardBlessingItemTotal = computed(() =>
@@ -154,12 +151,7 @@ export const usePowerItems = defineStore('powerItems', () => {
   )
 
   const specialBlessingItems = computed(
-    () =>
+    () => new Map([...blessingPowerItems.value.entries()].filter((cur) => cur[1].isEventItem))
-      new Map(
-        [...blessingPowerItems.value.entries()].filter(
-          (cur) => (cur[1].isEventItem)
-        )
-      )
   )
 
   const specialBlessingItemsMinTotal = computed(() =>
@@ -203,12 +195,7 @@ export const usePowerItems = defineStore('powerItems', () => {
   )
 
   const standardFellowItems = computed(
-    () =>
+    () => new Map([...fellowPowerItems.value.entries()].filter((cur) => !cur[1].isEventItem))
-      new Map(
-        [...fellowPowerItems.value.entries()].filter(
-          (cur) => !(cur[1].isEventItem)
-        )
-      )
   )
 
   const standardFellowItemTotal = computed(() =>
@@ -223,12 +210,7 @@ export const usePowerItems = defineStore('powerItems', () => {
   )
 
   const specialFellowItems = computed(
-    () =>
+    () => new Map([...fellowPowerItems.value.entries()].filter((cur) => cur[1].isEventItem))
-      new Map(
-        [...fellowPowerItems.value.entries()].filter(
-          (cur) => (cur[1].isEventItem)
-        )
-      )
   )
 
   const specialFellowItemsMinTotal = computed(() =>
@@ -275,12 +257,7 @@ export const usePowerItems = defineStore('powerItems', () => {
   )
 
   const standardIntimacyItems = computed(
-    () =>
+    () => new Map([...intimacyPowerItems.value.entries()].filter((cur) => !cur[1].isEventItem))
-      new Map(
-        [...intimacyPowerItems.value.entries()].filter(
-          (cur) => !(cur[1].isEventItem)
-        )
-      )
   )
 
   const standardIntimacyItemTotal = computed(() =>
@@ -295,12 +272,7 @@ export const usePowerItems = defineStore('powerItems', () => {
   )
 
   const specialIntimacyItems = computed(
-    () =>
+    () => new Map([...intimacyPowerItems.value.entries()].filter((cur) => cur[1].isEventItem))
-      new Map(
-        [...intimacyPowerItems.value.entries()].filter(
-          (cur) => (cur[1].isEventItem)
-        )
-      )
   )
 
   const specialIntimacyItemsMinTotal = computed(() =>
@@ -338,6 +310,9 @@ export const usePowerItems = defineStore('powerItems', () => {
 
   return {
     blessingPowerItems,
+    fellowPowerItems,
+    intimacyPowerItems,
+    isLoadComplete,
     fetchPowerItems,
     updateOwned,
     totalBlessingPower,

src/views/BlessingPowerView.vue

@@ -1,15 +1,47 @@
 <script setup lang="ts">
-import SpecialItemsCard from '@/components/BlessingPower/SpecialItemsCard.vue'
+import SpecialItemsCard from '@/components/SpecialItemsCard.vue'
-import StandardItemsCard from '@/components/BlessingPower/StandardItemsCard.vue'
+import StandardItemsCard from '@/components/StandardItemsCard.vue'
-import SummaryCard from '@/components/BlessingPower/SummaryCard.vue'
+import SummaryCard from '@/components/SummaryCard.vue'
+import { storeToRefs } from 'pinia'
+import { usePowerItems } from '@/stores/powerItems'
+
+const {
+  standardBlessingItems,
+  standardBlessingItemTotal,
+  specialBlessingItems,
+  specialBlessingItemsMinTotal,
+  specialBlessingItemsMaxTotal,
+  specialBlessingItemsAveTotal
+} = storeToRefs(usePowerItems())
 </script>
 
 <template>
-  <v-sheet class="d-flex flex-wrap flex-fill">
+  <v-card>
-    <StandardItemsCard class="ma-2 align-self-start" />
+    <v-card-title>Blessing Power</v-card-title>
-    <SpecialItemsCard class="ma-2 align-self-start" />
+    <v-card-text>
-    <SummaryCard class="ma-2 align-self-start" />
+      <v-sheet class="d-flex flex-wrap flex-fill">
-  </v-sheet>
+        <StandardItemsCard
+          class="ma-2 align-self-start"
+          :items="standardBlessingItems"
+          :total="standardBlessingItemTotal"
+        />
+        <SpecialItemsCard
+          class="ma-2 align-self-start"
+          :items="specialBlessingItems"
+          :minimum-total="specialBlessingItemsMinTotal"
+          :maximum-total="specialBlessingItemsMaxTotal"
+          :average-total="specialBlessingItemsAveTotal"
+        />
+        <SummaryCard
+          class="ma-2 align-self-start"
+          :standard-total="standardBlessingItemTotal"
+          :minimum-total="specialBlessingItemsMinTotal"
+          :maximum-total="specialBlessingItemsMaxTotal"
+          :average-total="specialBlessingItemsAveTotal"
+        />
+      </v-sheet>
+    </v-card-text>
+  </v-card>
 </template>
 
 <style lang="scss" scoped>

src/views/FellowPowerView.vue

@@ -1,19 +1,51 @@
 <script setup lang="ts">
-import SpecialItemsCard from '@/components/FellowPower/SpecialItemsCard.vue'
+import SpecialItemsCard from '@/components/SpecialItemsCard.vue'
-import StandardItemsCard from '@/components/FellowPower/StandardItemsCard.vue'
+import StandardItemsCard from '@/components/StandardItemsCard.vue'
-import SummaryCard from '@/components/FellowPower/SummaryCard.vue'
+import SummaryCard from '@/components/SummaryCard.vue'
+import { storeToRefs } from 'pinia'
+import { usePowerItems } from '@/stores/powerItems'
+
+const {
+  standardFellowItems,
+  standardFellowItemTotal,
+  specialFellowItems,
+  specialFellowItemsMinTotal,
+  specialFellowItemsMaxTotal,
+  specialFellowItemsAveTotal
+} = storeToRefs(usePowerItems())
 </script>
 
 <template>
-  <v-sheet class="d-flex flex-wrap flex-fill">
+  <v-card>
-    <StandardItemsCard class="ma-2 align-self-start"/>
+    <v-card-title>Fellow Power</v-card-title>
-    <SpecialItemsCard class="ma-2 align-self-start"/>
+    <v-card-text>
-    <SummaryCard class="ma-2 align-self-start" />
+      <v-sheet class="d-flex flex-wrap flex-fill">
-  </v-sheet>
+        <StandardItemsCard
+          class="ma-2 align-self-start"
+          :items="standardFellowItems"
+          :total="standardFellowItemTotal"
+        />
+        <SpecialItemsCard
+          class="ma-2 align-self-start"
+          :items="specialFellowItems"
+          :minimum-total="specialFellowItemsMinTotal"
+          :maximum-total="specialFellowItemsMaxTotal"
+          :average-total="specialFellowItemsAveTotal"
+        />
+        <SummaryCard
+          class="ma-2 align-self-start"
+          :standard-total="standardFellowItemTotal"
+          :minimum-total="specialFellowItemsMinTotal"
+          :maximum-total="specialFellowItemsMaxTotal"
+          :average-total="specialFellowItemsAveTotal"
+        />
+      </v-sheet>
+    </v-card-text>
+  </v-card>
 </template>
 
 <style lang="scss" scoped>
-@use "@/styles/settings.scss";
+@use '@/styles/settings.scss';
 :deep(tbody) tr:nth-of-type(even) {
   background-color: rgba(var(--v-theme-primary-darken-1), 0.25);
 }

src/views/HomeView.vue

@@ -13,6 +13,11 @@ const entries20240121 = ref([
   'Added event icon display',
   'Added filters, looks ugly, maybe works'
 ])
+const entries20240122 = ref([
+  'Added a better "Select All" to event filters',
+  'Added a default image so there aren\'t random blank spots',
+  'Did a bunch of code cleanup',
+])
 </script>
 
 <template>
@@ -84,6 +89,7 @@ const entries20240121 = ref([
         </v-list-item>
         <ChangeLogEntry date="2024-01-20" :entries="entries20240120"></ChangeLogEntry>
         <ChangeLogEntry date="2024-01-21" :entries="entries20240121"></ChangeLogEntry>
+        <ChangeLogEntry date="2024-01-22" :entries="entries20240122"></ChangeLogEntry>
       </v-list>
     </v-sheet>
     <v-sheet :elevation="1" class="ma-2 my-4">
@@ -95,7 +101,7 @@ const entries20240121 = ref([
       </p>
       <p>
         Thanks to <span class="font-weight-bold">@kathinja</span> for her assistance with flavor
-        text and proof reading.
+        text and proofreading.
       </p>
       <p>
         Thanks <span class="font-weight-bold">@werewaffle</span> for all of his help with

src/views/IntimacyPowerView.vue

@@ -1,19 +1,51 @@
 <script setup lang="ts">
-import SpecialItemsCard from '@/components/IntimacyPower/SpecialItemsCard.vue'
+import SpecialItemsCard from '@/components/SpecialItemsCard.vue'
-import StandardItemsCard from '@/components/IntimacyPower/StandardItemsCard.vue'
+import StandardItemsCard from '@/components/StandardItemsCard.vue'
-import SummaryCard from '@/components/IntimacyPower/SummaryCard.vue'
+import SummaryCard from '@/components/SummaryCard.vue'
+import { storeToRefs } from 'pinia'
+import { usePowerItems } from '@/stores/powerItems'
+
+const {
+  standardIntimacyItems,
+  standardIntimacyItemTotal,
+  specialIntimacyItems,
+  specialIntimacyItemsMinTotal,
+  specialIntimacyItemsMaxTotal,
+  specialIntimacyItemsAveTotal
+} = storeToRefs(usePowerItems())
 </script>
 
 <template>
-  <v-sheet class="d-flex flex-wrap flex-fill">
+  <v-card>
-    <StandardItemsCard class="ma-2 align-self-start"/>
+    <v-card-title>Intimacy Power</v-card-title>
-    <SpecialItemsCard class="ma-2 align-self-start"/>
+    <v-card-text>
-    <SummaryCard class="ma-2 align-self-start" />
+      <v-sheet class="d-flex flex-wrap flex-fill">
-  </v-sheet>
+        <StandardItemsCard
+          class="ma-2 align-self-start"
+          :items="standardIntimacyItems"
+          :total="standardIntimacyItemTotal"
+        />
+        <SpecialItemsCard
+          class="ma-2 align-self-start"
+          :items="specialIntimacyItems"
+          :minimum-total="specialIntimacyItemsMinTotal"
+          :maximum-total="specialIntimacyItemsMaxTotal"
+          :average-total="specialIntimacyItemsAveTotal"
+        />
+        <SummaryCard
+          class="ma-2 align-self-start"
+          :standard-total="standardIntimacyItemTotal"
+          :minimum-total="specialIntimacyItemsMinTotal"
+          :maximum-total="specialIntimacyItemsMaxTotal"
+          :average-total="specialIntimacyItemsAveTotal"
+        />
+      </v-sheet>
+    </v-card-text>
+  </v-card>
 </template>
 
 <style lang="scss" scoped>
-@use "@/styles/settings.scss";
+@use '@/styles/settings.scss';
 :deep(tbody) tr:nth-of-type(even) {
   background-color: rgba(var(--v-theme-primary-darken-1), 0.25);
 }

src/views/Test.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import SpecialItemsCard from '@/components/SpecialItemsCard.vue'
+import StandardItemsCard from '@/components/StandardItemsCard.vue'
+import SummaryCard from '@/components/SummaryCard.vue'
+import { storeToRefs } from 'pinia'
+import { usePowerItems } from '@/stores/powerItems'
+
+const {
+  standardBlessingItems,
+  standardBlessingItemTotal,
+  specialBlessingItems,
+  specialBlessingItemsMinTotal,
+  specialBlessingItemsMaxTotal,
+  specialBlessingItemsAveTotal
+} = storeToRefs(usePowerItems())
+</script>
+
+<template>
+  <v-card>
+    <v-card-title>Intimacy Power</v-card-title>
+    <v-card-text>
+      <v-sheet class="d-flex flex-wrap flex-fill">
+        <StandardItemsCard
+          class="ma-2 align-self-start"
+          :items="standardBlessingItems"
+          :total="standardBlessingItemTotal"
+        />
+        <SpecialItemsCard
+          class="ma-2 align-self-start"
+          :items="specialBlessingItems"
+          :minimum-total="specialBlessingItemsMinTotal"
+          :maximum-total="specialBlessingItemsMaxTotal"
+          :average-total="specialBlessingItemsAveTotal"
+        />
+        <SummaryCard
+          class="ma-2 align-self-start"
+          :standard-total="standardBlessingItemTotal"
+          :minimum-total="specialBlessingItemsMinTotal"
+          :maximum-total="specialBlessingItemsMaxTotal"
+          :average-total="specialBlessingItemsAveTotal"
+        />
+      </v-sheet>
+    </v-card-text>
+  </v-card>
+</template>
+
+<style lang="scss" scoped>
+@use '@/styles/settings.scss';
+:deep(tbody) tr:nth-of-type(even) {
+  background-color: rgba(var(--v-theme-primary-darken-1), 0.25);
+}
+</style>