feat: slightly improve glichy sub movement

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

@@ -91,12 +91,14 @@ export const GameEngine: React.FC<GameEngineProps> = props => {
           data.actors[actorIndex].addAction(
             new WalkAction({
               wait: Duration.fromObject({ seconds: 0 }),
-              act: Duration.fromObject({ seconds: 3 }),
+              act: Duration.fromObject({ seconds: 0.5 }),
               recovery: Duration.fromObject({ seconds: 0 }),
               direction: ActorOrientation.NORTHWEST,
               frames: 10,
             }),
           );
+        } else {
+          data.actors[actorIndex].orientation = ActorOrientation.NORTHWEST;
         }
         break;
       case InputEventRecordKey.RIGHT:
@@ -110,13 +112,16 @@ export const GameEngine: React.FC<GameEngineProps> = props => {
           data.actors[actorIndex].addAction(
             new WalkAction({
               wait: Duration.fromObject({ seconds: 0 }),
-              act: Duration.fromObject({ seconds: 1 }),
+              act: Duration.fromObject({ seconds: 0.5 }),
               recovery: Duration.fromObject({ seconds: 0 }),
               direction: ActorOrientation.SOUTHEAST,
               frames: 10,
             }),
           );
+        } else {
+          data.actors[actorIndex].orientation = ActorOrientation.SOUTHEAST;
         }
