feat: move debug toggle to game engine

hxtree · Dec 11, 2024 · 91737a0 · 91737a0
1 parent 645a9a1
commit 91737a0
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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<GameEngineProps> = props => {
   const { data, updateData } = props;
   const inputContext = useInputContext();
+  const [lastProcessedInput, setLastProcessedInput] =
+    useState<InputEventRecord>({
+      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
@@ -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<KeyboardProps> = () => {
       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
@@ -36,7 +36,7 @@ export default function useHandleInput(): InputEventRecord[] | null {
       newInputRecords.forEach(record => {
         newState.unshift(record);
       });
-      setInputState(newState);
+      setInputState(newInputRecords);
     };
 
     const handleKeyUp = (event: KeyboardEvent) => {