Lots of CSS fixing and added new items

src/components/FellowPower/StandardItemsCard.vue

@@ -1,9 +1,54 @@
 <script setup lang="ts">
 import { usePowerItems } from '@/stores/powerItems'
 import { storeToRefs } from 'pinia'
-import StandardItem from '@/components/StandardItem.vue'
+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: 'end',
+    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 => {
+  console.log('getting rarity')
+  if (rarity === 4) {
+    return 'amber'
+  } else if (rarity === 3) {
+    return 'purple'
+  } else if (rarity === 2) {
+    return 'blue'
+  } else {
+    return 'green'
+  }
+})
 </script>
 
 <template>
@@ -11,38 +56,39 @@ const { standardFellowItems, standardFellowItemTotal } = storeToRefs(usePowerIte
     <v-card-title>Standard Items</v-card-title>
     <v-card-subtitle>Items that exist all the time</v-card-subtitle>
     <v-card-item>
-      <v-table density="compact">
-        <thead>
-          <tr>
-            <!-- <th></th> -->
-            <th class="text-left font-weight-bold">Name</th>
-            <th class="text-left font-weight-bold">Power</th>
-            <th class="text-left font-weight-bold">Owned</th>
-            <th class="text-right font-weight-bold">Total</th>
-          </tr>
-        </thead>
-        <tbody>
-          <StandardItem
-            v-for="[key, item] in standardFellowItems"
-            :key="key"
-            :itemID="key"
-            :itemName="item.itemName"
-            :itemIcon="'none'"
-            :owned="item.owned"
-            :minPower="item.minItemPower"
-            :maxPower="item.maxItemPower"
-          />
-        </tbody>
-        <tfoot>
-          <tr>
-            <!-- <td></td> -->
-            <td></td>
-            <td></td>
-            <td></td>
-            <td class="px-0 text-right font-weight-bold">{{ standardFellowItemTotal }}</td>
-          </tr>
-        </tfoot>
-      </v-table>
+      <v-data-table
+        density="compact"
+        v-model:sort-by="sortBy"
+        :items="[...standardFellowItems.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
+            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>