From 793e5318f7fe2d097433725d1d56fac4156cb9fc Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Sat, 11 Apr 2020 16:46:28 +0200
Subject: [PATCH 1/8] created a class to centralize all user inputs catching
 and expose user events

---
 front/src/Phaser/Game/MapManager.ts           | 46 +++-----------
 front/src/Phaser/Player/Player.ts             | 13 ++--
 .../src/Phaser/UserInput/UserInputManager.ts  | 63 +++++++++++++++++++
 3 files changed, 77 insertions(+), 45 deletions(-)
 create mode 100644 front/src/Phaser/UserInput/UserInputManager.ts

diff --git a/front/src/Phaser/Game/MapManager.ts b/front/src/Phaser/Game/MapManager.ts
index 8b3d9231..3f8521d4 100644
--- a/front/src/Phaser/Game/MapManager.ts
+++ b/front/src/Phaser/Game/MapManager.ts
@@ -2,35 +2,17 @@ import {CameraManager, CameraManagerInterface} from "./CameraManager";
 import {RESOLUTION} from "../../Enum/EnvironmentVariable";
 import {Player} from "../Player/Player";
 import {GameScene, GameSceneInterface} from "./GameScene";
+import {UserInputManager} from "../UserInput/UserInputManager";
 
 export interface MapManagerInterface {
-    keyZ: Phaser.Input.Keyboard.Key;
-    keyQ: Phaser.Input.Keyboard.Key;
-    keyS: Phaser.Input.Keyboard.Key;
-    keyD: Phaser.Input.Keyboard.Key;
-    keyRight: Phaser.Input.Keyboard.Key;
-    keyLeft: Phaser.Input.Keyboard.Key;
-    keyUp: Phaser.Input.Keyboard.Key;
-    keyDown: Phaser.Input.Keyboard.Key;
-    keyShift: Phaser.Input.Keyboard.Key;
-
     Map: Phaser.Tilemaps.Tilemap;
     Terrain: Phaser.Tilemaps.Tileset;
     Camera: CameraManagerInterface;
     Scene: GameSceneInterface;
+    userInputManager: UserInputManager;
     update(): void;
 }
 export class MapManager implements MapManagerInterface{
-    keyZ: Phaser.Input.Keyboard.Key;
-    keyQ: Phaser.Input.Keyboard.Key;
-    keyS: Phaser.Input.Keyboard.Key;
-    keyD: Phaser.Input.Keyboard.Key;
-    keyRight: Phaser.Input.Keyboard.Key;
-    keyLeft: Phaser.Input.Keyboard.Key;
-    keyUp: Phaser.Input.Keyboard.Key;
-    keyDown: Phaser.Input.Keyboard.Key;
-    keyShift: Phaser.Input.Keyboard.Key;
-
     Terrain : Phaser.Tilemaps.Tileset;
     Camera: CameraManagerInterface;
     CurrentPlayer: Player;
@@ -38,6 +20,7 @@ export class MapManager implements MapManagerInterface{
     Map: Phaser.Tilemaps.Tilemap;
     startX = (window.innerWidth / 2) / RESOLUTION;
     startY = (window.innerHeight / 2) / RESOLUTION;
+    userInputManager: UserInputManager;
 
     constructor(scene: GameSceneInterface){
         this.Scene = scene;
@@ -49,11 +32,9 @@ export class MapManager implements MapManagerInterface{
         this.Map.createStaticLayer("Calque 1", [this.Terrain], 0, 0);
         this.Map.createStaticLayer("Calque 2", [this.Terrain], 0, 0);
 
-        //initialise keyboard
-        this.initKeyBoard();
-
         //initialise camera
         this.Camera = new CameraManager(this.Scene, this.Scene.cameras.main, this);
+        this.userInputManager = new UserInputManager(this.Scene);
         //initialise player
         this.CurrentPlayer = new Player(
             this.Scene,
@@ -65,22 +46,9 @@ export class MapManager implements MapManagerInterface{
         this.CurrentPlayer.initAnimation();
     }
 
-
-    initKeyBoard() {
-        this.keyShift = this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SHIFT);
-
-        this.keyZ = this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Z);
-        this.keyQ = this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q);
-        this.keyS = this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S);
-        this.keyD = this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D);
-
-        this.keyUp = this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.UP);
-        this.keyLeft = this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.LEFT);
-        this.keyDown = this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.DOWN);
-        this.keyRight = this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.RIGHT);
-    }
-
     update() : void {
-        this.CurrentPlayer.move();
+        let activeEvents = this.userInputManager.getEventListForGameTick();
+        
+        this.CurrentPlayer.move(activeEvents);
     }
 }
\ No newline at end of file
diff --git a/front/src/Phaser/Player/Player.ts b/front/src/Phaser/Player/Player.ts
index 563843fd..11b3d4f6 100644
--- a/front/src/Phaser/Player/Player.ts
+++ b/front/src/Phaser/Player/Player.ts
@@ -3,6 +3,7 @@ import {getPlayerAnimations, playAnimation, PlayerAnimationNames} from "./Animat
 import {GameSceneInterface} from "../Game/GameScene";
 import {ConnexionInstance} from "../Game/GameManager";
 import {CameraManagerInterface} from "../Game/CameraManager";
+import {ActiveEventList, UserInputEvent} from "../UserInput/UserInputManager";
 
 export class Player extends Phaser.GameObjects.Sprite{
     MapManager : MapManagerInterface;
@@ -36,13 +37,13 @@ export class Player extends Phaser.GameObjects.Sprite{
         })
     }
 
