feat: debug flags

app/react/components/devtools/dashboard.jsx

@@ -1,22 +1,11 @@
-import {useCallback, useState} from 'react';
-
 import {useClient} from '@/react/context/client.js';
-import {useEcsTick} from '@/react/context/ecs.js';
-import {useMainEntity} from '@/react/context/main-entity.js';
+import {useDebug} from '@/react/context/debug.js';
 
 import styles from './dashboard.module.css';
 
 function Dashboard() {
   const client = useClient();
-  const mainEntityRef = useMainEntity();
-  const [mainEntityJson, setMainEntityJson] = useState('');
-  const onEcsTick = useCallback((payload, ecs) => {
-    if (!mainEntityRef.current) {
-      return;
-    }
-    setMainEntityJson(JSON.stringify(ecs.get(mainEntityRef.current), null, 2));
-  }, [mainEntityRef]);
-  useEcsTick(onEcsTick);
+  const [debug, setDebug] = useDebug();
   return (
     <div className={styles.dashboard}>
       <form>
@@ -25,8 +14,17 @@ function Dashboard() {
           <div>{Math.round(((client.throughput.down * 8) / 1024) * 10) / 10}kb/s down</div>
           <div>{Math.round(((client.throughput.up * 8) / 1024) * 10) / 10}kb/s up</div>
         </div>
+        <label>
+          Disable ambient light
+          <input
+            type="checkbox"
+            checked={debug.disableAmbientLight}
+            onChange={() => {
+              setDebug({...debug, disableAmbientLight: !debug.disableAmbientLight});
+            }}
+          />
+        </label>
       </form>
-      <pre><code><small>{mainEntityJson}</small></code></pre>
     </div>
   );
 }

app/react/components/pixi/ecs.jsx

@@ -1,6 +1,7 @@
 import {Container, useApp} from '@pixi/react';
 import {useCallback, useState} from 'react';
 
+import {useDebug} from '@/react/context/debug.js';
 import {useEcsTick} from '@/react/context/ecs.js';
 import {useMainEntity} from '@/react/context/main-entity.js';
 
@@ -12,6 +13,7 @@ import Water from './water.jsx';
 
 export default function Ecs({monopolizers, particleWorker}) {
   const app = useApp();
+  const [debug] = useDebug();
   const mainEntityRef = useMainEntity();
   const [layers, setLayers] = useState([]);
   const [projected, setProjected] = useState([]);
@@ -104,7 +106,7 @@ export default function Ecs({monopolizers, particleWorker}) {
               }
             }
             // 7 - 19 day
-            if (hour >= 7 && hour < 19) {
+            if (debug.disableAmbientLight || hour >= 7 && hour < 19) {
               brightness = 1;
               color = 0xffffff;
             }
@@ -132,7 +134,7 @@ export default function Ecs({monopolizers, particleWorker}) {
           : projected;
       });
     }
-  }, [app.ambientLight, mainEntityRef]);
+  }, [app.ambientLight, debug, mainEntityRef]);
   useEcsTick(onEcsTick);
   return (
     <>

app/react/components/pixi/entities.jsx

@@ -60,7 +60,7 @@ export default function Entities({monopolizers, particleWorker}) {
   }, []);
   useEffect(() => {
     for (const key in entities.current) {
-      entities.current[key].setDebug(debug);
+      entities.current[key].setDebug(debug.info);
     }
   }, [debug]);
   usePacket('EcsChange', () => {

app/react/components/ui.jsx

@@ -198,7 +198,7 @@ function Ui({disconnected}) {
             event.preventDefault();
           }
           if ('keyDown' === type) {
-            setDebug((debug) => !debug);
+            setDebug(({...debug}) => ({...debug, info: !debug.info}));
           }
           return;
         }

app/routes/_main-menu.play.$.$/route.jsx

@@ -16,7 +16,10 @@ export default function PlaySpecific() {
   const assetsTuple = useState({});
   const [client, setClient] = useState();
   const mainEntityRef = useRef();
-  const debugTuple = useState(false);
+  const debugTuple = useState({
+    disableAmbientLight: false,
+    info: false,
+  });
   const reconnectionBackoff = useRef(0);
   const ecsRef = useRef();
   const [disconnected, setDisconnected] = useState(false);