From 91737a048f0d7d4341e6c99faeea7c259775c218 Mon Sep 17 00:00:00 2001 From: hxtree <19890291+hxtree@users.noreply.github.com> Date: Wed, 11 Dec 2024 14:28:15 -0600 Subject: [PATCH] feat: move debug toggle to game engine --- .../src/context/Input/InputAction.type.ts | 3 +- .../src/context/Input/InputState.type.ts | 3 +- .../src/core/GameEngine/GameEngine.ts | 53 ++++++++++++++----- .../src/core/Keyboard/Keyboard.tsx | 8 --- .../src/core/Keyboard/useHandleInput.ts | 2 +- 5 files changed, 46 insertions(+), 23 deletions(-) diff --git a/clients/player-client/src/context/Input/InputAction.type.ts b/clients/player-client/src/context/Input/InputAction.type.ts index b3780d62..f574db7e 100644 --- a/clients/player-client/src/context/Input/InputAction.type.ts +++ b/clients/player-client/src/context/Input/InputAction.type.ts @@ -1,12 +1,13 @@ import { InputActionType } from './InputActionType.type'; import { DateTime } from 'luxon'; +import { InputEventRecordKey } from '../../dtos/Player/InputEventRecordKey.type'; export type InputAction = | { type: InputActionType.SET_DEBUG; payload: { debug: boolean } } | { type: InputActionType.SET_TOUCH_GRID; payload: { x: number; y: number } } | { type: InputActionType.SET_KEYSTROKE; - payload: { key: string; timestamp: DateTime }; + payload: { key: InputEventRecordKey; timestamp: DateTime }; } | { type: InputActionType.SET_MOUSE_MOVE; diff --git a/clients/player-client/src/context/Input/InputState.type.ts b/clients/player-client/src/context/Input/InputState.type.ts index 1d407381..e2215fc3 100644 --- a/clients/player-client/src/context/Input/InputState.type.ts +++ b/clients/player-client/src/context/Input/InputState.type.ts @@ -1,11 +1,12 @@ import { DateTime } from 'luxon'; +import { InputEventRecordKey } from '../../dtos/Player/InputEventRecordKey.type'; export type InputState = { x?: number; y?: number; cursorX?: number; cursorY?: number; - key?: string; + key?: InputEventRecordKey; timestamp?: DateTime; debug?: boolean; }; diff --git a/clients/player-client/src/core/GameEngine/GameEngine.ts b/clients/player-client/src/core/GameEngine/GameEngine.ts index aeeb8f67..ab3df18d 100644 --- a/clients/player-client/src/core/GameEngine/GameEngine.ts +++ b/clients/player-client/src/core/GameEngine/GameEngine.ts @@ -1,7 +1,10 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import { useInputContext } from '../../context/Input/useInputContext'; import { InputEventRecordKey } from '../../dtos/Player/InputEventRecordKey.type'; import { GameState } from '../../dtos/GameState.dto'; +import { InputEventRecord } from '../../dtos/Player/InputEventRecord.dto'; +import { DateTime } from 'luxon'; +import { InputActionType } from '../../context/Input/InputActionType.type'; export type GameEngineProps = { data: GameState; @@ -11,23 +14,49 @@ export type GameEngineProps = { export const GameEngine: React.FC = props => { const { data, updateData } = props; const inputContext = useInputContext(); + const [lastProcessedInput, setLastProcessedInput] = + useState({ + key: InputEventRecordKey.DEBUG, + timestamp: DateTime.now(), + }); useEffect(() => { - if (inputContext.state.key === InputEventRecordKey.LEFT) { - data.actors[0].movement.targetPosition.x--; + if ( + !inputContext.state.key || + !inputContext.state.timestamp || + (lastProcessedInput.key === inputContext.state.key && + lastProcessedInput.timestamp === inputContext.state.timestamp) + ) { + return; } - if (inputContext.state.key === InputEventRecordKey.RIGHT) { - data.actors[0].movement.targetPosition.x++; - } - if (inputContext.state.key === InputEventRecordKey.UP) { - data.actors[0].movement.targetPosition.y--; - } - if (inputContext.state.key === InputEventRecordKey.DOWN) { - data.actors[0].movement.targetPosition.y++; + + switch (inputContext.state.key) { + case InputEventRecordKey.LEFT: + data.actors[0].movement.targetPosition.x--; + break; + case InputEventRecordKey.RIGHT: + data.actors[0].movement.targetPosition.x++; + break; + case InputEventRecordKey.UP: + data.actors[0].movement.targetPosition.y--; + break; + case InputEventRecordKey.DOWN: + data.actors[0].movement.targetPosition.y++; + break; + case InputEventRecordKey.DEBUG: + inputContext.dispatch({ + type: InputActionType.SET_DEBUG, + payload: { debug: inputContext.state.debug ? false : true }, + }); + break; } + setLastProcessedInput({ + key: inputContext.state.key, + timestamp: inputContext.state.timestamp, + }); updateData(data); - }, [updateData, inputContext.state.key]); + }, [inputContext.state, lastProcessedInput, data, updateData]); return null; }; diff --git a/clients/player-client/src/core/Keyboard/Keyboard.tsx b/clients/player-client/src/core/Keyboard/Keyboard.tsx index 2c405811..ced6eca1 100644 --- a/clients/player-client/src/core/Keyboard/Keyboard.tsx +++ b/clients/player-client/src/core/Keyboard/Keyboard.tsx @@ -2,7 +2,6 @@ import React, { useEffect, useRef } from 'react'; import useHandleInput from './useHandleInput'; import { useInputContext } from '../../context/Input/useInputContext'; import { InputActionType } from '../../context/Input/InputActionType.type'; -import { InputEventRecordKey } from '../../dtos/Player/InputEventRecordKey.type'; export type KeyboardProps = { config?: string; @@ -26,13 +25,6 @@ export const Keyboard: React.FC = () => { type: InputActionType.SET_KEYSTROKE, payload: { key: input[0]?.key, timestamp: input[0]?.timestamp }, }); - - if (input[0]?.key === InputEventRecordKey.DEBUG) { - inputContextRef.current.dispatch({ - type: InputActionType.SET_DEBUG, - payload: { debug: !inputContextRef.current.state.debug }, - }); - } }, [input]); return ( diff --git a/clients/player-client/src/core/Keyboard/useHandleInput.ts b/clients/player-client/src/core/Keyboard/useHandleInput.ts index 1be406ac..951152af 100644 --- a/clients/player-client/src/core/Keyboard/useHandleInput.ts +++ b/clients/player-client/src/core/Keyboard/useHandleInput.ts @@ -36,7 +36,7 @@ export default function useHandleInput(): InputEventRecord[] | null { newInputRecords.forEach(record => { newState.unshift(record); }); - setInputState(newState); + setInputState(newInputRecords); }; const handleKeyUp = (event: KeyboardEvent) => {