-    move(){
+    move(activeEvents: ActiveEventList){
         //if user client on shift, camera and player speed
-        let speedMultiplier = this.MapManager.keyShift.isDown ? 5 : 1;
+        let speedMultiplier = activeEvents.get(UserInputEvent.SpeedUp) ? 5 : 1;
         let haveMove = false;
         let direction = null;
 
-        if((this.MapManager.keyZ.isDown || this.MapManager.keyUp.isDown)){
+        if(activeEvents.get(UserInputEvent.MoveUp)){
             if(!this.CanMoveUp()){
                 return;
             }
@@ -51,7 +52,7 @@ export class Player extends Phaser.GameObjects.Sprite{
             haveMove = true;
             direction = PlayerAnimationNames.WalkUp;
         }
-        if((this.MapManager.keyQ.isDown || this.MapManager.keyLeft.isDown)){
+        if(activeEvents.get(UserInputEvent.MoveLeft)){
             if(!this.CanMoveLeft()){
                 return;
             }
@@ -60,7 +61,7 @@ export class Player extends Phaser.GameObjects.Sprite{
             haveMove = true;
             direction = PlayerAnimationNames.WalkLeft;
         }
-        if((this.MapManager.keyS.isDown || this.MapManager.keyDown.isDown)){
+        if(activeEvents.get(UserInputEvent.MoveDown)){
             if(!this.CanMoveDown()){
                 return;
             }
@@ -69,7 +70,7 @@ export class Player extends Phaser.GameObjects.Sprite{
             haveMove = true;
             direction = PlayerAnimationNames.WalkDown;
         }
-        if((this.MapManager.keyD.isDown || this.MapManager.keyRight.isDown)){
+        if(activeEvents.get(UserInputEvent.MoveRight)){
             if(!this.CanMoveRight()){
                 return;
             }
diff --git a/front/src/Phaser/UserInput/UserInputManager.ts b/front/src/Phaser/UserInput/UserInputManager.ts
new file mode 100644
index 00000000..c362bd95
--- /dev/null
+++ b/front/src/Phaser/UserInput/UserInputManager.ts
@@ -0,0 +1,63 @@
+import Map = Phaser.Structs.Map;
+import {GameSceneInterface} from "../Game/GameScene";
+
+interface UserInputManagerDatum {
+    keyCode: number;
+    keyInstance: Phaser.Input.Keyboard.Key;
+    event: UserInputEvent
+}
+
+export enum UserInputEvent {
+    MoveLeft = 1,
+    MoveUp,
+    MoveRight,
+    MoveDown,
+    SpeedUp,
+}
+
+//we cannot the map structure so we have to create a replacment
+export class ActiveEventList {
+    private data:any;
+    constructor() {
+        this.data = {};
+    }
+    get(event: UserInputEvent): boolean {
+        return this.data[event] || false;
+    }
+    set(event: UserInputEvent, value: boolean): boolean {
+        return this.data[event] = true;
+    }
+} 
+
+//this class is responsible for catching user inputs and listing all active user actions at every game tick events.
+export class UserInputManager {
+    private data: UserInputManagerDatum[] = [
+        {keyCode: Phaser.Input.Keyboard.KeyCodes.Z, event: UserInputEvent.MoveUp, keyInstance: null},
+        {keyCode: Phaser.Input.Keyboard.KeyCodes.Q, event: UserInputEvent.MoveLeft, keyInstance: null},
+        {keyCode: Phaser.Input.Keyboard.KeyCodes.S, event: UserInputEvent.MoveDown, keyInstance: null},
+        {keyCode: Phaser.Input.Keyboard.KeyCodes.D, event: UserInputEvent.MoveRight, keyInstance: null},
+        
+        {keyCode: Phaser.Input.Keyboard.KeyCodes.UP, event: UserInputEvent.MoveUp, keyInstance: null},
+        {keyCode: Phaser.Input.Keyboard.KeyCodes.LEFT, event: UserInputEvent.MoveLeft, keyInstance: null},
+        {keyCode: Phaser.Input.Keyboard.KeyCodes.DOWN, event: UserInputEvent.MoveDown, keyInstance: null},
+        {keyCode: Phaser.Input.Keyboard.KeyCodes.RIGHT, event: UserInputEvent.MoveRight, keyInstance: null},
+        
+        {keyCode: Phaser.Input.Keyboard.KeyCodes.SHIFT, event: UserInputEvent.SpeedUp, keyInstance: null},
+    ];
+    
+    constructor(Scene : GameSceneInterface) {
+        this.data.forEach(d => {
+            d.keyInstance = Scene.input.keyboard.addKey(d.keyCode);
+        });
+    }
+
+    getEventListForGameTick(): ActiveEventList {
+        let eventsMap = new ActiveEventList();
+        this.data.forEach(d => {
+            if (d. keyInstance.isDown) {
+                eventsMap.set(d.event, true);
+            }
+        });
+        return eventsMap;
+    }
+}
\ No newline at end of file

From 241cbd720ab5e3062381b16d7d5724cef8406c20 Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Sat, 11 Apr 2020 18:17:36 +0200
Subject: [PATCH 2/8] added a rock

---
 front/dist/resources/objects/rockSprite.png   | Bin 0 -> 3659 bytes
 front/src/Phaser/Game/GameScene.ts            |   5 ++++
 front/src/Phaser/Game/MapManager.ts           |  16 ++++++++--
 front/src/Phaser/Rock/Rock.ts                 |  28 ++++++++++++++++++
 .../src/Phaser/UserInput/UserInputManager.ts  |   3 ++
 front/src/index.ts                            |   3 ++
 6 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 front/dist/resources/objects/rockSprite.png
 create mode 100644 front/src/Phaser/Rock/Rock.ts

diff --git a/front/dist/resources/objects/rockSprite.png b/front/dist/resources/objects/rockSprite.png
new file mode 100644
index 0000000000000000000000000000000000000000..40820abd0ee4564498e779462128d879c48dae1e
GIT binary patch
literal 3659
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
YM$joE+UD)Q$@RdIgSOVi2i$4@0|kzR_y7O^

literal 0
HcmV?d00001

diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index d3abfd15..faf19616 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -1,6 +1,10 @@
 import {MapManagerInterface, MapManager} from "./MapManager";
 import {GameManagerInterface} from "./GameManager";
 
+export enum Textures {
+    Rock = 'rock',
+}
+
 export interface GameSceneInterface extends Phaser.Scene {
     RoomId : string;
     sharedUserPosition(data : []): void;
@@ -18,6 +22,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
 
     //hook preload scene
     preload(): void {
+        this.load.image(Textures.Rock, 'resources/objects/rockSprite.png');
         this.load.image('tiles', 'maps/tiles.png');
         this.load.tilemapTiledJSON('map', 'maps/map2.json');
         this.load.spritesheet('player',
diff --git a/front/src/Phaser/Game/MapManager.ts b/front/src/Phaser/Game/MapManager.ts
index 3f8521d4..e6a82dc0 100644
--- a/front/src/Phaser/Game/MapManager.ts
+++ b/front/src/Phaser/Game/MapManager.ts
@@ -1,8 +1,9 @@
 import {CameraManager, CameraManagerInterface} from "./CameraManager";
 import {RESOLUTION} from "../../Enum/EnvironmentVariable";
 import {Player} from "../Player/Player";
-import {GameScene, GameSceneInterface} from "./GameScene";
-import {UserInputManager} from "../UserInput/UserInputManager";
+import {Rock} from "../Rock/Rock";
+import {GameSceneInterface} from "./GameScene";
+import {UserInputEvent, UserInputManager} from "../UserInput/UserInputManager";
 
 export interface MapManagerInterface {
     Map: Phaser.Tilemaps.Tilemap;
@@ -21,6 +22,7 @@ export class MapManager implements MapManagerInterface{
     startX = (window.innerWidth / 2) / RESOLUTION;
     startY = (window.innerHeight / 2) / RESOLUTION;
     userInputManager: UserInputManager;
+    private rock: Rock;
 
     constructor(scene: GameSceneInterface){
         this.Scene = scene;
@@ -44,11 +46,21 @@ export class MapManager implements MapManagerInterface{
             this
         );
         this.CurrentPlayer.initAnimation();
+        this.rock = new Rock(
+            this.Scene,
+            100,
+            300,
+        );
+        //this.rock.set()
     }
 
     update() : void {
         let activeEvents = this.userInputManager.getEventListForGameTick();
         
         this.CurrentPlayer.move(activeEvents);
+        
+        /*if (activeEvents.get(UserInputEvent.Interact)) {
+            
+        }*/
     }
 }
\ No newline at end of file
diff --git a/front/src/Phaser/Rock/Rock.ts b/front/src/Phaser/Rock/Rock.ts
new file mode 100644
index 00000000..8892f10d
--- /dev/null
+++ b/front/src/Phaser/Rock/Rock.ts
@@ -0,0 +1,28 @@
+import {GameSceneInterface, Textures} from "../Game/GameScene";
+import {CameraManagerInterface} from "../Game/CameraManager";
+import {MapManagerInterface} from "../Game/MapManager";
+
+export class Rock extends Phaser.GameObjects.Image {
+    private isMoving: boolean;
+
+    constructor(
+        Scene : GameSceneInterface,
+        x : number,
+        y : number,
+    ) {
+        super(Scene, x, y, Textures.Rock);
+        Scene.add.existing(this);
+        this.isMoving = false;
+    }
+    
+    push() {
+        console.log("the rock is pushed!")
+    }
+    
+    move() {
+        if(!this.isMoving) {
+            return;
+        }
+    }
+    
+}
\ No newline at end of file
diff --git a/front/src/Phaser/UserInput/UserInputManager.ts b/front/src/Phaser/UserInput/UserInputManager.ts
index c362bd95..e05eccb2 100644
--- a/front/src/Phaser/UserInput/UserInputManager.ts
+++ b/front/src/Phaser/UserInput/UserInputManager.ts
@@ -13,6 +13,7 @@ export enum UserInputEvent {
     MoveRight,
     MoveDown,
     SpeedUp,
+    Interact,
 }
 
 //we cannot the map structure so we have to create a replacment
@@ -43,6 +44,8 @@ export class UserInputManager {
         {keyCode: Phaser.Input.Keyboard.KeyCodes.RIGHT, event: UserInputEvent.MoveRight, keyInstance: null},
         
         {keyCode: Phaser.Input.Keyboard.KeyCodes.SHIFT, event: UserInputEvent.SpeedUp, keyInstance: null},
+        
+        {keyCode: Phaser.Input.Keyboard.KeyCodes.E, event: UserInputEvent.Interact, keyInstance: null},
     ];
     
     constructor(Scene : GameSceneInterface) {
diff --git a/front/src/index.ts b/front/src/index.ts
index 650fd52c..f74c9fa5 100644
--- a/front/src/index.ts
+++ b/front/src/index.ts
@@ -12,6 +12,9 @@ const config: GameConfig = {
     parent: "game",
     scene: gameManager.GameScenes,
     zoom: RESOLUTION,
+    physics: {
+        default: 'impact'
+    },
 };
 
 let game = new Phaser.Game(config);

From 6e27377b07f31c0e62f3b69f129bcba99f5b51e6 Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Sun, 12 Apr 2020 16:12:08 +0200
Subject: [PATCH 3/8] rewrote the app code to more easily allow for collisions

---
 front/dist/maps/map2.json                   |   6 ++
 front/src/Phaser/Entity/PlayableCaracter.ts |  16 +++
 front/src/Phaser/Entity/Sprite.ts           |   8 ++
 front/src/Phaser/Game/CameraManager.ts      |  54 ----------
 front/src/Phaser/Game/GameScene.ts          |  76 +++++++++++--
 front/src/Phaser/Game/MapManager.ts         |  66 ------------
 front/src/Phaser/Player/Animation.ts        |  32 +++---
 front/src/Phaser/Player/Player.ts           | 114 ++++----------------
 front/src/Phaser/Rock/Rock.ts               |  28 -----
 front/src/index.ts                          |   7 +-
 10 files changed, 139 insertions(+), 268 deletions(-)
 create mode 100644 front/src/Phaser/Entity/PlayableCaracter.ts
 create mode 100644 front/src/Phaser/Entity/Sprite.ts
 delete mode 100644 front/src/Phaser/Game/CameraManager.ts
 delete mode 100644 front/src/Phaser/Game/MapManager.ts
 delete mode 100644 front/src/Phaser/Rock/Rock.ts

diff --git a/front/dist/maps/map2.json b/front/dist/maps/map2.json
index 9a10e634..d68f4df9 100644
--- a/front/dist/maps/map2.json
+++ b/front/dist/maps/map2.json
@@ -155,6 +155,12 @@
                 }, 
                 {
                  "id":77,
+                  "properties":[
+                    {
+                      "name":"collides",
+                      "type":"bool",
+                      "value":true
+                    }],
                  "terrain":[2, 2, 2, 2]
                 }, 
                 {
diff --git a/front/src/Phaser/Entity/PlayableCaracter.ts b/front/src/Phaser/Entity/PlayableCaracter.ts
new file mode 100644
index 00000000..8456ed44
--- /dev/null
+++ b/front/src/Phaser/Entity/PlayableCaracter.ts
@@ -0,0 +1,16 @@
+import {getPlayerAnimations, playAnimation, PlayerAnimationNames} from "../Player/Animation";
+import {ActiveEventList, UserInputEvent} from "../UserInput/UserInputManager";
+
+export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite {
+
+    constructor(scene: Phaser.Scene, x: number, y: number, texture: string, frame?: string | number) {
+        super(scene, x, y, texture, frame);
+
+        scene.sys.updateList.add(this);
+        scene.sys.displayList.add(this);
+        this.setScale(2);
+        scene.physics.world.enableBody(this);
+        this.setImmovable(true);
+        this.setCollideWorldBounds(true)
+    }
+}
\ No newline at end of file
diff --git a/front/src/Phaser/Entity/Sprite.ts b/front/src/Phaser/Entity/Sprite.ts
new file mode 100644
index 00000000..f2abad52
--- /dev/null
+++ b/front/src/Phaser/Entity/Sprite.ts
@@ -0,0 +1,8 @@
+export class Sprite extends Phaser.GameObjects.Sprite {
+
+    constructor(scene: Phaser.Scene, x: number, y: number, texture: string, frame?: number | string) {
+        super(scene, x, y, texture, frame);
+        scene.sys.updateList.add(this);
+        scene.sys.displayList.add(this);
+    }
+}
\ No newline at end of file
diff --git a/front/src/Phaser/Game/CameraManager.ts b/front/src/Phaser/Game/CameraManager.ts
deleted file mode 100644
index b1585542..00000000
--- a/front/src/Phaser/Game/CameraManager.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import {RESOLUTION} from "../../Enum/EnvironmentVariable";
-import {Player} from "../Player/Player";
-import {MapManagerInterface} from "./MapManager";
-import {PlayerAnimationNames} from "../Player/Animation";
-
-export interface CameraManagerInterface {
-    MapManager : MapManagerInterface;
-    moveCamera(CurrentPlayer : Player) : void;
-}
-
-export class CameraManager implements CameraManagerInterface{
-    Scene : Phaser.Scene;
-    Camera : Phaser.Cameras.Scene2D.Camera;
-    MapManager : MapManagerInterface;
-
-    constructor(
-        Scene: Phaser.Scene,
-        Camera : Phaser.Cameras.Scene2D.Camera,
-        MapManager: MapManagerInterface,
-    ) {
-        this.Scene = Scene;
-        this.MapManager = MapManager;
-        this.Camera = Camera;
-    }
-
-    moveCamera(CurrentPlayer : Player): void {
-        //center of camera
-        let startX = ((window.innerWidth / 2) / RESOLUTION);
-        let startY = ((window.innerHeight / 2) / RESOLUTION);
-
-        let limit = {
-            top: startY,
-            left: startX,
-            bottom : this.MapManager.Map.heightInPixels - startY,
-            right: this.MapManager.Map.widthInPixels - startX,
-        };
-
-        if(CurrentPlayer.x < limit.left){
-            this.Camera.scrollX = 0;
-        }else if(CurrentPlayer.x > limit.right){
-            this.Camera.scrollX = (limit.right - startX);
-        }else {
-            this.Camera.scrollX = (CurrentPlayer.x - startX);
-        }
-
-        if(CurrentPlayer.y < limit.top){
-            this.Camera.scrollY = 0;
-        }else if(CurrentPlayer.y > limit.bottom){
-            this.Camera.scrollY = (limit.bottom - startY);
-        }else {
-            this.Camera.scrollY = (CurrentPlayer.y - startY);
-        }
-    }
-}
\ No newline at end of file
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index faf19616..3d02cf72 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -1,8 +1,13 @@
-import {MapManagerInterface, MapManager} from "./MapManager";
 import {GameManagerInterface} from "./GameManager";
+import {UserInputManager} from "../UserInput/UserInputManager";
+import {getPlayerAnimations, PlayerAnimationNames} from "../Player/Animation";
+import {Player} from "../Player/Player";
 
 export enum Textures {
     Rock = 'rock',
+    Player = 'player',
+    Map = 'map',
+    Tiles = 'tiles'
 }
 
 export interface GameSceneInterface extends Phaser.Scene {
@@ -10,8 +15,11 @@ export interface GameSceneInterface extends Phaser.Scene {
     sharedUserPosition(data : []): void;
 }
 export class GameScene extends Phaser.Scene implements GameSceneInterface{
-    private MapManager : MapManagerInterface;
+    //private MapManager : MapManagerInterface;
     RoomId : string;
+    private player: Player;
+    private rock: Phaser.Physics.Arcade.Sprite;
+    private userInputManager: UserInputManager;
 
     constructor(RoomId : string, GameManager : GameManagerInterface) {
         super({
@@ -23,26 +31,72 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
     //hook preload scene
     preload(): void {
         this.load.image(Textures.Rock, 'resources/objects/rockSprite.png');
-        this.load.image('tiles', 'maps/tiles.png');
-        this.load.tilemapTiledJSON('map', 'maps/map2.json');
-        this.load.spritesheet('player',
+        this.load.image(Textures.Tiles, 'maps/tiles.png');
+        this.load.tilemapTiledJSON(Textures.Map, 'maps/map2.json');
+        this.load.spritesheet(Textures.Player,
             'resources/characters/pipoya/Male 01-1.png',
             { frameWidth: 32, frameHeight: 32 }
         );
-    }
 
-    //hook initialisation
-    init(){}
+        getPlayerAnimations().forEach(d => {
+            this.anims.create({
+                key: d.key,
+                frames: this.anims.generateFrameNumbers(d.frameModel, { start: d.frameStart, end: d.frameEnd }),
+                frameRate: d.frameRate,
+                //repeat: d.repeat
+            });
+        });
+    }
 
     //hook create scene
     create(): void {
-        //create map manager
-        this.MapManager = new MapManager(this);
+        this.userInputManager = new UserInputManager(this);
+
+        //create entities
+        this.player = new Player(this, 400, 400);
+        this.rock = this.physics.add.sprite(200, 400, Textures.Rock, 26).setImmovable(true);
+        this.physics.world.addCollider(this.player, this.rock, (player: Player, rock) => {
+            rock.destroy();
+        });
+        
+        //create map
+        let currentMap = this.add.tilemap(Textures.Map);
+        let terrain = currentMap.addTilesetImage(Textures.Tiles, "tiles");
+        let bottomLayer = currentMap.createStaticLayer("Calque 1", [terrain], 0, 0).setDepth(-1);
+        let topLayer =  currentMap.createStaticLayer("Calque 2", [terrain], 0, 0);
+        this.physics.world.setBounds(0,0, currentMap.widthInPixels, currentMap.heightInPixels);
+        
+        this.physics.add.collider(this.player, topLayer);
+        topLayer.setCollisionByProperty({collides:true});
+
+        
+        this.cameras.main.startFollow(this.player);
+
+        
+        
+        //debug code
+        //debug code to see the collision hitbox of the object in the top layer
+        topLayer.renderDebug(this.add.graphics(),{
+            tileColor: null, //non-colliding tiles
+            collidingTileColor: new Phaser.Display.Color(243, 134, 48, 200), // Colliding tiles,
+            faceColor: new Phaser.Display.Color(40, 39, 37, 255) // Colliding face edges
+        })
+        
+        // debug code to get a tile properties by clicking on it
+        this.input.on("pointerdown", (pointer: Phaser.Input.Pointer)=>{
+            //pixel position to tile position
+            let tile = currentMap.getTileAt(currentMap.worldToTileX(pointer.worldX), currentMap.worldToTileY(pointer.worldY));
+            if(tile){
+                console.log(tile);
+            }
+        });
     }
 
     //hook update
     update(dt: number): void {
-        this.MapManager.update();
+        let eventList = this.userInputManager.getEventListForGameTick();
+        
+        this.player.move(eventList);
     }
 
     sharedUserPosition(data: []): void {
diff --git a/front/src/Phaser/Game/MapManager.ts b/front/src/Phaser/Game/MapManager.ts
deleted file mode 100644
index e6a82dc0..00000000
--- a/front/src/Phaser/Game/MapManager.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import {CameraManager, CameraManagerInterface} from "./CameraManager";
-import {RESOLUTION} from "../../Enum/EnvironmentVariable";
-import {Player} from "../Player/Player";
-import {Rock} from "../Rock/Rock";
-import {GameSceneInterface} from "./GameScene";
-import {UserInputEvent, UserInputManager} from "../UserInput/UserInputManager";
-
-export interface MapManagerInterface {
-    Map: Phaser.Tilemaps.Tilemap;
-    Terrain: Phaser.Tilemaps.Tileset;
-    Camera: CameraManagerInterface;
-    Scene: GameSceneInterface;
-    userInputManager: UserInputManager;
-    update(): void;
-}
-export class MapManager implements MapManagerInterface{
-    Terrain : Phaser.Tilemaps.Tileset;
-    Camera: CameraManagerInterface;
-    CurrentPlayer: Player;
-    Scene: GameSceneInterface;
-    Map: Phaser.Tilemaps.Tilemap;
-    startX = (window.innerWidth / 2) / RESOLUTION;
-    startY = (window.innerHeight / 2) / RESOLUTION;
-    userInputManager: UserInputManager;
-    private rock: Rock;
-
-    constructor(scene: GameSceneInterface){
-        this.Scene = scene;
-
-        //initalise map
-        this.Map = this.Scene.add.tilemap("map");
-        this.Terrain = this.Map.addTilesetImage("tiles", "tiles");
-        this.Map.createStaticLayer("tiles", "tiles");
-        this.Map.createStaticLayer("Calque 1", [this.Terrain], 0, 0);
-        this.Map.createStaticLayer("Calque 2", [this.Terrain], 0, 0);
-
-        //initialise camera
-        this.Camera = new CameraManager(this.Scene, this.Scene.cameras.main, this);
-        this.userInputManager = new UserInputManager(this.Scene);
-        //initialise player
-        this.CurrentPlayer = new Player(
-            this.Scene,
-            this.startX,
-            this.startY,
-            this.Camera,
-            this
-        );
-        this.CurrentPlayer.initAnimation();
-        this.rock = new Rock(
-            this.Scene,
-            100,
-            300,
-        );
-        //this.rock.set()
-    }
-
-    update() : void {
-        let activeEvents = this.userInputManager.getEventListForGameTick();
-        
-        this.CurrentPlayer.move(activeEvents);
-        
-        /*if (activeEvents.get(UserInputEvent.Interact)) {
-            
-        }*/
-    }
-}
\ No newline at end of file
diff --git a/front/src/Phaser/Player/Animation.ts b/front/src/Phaser/Player/Animation.ts
index eb8298f4..48dc3ac9 100644
--- a/front/src/Phaser/Player/Animation.ts
+++ b/front/src/Phaser/Player/Animation.ts
@@ -1,7 +1,10 @@
+import {Textures} from "../Game/GameScene";
+import {PlayableCaracter} from "../Entity/PlayableCaracter";
+
 interface AnimationData {
     key: string;
     frameRate: number;
-    repeat: number;
+    //repeat: number;
     frameModel: string; //todo use an enum
     frameStart: number;
     frameEnd: number;
@@ -15,42 +18,39 @@ export enum PlayerAnimationNames {
     None = 'none',
 }
 
-export const getPlayerAnimations = (PlayerValue : string): AnimationData[] => {
+export const getPlayerAnimations = (): AnimationData[] => {
     return [{
         key: PlayerAnimationNames.WalkDown,
-        frameModel: PlayerValue,
+        frameModel: Textures.Player,
         frameStart: 0,
         frameEnd: 2,
         frameRate: 10,
-        repeat: -1
+        //repeat: -1
     }, {
         key: PlayerAnimationNames.WalkLeft,
-        frameModel: PlayerValue,
+        frameModel: Textures.Player,
         frameStart: 3,
         frameEnd: 5,
         frameRate: 10,
-        repeat: -1
+        //repeat: -1
     }, {
         key: PlayerAnimationNames.WalkRight,
-        frameModel: PlayerValue,
+        frameModel: Textures.Player,
         frameStart: 6,
         frameEnd: 8,
         frameRate: 10,
-        repeat: -1
+        //repeat: -1
     }, {
         key: PlayerAnimationNames.WalkUp,
-        frameModel: PlayerValue,
+        frameModel: Textures.Player,
         frameStart: 9,
         frameEnd: 11,
         frameRate: 10,
-        repeat: -1
+        //repeat: -1
     }];
 };
 
-export const playAnimation = (Player : Phaser.GameObjects.Sprite, direction : string) => {
-    if (!Player.anims.currentAnim || Player.anims.currentAnim.key !== direction) {
-        Player.anims.play(direction);
-    } else if (direction === PlayerAnimationNames.None && Player.anims.currentAnim) {
-        Player.anims.currentAnim.destroy();
-    }
+export const playAnimation = (Player : PlayableCaracter, direction : string) => {
+    //if (direction === 'none') return;
+    //Player.play(direction, true);
 };
diff --git a/front/src/Phaser/Player/Player.ts b/front/src/Phaser/Player/Player.ts
index 11b3d4f6..ed85f5b4 100644
--- a/front/src/Phaser/Player/Player.ts
+++ b/front/src/Phaser/Player/Player.ts
@@ -1,112 +1,44 @@
-import {MapManagerInterface} from "../Game/MapManager";
 import {getPlayerAnimations, playAnimation, PlayerAnimationNames} from "./Animation";
-import {GameSceneInterface} from "../Game/GameScene";
+import {GameSceneInterface, Textures} from "../Game/GameScene";
 import {ConnexionInstance} from "../Game/GameManager";
-import {CameraManagerInterface} from "../Game/CameraManager";
 import {ActiveEventList, UserInputEvent} from "../UserInput/UserInputManager";
+import {PlayableCaracter} from "../Entity/PlayableCaracter";
 
-export class Player extends Phaser.GameObjects.Sprite{
-    MapManager : MapManagerInterface;
-    PlayerValue : string;
-    CameraManager: CameraManagerInterface;
-
-    constructor(
-        Scene : GameSceneInterface,
-        x : number,
-        y : number,
-        CameraManager: CameraManagerInterface,
-        MapManager: MapManagerInterface,
-        PlayerValue : string = "player"
-    ) {
-        super(Scene, x, y, PlayerValue);
-        this.PlayerValue = PlayerValue;
-        Scene.add.existing(this);
-        this.MapManager = MapManager;
-        this.CameraManager = CameraManager;
-    }
-
-
-    initAnimation(){
-        getPlayerAnimations(this.PlayerValue).forEach(d => {
-            this.scene.anims.create({
-                key: d.key,
-                frames: this.scene.anims.generateFrameNumbers(d.frameModel, { start: d.frameStart, end: d.frameEnd }),
-                frameRate: d.frameRate,
-                repeat: d.repeat
-            });
-        })
+export class Player extends PlayableCaracter{
+    
+    constructor(scene: Phaser.Scene, x: number, y: number) {
+        super(scene, x, y, Textures.Player, 26);
+        this.setSize(32, 32); //edit the hitbox to better match the caracter model
     }
 
     move(activeEvents: ActiveEventList){
-        //if user client on shift, camera and player speed
-        let speedMultiplier = activeEvents.get(UserInputEvent.SpeedUp) ? 5 : 1;
+        let speed = activeEvents.get(UserInputEvent.SpeedUp) ? 500 : 100;
         let haveMove = false;
         let direction = null;
 
         if(activeEvents.get(UserInputEvent.MoveUp)){
-            if(!this.CanMoveUp()){
-                return;
-            }
+            this.setVelocity(0, -speed)
             playAnimation(this, PlayerAnimationNames.WalkUp);
-            this.setY(this.y - (2 * speedMultiplier));
-            haveMove = true;
-            direction = PlayerAnimationNames.WalkUp;
-        }
-        if(activeEvents.get(UserInputEvent.MoveLeft)){
-            if(!this.CanMoveLeft()){
-                return;
-            }
-            playAnimation(this, PlayerAnimationNames.WalkLeft);
-            this.setX(this.x - (2 * speedMultiplier));
-            haveMove = true;
-            direction = PlayerAnimationNames.WalkLeft;
-        }
-        if(activeEvents.get(UserInputEvent.MoveDown)){
-            if(!this.CanMoveDown()){
-                return;
-            }
+        } else if(activeEvents.get(UserInputEvent.MoveLeft)){
+            this.setVelocity(-speed, 0)
+        } else if(activeEvents.get(UserInputEvent.MoveDown)){
             playAnimation(this, PlayerAnimationNames.WalkDown);
-            this.setY(this.y + (2 * speedMultiplier));
-            haveMove = true;
-            direction = PlayerAnimationNames.WalkDown;
-        }
-        if(activeEvents.get(UserInputEvent.MoveRight)){
-            if(!this.CanMoveRight()){
-                return;
-            }
-            playAnimation(this, PlayerAnimationNames.WalkRight);
-            this.setX(this.x + (2 * speedMultiplier));
-            haveMove = true;
-            direction = PlayerAnimationNames.WalkRight;
-        }
-        if(!haveMove){
+            this.setVelocity(0, speed)
+        } else if(activeEvents.get(UserInputEvent.MoveRight)){
+            this.setVelocity(speed, 0)
+        } else {
+            this.setVelocity(0, 0)
             playAnimation(this, PlayerAnimationNames.None);
-        }else{
-            this.sharePosition(direction);
         }
-
-        this.CameraManager.moveCamera(this);
     }
 
-    private sharePosition(direction : string){
+    stop() {
+        this.setVelocity(0, 0)
+    }
+
+    /*private sharePosition(direction : string){
         if(ConnexionInstance) {
             ConnexionInstance.sharePosition((this.scene as GameSceneInterface).RoomId, this.x, this.y, direction);
         }
-    }
-
-    private CanMoveUp(){
-        return this.y > 0;
-    }
-
-    private CanMoveLeft(){
-        return this.x > 0;
-    }
-
-    private CanMoveDown(){
-        return this.MapManager.Map.heightInPixels > this.y;
-    }
-
-    private CanMoveRight(){
-        return this.MapManager.Map.widthInPixels > this.x;
-    }
+    }*/
 }
\ No newline at end of file
diff --git a/front/src/Phaser/Rock/Rock.ts b/front/src/Phaser/Rock/Rock.ts
deleted file mode 100644
index 8892f10d..00000000
--- a/front/src/Phaser/Rock/Rock.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import {GameSceneInterface, Textures} from "../Game/GameScene";
-import {CameraManagerInterface} from "../Game/CameraManager";
-import {MapManagerInterface} from "../Game/MapManager";
-
-export class Rock extends Phaser.GameObjects.Image {
-    private isMoving: boolean;
-
-    constructor(
-        Scene : GameSceneInterface,
-        x : number,
-        y : number,
-    ) {
-        super(Scene, x, y, Textures.Rock);
-        Scene.add.existing(this);
-        this.isMoving = false;
-    }
-    
-    push() {
-        console.log("the rock is pushed!")
-    }
-    
-    move() {
-        if(!this.isMoving) {
-            return;
-        }
-    }
-    
-}
\ No newline at end of file
diff --git a/front/src/index.ts b/front/src/index.ts
index f74c9fa5..a366078a 100644
--- a/front/src/index.ts
+++ b/front/src/index.ts
@@ -13,8 +13,11 @@ const config: GameConfig = {
     scene: gameManager.GameScenes,
     zoom: RESOLUTION,
     physics: {
-        default: 'impact'
-    },
+        default: "arcade",
+        arcade: {
+            debug: true
+        }
+    }
 };
 
 let game = new Phaser.Game(config);

From 2b2b615e7bb2094d7a25f563228da0bb18d9457e Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Sun, 12 Apr 2020 17:08:28 +0200
Subject: [PATCH 4/8] added other players models and fixed collision with other
 entities

---
 front/src/Phaser/Game/GameScene.ts      | 12 +++++++++---
 front/src/Phaser/NonPlayer/NonPlayer.ts | 10 ++++++++++
 front/src/Phaser/Player/Player.ts       |  1 +
 3 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 front/src/Phaser/NonPlayer/NonPlayer.ts

diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 3d02cf72..545146b1 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -2,6 +2,7 @@ import {GameManagerInterface} from "./GameManager";
 import {UserInputManager} from "../UserInput/UserInputManager";
 import {getPlayerAnimations, PlayerAnimationNames} from "../Player/Animation";
 import {Player} from "../Player/Player";
+import {NonPlayer} from "../NonPlayer/NonPlayer";
 
 export enum Textures {
     Rock = 'rock',
@@ -20,6 +21,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
     private player: Player;
     private rock: Phaser.Physics.Arcade.Sprite;
     private userInputManager: UserInputManager;
+    private otherPlayers: Phaser.Physics.Arcade.Group;
 
     constructor(RoomId : string, GameManager : GameManagerInterface) {
         super({
@@ -55,9 +57,13 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
         //create entities
         this.player = new Player(this, 400, 400);
         this.rock = this.physics.add.sprite(200, 400, Textures.Rock, 26).setImmovable(true);
-        this.physics.world.addCollider(this.player, this.rock, (player: Player, rock) => {
-            rock.destroy();
-        });
+        this.physics.add.collider(this.player, this.rock);
+        
+        this.otherPlayers = this.physics.add.group({ immovable: true });
+        this.otherPlayers.add(new NonPlayer(this, 200, 600));
+        this.otherPlayers.add(new NonPlayer(this, 400, 600));
+
+        this.physics.add.collider(this.player, this.otherPlayers);
         
         //create map
         let currentMap = this.add.tilemap(Textures.Map);
diff --git a/front/src/Phaser/NonPlayer/NonPlayer.ts b/front/src/Phaser/NonPlayer/NonPlayer.ts
new file mode 100644
index 00000000..d9b22001
--- /dev/null
+++ b/front/src/Phaser/NonPlayer/NonPlayer.ts
@@ -0,0 +1,10 @@
+import {PlayableCaracter} from "../Entity/PlayableCaracter";
+import {Textures} from "../Game/GameScene";
+
+export class NonPlayer extends PlayableCaracter {
+    
+    constructor(scene: Phaser.Scene, x: number, y: number) {
+        super(scene, x, y, Textures.Player, 26);
+        this.setSize(32, 32); //edit the hitbox to better match the caracter model
+    }
+}
\ No newline at end of file
diff --git a/front/src/Phaser/Player/Player.ts b/front/src/Phaser/Player/Player.ts
index ed85f5b4..f6079ac8 100644
--- a/front/src/Phaser/Player/Player.ts
+++ b/front/src/Phaser/Player/Player.ts
@@ -8,6 +8,7 @@ export class Player extends PlayableCaracter{
     
     constructor(scene: Phaser.Scene, x: number, y: number) {
         super(scene, x, y, Textures.Player, 26);
+        this.setImmovable(false);
         this.setSize(32, 32); //edit the hitbox to better match the caracter model
     }
 

From d1106d757daba6b0e85a1ac3c22e97bacb6f1d7c Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Sun, 12 Apr 2020 17:13:33 +0200
Subject: [PATCH 5/8] made the player pushable by other models

---
 front/src/Phaser/Game/GameScene.ts | 4 ++++
 front/src/Phaser/Player/Player.ts  | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 545146b1..dac1f2fc 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -103,6 +103,10 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
         let eventList = this.userInputManager.getEventListForGameTick();
         
         this.player.move(eventList);
+        
+        this.otherPlayers.getChildren().forEach((otherPlayer: NonPlayer) => {
+            otherPlayer.setVelocity(20, 5);
+        })
     }
 
     sharedUserPosition(data: []): void {
diff --git a/front/src/Phaser/Player/Player.ts b/front/src/Phaser/Player/Player.ts
index f6079ac8..e4395b3d 100644
--- a/front/src/Phaser/Player/Player.ts
+++ b/front/src/Phaser/Player/Player.ts
@@ -8,7 +8,7 @@ export class Player extends PlayableCaracter{
     
     constructor(scene: Phaser.Scene, x: number, y: number) {
         super(scene, x, y, Textures.Player, 26);
-        this.setImmovable(false);
+        this.setImmovable(false); //the current player model should be push away by other players to prevent conflict
         this.setSize(32, 32); //edit the hitbox to better match the caracter model
     }
 

From 97a55ab66cd61a3b875fa4ef24bdb98d8d9fd677 Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Sun, 12 Apr 2020 18:28:05 +0200
Subject: [PATCH 6/8] fixed the player animations

---
 front/src/Phaser/Game/GameScene.ts      | 16 +++++++++-------
 front/src/Phaser/NonPlayer/NonPlayer.ts |  2 +-
 front/src/Phaser/Player/Player.ts       | 21 +++++++++++----------
 3 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index dac1f2fc..648e6579 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -6,7 +6,7 @@ import {NonPlayer} from "../NonPlayer/NonPlayer";
 
 export enum Textures {
     Rock = 'rock',
-    Player = 'player',
+    Player = 'playerModel',
     Map = 'map',
     Tiles = 'tiles'
 }
@@ -39,7 +39,11 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
             'resources/characters/pipoya/Male 01-1.png',
             { frameWidth: 32, frameHeight: 32 }
         );
+    }
 
+    //hook create scene
+    create(): void {
+        //anims cannot be in preload because it needs to wait to the sprit to be loaded
         getPlayerAnimations().forEach(d => {
             this.anims.create({
                 key: d.key,
@@ -48,10 +52,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
                 //repeat: d.repeat
             });
         });
-    }
-
-    //hook create scene
-    create(): void {
+        
         this.userInputManager = new UserInputManager(this);
 
         //create entities
@@ -68,8 +69,8 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
         //create map
         let currentMap = this.add.tilemap(Textures.Map);
         let terrain = currentMap.addTilesetImage(Textures.Tiles, "tiles");
-        let bottomLayer = currentMap.createStaticLayer("Calque 1", [terrain], 0, 0).setDepth(-1);
-        let topLayer =  currentMap.createStaticLayer("Calque 2", [terrain], 0, 0);
+        let bottomLayer = currentMap.createStaticLayer("Calque 1", [terrain], 0, 0).setDepth(-2);
+        let topLayer =  currentMap.createStaticLayer("Calque 2", [terrain], 0, 0).setDepth(-1);
         this.physics.world.setBounds(0,0, currentMap.widthInPixels, currentMap.heightInPixels);
         
         this.physics.add.collider(this.player, topLayer);
@@ -105,6 +106,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
         this.player.move(eventList);
         
         this.otherPlayers.getChildren().forEach((otherPlayer: NonPlayer) => {
+            //this.physics.accelerateToObject(otherPlayer, this.player); //this line make the models chase the player
             otherPlayer.setVelocity(20, 5);
         })
     }
diff --git a/front/src/Phaser/NonPlayer/NonPlayer.ts b/front/src/Phaser/NonPlayer/NonPlayer.ts
index d9b22001..46fa6450 100644
--- a/front/src/Phaser/NonPlayer/NonPlayer.ts
+++ b/front/src/Phaser/NonPlayer/NonPlayer.ts
@@ -4,7 +4,7 @@ import {Textures} from "../Game/GameScene";
 export class NonPlayer extends PlayableCaracter {
     
     constructor(scene: Phaser.Scene, x: number, y: number) {
-        super(scene, x, y, Textures.Player, 26);
+        super(scene, x, y, Textures.Player, 1);
         this.setSize(32, 32); //edit the hitbox to better match the caracter model
     }
 }
\ No newline at end of file
diff --git a/front/src/Phaser/Player/Player.ts b/front/src/Phaser/Player/Player.ts
index e4395b3d..ff2278f5 100644
--- a/front/src/Phaser/Player/Player.ts
+++ b/front/src/Phaser/Player/Player.ts
@@ -7,7 +7,7 @@ import {PlayableCaracter} from "../Entity/PlayableCaracter";
 export class Player extends PlayableCaracter{
     
     constructor(scene: Phaser.Scene, x: number, y: number) {
-        super(scene, x, y, Textures.Player, 26);
+        super(scene, x, y, Textures.Player, 1);
         this.setImmovable(false); //the current player model should be push away by other players to prevent conflict
         this.setSize(32, 32); //edit the hitbox to better match the caracter model
     }
@@ -19,27 +19,28 @@ export class Player extends PlayableCaracter{
 
         if(activeEvents.get(UserInputEvent.MoveUp)){
             this.setVelocity(0, -speed)
-            playAnimation(this, PlayerAnimationNames.WalkUp);
         } else if(activeEvents.get(UserInputEvent.MoveLeft)){
             this.setVelocity(-speed, 0)
         } else if(activeEvents.get(UserInputEvent.MoveDown)){
-            playAnimation(this, PlayerAnimationNames.WalkDown);
             this.setVelocity(0, speed)
         } else if(activeEvents.get(UserInputEvent.MoveRight)){
             this.setVelocity(speed, 0)
         } else {
             this.setVelocity(0, 0)
-            playAnimation(this, PlayerAnimationNames.None);
+        }
+
+        if (this.body.velocity.x > 0) { //moving right
+            this.play("right", true);
+        } else if (this.body.velocity.x < 0) { //moving left
+            this.anims.playReverse("left", true);
+        } else if (this.body.velocity.y < 0) { //moving up
+            this.play("up", true);
+        } else if (this.body.velocity.y > 0) { //moving down
+            this.play("down", true);
         }
     }
 
     stop() {
         this.setVelocity(0, 0)
     }
-
-    /*private sharePosition(direction : string){
-        if(ConnexionInstance) {
-            ConnexionInstance.sharePosition((this.scene as GameSceneInterface).RoomId, this.x, this.y, direction);
-        }
-    }*/
 }
\ No newline at end of file

From 05379c800190adabddda3003ba65630a8c21cdf3 Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Sun, 12 Apr 2020 19:06:31 +0200
Subject: [PATCH 7/8] the other playes now run away from the player on contact

---
 front/src/Phaser/Entity/PlayableCaracter.ts | 16 +++++++++++
 front/src/Phaser/Game/GameScene.ts          | 31 +++++++++++++++++----
 front/src/Phaser/NonPlayer/NonPlayer.ts     | 20 +++++++++++++
 front/src/Phaser/Player/Player.ts           | 28 -------------------
 4 files changed, 62 insertions(+), 33 deletions(-)

diff --git a/front/src/Phaser/Entity/PlayableCaracter.ts b/front/src/Phaser/Entity/PlayableCaracter.ts
index 8456ed44..789b2475 100644
--- a/front/src/Phaser/Entity/PlayableCaracter.ts
+++ b/front/src/Phaser/Entity/PlayableCaracter.ts
@@ -13,4 +13,20 @@ export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite {
         this.setImmovable(true);
         this.setCollideWorldBounds(true)
     }
+
+    move(x: number, y: number){
+
+        this.setVelocity(x, y);
+
+        //todo improve animations to better account for diagonal movement
+        if (this.body.velocity.x > 0) { //moving right
+            this.play(PlayerAnimationNames.WalkRight, true);
+        } else if (this.body.velocity.x < 0) { //moving left
+            this.anims.playReverse(PlayerAnimationNames.WalkLeft, true);
+        } else if (this.body.velocity.y < 0) { //moving up
+            this.play(PlayerAnimationNames.WalkUp, true);
+        } else if (this.body.velocity.y > 0) { //moving down
+            this.play(PlayerAnimationNames.WalkDown, true);
+        }
+    }
 }
\ No newline at end of file
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 648e6579..112e452c 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -1,5 +1,5 @@
 import {GameManagerInterface} from "./GameManager";
-import {UserInputManager} from "../UserInput/UserInputManager";
+import {UserInputEvent, UserInputManager} from "../UserInput/UserInputManager";
 import {getPlayerAnimations, PlayerAnimationNames} from "../Player/Animation";
 import {Player} from "../Player/Player";
 import {NonPlayer} from "../NonPlayer/NonPlayer";
@@ -64,7 +64,10 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
         this.otherPlayers.add(new NonPlayer(this, 200, 600));
         this.otherPlayers.add(new NonPlayer(this, 400, 600));
 
-        this.physics.add.collider(this.player, this.otherPlayers);
+        this.physics.add.collider(this.player, this.otherPlayers, (player: Player, otherPlayer: NonPlayer) => {
+            console.log("Don't touch me!");
+            otherPlayer.fleeFrom(player)
+        });
         
         //create map
         let currentMap = this.add.tilemap(Textures.Map);
@@ -101,13 +104,31 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
 
     //hook update
     update(dt: number): void {
-        let eventList = this.userInputManager.getEventListForGameTick();
+        //user inputs
+        let activeEvents = this.userInputManager.getEventListForGameTick();
+        let speed = activeEvents.get(UserInputEvent.SpeedUp) ? 500 : 100;
+
+        if(activeEvents.get(UserInputEvent.MoveUp)){
+            this.player.move(0, -speed)
+        } else if(activeEvents.get(UserInputEvent.MoveLeft)){
+            this.player.move(-speed, 0)
+        } else if(activeEvents.get(UserInputEvent.MoveDown)){
+            this.player.move(0, speed)
+        } else if(activeEvents.get(UserInputEvent.MoveRight)){
+            this.player.move(speed, 0)
+        } else {
+            this.player.move(0, 0)
+        }
         
-        this.player.move(eventList);
         
+        //updates other players
         this.otherPlayers.getChildren().forEach((otherPlayer: NonPlayer) => {
             //this.physics.accelerateToObject(otherPlayer, this.player); //this line make the models chase the player
-            otherPlayer.setVelocity(20, 5);
+            if (otherPlayer.isFleeing) {
+                otherPlayer.move(otherPlayer.fleeingDirection.x, otherPlayer.fleeingDirection.y);
+            } else {
+                otherPlayer.move(0, 0);
+            }
         })
     }
 
diff --git a/front/src/Phaser/NonPlayer/NonPlayer.ts b/front/src/Phaser/NonPlayer/NonPlayer.ts
index 46fa6450..91b83ba3 100644
--- a/front/src/Phaser/NonPlayer/NonPlayer.ts
+++ b/front/src/Phaser/NonPlayer/NonPlayer.ts
@@ -1,10 +1,30 @@
 import {PlayableCaracter} from "../Entity/PlayableCaracter";
 import {Textures} from "../Game/GameScene";
+import {UserInputEvent} from "../UserInput/UserInputManager";
+import {Player} from "../Player/Player";
 
 export class NonPlayer extends PlayableCaracter {
     
+    isFleeing: boolean = false;
+    fleeingDirection:any = null //todo create a vector class
+    
     constructor(scene: Phaser.Scene, x: number, y: number) {
         super(scene, x, y, Textures.Player, 1);
         this.setSize(32, 32); //edit the hitbox to better match the caracter model
     }
+
+    fleeFrom(player:Player) {
+        if (this.isFleeing) return;
+        this.isFleeing = true;
+        
+        setTimeout(() => {
+            console.log("I escaped");
+            this.isFleeing = false
+            this.fleeingDirection = null
+        }, 3000);
+        
+        let vectorX = this.x - player.x; 
+        let vectorY = this.y - player.y;
+        this.fleeingDirection = {x: vectorX, y: vectorY}
+    }
 }
\ No newline at end of file
diff --git a/front/src/Phaser/Player/Player.ts b/front/src/Phaser/Player/Player.ts
index ff2278f5..8c9b462b 100644
--- a/front/src/Phaser/Player/Player.ts
+++ b/front/src/Phaser/Player/Player.ts
@@ -12,34 +12,6 @@ export class Player extends PlayableCaracter{
         this.setSize(32, 32); //edit the hitbox to better match the caracter model
     }
 
-    move(activeEvents: ActiveEventList){
-        let speed = activeEvents.get(UserInputEvent.SpeedUp) ? 500 : 100;
-        let haveMove = false;
-        let direction = null;
-
-        if(activeEvents.get(UserInputEvent.MoveUp)){
-            this.setVelocity(0, -speed)
-        } else if(activeEvents.get(UserInputEvent.MoveLeft)){
-            this.setVelocity(-speed, 0)
-        } else if(activeEvents.get(UserInputEvent.MoveDown)){
-            this.setVelocity(0, speed)
-        } else if(activeEvents.get(UserInputEvent.MoveRight)){
-            this.setVelocity(speed, 0)
-        } else {
-            this.setVelocity(0, 0)
-        }
-
-        if (this.body.velocity.x > 0) { //moving right
-            this.play("right", true);
-        } else if (this.body.velocity.x < 0) { //moving left
-            this.anims.playReverse("left", true);
-        } else if (this.body.velocity.y < 0) { //moving up
-            this.play("up", true);
-        } else if (this.body.velocity.y > 0) { //moving down
-            this.play("down", true);
-        }
-    }
-
     stop() {
         this.setVelocity(0, 0)
     }

From c51f5f4aa9977e542f6e5c571709555978d0df35 Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Sun, 12 Apr 2020 19:35:51 +0200
Subject: [PATCH 8/8] added som ebasic speech bubbles

---
 front/src/Phaser/Entity/PlayableCaracter.ts   | 12 ++++
 front/src/Phaser/Entity/SpeechBubble.ts       | 62 +++++++++++++++++++
 front/src/Phaser/Game/GameScene.ts            |  7 ++-
 front/src/Phaser/NonPlayer/NonPlayer.ts       |  3 +-
 .../src/Phaser/UserInput/UserInputManager.ts  |  2 +
 5 files changed, 83 insertions(+), 3 deletions(-)
 create mode 100644 front/src/Phaser/Entity/SpeechBubble.ts

diff --git a/front/src/Phaser/Entity/PlayableCaracter.ts b/front/src/Phaser/Entity/PlayableCaracter.ts
index 789b2475..0c9db376 100644
--- a/front/src/Phaser/Entity/PlayableCaracter.ts
+++ b/front/src/Phaser/Entity/PlayableCaracter.ts
@@ -1,7 +1,9 @@
 import {getPlayerAnimations, playAnimation, PlayerAnimationNames} from "../Player/Animation";
 import {ActiveEventList, UserInputEvent} from "../UserInput/UserInputManager";
+import {SpeechBubble} from "./SpeechBubble";
 
 export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite {
+    private bubble: SpeechBubble;
 
     constructor(scene: Phaser.Scene, x: number, y: number, texture: string, frame?: string | number) {
         super(scene, x, y, texture, frame);
@@ -29,4 +31,14 @@ export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite {
             this.play(PlayerAnimationNames.WalkDown, true);
         }
     }
+    
+    say(text: string) {
+        if (this.bubble) return;
+        this.bubble = new SpeechBubble(this.scene, this, text)
+        //todo make the buble destroy on player movement?
+        setTimeout(() => {
+            this.bubble.destroy();
+            this.bubble = null;
+        }, 3000)
+    }
 }
\ No newline at end of file
diff --git a/front/src/Phaser/Entity/SpeechBubble.ts b/front/src/Phaser/Entity/SpeechBubble.ts
new file mode 100644
index 00000000..e3a055b2
--- /dev/null
+++ b/front/src/Phaser/Entity/SpeechBubble.ts
@@ -0,0 +1,62 @@
+import Scene = Phaser.Scene;
+import {PlayableCaracter} from "./PlayableCaracter";
+
+export class SpeechBubble {
+    private bubble: Phaser.GameObjects.Graphics;
+    private content: Phaser.GameObjects.Text;
+
+    constructor(scene: Scene, player: PlayableCaracter, text: string) {
+
+        let bubbleHeight = 50;
+        let bubblePadding = 10;
+        let bubbleWidth = bubblePadding * 2 + text.length * 10;
+        let arrowHeight = bubbleHeight / 4;
+
+        this.bubble = scene.add.graphics({ x: player.x + 16, y: player.y - 80 });
+
+        //  Bubble shadow
+        this.bubble.fillStyle(0x222222, 0.5);
+        this.bubble.fillRoundedRect(6, 6, bubbleWidth, bubbleHeight, 16);
+
+        //  this.bubble color
+        this.bubble.fillStyle(0xffffff, 1);
+
+        //  this.bubble outline line style
+        this.bubble.lineStyle(4, 0x565656, 1);
+
+        //  this.bubble shape and outline
+        this.bubble.strokeRoundedRect(0, 0, bubbleWidth, bubbleHeight, 16);
+        this.bubble.fillRoundedRect(0, 0, bubbleWidth, bubbleHeight, 16);
+
+        //  Calculate arrow coordinates
+        let point1X = Math.floor(bubbleWidth / 7);
+        let point1Y = bubbleHeight;
+        let point2X = Math.floor((bubbleWidth / 7) * 2);
+        let point2Y = bubbleHeight;
+        let point3X = Math.floor(bubbleWidth / 7);
+        let point3Y = Math.floor(bubbleHeight + arrowHeight);
+
+        //  bubble arrow shadow
+        this.bubble.lineStyle(4, 0x222222, 0.5);
+        this.bubble.lineBetween(point2X - 1, point2Y + 6, point3X + 2, point3Y);
+
+        //  bubble arrow fill
+        this.bubble.fillTriangle(point1X, point1Y, point2X, point2Y, point3X, point3Y);
+        this.bubble.lineStyle(2, 0x565656, 1);
+        this.bubble.lineBetween(point2X, point2Y, point3X, point3Y);
+        this.bubble.lineBetween(point1X, point1Y, point3X, point3Y);
+
+        this.content = scene.add.text(0, 0, text, { fontFamily: 'Arial', fontSize: 20, color: '#000000', align: 'center', wordWrap: { width: bubbleWidth - (bubblePadding * 2) } });
+
+        let bounds = this.content.getBounds();
+
+        this.content.setPosition(this.bubble.x + (bubbleWidth / 2) - (bounds.width / 2), this.bubble.y + (bubbleHeight / 2) - (bounds.height / 2));
+        
+    }
+    
+    destroy(): void {
+        this.bubble.setVisible(false) //todo find a better way
+        this.content.destroy()
+    }
+
+}
\ No newline at end of file
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 112e452c..eab3df65 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -1,6 +1,6 @@
 import {GameManagerInterface} from "./GameManager";
 import {UserInputEvent, UserInputManager} from "../UserInput/UserInputManager";
-import {getPlayerAnimations, PlayerAnimationNames} from "../Player/Animation";
+import {getPlayerAnimations} from "../Player/Animation";
 import {Player} from "../Player/Player";
 import {NonPlayer} from "../NonPlayer/NonPlayer";
 
@@ -65,7 +65,6 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
         this.otherPlayers.add(new NonPlayer(this, 400, 600));
 
         this.physics.add.collider(this.player, this.otherPlayers, (player: Player, otherPlayer: NonPlayer) => {
-            console.log("Don't touch me!");
             otherPlayer.fleeFrom(player)
         });
         
@@ -120,6 +119,10 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
             this.player.move(0, 0)
         }
         
+        if(activeEvents.get(UserInputEvent.Shout)) {
+            this.player.say('HEHO!');
+        }
+        
         
         //updates other players
         this.otherPlayers.getChildren().forEach((otherPlayer: NonPlayer) => {
diff --git a/front/src/Phaser/NonPlayer/NonPlayer.ts b/front/src/Phaser/NonPlayer/NonPlayer.ts
index 91b83ba3..f2d748ab 100644
--- a/front/src/Phaser/NonPlayer/NonPlayer.ts
+++ b/front/src/Phaser/NonPlayer/NonPlayer.ts
@@ -15,10 +15,11 @@ export class NonPlayer extends PlayableCaracter {
 
     fleeFrom(player:Player) {
         if (this.isFleeing) return;
+        this.say("Don't touch me!");
         this.isFleeing = true;
         
         setTimeout(() => {
-            console.log("I escaped");
+            this.say("Feww, I escaped.");
             this.isFleeing = false
             this.fleeingDirection = null
         }, 3000);
diff --git a/front/src/Phaser/UserInput/UserInputManager.ts b/front/src/Phaser/UserInput/UserInputManager.ts
index e05eccb2..1e5e6e13 100644
--- a/front/src/Phaser/UserInput/UserInputManager.ts
+++ b/front/src/Phaser/UserInput/UserInputManager.ts
@@ -14,6 +14,7 @@ export enum UserInputEvent {
     MoveDown,
     SpeedUp,
     Interact,
+    Shout,
 }
 
 //we cannot the map structure so we have to create a replacment
@@ -46,6 +47,7 @@ export class UserInputManager {
         {keyCode: Phaser.Input.Keyboard.KeyCodes.SHIFT, event: UserInputEvent.SpeedUp, keyInstance: null},
         
         {keyCode: Phaser.Input.Keyboard.KeyCodes.E, event: UserInputEvent.Interact, keyInstance: null},
+        {keyCode: Phaser.Input.Keyboard.KeyCodes.F, event: UserInputEvent.Shout, keyInstance: null},
     ];
     
     constructor(Scene : GameSceneInterface) {