Improved visuals on resource list

src/views/resource/ResourceList.vue

@@ -12,20 +12,53 @@
         table-filter
         column-filter
       >
+        <template #resourceClass="{ item }">
+          <td>
+            <CRow>
+              <CCol>
+                <CImg
+                  :src="
+                    './images/' +
+                    translateImageName(item.resourceClass) +
+                    '.png'
+                  "
+                />
+              </CCol>
+            </CRow>
+            <CRow>
+              <CCol> ({{ item.resourceClass }}) </CCol>
+            </CRow>
+          </td>
+        </template>
         <template #attributes="{ item }">
           <td>
-            <CRow
-              v-for="attr in getAttributeArray(item)"
-              :key="attr.name + attr.value"
-            >
-              <CCol>
-                <CInput
-                  style="margin-bottom: 0px"
-                  :label="attr.name"
-                  :value="attr.value"
-                  :horizontal="{ label: 'col-sm-6', input: 'col-sm-6' }"
-                  plaintext
-                />
+            <CRow>
+              <CCol
+                v-for="(attr, index) in baseAttributes"
+                :key="attr.fullName + '_' + index"
+                style="max-width: 45px; padding-left: 3px"
+              >
+                <CBadge
+                  :color="
+                    hasAttributeValue(attr.fullName, item)
+                      ? 'success'
+                      : 'secondary'
+                  "
+                  >{{ attr.shortName }}</CBadge
+                >
+              </CCol>
+            </CRow>
+            <CRow>
+              <CCol
+                v-for="(attr, index) in baseAttributes"
+                :key="attr.fullName + '_' + index"
+                style="max-width: 45px; padding-left: 3px"
+              >
+                <div style="font-size: 11px">
+                  <strong>
+                    {{ getAttributeValue(attr.fullName, item) }}
+                  </strong>
+                </div>
               </CCol>
             </CRow>
           </td>
@@ -44,14 +77,14 @@
 import { mapGetters } from 'vuex';
 
 const RESOURCE_FIELDS = [
-  {
-    label: 'Resource Name',
-    key: 'resourceName',
-  },
   {
     label: 'Resource Class',
     key: 'resourceClass',
   },
+  {
+    label: 'Resource Name',
+    key: 'resourceName',
+  },
   {
     label: 'Attributes',
     key: 'attributes',
@@ -66,6 +99,53 @@ const RESOURCE_FIELDS = [
   },
 ];
 
+const BASE_ATTRIBUTES = [
+  {
+    fullName: 'res_conductivity',
+    shortName: 'CD',
+  },
+  {
+    fullName: 'res_decay_resist',
+    shortName: 'DR',
+  },
+  {
+    fullName: 'res_quality',
+    shortName: 'OQ',
+  },
+  {
+    fullName: 'res_shock_resistance',
+    shortName: 'SR',
+  },
+  {
+    fullName: 'res_potential_energy',
+    shortName: 'PE',
+  },
+  {
+    fullName: 'res_malleability',
+    shortName: 'MA',
+  },
+  {
+    fullName: 'res_toughness',
+    shortName: 'UT',
+  },
+  {
+    fullName: 'res_cold_resist',
+    shortName: 'CR',
+  },
+  {
+    fullName: 'res_heat_resist',
+    shortName: 'HR',
+  },
+  {
+    fullName: 'res_flavor',
+    shortName: 'FL',
+  },
+  {
+    fullName: 'entagle_resistance',
+    shortName: 'ER',
+  },
+];
+
 export default {
   name: 'ResourceList',
   computed: {
@@ -76,8 +156,20 @@ export default {
     resourceFields() {
       return RESOURCE_FIELDS;
     },
+    baseAttributes() {
+      return BASE_ATTRIBUTES;
+    },
   },
   methods: {
+    hasAttributeValue(attr, item) {
+      let attrs = this.getAttributeArray(item);
+      return attrs.find((a) => a.rawName === attr);
+    },
+    getAttributeValue(attr, item) {
+      let attrs = this.getAttributeArray(item);
+      let obj = this.getAttributeArray(item).find((a) => a.rawName === attr);
+      return obj ? obj.value : null;
+    },
     titleCase(val) {
       if (!val) return;
       return val.charAt(0).toUpperCase() + val.substr(1);
@@ -90,10 +182,97 @@ export default {
         let val = v.split(' ');
         return {
           name: this.attrName(val[0]),
+          rawName: val[0],
           value: val[1],
         };
       });
     },
+    translateImageName(c) {
+      let names = c.split('_');
+      switch (names[0]) {
+        case 'aluminum':
+        case 'bone':
+        case 'copper':
+        case 'energy':
+        case 'gemstone':
+        case 'hide':
+        case 'inorganic':
+        case 'iron':
+        case 'meat':
+        case 'milk':
+        case 'mineral':
+        case 'radioactive':
+        case 'steel':
+        case 'water':
+          return names[0];
+
+        case 'gas':
+          switch (names[1]) {
+            case 'inert':
+              return 'gas_inert';
+            case 'reactive':
+              return 'gas_reactive';
+            default:
+              return 'gas';
+          }
+
+        case 'metal':
+          switch (names[1]) {
+            case 'ferrous':
+              return 'metal_ferrous';
+            case 'nonferrous':
+              return 'metal_nonferrous';
+            default:
+              return 'metal';
+          }
+        case 'ore':
+          switch (names[1]) {
+            case 'carbonate':
+              return 'ore_carbonate';
+            case 'igneous':
+              return 'ore_igneous';
+            case 'sedimentary':
+              return 'ore_sedimentary';
+            case 'siliclastic':
+              return 'ore_siliclastic';
+            default:
+              return 'ore';
+          }
+        case 'petrochem':
+          switch (names[1]) {
+            case 'fuel':
+              switch (names[2]) {
+                case 'liquid':
+                  return 'fuel_petrochem_liquid';
+                default:
+                  return 'fuel_petrochem_solid';
+              }
+            default:
+              return 'petrochem_inert';
+          }
+        case 'fiberplast':
+          return 'inorganic';
+        case 'armophous':
+        case 'crystalline':
+          return 'gemstone';
+        case 'corn':
+        case 'oats':
+        case 'rice':
+        case 'wheat':
+          return 'cereal';
+        case 'seafood':
+          return 'creature_resources';
+        case 'softwood':
+          return 'flora_resources';
+        case 'fruit':
+        case 'vegetable':
+          return 'organic';
+        case 'wood':
+          return 'flora_structural';
+        default:
+          return 'default';
+      }
+    },
     attrName(key) {
       switch (key) {
         case 'res_conductivity':
@@ -109,7 +288,7 @@ export default {
         case 'res_malleability':
           return 'Malleability:';
         case 'res_toughness':
-          return 'Toughness:';
+          return 'Unit Toughness:';
         case 'res_bulk':
           return 'Bulk:';
         case 'res_cold_resist':