fix: null-guard info panel (x-if) + add runtime scale debug logging

This commit is contained in:
2026-10-08 05:36:44 +00:00
parent 88fb870dbb
commit 20ab0e91e4
2 changed files with 10 additions and 5 deletions
+5 -5
View File
@@ -39,9 +39,9 @@
</div> </div>
<!-- Fish Info Panel (right side) --> <!-- Fish Info Panel (right side) -->
<div x-show="store.selectedFish" x-transition.opacity.duration.200ms <div x-if="store.selectedFish" x-transition.opacity.duration.200ms
class="absolute right-4 top-16 w-72 pointer-events-auto" class="absolute right-4 top-16 w-72 pointer-events-auto"
x-cloak style="display:none"> x-cloak>
<div class="bg-aqua-900/90 backdrop-blur-md rounded-xl border border-aqua-700/60 p-4 shadow-xl"> <div class="bg-aqua-900/90 backdrop-blur-md rounded-xl border border-aqua-700/60 p-4 shadow-xl">
<!-- Header --> <!-- Header -->
<div class="flex items-start justify-between mb-3"> <div class="flex items-start justify-between mb-3">
@@ -92,7 +92,7 @@
<!-- Shop Modal --> <!-- Shop Modal -->
<div x-show="store.showShop" x-transition.opacity.duration.200ms <div x-show="store.showShop" x-transition.opacity.duration.200ms
class="absolute inset-0 flex items-center justify-center pointer-events-auto bg-black/60 backdrop-blur-sm" class="absolute inset-0 flex items-center justify-center pointer-events-auto bg-black/60 backdrop-blur-sm"
x-cloak style="display:none"> x-cloak>
<div class="bg-aqua-900/95 border border-aqua-700 rounded-2xl w-[500px] max-h-[80vh] overflow-y-auto p-6 shadow-2xl"> <div class="bg-aqua-900/95 border border-aqua-700 rounded-2xl w-[500px] max-h-[80vh] overflow-y-auto p-6 shadow-2xl">
<div class="flex items-center justify-between mb-4"> <div class="flex items-center justify-between mb-4">
<h2 class="text-white font-bold text-lg">🐟 Fish Shop</h2> <h2 class="text-white font-bold text-lg">🐟 Fish Shop</h2>
@@ -124,7 +124,7 @@
<!-- Settings Modal --> <!-- Settings Modal -->
<div x-show="store.showSettings" x-transition.opacity.duration.200ms <div x-show="store.showSettings" x-transition.opacity.duration.200ms
class="absolute inset-0 flex items-center justify-center pointer-events-auto bg-black/60 backdrop-blur-sm" class="absolute inset-0 flex items-center justify-center pointer-events-auto bg-black/60 backdrop-blur-sm"
x-cloak style="display:none"> x-cloak>
<div class="bg-aqua-900/95 border border-aqua-700 rounded-2xl w-80 p-6 shadow-2xl"> <div class="bg-aqua-900/95 border border-aqua-700 rounded-2xl w-80 p-6 shadow-2xl">
<div class="flex items-center justify-between mb-4"> <div class="flex items-center justify-between mb-4">
<h2 class="text-white font-bold">⚙️ Settings</h2> <h2 class="text-white font-bold">⚙️ Settings</h2>
@@ -153,7 +153,7 @@
<!-- Reset Confirmation --> <!-- Reset Confirmation -->
<div x-show="store.showResetConfirm" x-transition.opacity.duration.150ms <div x-show="store.showResetConfirm" x-transition.opacity.duration.150ms
class="absolute inset-0 flex items-center justify-center pointer-events-auto bg-black/70 z-50" class="absolute inset-0 flex items-center justify-center pointer-events-auto bg-black/70 z-50"
x-cloak style="display:none"> x-cloak>
<div class="bg-aqua-900 border border-red-900 rounded-2xl w-80 p-6 shadow-2xl"> <div class="bg-aqua-900 border border-red-900 rounded-2xl w-80 p-6 shadow-2xl">
<h3 class="text-white font-bold mb-2">⚠️ Reset Game</h3> <h3 class="text-white font-bold mb-2">⚠️ Reset Game</h3>
<p class="text-sm text-aqua-300 mb-4">This will permanently delete ALL your fish, money, and progress.</p> <p class="text-sm text-aqua-300 mb-4">This will permanently delete ALL your fish, money, and progress.</p>
+5
View File
@@ -161,10 +161,15 @@ function buildFish(gltf: GLTF, spec: FishSpec): Fish {
const scale = (spec.targetLength / spec.modelLength) * rand(0.92, 1.08); const scale = (spec.targetLength / spec.modelLength) * rand(0.92, 1.08);
orient.scale.setScalar(scale); orient.scale.setScalar(scale);
console.log("[Fish]", spec.url, "target:", spec.targetLength.toFixed(3), "modelLen:", spec.modelLength, "scale:", scale.toFixed(4), "expected rendered:", (scale * spec.modelLength).toFixed(3));
orient.add(model); orient.add(model);
const group = new THREE.Group(); const group = new THREE.Group();
group.add(orient); group.add(orient);
group.updateMatrixWorld(true);
const dbgBox = new THREE.Box3().setFromObject(group);
const dbgSize = dbgBox.getSize(new THREE.Vector3());
console.log("[Fish Box3]", spec.url, "x:", dbgSize.x.toFixed(3), "y:", dbgSize.y.toFixed(3), "z:", dbgSize.z.toFixed(3), "max:", Math.max(dbgSize.x, dbgSize.y, dbgSize.z).toFixed(3));
// Apply genetics (color shift, rarity glow) // Apply genetics (color shift, rarity glow)
if (spec.genetics) { if (spec.genetics) {