split up context, rebuild

src/components/AudioEmitter.tsx

@@ -4,7 +4,7 @@ import { PositionalAudio, Vector3 } from "three";
 import { ConsoleObject, getPosition, getProperty } from "../mission";
 import { audioToUrl } from "../loaders";
 import { useAudio } from "./AudioContext";
-import { useSettings } from "./SettingsProvider";
+import { useDebug, useSettings } from "./SettingsProvider";
 import { FloatingLabel } from "./FloatingLabel";
 
 // Global audio buffer cache
@@ -37,7 +37,7 @@ export const AudioEmitter = memo(function AudioEmitter({
 }: {
   object: ConsoleObject;
 }) {
-  const { debugMode } = useSettings();
+  const { debugMode } = useDebug();
   const fileName = getProperty(object, "fileName")?.value ?? "";
   const volume = parseFloat(getProperty(object, "volume")?.value ?? "1");
   const minDistance = parseFloat(

src/components/DebugElements.tsx

@@ -1,10 +1,10 @@
 import { Stats, Html } from "@react-three/drei";
-import { useSettings } from "./SettingsProvider";
+import { useDebug } from "./SettingsProvider";
 import { useEffect, useRef } from "react";
 import { AxesHelper } from "three";
 
 export function DebugElements() {
-  const { debugMode } = useSettings();
+  const { debugMode } = useDebug();
   const axesRef = useRef<AxesHelper>(null);
 
   useEffect(() => {

src/components/GenericShape.tsx

@@ -8,7 +8,7 @@ import {
 } from "../shaderMaterials";
 import { MeshStandardMaterial } from "three";
 import { setupColor } from "../textureUtils";
-import { useSettings } from "./SettingsProvider";
+import { useDebug } from "./SettingsProvider";
 import { useShapeInfo } from "./ShapeInfoProvider";
 import { FloatingLabel } from "./FloatingLabel";
 
@@ -71,7 +71,7 @@ export type StaticShapeType = "StaticShape" | "TSStatic" | "Item" | "Turret";
 
 export const ShapeModel = memo(function ShapeModel() {
   const { shapeName } = useShapeInfo();
-  const { debugMode } = useSettings();
+  const { debugMode } = useDebug();
   const { nodes } = useStaticShape(shapeName);
 
   const hullBoneIndices = useMemo(() => {

src/components/InspectorControls.tsx

@@ -1,5 +1,5 @@
 import { getResourceList } from "../manifest";
-import { useSettings } from "./SettingsProvider";
+import { useControls, useDebug, useSettings } from "./SettingsProvider";
 
 const excludeMissions = new Set([
   "SkiFree",
@@ -23,15 +23,13 @@ export function InspectorControls({
   const {
     fogEnabled,
     setFogEnabled,
-    speedMultiplier,
-    setSpeedMultiplier,
     fov,
     setFov,
     audioEnabled,
     setAudioEnabled,
-    debugMode,
-    setDebugMode,
   } = useSettings();
+  const { speedMultiplier, setSpeedMultiplier } = useControls();
+  const { debugMode, setDebugMode } = useDebug();
 
   return (
     <div

src/components/InteriorInstance.tsx

@@ -10,6 +10,8 @@ import {
   getScale,
 } from "../mission";
 import { setupColor } from "../textureUtils";
+import { FloatingLabel } from "./FloatingLabel";
+import { useDebug } from "./SettingsProvider";
 
 const FALLBACK_URL = `${BASE_URL}/black.png`;
 
@@ -55,6 +57,7 @@ function InteriorMesh({ node }: { node: Mesh }) {
 export const InteriorModel = memo(
   ({ interiorFile }: { interiorFile: string }) => {
     const { nodes } = useInterior(interiorFile);
+    const { debugMode } = useDebug();
 
     return (
       <group rotation={[0, -Math.PI / 2, 0]}>
@@ -66,6 +69,7 @@ export const InteriorModel = memo(
           .map(([name, node]: [string, any]) => (
             <InteriorMesh key={name} node={node} />
           ))}
+        {debugMode ? <FloatingLabel>{interiorFile}</FloatingLabel> : null}
       </group>
     );
   }

src/components/ObserverControls.tsx

@@ -3,7 +3,7 @@ import { Vector3 } from "three";
 import { useFrame, useThree } from "@react-three/fiber";
 import { KeyboardControls, useKeyboardControls } from "@react-three/drei";
 import { PointerLockControls } from "three-stdlib";
-import { useSettings } from "./SettingsProvider";
+import { useControls } from "./SettingsProvider";
 
 enum Controls {
   forward = "forward",
@@ -19,7 +19,7 @@ const MIN_SPEED_ADJUSTMENT = 0.05;
 const MAX_SPEED_ADJUSTMENT = 0.5;
 
 function CameraMovement() {
-  const { speedMultiplier, setSpeedMultiplier } = useSettings();
+  const { speedMultiplier, setSpeedMultiplier } = useControls();
   const [subscribe, getKeys] = useKeyboardControls<Controls>();
   const { camera, gl } = useThree();
   const controlsRef = useRef<PointerLockControls | null>(null);

src/components/SettingsProvider.tsx

@@ -9,6 +9,8 @@ import {
 } from "react";
 
 const SettingsContext = createContext(null);
+const DebugContext = createContext(null);
+const ControlsContext = createContext(null);
 
 type PersistedSettings = {
   fogEnabled?: boolean;
@@ -22,6 +24,14 @@ export function useSettings() {
   return useContext(SettingsContext);
 }
 
+export function useDebug() {
+  return useContext(DebugContext);
+}
+
+export function useControls() {
+  return useContext(ControlsContext);
+}
+
 export function SettingsProvider({ children }: { children: ReactNode }) {
   const [fogEnabled, setFogEnabled] = useState(true);
   const [speedMultiplier, setSpeedMultiplier] = useState(1);
@@ -29,20 +39,26 @@ export function SettingsProvider({ children }: { children: ReactNode }) {
   const [audioEnabled, setAudioEnabled] = useState(false);
   const [debugMode, setDebugMode] = useState(false);
 
-  const value = useMemo(
+  const settingsContext = useMemo(
     () => ({
       fogEnabled,
       setFogEnabled,
-      speedMultiplier,
-      setSpeedMultiplier,
       fov,
       setFov,
       audioEnabled,
       setAudioEnabled,
-      debugMode,
-      setDebugMode,
     }),
-    [fogEnabled, speedMultiplier, fov, audioEnabled, debugMode, setDebugMode]
+    [fogEnabled, speedMultiplier, fov, audioEnabled]
+  );
+
+  const debugContext = useMemo(
+    () => ({ debugMode, setDebugMode }),
+    [debugMode, setDebugMode]
+  );
+
+  const controlsContext = useMemo(
+    () => ({ speedMultiplier, setSpeedMultiplier }),
+    [speedMultiplier, setSpeedMultiplier]
   );
 
   // Read persisted settings from localStoarge.
@@ -103,8 +119,12 @@ export function SettingsProvider({ children }: { children: ReactNode }) {
   }, [fogEnabled, speedMultiplier, fov, audioEnabled, debugMode]);
 
   return (
-    <SettingsContext.Provider value={value}>
-      {children}
+    <SettingsContext.Provider value={settingsContext}>
+      <DebugContext.Provider value={debugContext}>
+        <ControlsContext.Provider value={controlsContext}>
+          {children}
+        </ControlsContext.Provider>
+      </DebugContext.Provider>
     </SettingsContext.Provider>
   );
 }

src/components/TerrainBlock.tsx

@@ -27,7 +27,7 @@ import {
   setupMask,
   updateTerrainTextureShader,
 } from "../textureUtils";
-import { useSettings } from "./SettingsProvider";
+import { useDebug } from "./SettingsProvider";
 
 const DEFAULT_SQUARE_SIZE = 8;
 
@@ -52,7 +52,7 @@ function BlendedTerrainTextures({
   textureNames: string[];
   alphaMaps: Uint8Array[];
 }) {
-  const { debugMode } = useSettings();
+  const { debugMode } = useDebug();
 
   const baseTextures = useTexture(
     textureNames.map((name) => terrainTextureToUrl(name)),