refacto: cleanning the codebase

src/utils/debug/Debug.ts

@@ -7,7 +7,7 @@ export class Debug {
   public readonly active: boolean;
   private readonly gui: GUI | null;
   private readonly folders = new Map<string, GUI>();
-  private readonly registeredFolders = new Set<string>();
+  private readonly folderRefCounts = new Map<string, number>();
   private readonly listeners = new Set<() => void>();
   private readonly controls: {
     cameraMode: CameraMode;
@@ -63,27 +63,41 @@ export class Debug {
   }
 
   /**
-   * Creates a named GUI folder. Returns the folder on first call, null on
-   * subsequent calls with the same name — callers should skip `.add()` when
-   * null is returned to avoid duplicating controls under StrictMode double-mount.
+   * Acquires a named GUI folder. Returns the folder on first acquisition and null
+   * on subsequent acquisitions so callers only register controls once.
    */
   createFolder(name: string): GUI | null {
     if (!this.gui) return null;
 
-    if (this.registeredFolders.has(name)) return null;
-
-    this.registeredFolders.add(name);
-
     const existing = this.folders.get(name);
 
-    if (existing) return existing;
+    if (existing) {
+      this.folderRefCounts.set(name, (this.folderRefCounts.get(name) ?? 0) + 1);
+      return null;
+    }
 
     const folder = this.gui.addFolder(name);
     this.folders.set(name, folder);
+    this.folderRefCounts.set(name, 1);
 
     return folder;
   }
 
+  destroyFolder(name: string): void {
+    const folder = this.folders.get(name);
+    const refCount = this.folderRefCounts.get(name);
+    if (!folder || refCount === undefined) return;
+
+    if (refCount > 1) {
+      this.folderRefCounts.set(name, refCount - 1);
+      return;
+    }
+
+    folder.destroy();
+    this.folders.delete(name);
+    this.folderRefCounts.delete(name);
+  }
+
   subscribe(listener: () => void): () => void {
     this.listeners.add(listener);
 

src/utils/debug/scene/DebugCameraControls.tsx

@@ -1,13 +1,23 @@
 import { OrbitControls } from "@react-three/drei";
+import {
+  DEBUG_CAMERA_DAMPING_FACTOR,
+  DEBUG_CAMERA_MAX_DISTANCE,
+  DEBUG_CAMERA_MIN_DISTANCE,
+} from "@/data/debugConfig";
+import {
+  PLAYER_EYE_HEIGHT,
+  PLAYER_SPAWN_X,
+  PLAYER_SPAWN_Z,
+} from "@/data/playerConfig";
 
 export function DebugCameraControls(): React.JSX.Element {
   return (
     <OrbitControls
       enableDamping
-      dampingFactor={0.05}
-      minDistance={100}
-      maxDistance={1000}
-      target={[0, 1.75, 0]}
+      dampingFactor={DEBUG_CAMERA_DAMPING_FACTOR}
+      minDistance={DEBUG_CAMERA_MIN_DISTANCE}
+      maxDistance={DEBUG_CAMERA_MAX_DISTANCE}
+      target={[PLAYER_SPAWN_X, PLAYER_EYE_HEIGHT, PLAYER_SPAWN_Z]}
     />
   );
 }

src/utils/debug/scene/DebugHelpers.tsx

@@ -1,3 +1,11 @@
+import {
+  DEBUG_AXES_SIZE,
+  DEBUG_GRID_DIVISIONS,
+  DEBUG_GRID_PRIMARY_COLOR,
+  DEBUG_GRID_SECONDARY_COLOR,
+  DEBUG_GRID_SIZE,
+  DEBUG_GRID_Y,
+} from "@/data/debugConfig";
 import { Debug } from "@/utils/debug/Debug";
 
 export function DebugHelpers(): React.JSX.Element | null {
@@ -10,10 +18,15 @@ export function DebugHelpers(): React.JSX.Element | null {
   return (
     <>
       <gridHelper
-        args={[180, 36, "#1d4ed8", "#1e293b"]}
-        position={[0, 0.01, 0]}
+        args={[
+          DEBUG_GRID_SIZE,
+          DEBUG_GRID_DIVISIONS,
+          DEBUG_GRID_PRIMARY_COLOR,
+          DEBUG_GRID_SECONDARY_COLOR,
+        ]}
+        position={[0, DEBUG_GRID_Y, 0]}
       />
-      <axesHelper args={[10]} />
+      <axesHelper args={[DEBUG_AXES_SIZE]} />
     </>
   );
 }