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:
2026-10-08 17:03:37 +00:00
parent 20ab0e91e4
commit 0f360d76cd
3 changed files with 23 additions and 66 deletions
+11 -11
View File
@@ -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>