From 20ab0e91e40c97c675f943fdf3d20e2f21357dbc Mon Sep 17 00:00:00 2001
From: Kamil Krzywda <krzywda.kamil@gmail.com>
Date: Thu, 8 Oct 2026 05:36:44 +0000
Subject: [PATCH] fix: null-guard info panel (x-if) + add runtime scale debug
 logging

---
 index.html           | 10 +++++-----
 src/scene/GLTFish.ts |  5 +++++
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index f17522d..758eff7 100644
--- a/index.html
+++ b/index.html
@@ -39,9 +39,9 @@
     </div>
 
     <!-- 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"
-      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">
         <!-- Header -->
         <div class="flex items-start justify-between mb-3">
@@ -92,7 +92,7 @@
     <!-- Shop Modal -->
     <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"
-      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="flex items-center justify-between mb-4">
           <h2 class="text-white font-bold text-lg">🐟 Fish Shop</h2>
@@ -124,7 +124,7 @@
     <!-- Settings Modal -->
     <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"
-      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="flex items-center justify-between mb-4">
           <h2 class="text-white font-bold">⚙️ Settings</h2>
@@ -153,7 +153,7 @@
     <!-- Reset Confirmation -->
     <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"
-      x-cloak style="display:none">
+      x-cloak>
       <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>
         <p class="text-sm text-aqua-300 mb-4">This will permanently delete ALL your fish, money, and progress.</p>
diff --git a/src/scene/GLTFish.ts b/src/scene/GLTFish.ts
index 8484cba..5aff6e6 100644
--- a/src/scene/GLTFish.ts
+++ b/src/scene/GLTFish.ts
@@ -161,10 +161,15 @@ function buildFish(gltf: GLTF, spec: FishSpec): Fish {
 
   const scale = (spec.targetLength / spec.modelLength) * rand(0.92, 1.08);
   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);
 
   const group = new THREE.Group();
   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)
   if (spec.genetics) {