Added Filtering, Looks Ugly, Mostly Works

public/items/intimacyPowerItems.json

@@ -115,6 +115,7 @@
     "minItemPower": 10,
     "maxItemPower": 30,
     "rarity": 4,
+    "origin": "Unknown",
     "isEventItem": true
   },
   "6459b278-9e0d-48ab-b6bb-aa4bfc88011b": {

src/components/BlessingPower/SpecialItemsCard.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { usePowerItems } from '@/stores/powerItems'
 import { storeToRefs } from 'pinia'
+import type { Ref } from 'vue';
 import { computed, ref } from 'vue'
 
 const {
@@ -66,11 +67,28 @@ const sortBy = ref([
     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'
@@ -91,10 +109,19 @@ const getColor = computed(() => (rarity: number): string => {
     <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="[...specialBlessingItems.entries()]"
+        :items="filteredItems"
         :headers="headers"
       >
       <template v-slot:item.1.origin="{ item }">

src/components/FellowPower/SpecialItemsCard.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { usePowerItems } from '@/stores/powerItems'
+import type { PowerItem } from '@/types/PowerItem'
 import { storeToRefs } from 'pinia'
+import type { Ref } from 'vue'
 import { computed, ref } from 'vue'
 
 const {
@@ -12,7 +14,7 @@ const {
 
 const headers = ref([
   {
-    title: "Event",
+    title: 'Event',
     align: ' d-none d-lg-table-cell start',
     sortable: true,
     value: '1.origin'
@@ -66,10 +68,30 @@ const sortBy = ref([
     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 getEventImageUrl = function (eventName: string): string {
+  return eventName !== undefined
+    ? '/images/' + eventName.replace(/\s/g, '_').toLocaleLowerCase() + '.png'
+    : ''
 }
+
+const events = computed(() =>
+  [...specialFellowItems.value.values()]
+    .map((cur) => cur.origin)
+    .filter((value: string, idx: number, arr: string[]) => arr.indexOf(value) === idx)
+    .concat('All')
+)
+const filteredItems = computed(() =>
+  [...specialFellowItems.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'
@@ -90,22 +112,44 @@ const getColor = computed(() => (rarity: number): string => {
     <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="[...specialFellowItems.entries()]"
+        :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.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-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-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)}`">

src/components/IntimacyPower/SpecialItemsCard.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, type Ref } from 'vue'
 
 const {
   specialIntimacyItems,
@@ -66,11 +66,28 @@ const sortBy = ref([
     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'
@@ -91,10 +108,19 @@ const getColor = computed(() => (rarity: number): string => {
     <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="[...specialIntimacyItems.entries()]"
+        :items="filteredItems"
         :headers="headers"
       >
       <template v-slot:item.1.origin="{ item }">

src/views/HomeView.vue

@@ -8,6 +8,10 @@ const entries20240120 = ref([
   'Added a default sort to all of the tables',
   'Added a couple of icons, and started working on adding tooltips'
 ])
+const entries20240121 = ref([
+  'Added Touno Island items',
+  'Added event icon display'
+])
 </script>
 
 <template>
@@ -77,7 +81,8 @@ const entries20240120 = ref([
             <p>First pass that I'm comfortable letting other people see</p>
           </v-list-item-subtitle>
         </v-list-item>
-        <ChangeLogEntry date="2024-01-20" :entries="entries20240120"> </ChangeLogEntry>
+        <ChangeLogEntry date="2024-01-20" :entries="entries20240120"></ChangeLogEntry>
+        <ChangeLogEntry date="2024-01-21" :entries="entries20240121"></ChangeLogEntry>
       </v-list>
     </v-sheet>
     <v-sheet :elevation="1" class="ma-2 my-4">