From 4c0e2cec9b6773c6c2aaf22d13e03530054f73b3 Mon Sep 17 00:00:00 2001 From: cha0s Date: Tue, 25 Jun 2024 08:54:19 -0500 Subject: [PATCH] feat: debug --- app/add-key-listener.js | 4 ++-- app/context/debug.js | 9 +++++++++ app/react-components/entities.jsx | 7 ++++++- app/react-components/pixi.jsx | 3 ++- app/react-components/ui.jsx | 15 +++++++++++++-- app/routes/_main-menu.play.$.$/route.jsx | 6 +++++- 6 files changed, 37 insertions(+), 7 deletions(-) create mode 100644 app/context/debug.js diff --git a/app/add-key-listener.js b/app/add-key-listener.js index 5fa8a63..6c308ef 100644 --- a/app/add-key-listener.js +++ b/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); diff --git a/app/context/debug.js b/app/context/debug.js new file mode 100644 index 0000000..70a7990 --- /dev/null +++ b/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); +} diff --git a/app/react-components/entities.jsx b/app/react-components/entities.jsx index 3c8c738..bcc9dd5 100644 --- a/app/react-components/entities.jsx +++ b/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}) { - + {debug && ( + + )} ); } diff --git a/app/react-components/pixi.jsx b/app/react-components/pixi.jsx index 24ec0a8..09ce749 100644 --- a/app/react-components/pixi.jsx +++ b/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); diff --git a/app/react-components/ui.jsx b/app/react-components/ui.jsx index a236fea..ef2404a 100644 --- a/app/react-components/ui.jsx +++ b/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; diff --git a/app/routes/_main-menu.play.$.$/route.jsx b/app/routes/_main-menu.play.$.$/route.jsx index fbf65d2..dcf1723 100644 --- a/app/routes/_main-menu.play.$.$/route.jsx +++ b/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() { - + + +