feat: use dto types for spritemap registry

clients/player-client/src/context/Input/InputProvider.tsx

@@ -2,8 +2,13 @@ import React, { useReducer } from 'react';
 import { InputContext } from './InputContext';
 import { InputReducer } from './InputReducer';
 import { InputState } from './InputState.type';
+import { InputEventRecordKey } from '../../dtos/Player/InputEventRecordKey.type';
 
-const initialState: InputState = { x: undefined, y: undefined, key: '' };
+const initialState: InputState = {
+  x: undefined,
+  y: undefined,
+  key: InputEventRecordKey.NONE,
+};
 
 export const InputProvider: React.FC<{ children: React.ReactNode }> = ({
   children,

clients/player-client/src/core/GameEngine/GameEngine.ts

@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, 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 { DateTime, Duration } from 'luxon';
 import { InputActionType } from '../../context/Input/InputActionType.type';
 
 export type GameEngineProps = {
@@ -14,12 +14,17 @@ export type GameEngineProps = {
 export const GameEngine: React.FC<GameEngineProps> = props => {
   const { data, updateData } = props;
   const inputContext = useInputContext();
+  const inputContextRef = useRef(inputContext);
   const [lastProcessedInput, setLastProcessedInput] =
     useState<InputEventRecord>({
       key: InputEventRecordKey.DEBUG,
       timestamp: DateTime.now(),
     });
 
+  useEffect(() => {
+    inputContextRef.current = inputContext;
+  }, [inputContext]);
+
   useEffect(() => {
     if (
       !inputContext.state.key ||
@@ -30,18 +35,31 @@ export const GameEngine: React.FC<GameEngineProps> = props => {
       return;
     }
 
+    // TODO automate this
+    const actorIndex = 0;
+
+    data.actors[actorIndex].animation.currentFrame = 0;
+    data.actors[actorIndex].animation.startTimestamp = DateTime.now();
+    data.actors[actorIndex].movement.isInMotion = true;
+    data.actors[actorIndex].movement.currentPosition =
+      data.actors[actorIndex].movement.targetPosition;
+    data.actors[actorIndex].movement.targetPositionReached = false;
+    data.actors[actorIndex].movement.movementDuration = Duration.fromObject({
+      seconds: 10,
+    });
+
     switch (inputContext.state.key) {
       case InputEventRecordKey.LEFT:
-        data.actors[0].movement.targetPosition.x--;
+        data.actors[actorIndex].movement.targetPosition.x--;
         break;
       case InputEventRecordKey.RIGHT:
-        data.actors[0].movement.targetPosition.x++;
+        data.actors[actorIndex].movement.targetPosition.x++;
         break;
       case InputEventRecordKey.UP:
-        data.actors[0].movement.targetPosition.y--;
+        data.actors[actorIndex].movement.targetPosition.y--;
         break;
       case InputEventRecordKey.DOWN:
-        data.actors[0].movement.targetPosition.y++;
+        data.actors[actorIndex].movement.targetPosition.y++;
         break;
       case InputEventRecordKey.DEBUG:
         inputContext.dispatch({

clients/player-client/src/core/IsometricCanvas/IsometricCanvas.tsx

@@ -1,6 +1,5 @@
 import { IsometricRender } from './utils/IsometricRender';
 import React, { useRef, useEffect, useState, useCallback } from 'react';
-import { IsometricCanvasProps } from './IsometricCanvasProps';
 import { Coordinate2D } from './types/Coordinates.type';
 import { useResize } from './hooks/useResize';
 import { canvasToGridCoordinate } from './utils/IsometricTransformer';
@@ -10,12 +9,13 @@ import { useInterval } from './hooks/useInterval';
 import { useInputContext } from '../../context/Input/useInputContext';
 import './IsometricCanvas.scss';
 import { InputActionType } from '../../context/Input/InputActionType.type';
+import { GameState } from '../../dtos/GameState.dto';
 
 const isometricRender = new IsometricRender({
   drawCoordinates: true,
 });
 
-export const IsometricCanvas = (props: IsometricCanvasProps) => {
+export const IsometricCanvas = (props: GameState) => {
   const {
     grid,
     actors,

clients/player-client/src/core/IsometricCanvas/hooks/useCanvasClassNames.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { BackgroundColor } from '../types/BackgroundColor.type';
+import { BackgroundColor } from '../../../dtos/Area/BackgroundColor.type';
 
 interface Properties {
   backgroundColor?: BackgroundColor;

clients/player-client/src/core/IsometricCanvas/index.ts

@@ -1,2 +1 @@
 export * from './IsometricCanvas';
-export * from './IsometricCanvasProps';