From f1deb33360a61ebcf49890fd3058c9c1e039b8b5 Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad000@gmail.com>
Date: Thu, 5 Mar 2026 01:56:15 -0500
Subject: [PATCH] improve the prices page with images

---
 src/pages/PricesPage.vue | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/pages/PricesPage.vue b/src/pages/PricesPage.vue
index 1adc349..418db86 100644
--- a/src/pages/PricesPage.vue
+++ b/src/pages/PricesPage.vue
@@ -26,12 +26,15 @@
         <button
           v-for="mat in MATERIALS"
           :key="mat.name"
-          class="px-3 py-1 rounded-lg text-xs font-medium transition-colors border"
+          class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors border"
           :class="activeMaterial === mat.name
             ? 'bg-amber-500/15 border-amber-500/60 text-amber-300'
             : 'bg-transparent border-gray-600 text-gray-400 hover:border-gray-400 hover:text-gray-200'"
           @click="setActiveMaterial(mat.name)"
-        >{{ mat.name }}</button>
+        >
+          <img :src="itemImageUrl(mat.baseId(4))" :alt="mat.name" class="w-6 h-6 rounded" />
+          {{ mat.name }}
+        </button>
       </div>
     </div>
 
@@ -56,11 +59,13 @@
           <div
             v-for="enc in (tier >= 4 ? ENCHANTMENTS : [0])"
             :key="enc"
-            class="px-4 py-3"
+            class="px-4 py-3 flex items-center gap-2"
           >
-            <div class="text-[11px] font-semibold mb-2" :style="enchantTextStyle(enc)">
-              .{{ enc }}
-            </div>
+            <img
+              :src="itemImageUrl(enchantedId(activeMaterialDef.baseId(tier), enc))"
+              :alt="`${activeMaterialDef.name} .${enc}`"
+              class="w-8 h-8 rounded flex-shrink-0"
+            />
             <PriceCell :item-id="enchantedId(activeMaterialDef.baseId(tier), enc)" />
           </div>
         </div>
@@ -72,7 +77,7 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { tierStyle, enchantTextStyle } from '../utils/formatting'
+import { tierStyle, itemImageUrl } from '../utils/formatting'
 import PriceCell from '../components/PriceCell.vue'
 import { useFilters } from '../composables/useFilters'
 import { CITIES, ENCHANTMENTS } from '../data/constants'
@@ -82,7 +87,7 @@ import type { Enchantment } from '../types/crafting'
 const { filters, setCity } = useFilters()
 
 function enchantedId(baseId: string, enchant: Enchantment): string {
-  return enchant === 0 ? baseId : `${baseId}@${enchant}`
+  return enchant === 0 ? baseId : `${baseId}_LEVEL${enchant}@${enchant}`
 }
 
 interface MaterialDef {