padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Format currency display to ensure two-digit representation

Browse source 
- 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.
This commit is contained in:
padreug 2025-08-10 19:25:08 +02:00
parent ab5d2bc88d
commit 3ceb7f219a
2 changed files with 17 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/components/ui/CurrencyDisplay.vue
View file

@ -9,19 +9,19 @@
<!-- Gold --> <!-- Gold -->
<div class="flex items-center gap-1 px-2 py-1 rounded bg-yellow-900/50 border border-yellow-700/30"> <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> <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> </div>
<!-- Silver --> <!-- Silver -->
<div class="flex items-center gap-1 px-2 py-1 rounded bg-gray-700/50 border border-gray-600/30"> <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> <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> </div>
<!-- Copper --> <!-- Copper -->
<div class="flex items-center gap-1 px-2 py-1 rounded bg-orange-900/50 border border-orange-700/30"> <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> <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>
</div> </div>
</template> </template>
@ -40,4 +40,14 @@ const currency = computed<EverQuestCurrency>(() => {
const satoshis = Math.floor(props.balanceMsat / 1000) const satoshis = Math.floor(props.balanceMsat / 1000)
return satoshisToEverQuest(satoshis) 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> </script>

8
src/lib/utils/currency.ts
View file

@ -43,20 +43,20 @@ export function formatEverQuestCurrency(currency: EverQuestCurrency): string {
} }
if (currency.gold > 0) { if (currency.gold > 0) {
parts.push(`${currency.gold}g`) parts.push(`${currency.gold.toString().padStart(2, '0')}g`)
} }
if (currency.silver > 0) { if (currency.silver > 0) {
parts.push(`${currency.silver}s`) parts.push(`${currency.silver.toString().padStart(2, '0')}s`)
} }
if (currency.copper > 0) { if (currency.copper > 0) {
parts.push(`${currency.copper}c`) parts.push(`${currency.copper.toString().padStart(2, '0')}c`)
} }
// If no currency, show 0c // If no currency, show 0c
if (parts.length === 0) { if (parts.length === 0) {
return '0c' return '00c'
} }
return parts.join(' ') return parts.join(' ')