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

refactor: Simplify CurrencyDisplay component by removing conditional rendering for zero values

Browse source 
- Remove conditional rendering for currency denominations in CurrencyDisplay.vue, ensuring consistent display regardless of value.
- Enhance code clarity by streamlining the template structure while maintaining visual representation of wallet contents.
This commit is contained in:
padreug 2025-08-02 00:00:05 +02:00
parent 4b469ce82e
commit 93d30c0255
1 changed files with 4 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,35 +1,28 @@
<template>
<div class="flex items-center gap-1 bg-muted/30 rounded-lg p-1 border">
<!-- Platinum -->
<div v-if="currency.platinum > 0" class="flex items-center gap-1 px-2 py-1 rounded bg-blue-900/50 border border-blue-700/30">
<div class="flex items-center gap-1 px-2 py-1 rounded bg-blue-900/50 border border-blue-700/30">
<div class="w-3 h-3 rounded-full bg-gradient-to-br from-slate-300 to-slate-500 border border-slate-400"></div>
<span class="text-xs font-mono font-bold text-blue-100">{{ currency.platinum }}</span>
</div>
<!-- Gold -->
<div v-if="currency.gold > 0" 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>
<span class="text-xs font-mono font-bold text-yellow-100">{{ currency.gold }}</span>
</div>
<!-- Silver -->
<div v-if="currency.silver > 0" 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>
<span class="text-xs font-mono font-bold text-gray-100">{{ currency.silver }}</span>
</div>
<!-- Copper -->
<div v-if="currency.copper > 0" 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>
<span class="text-xs font-mono font-bold text-orange-100">{{ currency.copper }}</span>
</div>
<!-- Show 0c if no currency -->
<div v-if="currency.platinum === 0 && currency.gold === 0 && currency.silver === 0 && currency.copper === 0"
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">0</span>
</div>
</div>
</template>