+
         break;
       case InputEventRecordKey.UP:
         if (
@@ -129,13 +134,16 @@ export const GameEngine: React.FC<GameEngineProps> = props => {
           data.actors[actorIndex].addAction(
             new WalkAction({
               wait: Duration.fromObject({ seconds: 0 }),
-              act: Duration.fromObject({ seconds: 1 }),
+              act: Duration.fromObject({ seconds: 0.5 }),
               recovery: Duration.fromObject({ seconds: 0 }),
               direction: ActorOrientation.NORTHEAST,
               frames: 10,
             }),
           );
+        } else {
+          data.actors[actorIndex].orientation = ActorOrientation.NORTHEAST;
         }
+
         break;
       case InputEventRecordKey.DOWN:
         if (
@@ -148,12 +156,14 @@ export const GameEngine: React.FC<GameEngineProps> = props => {
           data.actors[actorIndex].addAction(
             new WalkAction({
               wait: Duration.fromObject({ seconds: 0 }),
-              act: Duration.fromObject({ seconds: 1 }),
+              act: Duration.fromObject({ seconds: 0.5 }),
               recovery: Duration.fromObject({ seconds: 0 }),
               direction: ActorOrientation.SOUTHWEST,
               frames: 10,
             }),
           );
+        } else {
+          data.actors[actorIndex].orientation = ActorOrientation.SOUTHWEST;
         }
         break;
       case InputEventRecordKey.DEBUG:

clients/player-client/src/core/Keyboard/keyBindings.ts

@@ -1,5 +1,6 @@
 import { InputEventRecordKey } from '../../dtos/Player/InputEventRecordKey.type';
 
+// TODO: lowercase the key bindings
 export const keyboardBindings = {
   [InputEventRecordKey.UP]: 'w',
   [InputEventRecordKey.DOWN]: 's',

clients/player-client/src/dtos/Actions/WalkAction.ts

@@ -4,6 +4,7 @@ import { Actor } from '../Actor/Actor.dto';
 import { Action } from './Action';
 import { pause } from './pause';
 import { SpriteMapActionId } from '../SpriteMap/SpriteMapType.type';
+import { Coordinate2d } from '../Coordinate2d.dto';
 
 export class WalkAction extends Action {
   direction: ActorOrientation;
@@ -27,31 +28,30 @@ export class WalkAction extends Action {
     const executeRun = async (
       resolve: (value: boolean | PromiseLike<boolean>) => void,
     ) => {
-      this.progress = 0;
-      let delta: { x?: number; y?: number } = {};
-
+      let delta: Coordinate2d = { x: 0, y: 0 };
       switch (this.direction) {
         case ActorOrientation.NORTHEAST:
-          delta = { y: -0.1 };
+          delta = { x: 0, y: -0.1 };
           break;
         case ActorOrientation.NORTHWEST:
-          delta = { x: -0.1 };
+          delta = { x: -0.1, y: 0 };
           break;
         case ActorOrientation.SOUTHEAST:
-          delta = { x: 0.1 };
+          delta = { x: 0.1, y: 0 };
           break;
         case ActorOrientation.SOUTHWEST:
-          delta = { y: 0.1 };
+          delta = { x: 0, y: 0.1 };
           break;
       }
 
       actor.spriteMapActionId = this.spriteMapId;
       actor.orientation = this.direction;
+      const startCurrentFrame = actor.spriteMapCurrentFrame;
 
-      for (let currentFrame = 0; currentFrame < this.frames; currentFrame++) {
+      for (let i = 0; i < 5; i++) {
         actor.position.move(delta);
-        actor.spriteMapCurrentFrame = currentFrame;
-        this.progress = ((currentFrame + 1) / this.frames) * 100;
+        actor.spriteMapCurrentFrame = (startCurrentFrame + i) % this.frames;
+        this.progress = ((i + 1) / 5) * 100;
         await pause(this.frameDuration());
       }
 

clients/player-client/src/dtos/Actor/Actor.dto.ts

@@ -17,7 +17,7 @@ import { kebabCase } from 'lodash';
 import { Coordinate2d } from '../Coordinate2d.dto';
 import { GridFieldArea } from '../Grid/GridFieldArea.type';
 import {
-  SPRITE_HEIGHT,
+  SPRITE_DEPTH,
   SPRITE_WIDTH,
 } from '../../core/IsometricCanvas/utils/SpriteDimensions';
 import { Coordinate3d } from '../Coordinate3d.dto';
@@ -74,9 +74,9 @@ export class Actor {
       y++;
     }
     return {
-      x: x, //Math.ceil(this.position.x),
-      y: y, //Math.ceil(this.position.y),
-      z: this.position.z,
+      x: Math.floor(x), //Math.ceil(this.position.x),
+      y: Math.floor(y), //Math.ceil(this.position.y),
+      z: Math.floor(this.position.z),
     };
   }
 
@@ -86,17 +86,25 @@ export class Actor {
       y: vectors.top.y - 17,
     };
 
-    // if(this.position.subX < 0.5) {
-    //   baseCoordinate2d.x -= this.position.subX * (SPRITE_WIDTH / 2);
-    // }
-    console.log(this.gridRenderPosition());
-    console.log(this.position);
+    const gridRenderPosition = this.gridRenderPosition();
 
-    if (this.position.subX >= 0.6) {
-      baseCoordinate2d.x += this.position.subX * (SPRITE_WIDTH / 2);
-      baseCoordinate2d.y += this.position.subX * (SPRITE_HEIGHT / 2);
+    if (gridRenderPosition.x > this.position.gridX) {
+      baseCoordinate2d.x -= ((1 - this.position.subX) * SPRITE_WIDTH) / 2;
+      baseCoordinate2d.y -= ((1 - this.position.subX) * SPRITE_DEPTH) / 2;
     }
 
+    if (gridRenderPosition.y > this.position.gridY) {
+      baseCoordinate2d.x += ((1 - this.position.subY) * SPRITE_WIDTH) / 2;
+      baseCoordinate2d.y -= ((1 - this.position.subY) * SPRITE_DEPTH) / 2;
+    }
+
+    console.table({
+      grid: this.position.grid,
+      gridRender: this.gridRenderPosition(),
+      base: baseCoordinate2d,
+      sub: this.position.sub,
+    });
+
     // if(this.position.subX <= 0.4) {
     //   baseCoordinate2d.x -= this.position.subX * (SPRITE_WIDTH / 2);
     //   baseCoordinate2d.y -= this.position.subX * (SPRITE_HEIGHT /2);

clients/player-client/src/dtos/Actor/ActorPosition.dto.ts

@@ -1,5 +1,5 @@
 import { IsNumber } from 'class-validator';
-
+import { Coordinate3d } from '../Coordinate3d.dto';
 export class ActorPosition {
   @IsNumber()
   x: number;
@@ -16,6 +16,22 @@ export class ActorPosition {
     this.z = z;
   }
 
+  get grid(): Coordinate3d {
+    return {
+      x: this.gridX,
+      y: this.gridY,
+      z: this.gridZ,
+    };
+  }
+
+  get sub(): Coordinate3d {
+    return {
+      x: this.subX,
+      y: this.subY,
+      z: this.subZ,
+    };
+  }
+
   get gridX(): number {
     return Math.floor(this.x);
   }
@@ -29,17 +45,16 @@ export class ActorPosition {
   }
 
   get subX(): number {
-    return this.x % 1;
+    return Number((this.x % 1).toFixed(1));
   }
 
   get subY(): number {
-    return this.y % 1;
+    return Number((this.y % 1).toFixed(1));
   }
 
   get subZ(): number {
-    return this.z % 1;
+    return Number((this.z % 1).toFixed(1));
   }
-
   move(deltas: { x?: number; y?: number; z?: number }) {
     if (deltas.x !== undefined) {
       this.x += deltas.x;