fix: runtime Box3 scaling + Alpine null-safety
- Replaced hardcoded SPECIES_LENGTH with runtime Box3 measurement (model added to parent group BEFORE measuring, so full GLB hierarchy transforms are included in world matrices) - All 9 species now render at correct target size (0.13-0.32u) - Added optional chaining (?.) to all Alpine template expressions referencing store.selectedFish to prevent null-reference errors - Guarded getFishValue/canBreed calls with null checks
This commit is contained in:
+11
-11
@@ -46,12 +46,12 @@
|
||||
<!-- Header -->
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div>
|
||||
<h3 class="text-white font-semibold text-sm" x-text="store.selectedFish.name"></h3>
|
||||
<h3 class="text-white font-semibold text-sm" x-text="store.selectedFish?.name"></h3>
|
||||
<div class="flex items-center gap-1.5 mt-1">
|
||||
<span class="text-[10px] px-1.5 py-0.5 rounded font-medium"
|
||||
:class="rarityBg(store.selectedFish.genetics.rarity)"
|
||||
x-text="store.selectedFish.genetics.rarity.toUpperCase()"></span>
|
||||
<span class="text-[10px] text-aqua-300" x-text="'(' + rarityMult(store.selectedFish.genetics.rarity) + 'x value)'"></span>
|
||||
:class="rarityBg(store.selectedFish?.genetics.rarity)"
|
||||
x-text="store.selectedFish?.genetics.rarity.toUpperCase()"></span>
|
||||
<span class="text-[10px] text-aqua-300" x-text="'(' + rarityMult(store.selectedFish?.genetics.rarity) + 'x value)'"></span>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="store.selectedFish = null" class="text-aqua-400 hover:text-white cursor-pointer">✕</button>
|
||||
@@ -59,20 +59,20 @@
|
||||
<!-- Genetics -->
|
||||
<div class="grid grid-cols-2 gap-x-3 gap-y-1.5 text-xs mb-3">
|
||||
<div class="text-aqua-300">Gender</div>
|
||||
<div class="text-white" x-text="store.selectedFish.genetics.gender === 'male' ? '♂ Male' : '♀ Female'"></div>
|
||||
<div class="text-white" x-text="store.selectedFish?.genetics.gender === 'male' ? '♂ Male' : '♀ Female'"></div>
|
||||
<div class="text-aqua-300">Size</div>
|
||||
<div class="text-white" x-text="store.selectedFish.genetics.sizeMult.toFixed(2) + 'x'"></div>
|
||||
<div class="text-white" x-text="store.selectedFish?.genetics.sizeMult.toFixed(2) + 'x'"></div>
|
||||
<div class="text-aqua-300">Speed</div>
|
||||
<div class="text-white" x-text="store.selectedFish.genetics.speedMult.toFixed(2) + 'x'"></div>
|
||||
<div class="text-white" x-text="store.selectedFish?.genetics.speedMult.toFixed(2) + 'x'"></div>
|
||||
<div class="text-aqua-300">Pattern</div>
|
||||
<div class="text-white capitalize" x-text="store.selectedFish.genetics.pattern"></div>
|
||||
<div class="text-white capitalize" x-text="store.selectedFish?.genetics.pattern"></div>
|
||||
<div class="text-aqua-300">Age</div>
|
||||
<div class="text-white" x-text="formatAge(store.selectedFish.age)"></div>
|
||||
<div class="text-white" x-text="formatAge(store.selectedFish?.age)"></div>
|
||||
</div>
|
||||
<!-- Value -->
|
||||
<div class="text-sm mb-3">
|
||||
<span class="text-aqua-300">Sell value: </span>
|
||||
<span class="text-yellow-400 font-bold" x-text="formatMoney(getFishValue(store.selectedFish))"></span>
|
||||
<span class="text-yellow-400 font-bold" x-text="store.selectedFish ? formatMoney(getFishValue(store.selectedFish)) : ''"></span>
|
||||
</div>
|
||||
<!-- Actions -->
|
||||
<div class="flex gap-2">
|
||||
@@ -82,7 +82,7 @@
|
||||
</button>
|
||||
<button @click="requestBreed()"
|
||||
class="flex-1 text-xs py-2 rounded-lg bg-aqua-700 hover:bg-aqua-600 text-white border border-aqua-600 transition-colors cursor-pointer"
|
||||
x-disabled="!canBreed(store.selectedFish)">
|
||||
x-disabled="!store.selectedFish || !canBreed(store.selectedFish)">
|
||||
Breed →
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user