add colors...

renderer/src/web/price-check/trade/TooltipItem.vue

@@ -1,27 +1,33 @@
 <template>
-  <div class="flex flex-col p-1 bg-gray-800 text-indigo-400 text-center">
+  <div class="flex flex-col p-1 bg-gray-800 text-center">
     <template v-for="(section, index) in sections">
       <div v-if="section.content" :key="index">
         <div
           v-for="mod in section.content"
-          :key="isExtendedContent(mod) ? mod.text : mod"
+          :key="mod.text"
           class="flex items-center justify-between"
         >
-          <span v-if="isExtendedContent(mod)" class="flex-grow text-center">
-            <span class="text-gray-400">{{ mod.text }}</span>
-            {{ mod.value }}
+          <span class="flex-grow text-center">
+            <span
+              :class="
+                mod.value
+                  ? 'text-gray-400'
+                  : $style[`number-color-${mod.color}`]
+              "
+              >{{ mod.text }}</span
+            >
+            <span
+              v-if="mod.value"
+              :class="$style[`number-color-${mod.color}`]"
+              >{{ mod.value }}</span
+            >
           </span>
-          <span
-            v-else-if="section.key === 'corrupted'"
-            class="flex-grow text-center text-red-600"
-          >
-            {{ mod }}
-          </span>
-          <span v-else class="flex-grow text-center">{{ mod }}</span>
-          <!-- <span class="ml-2 text-gray-400">▲</span> -->
         </div>
       </div>
-      <div v-if="shouldShowDivider(index)" class="divider"></div>
+      <hr
+        v-if="shouldShowDivider(index)"
+        class="block h-[2px] bg-gradient-to-r from-transparent via-gray-400 to-transparent my-1 border-0 border-none"
+      />
     </template>
   </div>
 </template>
