Lots of CSS fixing and added new items

src/components/IntimacyPower/SpecialItemsCard.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { usePowerItems } from '@/stores/powerItems'
+import { storeToRefs } from 'pinia'
+import { computed, ref } from 'vue'
+
+const {
+  specialIntimacyItems,
+  specialIntimacyItemsMinTotal,
+  specialIntimacyItemsMaxTotal,
+  specialIntimacyItemsAveTotal
+} = storeToRefs(usePowerItems())
+
+const headers = ref([
+  {
+    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 getColor = computed(() => (rarity: number): string => {
+  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-data-table
+        density="compact"
+        v-model:sort-by="sortBy"
+        :items="[...specialIntimacyItems.entries()]"
+        :headers="headers"
+      >
+        <template v-slot:item.1.itemName="{ item }">
+          <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></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>
+@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');
+}
+</style>