From c6283d492cec8d9f8305cf37857ceda266c46523 Mon Sep 17 00:00:00 2001
From: Tom Boullay <tom@famille-boullay.fr>
Date: Wed, 3 Jun 2026 00:03:44 +0200
Subject: [PATCH] refactor(debug): rename hand-tracking SVG toggle to Model
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The debug control now reflects what it actually gates: the 3D hand
model rendering (used by World.tsx to decide whether to show the
hand-tracking gloves), not the legacy SVG visualizer.

- Debug.ts: rename showHandTrackingSvg → showHandTrackingModel
  (state, GUI label "Show Model", getter/setter)
- World.tsx: gate showHandTrackingGloves on the new toggle and
  drop the unused HandTrackingGloveHandedness import
---
 src/utils/debug/Debug.ts | 18 +++++++++---------
 src/world/World.tsx      | 12 +++++++++---
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/utils/debug/Debug.ts b/src/utils/debug/Debug.ts
index 24df6fe..4ee45d7 100644
--- a/src/utils/debug/Debug.ts
+++ b/src/utils/debug/Debug.ts
@@ -85,7 +85,7 @@ export class Debug {
     fogEnabled: boolean;
     handTrackingSource: HandTrackingSource;
     showDebugOverlay: boolean;
-    showHandTrackingSvg: boolean;
+    showHandTrackingModel: boolean;
     showInteractionSpheres: boolean;
     showPerf: boolean;
     sceneMode: SceneMode;
@@ -108,7 +108,7 @@ export class Debug {
       fogEnabled: FOG_CONFIG.enabled,
       handTrackingSource: storedControls.handTrackingSource ?? "browser",
       showDebugOverlay: true,
-      showHandTrackingSvg: false,
+      showHandTrackingModel: false,
       showInteractionSpheres: false,
       showPerf: true,
       sceneMode: storedControls.sceneMode ?? "game",
@@ -156,10 +156,10 @@ export class Debug {
       const handTrackingFolder = this.createFolder("Hand Tracking");
 
       handTrackingFolder
-        ?.add(this.controls, "showHandTrackingSvg")
-        .name("Show SVG")
+        ?.add(this.controls, "showHandTrackingModel")
+        .name("Show Model")
         .onChange((value: boolean) => {
-          this.controls.showHandTrackingSvg = value;
+          this.controls.showHandTrackingModel = value;
           this.emit();
         });
 
@@ -281,12 +281,12 @@ export class Debug {
     return this.controls.showInteractionSpheres;
   }
 
-  getShowHandTrackingSvg(): boolean {
-    return this.controls.showHandTrackingSvg;
+  getShowHandTrackingModel(): boolean {
+    return this.controls.showHandTrackingModel;
   }
 
-  setShowHandTrackingSvg(value: boolean): void {
-    this.controls.showHandTrackingSvg = value;
+  setShowHandTrackingModel(value: boolean): void {
+    this.controls.showHandTrackingModel = value;
     this.emit();
   }
 
diff --git a/src/world/World.tsx b/src/world/World.tsx
index 09af42f..911c734 100644
--- a/src/world/World.tsx
+++ b/src/world/World.tsx
@@ -6,6 +6,7 @@ import {
 } from "@/data/player/playerConfig";
 import { LA_FABRIK_INITIAL_LOOK_AT } from "@/data/world/laFabrikConfig";
 import { useCameraMode } from "@/hooks/debug/useCameraMode";
+import { useDebugStore } from "@/hooks/debug/useDebugStore";
 import { useEnvironmentDebug } from "@/hooks/debug/useEnvironmentDebug";
 import { useMapPerformanceDebug } from "@/hooks/debug/useMapPerformanceDebug";
 import { useCharacterDebug } from "@/hooks/debug/useCharacterDebug";
@@ -32,7 +33,6 @@ import { CharacterSystem } from "@/world/characters/CharacterSystem";
 import { Player } from "@/world/player/Player";
 import { TestMap } from "@/world/debug/TestMap";
 import type { SceneLoadingChangeHandler } from "@/types/world/sceneLoading";
-import type { HandTrackingGloveHandedness } from "@/hooks/handTracking/useHandTrackingGloveStatus";
 import type { HandTrackingHand } from "@/types/handTracking/handTracking";
 
 interface WorldProps {
@@ -41,7 +41,7 @@ interface WorldProps {
 
 function hasTrackedHand(
   hands: HandTrackingHand[],
-  handedness: HandTrackingGloveHandedness,
+  handedness: "left" | "right",
 ): boolean {
   return hands.some((hand) => hand.handedness.toLowerCase() === handedness);
 }
@@ -60,6 +60,9 @@ export function World({ onLoadingStateChange }: WorldProps): React.JSX.Element {
     (state) => state.showPlayerModel,
   );
   const showDebugOctree = useDebugVisualsStore((state) => state.showOctree);
+  const showHandTrackingModel = useDebugStore((debug) =>
+    debug.getShowHandTrackingModel(),
+  );
   const { hands, status, usageStatus } = useHandTrackingSnapshot();
   const {
     octree,
@@ -74,7 +77,10 @@ export function World({ onLoadingStateChange }: WorldProps): React.JSX.Element {
       ? PLAYER_SPAWN_POSITION_GAME
       : PLAYER_SPAWN_POSITION_PHYSICS;
   const showHandTrackingGloves =
-    status === "connected" && usageStatus !== "inactive" && hands.length > 0;
+    showHandTrackingModel &&
+    status === "connected" &&
+    usageStatus !== "inactive" &&
+    hands.length > 0;
   const showLeftHandTrackingGlove =
     showHandTrackingGloves && hasTrackedHand(hands, "left");
   const showRightHandTrackingGlove =