@@ -40,16 +46,21 @@ export default defineComponent({
   setup(props) {
     const item = props.result.displayItem;
     const sections = [
-      { key: "extended", content: item.extended },
+      { key: "nameBlock", content: item.nameBlock },
+      { key: "itemProps", content: item.itemProps },
       { key: "enchantMods", content: item.enchantMods },
       { key: "runeMods", content: item.runeMods },
       { key: "implicitMods", content: item.implicitMods },
-      { key: "explicitMods", content: item.explicitMods },
-      { key: "pseudoMods", content: item.pseudoMods },
       {
-        key: "corrupted",
-        content: props.result.corrupted ? ["Corrupted"] : [],
+        key: "explicitMods",
+        content: [
+          // ? maybe keep
+          ...(item.fracturedMods ?? []),
+          ...(item.explicitMods ?? []),
+          ...(item.desecratedMods ?? []),
+        ],
       },
+      { key: "pseudoMods", content: item.pseudoMods },
     ];
     function isNonEmptyObject(obj: Record<string, string | number>): boolean {
       return Object.values(obj).some((value) => value !== undefined);
@@ -86,6 +97,7 @@ export default defineComponent({
         !Array.isArray(content)
       );
     }
+
     return {
       item,
       sections,
@@ -96,12 +108,89 @@ export default defineComponent({
 });
 </script>
 
-<style lang="postcss">
-.divider {
-  @apply h-[2px] bg-gradient-to-r from-transparent via-gray-400 to-transparent my-1;
-}
-
+<style lang="postcss" module>
 .mod {
   @apply text-sm;
 }
+
+.number-color-0 {
+  /*white*/
+  @apply text-white;
+}
+.number-color-1 {
+  /*aug*/
+  @apply text-indigo-500;
+}
+.number-color-2 {
+  /*unmet*/
+  @apply text-red-500;
+}
+.number-color-3 {
+  /*physical*/
+  @apply text-white;
+}
+.number-color-4 {
+  /*fire*/
+  @apply text-red-700;
+}
+.number-color-5 {
+  /*cold*/
+  @apply text-blue-700;
+}
+.number-color-6 {
+  /*lightning*/
+  @apply text-yellow-500;
+}
+.number-color-7 {
+  /*chaos*/
+  @apply text-pink-800;
+}
+.number-color-8 {
+  /*unique*/
+  @apply text-orange-700;
+}
+.number-color-9 {
+  /*unreachable*/
+  @apply text-gray-500;
+}
+.number-color-10 {
+  /*currency*/
+  @apply text-gray-300;
+}
+.number-color-11 {
+  /*reward*/
+  @apply text-white;
+}
+.number-color-12 {
+  /*divination*/
+  @apply text-blue-300;
+}
+.number-color-13 {
+  /*sanctum boon*/
+  @apply text-gray-500;
+}
+.number-color-14 {
+  /*sanctum curse*/
+  @apply text-purple-300;
+}
+.number-color-15 {
+  /*sanctum pact*/
+  @apply text-pink-200;
+}
+.number-color-25 {
+  /*grant skill*/
+  @apply text-indigo-500;
+}
+.number-color-8729 {
+  /*aug*/
+  @apply text-indigo-300;
+}
+.number-color-8730 {
+  /*fractured*/
+  @apply text-yellow-500;
+}
+.number-color-8731 {
+  /*desecrated*/
+  @apply text-indigo-500 bg-gradient-to-l from-green-900 via-transparent to-transparent w-full;
+}
 </style>

renderer/src/web/price-check/trade/pathofexile-trade.ts

@@ -256,6 +256,9 @@ enum TradeNumberColors {
   SanctumCurse = 14,
   SanctumPact = 15,
   GrantedSkill = 25,
+  Enchant = 8729,
+  Fractured = 8730,
+  Desecrated = 8731,
 }
 
 interface FilterBoolean {
@@ -459,26 +462,26 @@ interface FetchResult {
   };
   gone?: boolean;
 }
+
+export interface DisplayItemLine {
+  // text should include colon if required...
+  text: string;
+  value?: string | number;
+  color: TradeNumberColors;
+}
+
 export interface DisplayItem {
   title: string[];
-  nameBlock?: Array<{
-    text: string;
-    value: string | number;
-    color: TradeNumberColors;
-  }>;
-  itemProps?: Array<{
-    text: string;
-    value: string | number;
-    color: TradeNumberColors;
-  }>;
-  grantSkill?: string[];
-  enchantMods?: string[];
-  runeMods?: string[];
-  implicitMods?: string[];
-  fracturedMods?: string[];
-  explicitMods?: string[];
-  desecratedMods?: string[];
-  pseudoMods?: string[];
+  nameBlock?: DisplayItemLine[];
+  itemProps?: DisplayItemLine[];
+  grantSkill?: DisplayItemLine[];
+  enchantMods?: DisplayItemLine[];
+  runeMods?: DisplayItemLine[];
+  implicitMods?: DisplayItemLine[];
+  fracturedMods?: DisplayItemLine[];
+  explicitMods?: DisplayItemLine[];
+  desecratedMods?: DisplayItemLine[];
+  pseudoMods?: DisplayItemLine[];
   extended?: Array<{ text: string; value: number }>;
   itemTags?: string[];
 }
@@ -1504,36 +1507,48 @@ function parseFetchResult(result: FetchResult): PricingResult["displayItem"] {
 }
 
 function parseMods(result: FetchResult): {
-  enchantMods?: string[];
-  runeMods?: string[];
-  implicitMods?: string[];
-  explicitMods?: string[];
-  desecratedMods?: string[];
-  fracturedMods?: string[];
-  pseudoMods?: string[];
+  enchantMods?: DisplayItemLine[] | undefined;
+  runeMods?: DisplayItemLine[] | undefined;
+  implicitMods?: DisplayItemLine[] | undefined;
+  explicitMods?: DisplayItemLine[] | undefined;
+  desecratedMods?: DisplayItemLine[] | undefined;
+  fracturedMods?: DisplayItemLine[] | undefined;
+  pseudoMods?: DisplayItemLine[] | undefined;
 } {
   /*
 
   */
   return {
-    enchantMods: parseModBlock(result.item.enchantMods),
-    runeMods: parseModBlock(result.item.runeMods),
+    enchantMods: parseModBlock(
+      result.item.enchantMods,
+      TradeNumberColors.Enchant,
+    ),
+    runeMods: parseModBlock(result.item.runeMods, TradeNumberColors.Enchant),
     implicitMods: parseModBlock(result.item.implicitMods),
+    fracturedMods: parseModBlock(
+      result.item.fracturedMods,
+      TradeNumberColors.Fractured,
+    ),
     explicitMods: parseModBlock(result.item.explicitMods),
-    desecratedMods: parseModBlock(result.item.desecratedMods),
-    fracturedMods: parseModBlock(result.item.fracturedMods),
+    desecratedMods: parseModBlock(
+      result.item.desecratedMods,
+      TradeNumberColors.Desecrated,
+    ),
     pseudoMods: parseModBlock(result.item.pseudoMods),
   };
 }
 
 function parseModBlock(
   translated: string[] | undefined,
+  color: TradeNumberColors = TradeNumberColors.Augmented,
   // mods: TradeModMetadata[] | undefined,
   // hashes: Array<Array<string | number[] | null>> | undefined,
-) {
+): DisplayItemLine[] | undefined {
   // separate function, allow doing complex parsing later if needed
   if (!translated) return undefined;
-  return translated.map((s) => parseAffixStrings(s));
+  return translated.map((s) => {
+    return { text: parseAffixStrings(s), color };
+  });
 }
 
 function buildNameBlock(
@@ -1672,7 +1687,8 @@ function buildItemProps(
 
     // do i actually care about this?
     block.push({
-      text: parseAffixStrings(requirements[0].name),
+      // no colon for req
+      text: `${parseAffixStrings(requirements[0].name)} `,
       value,
       color: TradeNumberColors.White,
     });
@@ -1682,13 +1698,15 @@ function buildItemProps(
 
 function buildGrantSkillBlock(
   skills: TradeDataRichLine[] | undefined,
-): string[] {
+): DisplayItemLine[] {
   if (!skills || skills.length === 0) return [];
-  const block = [];
+  const block: DisplayItemLine[] = [];
   for (const skill of skills) {
-    block.push(
-      `${parseAffixStrings(skill.name)}: ${parseAffixStrings(skill.values[0][0])}`,
-    );
+    block.push({
+      text: `${parseAffixStrings(skill.name)}: `,
+      value: parseAffixStrings(skill.values[0][0]),
+      color: skill.values[0][1],
+    });
   }
 
   return block;