From 3ceb7f219ae46216a2067837e18b0c9245ec848a Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 10 Aug 2025 19:25:08 +0200
Subject: [PATCH] feat: Format currency display to ensure two-digit
 representation

- Update CurrencyDisplay.vue to use formattedCurrency for gold, silver, and copper values, ensuring consistent two-digit formatting.
- Modify formatEverQuestCurrency function in currency.ts to pad currency values with leading zeros, enhancing visual consistency in currency representation.
---
 src/components/ui/CurrencyDisplay.vue | 16 +++++++++++++---
 src/lib/utils/currency.ts             |  8 ++++----
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/ui/CurrencyDisplay.vue b/src/components/ui/CurrencyDisplay.vue
index 642b060..556f09e 100644
--- a/src/components/ui/CurrencyDisplay.vue
+++ b/src/components/ui/CurrencyDisplay.vue
@@ -9,19 +9,19 @@
     <!-- Gold -->
     <div class="flex items-center gap-1 px-2 py-1 rounded bg-yellow-900/50 border border-yellow-700/30">
       <div class="w-3 h-3 rounded-full bg-gradient-to-br from-yellow-300 to-yellow-500 border border-yellow-400"></div>
-      <span class="text-xs font-mono font-bold text-yellow-100">{{ currency.gold }}</span>
+      <span class="text-xs font-mono font-bold text-yellow-100">{{ formattedCurrency.gold }}</span>
     </div>
     
     <!-- Silver -->
     <div class="flex items-center gap-1 px-2 py-1 rounded bg-gray-700/50 border border-gray-600/30">
       <div class="w-3 h-3 rounded-full bg-gradient-to-br from-gray-300 to-gray-500 border border-gray-400"></div>
-      <span class="text-xs font-mono font-bold text-gray-100">{{ currency.silver }}</span>
+      <span class="text-xs font-mono font-bold text-gray-100">{{ formattedCurrency.silver }}</span>
     </div>
     
     <!-- Copper -->
     <div class="flex items-center gap-1 px-2 py-1 rounded bg-orange-900/50 border border-orange-700/30">
       <div class="w-3 h-3 rounded-full bg-gradient-to-br from-orange-300 to-orange-500 border border-orange-400"></div>
-      <span class="text-xs font-mono font-bold text-orange-100">{{ currency.copper }}</span>
+      <span class="text-xs font-mono font-bold text-orange-100">{{ formattedCurrency.copper }}</span>
     </div>
   </div>
 </template>
@@ -40,4 +40,14 @@ const currency = computed<EverQuestCurrency>(() => {
   const satoshis = Math.floor(props.balanceMsat / 1000)
   return satoshisToEverQuest(satoshis)
 })
+
+// Format currency values to always show 2 digits with leading zeros
+const formattedCurrency = computed(() => {
+  return {
+    platinum: currency.value.platinum,
+    gold: currency.value.gold.toString().padStart(2, '0'),
+    silver: currency.value.silver.toString().padStart(2, '0'),
+    copper: currency.value.copper.toString().padStart(2, '0')
+  }
+})
 </script> 
diff --git a/src/lib/utils/currency.ts b/src/lib/utils/currency.ts
index b889ec2..89b0a76 100644
--- a/src/lib/utils/currency.ts
+++ b/src/lib/utils/currency.ts
@@ -43,20 +43,20 @@ export function formatEverQuestCurrency(currency: EverQuestCurrency): string {
   }
   
   if (currency.gold > 0) {
-    parts.push(`${currency.gold}g`)
+    parts.push(`${currency.gold.toString().padStart(2, '0')}g`)
   }
   
   if (currency.silver > 0) {
-    parts.push(`${currency.silver}s`)
+    parts.push(`${currency.silver.toString().padStart(2, '0')}s`)
   }
   
   if (currency.copper > 0) {
-    parts.push(`${currency.copper}c`)
+    parts.push(`${currency.copper.toString().padStart(2, '0')}c`)
   }
   
   // If no currency, show 0c
   if (parts.length === 0) {
-    return '0c'
+    return '00c'
   }
   
   return parts.join(' ')