Merge branch 'interaction' into kharhamel-interaction

# Conflicts:
#	front/src/Phaser/Game/CameraManager.ts
#	front/src/Phaser/Game/GameScene.ts
#	front/src/Phaser/Game/MapManager.ts
#	front/src/Phaser/Player/Player.ts

front/src/Phaser/Entity/PlayableCaracter.ts

@@ -0,0 +1,45 @@
+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);
+
+        this.scene.sys.updateList.add(this);
+        this.scene.sys.displayList.add(this);
+        this.setScale(2);
+        this.scene.physics.world.enableBody(this);
+        this.setImmovable(true);
+        this.setCollideWorldBounds(true);
+        this.setSize(32, 32); //edit the hitbox to better match the caracter model
+    }
+
+    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);
+        }
+    }
+    
+    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)
+    }
+}

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()
+    }
+
+}

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);
+    }
+}