Make movement speed depend on joystick force

front/src/Phaser/Player/Player.ts

@@ -47,7 +47,7 @@ export class Player extends Character implements CurrentGamerInterface {
         let x = 0;
         let y = 0;
         if (activeEvents.get(UserInputEvent.MoveUp)) {
-            y = - moveAmount;
+            y = -moveAmount;
             direction = PlayerAnimationDirections.Up;
             moving = true;
         } else if (activeEvents.get(UserInputEvent.MoveDown)) {
@@ -64,16 +64,18 @@ export class Player extends Character implements CurrentGamerInterface {
             direction = PlayerAnimationDirections.Right;
             moving = true;
         }
+        moving = moving || activeEvents.get(UserInputEvent.JoystickMove);
 
         if (x !== 0 || y !== 0) {
             this.move(x, y);
             this.emit(hasMovedEventName, {moving, direction, x: this.x, y: this.y});
-        } else {
-            if (this.wasMoving) {
-                //direction = PlayerAnimationNames.None;
-                this.stop();
-                this.emit(hasMovedEventName, {moving, direction: this.previousDirection, x: this.x, y: this.y});
-            }
+        } else if (this.wasMoving && moving) {
+            // slow joystick movement
+            this.move(0, 0);
+            this.emit(hasMovedEventName, {moving, direction: this.previousDirection, x: this.x, y: this.y});
+        } else if (this.wasMoving && !moving) {
+            this.stop();
+            this.emit(hasMovedEventName, {moving, direction: this.previousDirection, x: this.x, y: this.y});
         }
 
         if (direction !== null) {

front/src/Phaser/UserInput/UserInputManager.ts

@@ -17,20 +17,24 @@ export enum UserInputEvent {
     SpeedUp,
     Interact,
     Shout,
+    JoystickMove,
 }
 
-//we cannot the map structure so we have to create a replacment
+//we cannot use a map structure so we have to create a replacment
 export class ActiveEventList {
-    private KeysCode : Map<UserInputEvent, boolean> = new Map<UserInputEvent, boolean>();
+    private eventMap : Map<UserInputEvent, boolean> = new Map<UserInputEvent, boolean>();
 
     get(event: UserInputEvent): boolean {
-        return this.KeysCode.get(event) || false;
+        return this.eventMap.get(event) || false;
     }
     set(event: UserInputEvent, value: boolean): void {
-        this.KeysCode.set(event, value);
+        this.eventMap.set(event, value);
     }
     forEach(callback: (value: boolean, key: UserInputEvent) => void): void {
-        this.KeysCode.forEach(callback);
+        this.eventMap.forEach(callback);
+    }
+    any(): boolean {
+        return Array.from(this.eventMap.values()).reduce((accu, curr) => accu || curr, false);
     }
 }
 
@@ -39,14 +43,22 @@ export class UserInputManager {
     private KeysCode!: UserInputManagerDatum[];
     private Scene: GameScene;
     private isInputDisabled : boolean;
+
+    private joystick : IVirtualJoystick;
     private joystickEvents = new ActiveEventList();
+    private joystickForceThreshold = 60;
+    private joystickForceAccuX = 0;
+    private joystickForceAccuY = 0;
 
     constructor(Scene: GameScene, virtualJoystick: IVirtualJoystick) {
         this.Scene = Scene;
         this.isInputDisabled = false;
         this.initKeyBoardEvent();
-        virtualJoystick.on("update", () => {
-            const cursorKeys = virtualJoystick.createCursorKeys();
+        this.joystick = virtualJoystick;
+        this.joystick.on("update", () => {
+            this.joystickForceAccuX = this.joystick.forceX ? this.joystickForceAccuX : 0;
+            this.joystickForceAccuY = this.joystick.forceY ? this.joystickForceAccuY : 0;
+            const cursorKeys = this.joystick.createCursorKeys();
             for (const name in cursorKeys) {
                 const key = cursorKeys[name as Direction];
                 switch (name) {
@@ -109,11 +121,29 @@ export class UserInputManager {
         }
         this.joystickEvents.forEach((value, key) => {
             if (value) {
-                eventsMap.set(key, value);
+                switch (key) {
+                case UserInputEvent.MoveUp:
+                case UserInputEvent.MoveDown:
+                    this.joystickForceAccuY += this.joystick.forceY;
+                    if (Math.abs(this.joystickForceAccuY) > this.joystickForceThreshold) {
+                        eventsMap.set(key, value);
+                        this.joystickForceAccuY = 0;
+                    }
+                    break;
+                case UserInputEvent.MoveLeft:
+                case UserInputEvent.MoveRight:
+                    this.joystickForceAccuX += this.joystick.forceX;
+                    if (Math.abs(this.joystickForceAccuX) > this.joystickForceThreshold) {
+                        eventsMap.set(key, value);
+                        this.joystickForceAccuX = 0;
+                    }
+                    break;
+                }
             }
         });
+        eventsMap.set(UserInputEvent.JoystickMove, this.joystickEvents.any());
         this.KeysCode.forEach(d => {
-            if (d. keyInstance.isDown) {
+            if (d.keyInstance.isDown) {
                 eventsMap.set(d.event, true);
             }
         });

front/src/types.ts

@@ -16,6 +16,8 @@ export interface CursorKeys extends Record<Direction, CursorKey> {
 export interface IVirtualJoystick extends Phaser.GameObjects.GameObject {
     y: number;
     x: number;
+    forceX: number;
+    forceY: number;
     visible: boolean;
     createCursorKeys: () => CursorKeys;
 }