Refactored tank move handler to perform step predict while receiving keyboard event (this should remove glitch with blinking tank rotation)

Author: coder-pm

src/game/handlers/TankMoveHandler.ts

@@ -20,59 +20,70 @@ export const TANK_MOVE_HANDLER = (tank: TankModel, world: World, isStuck: boolea
         isStuck: isStuck
     };
     if (activeKey) {
-        let x = move.location.x;
-        let y = move.location.y;
-        let r = move.rotation;
-        let initialDirection = r;
-        let correctionAxis = 'x';
-        switch (activeKey) {
-            case 'ArrowUp':
-                y -= TANK_MOVE_STEP;
-                r = 0;
-                break;
-            case 'ArrowRight':
-                x += TANK_MOVE_STEP;
-                r = 90;
-                correctionAxis = 'y';
-                break;
-            case 'ArrowDown':
-                y += TANK_MOVE_STEP;
-                r = 180;
-                break;
-            case 'ArrowLeft':
-                x -= TANK_MOVE_STEP;
-                r = 270;
-                correctionAxis = 'y';
-                break;
-            default:
-        }
-
-        // move correction (stick to grid)
-        if (initialDirection !== r) {
-            if (correctionAxis === 'x') {
-                x = 3 + (Math.round(x / OBSTACLE_WIDTH) * OBSTACLE_WIDTH);
-            } else {
-                y = 3 + (Math.round(y / OBSTACLE_HEIGHT) * OBSTACLE_HEIGHT);
-            }
-        }
+        // perform step
+        const predict = TANK_STEP_HANDLER(move, activeKey);
 
         // intersection check
         if (world.isIntersecting(
-            Object.assign({}, tank, {location: {x: x, y: y}}),
+            Object.assign({}, tank, {location: predict.location}),
             Collision.BLOCK_MOVE
         ).length === 0) {
-            move.location = {x: x, y: y};
-            move.rotation = r;
+            move = predict;
             move.isStuck = false;
             world.updateObject(tank.id, move.location);
         } else {
             move.isStuck = true;
             // just rotate in case of intersection
             // but prevent rotation of stucked AI as it looks like glitch
             if (tank.actor !== TankActor.AI || !move.isStuck) {
-                move.rotation = r;
+                move.rotation = predict.rotation;
             }
         }
     }
     return move;
+};
+
+/**
+ * Tank step handler.
+ *
+ * @param move - tank move
+ * @param activeKey - active key
+ * @param step - step to perform
+ */
+export const TANK_STEP_HANDLER = (move: TankMove, activeKey: string, step: number = TANK_MOVE_STEP) => {
+    let x = move.location.x;
+    let y = move.location.y;
+    let r = move.rotation;
+    let initialDirection = r;
+    let correctionAxis = 'x';
+    switch (activeKey) {
+        case 'ArrowUp':
+            y -= step;
+            r = 0;
+            break;
+        case 'ArrowRight':
+            x += step;
+            r = 90;
+            correctionAxis = 'y';
+            break;
+        case 'ArrowDown':
+            y += step;
+            r = 180;
+            break;
+        case 'ArrowLeft':
+            x -= step;
+            r = 270;
+            correctionAxis = 'y';
+            break;
+        default:
+    }
+    // move correction (stick to grid)
+    if (initialDirection !== r) {
+        if (correctionAxis === 'x') {
+            x = 3 + (Math.round(x / OBSTACLE_WIDTH) * OBSTACLE_WIDTH);
+        } else {
+            y = 3 + (Math.round(y / OBSTACLE_HEIGHT) * OBSTACLE_HEIGHT);
+        }
+    }
+    return Object.assign({}, move, {location: {x: x, y: y}, rotation: r});
 };

src/server/classes/Game/Game.ts

@@ -10,7 +10,7 @@ import {TankActor} from "../../../game/enums/TankActor";
 import ObstacleModel from "../../../game/models/components/ObstacleModel";
 import {Collision} from "../../../game/enums/Collision";
 import {ObstacleType} from "../../../game/enums/ObstacleType";
-import {TANK_MOVE_HANDLER} from "../../../game/handlers/TankMoveHandler";
+import {TANK_MOVE_HANDLER, TANK_STEP_HANDLER} from "../../../game/handlers/TankMoveHandler";
 import MissileModel from "../../../game/models/components/MissileModel";
 import {MISSILE_MOVE_HANDLER} from "../../../game/handlers/MissileMoveHandler";
 import Structure from "../../../game/models/Structure";
@@ -110,16 +110,27 @@ export default class Game {
                 socket.on(NetworkPacket.TANK_EVENT_KEYBOARD, (packet: TankEventKeyboardPacket) => {
                     // tank might be destroyed in meantime
                     if (typeof this.tanks[clientId] === 'object') {
-                        this.clients[clientId].activeKey = packet.key;
+                        let location = this.tanks[clientId].location;
                         const distance = Math.sqrt(
-                            Math.pow(packet.location.x - this.tanks[clientId].location.x, 2) +
-                            Math.pow(packet.location.y - this.tanks[clientId].location.y, 2)
+                            Math.pow(packet.location.x - location.x, 2) +
+                            Math.pow(packet.location.y - location.y, 2)
                         );
                         // fix location due to latency and micro differences in server game loop
                         if (distance > 10) {
-                            this.tanks[clientId].location = packet.location;
-                            this.world.updateObject(clientId, packet.location);
+                            location = packet.location;
                         }
+                        // fix rotation (we should take in account new key)
+                        const predict = TANK_STEP_HANDLER({
+                            location: location,
+                            rotation: this.tanks[clientId].rotation,
+                            isStuck: false
+                        }, packet.key, 0);
+                        // update state
+                        this.tanks[clientId].location = predict.location;
+                        this.tanks[clientId].rotation = predict.rotation;
+                        this.world.updateObject(clientId, predict.location);
+                        this.clients[clientId].activeKey = packet.key;
+                        // broadcast update
                         this.io.emit(NetworkPacket.TANK_EVENT_KEYBOARD, {
                             tankId: clientId,
                             key: packet.key,