From a6e25ffc35ef8533726260febd629d4568b31c69 Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Mon, 1 Jun 2020 13:33:51 +0200
Subject: [PATCH] Create an enter animation of the player in the map

 - I have added lock parameter. When a user enters in the map, the player automatically moving during 1sec. So during 1sec, the gamer cannot use key to move.
 - How to personalize start animation by map with start case animation and end case animation?
 - I think that this could be optional in a map?
---
 front/src/Phaser/Game/GameScene.ts |  5 ++-
 front/src/Phaser/Player/Player.ts  | 70 +++++++++++++++++++++++-------
 2 files changed, 58 insertions(+), 17 deletions(-)

diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 41f6f212..1e089285 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -319,7 +319,10 @@ export class GameScene extends Phaser.Scene {
         this.GameManager.joinRoom(this.RoomId, this.startX, this.startY, PlayerAnimationNames.WalkDown, false);
 
         //listen event to share position of user
-        this.CurrentPlayer.on(hasMovedEventName, this.pushPlayerPosition.bind(this))
+        this.CurrentPlayer.on(hasMovedEventName, this.pushPlayerPosition.bind(this));
+
+        //play animation when the user enter in new map
+        this.CurrentPlayer.startAnimation();
     }
 
     pushPlayerPosition(event: HasMovedEvent) {
diff --git a/front/src/Phaser/Player/Player.ts b/front/src/Phaser/Player/Player.ts
index 1c8458c0..1ce45523 100644
--- a/front/src/Phaser/Player/Player.ts
+++ b/front/src/Phaser/Player/Player.ts
@@ -8,6 +8,7 @@ import {PlayableCaracter} from "../Entity/PlayableCaracter";
 export const hasMovedEventName = "hasMoved";
 export interface CurrentGamerInterface extends PlayableCaracter{
     moveUser(delta: number) : void;
+    startAnimation(): void;
     say(text : string) : void;
 }
 
@@ -33,6 +34,11 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G
     previousDirection: string;
     wasMoving: boolean;
 
+    startedAnimationVelocityX : number = 0;
+    startedAnimationVelocityY: number = 0;
+    startedAnimationDirection: string = PlayerAnimationNames.WalkDown;
+    lock: boolean;
+
     constructor(
         userId: string,
         Scene: GameScene,
@@ -69,6 +75,30 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G
         })
     }
 
+    /**
+     * TODO : personalize start animation by map with start case animation and end case animation ?
+     * This could be optional in a map?
+     */
+    startAnimation(){
+        this.lock = true;
+        this.startedAnimationVelocityX = -16;
+        this.startedAnimationVelocityY = 0;
+        this.startedAnimationDirection = PlayerAnimationNames.WalkLeft;
+        setTimeout(() => {
+            this.stop();
+            this.move(0, 16);
+            this.startedAnimationVelocityX = 0;
+            this.startedAnimationVelocityY = 16;
+            this.startedAnimationDirection = PlayerAnimationNames.WalkDown;
+            setTimeout(() => {
+                this.startedAnimationVelocityX = 0;
+                this.startedAnimationVelocityY = 0;
+                this.stop();
+                this.lock = false;
+            }, 500);
+        }, 500);
+    }
+
     private getPlayerAnimations(name: string): AnimationData[] {
         return [{
             key: `${name}-${PlayerAnimationNames.WalkDown}`,
@@ -112,23 +142,31 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G
 
         let x = 0;
         let y = 0;
-        if (activeEvents.get(UserInputEvent.MoveUp)) {
-            y = - moveAmount;
-            direction = PlayerAnimationNames.WalkUp;
-            moving = true;
-        } else if (activeEvents.get(UserInputEvent.MoveDown)) {
-            y = moveAmount;
-            direction = PlayerAnimationNames.WalkDown;
-            moving = true;
-        }
-        if (activeEvents.get(UserInputEvent.MoveLeft)) {
-            x = -moveAmount;
-            direction = PlayerAnimationNames.WalkLeft;
-            moving = true;
-        } else if (activeEvents.get(UserInputEvent.MoveRight)) {
-            x = moveAmount;
-            direction = PlayerAnimationNames.WalkRight;
+
+        if(this.lock){
+            x = this.startedAnimationVelocityX;
+            y = this.startedAnimationVelocityY;
+            direction = this.startedAnimationDirection;
             moving = true;
+        }else {
+            if (activeEvents.get(UserInputEvent.MoveUp)) {
+                y = -moveAmount;
+                direction = PlayerAnimationNames.WalkUp;
+                moving = true;
+            } else if (activeEvents.get(UserInputEvent.MoveDown)) {
+                y = moveAmount;
+                direction = PlayerAnimationNames.WalkDown;
+                moving = true;
+            }
+            if (activeEvents.get(UserInputEvent.MoveLeft)) {
+                x = -moveAmount;
+                direction = PlayerAnimationNames.WalkLeft;
+                moving = true;
+            } else if (activeEvents.get(UserInputEvent.MoveRight)) {
+                x = moveAmount;
+                direction = PlayerAnimationNames.WalkRight;
+                moving = true;
+            }
         }
         if (x !== 0 || y !== 0) {
             this.move(x, y);