feat: debug

app/add-key-listener.js

@@ -26,14 +26,14 @@ export default function addKeyListener(target, listener) {
       return;
     }
     keysDown[key] = true;
-    listener({type: 'keyDown', payload: key});
+    listener({event, type: 'keyDown', payload: key});
   }
   function onKeyUp(event) {
     const {key} = event;
     keyUpDelays[key] = setTimeout(() => {
       delete keyUpDelays[key];
       delete keysDown[key];
-      listener({type: 'keyUp', payload: key});
+      listener({event, type: 'keyUp', payload: key});
     }, 20);
   }
   window.addEventListener('blur', onBlur);

app/context/debug.js

@@ -0,0 +1,9 @@
+import {createContext, useContext} from 'react';
+
+const context = createContext();
+
+export default context;
+
+export function useDebug() {
+  return useContext(context);
+}

app/react-components/entities.jsx

@@ -1,6 +1,8 @@
 import {Container, Graphics} from '@pixi/react';
 import {useCallback} from 'react';
 
+import {useDebug} from '@/context/debug.js';
+
 import Sprite from './sprite.jsx';
 
 function Crosshair({x, y}) {
@@ -27,6 +29,7 @@ function Crosshair({x, y}) {
 }
 
 export default function Entities({entities}) {
+  const [debug] = useDebug();
   const renderables = [];
   for (const id in entities) {
     const entity = entities[id];
@@ -40,7 +43,9 @@ export default function Entities({entities}) {
         <Sprite
           entity={entity}
         />
-        <Crosshair x={entity.Position.x} y={entity.Position.y} />
+        {debug && (
+          <Crosshair x={entity.Position.x} y={entity.Position.y} />
+        )}
       </Container>
     );
   }

app/react-components/pixi.jsx

@@ -7,6 +7,7 @@ import {createElement, useContext} from 'react';
 
 import {RESOLUTION} from '@/constants.js';
 import ClientContext from '@/context/client.js';
+import DebugContext from '@/context/debug.js';
 import EcsContext from '@/context/ecs.js';
 import MainEntityContext from '@/context/main-entity.js';
 
@@ -15,7 +16,7 @@ import styles from './pixi.module.css';
 
 BaseTexture.defaultOptions.scaleMode = SCALE_MODES.NEAREST;
 
-const Contexts = [ClientContext, EcsContext, MainEntityContext];
+const Contexts = [ClientContext, DebugContext, EcsContext, MainEntityContext];
 
 const ContextBridge = ({children, render}) => {
   const contexts = Contexts.map(useContext);

app/react-components/ui.jsx

@@ -3,6 +3,7 @@ import {useContext, useEffect, useState} from 'react';
 import addKeyListener from '@/add-key-listener.js';
 import {RESOLUTION} from '@/constants.js';
 import ClientContext from '@/context/client.js';
+import {useDebug} from '@/context/debug.js';
 import {useEcs} from '@/context/ecs.js';
 import {useMainEntity} from '@/context/main-entity.js';
 import usePacket from '@/hooks/use-packet.js';
@@ -23,6 +24,7 @@ export default function Ui({disconnected}) {
   // Key input.
   const client = useContext(ClientContext);
   const [mainEntity, setMainEntity] = useMainEntity();
+  const [debug, setDebug] = useDebug();
   const [ecs] = useEcs();
   const [showDisconnected, setShowDisconnected] = useState(false);
   const [bufferSlot, setBufferSlot] = useState();
@@ -43,13 +45,22 @@ export default function Ui({disconnected}) {
     };
   }, [disconnected]);
   useEffect(() => {
-    return addKeyListener(document.body, ({type, payload}) => {
+    return addKeyListener(document.body, ({event, type, payload}) => {
       const KEY_MAP = {
         keyDown: 1,
         keyUp: 0,
       };
       let actionPayload;
       switch (payload) {
+        case 'F3': {
+          if (event) {
+            event.preventDefault();
+          }
+          if ('keyDown' === type) {
+            setDebug(!debug);
+          }
+          break;
+        }
         case 'w': {
           actionPayload = {type: 'moveUp', value: KEY_MAP[type]};
           break;
@@ -138,7 +149,7 @@ export default function Ui({disconnected}) {
         });
       }
     });
-  }, [client]);
+  }, [client, debug, setDebug]);
   usePacket('Tick', (payload) => {
     if (0 === Object.keys(payload.ecs).length) {
       return;

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

@@ -3,6 +3,7 @@ import {useEffect, useState} from 'react';
 import {useOutletContext, useParams} from 'react-router-dom';
 
 import ClientContext from '@/context/client.js';
+import DebugContext from '@/context/debug.js';
 import EcsContext from '@/context/ecs.js';
 import MainEntityContext from '@/context/main-entity.js';
 import Ecs from '@/ecs/ecs.js';
@@ -20,6 +21,7 @@ export default function PlaySpecific() {
   const Client = useOutletContext();
   const [client, setClient] = useState();
   const mainEntityTuple = useState();
+  const debugTuple = useState(false);
   const ecsTuple = useState(new Ecs({Components, Systems}));
   const [disconnected, setDisconnected] = useState(false);
   const params = useParams();
@@ -93,7 +95,9 @@ export default function PlaySpecific() {
     <ClientContext.Provider value={client}>
       <MainEntityContext.Provider value={mainEntityTuple}>
         <EcsContext.Provider value={ecsTuple}>
-          <Ui disconnected={disconnected} />
+          <DebugContext.Provider value={debugTuple}>
+            <Ui disconnected={disconnected} />
+          </DebugContext.Provider>
         </EcsContext.Provider>
       </MainEntityContext.Provider>
     </ClientContext.Provider>