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 -->
<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>

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

@ -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(' ')