Merge branch 'master' into webrtc

# Conflicts:
#	front/src/Phaser/Game/GameManager.ts

front/src/Enum/EnvironmentVariable.ts

@@ -1,8 +1,8 @@
 const DEBUG_MODE: boolean = !!process.env.DEBUG_MODE || false;
 const API_URL = process.env.API_URL || "http://api.workadventure.localhost";
 const ROOM = [process.env.ROOM || "THECODINGMACHINE"];
-const RESOLUTION = 2;
-const ZOOM_LEVEL = 3/4;
+const RESOLUTION = 4;
+const ZOOM_LEVEL = 1/*3/4*/;
 
 export {
     DEBUG_MODE,
@@ -10,4 +10,4 @@ export {
     RESOLUTION,
     ZOOM_LEVEL,
     ROOM
-}
+}

front/src/Phaser/Components/ClickButton.ts

@@ -0,0 +1,11 @@
+
+export class ClickButton extends Phaser.GameObjects.Image{
+    
+    constructor(scene: Phaser.Scene, x: number, y: number, textureName: string, callback: Function) {
+        super(scene, x, y, textureName);
+        this.scene.add.existing(this);
+        this.setInteractive();
+        this.on("pointerup", callback);
+    }
+    
+}

front/src/Phaser/Components/TextField.ts

@@ -0,0 +1,7 @@
+
+export class TextField extends Phaser.GameObjects.Text {
+    constructor(scene: Phaser.Scene, x: number, y: number, text: string | string[]) {
+        super(scene, x, y, text, { fontFamily: 'Arial', fontSize: "20px", color: '#ffffff'});
+        this.scene.add.existing(this)
+    }
+}

front/src/Phaser/Components/TextInput.ts

@@ -0,0 +1,43 @@
+
+export class TextInput extends Phaser.GameObjects.Text {
+    private underLineLength = 10;
+    private underLine: Phaser.GameObjects.Text;
+    constructor(scene: Phaser.Scene, x: number, y: number) {
+        super(scene, x, y, '', { fontFamily: 'Arial', fontSize: "20px", color: '#ffffff'});
+        this.scene.add.existing(this);
+
+        this.underLine = this.scene.add.text(x, y+1, '__________', { fontFamily: 'Arial', fontSize: "20px", color: '#ffffff'})
+
+        
+        let keySpace = this.scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
+        let keyBackspace = this.scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.BACKSPACE);
+        this.scene.input.keyboard.on('keydown', (event: any) => {
+            if (event.keyCode === 8 && this.text.length > 0) {
+                this.deleteLetter();
+            } else if (event.keyCode === 32 || (event.keyCode >= 48 && event.keyCode < 90)) {
+                this.addLetter(event.key);
+            }
+        });
+    }
+    
+    private deleteLetter() {
+        this.text = this.text.substr(0, this.text.length - 1);
+        if (this.underLine.text.length > this.underLineLength) {
+            this.underLine.text = this.underLine.text.substr(0, this.underLine.text.length - 1);
+        }
+    }
+
+
+    private addLetter(letter: string) {
+        this.text += letter;
+        if (this.text.length > this.underLineLength) {
+            this.underLine.text +=  '_';
+        }
+    }
+
+    getText(): string {
+        return this.text;
+    }
+
+
+}

front/src/Phaser/Entity/PlayableCaracter.ts

@@ -10,7 +10,7 @@ export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite {
 
         this.scene.sys.updateList.add(this);
         this.scene.sys.displayList.add(this);
-        this.setScale(2);
+        //this.setScale(2);
         this.scene.physics.world.enableBody(this);
         this.setImmovable(true);
         this.setCollideWorldBounds(true);
@@ -45,7 +45,7 @@ export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite {
         this.setVelocity(0, 0);
         this.play(PlayerAnimationNames.None, true);
     }
-    
+
     say(text: string) {
         if (this.bubble) return;
         this.bubble = new SpeechBubble(this.scene, this, text)
@@ -55,4 +55,4 @@ export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite {
             this.bubble = null;
         }, 3000)
     }
-}
+}

front/src/Phaser/Game/GameManager.ts

@@ -24,19 +24,12 @@ export class GameManager implements GameManagerInterface {
 
     constructor() {
         this.status = StatusGameManagerEnum.IN_PROGRESS;
-        ConnexionInstance = new Connexion("test@gmail.com", this);
+        this.configureGame();
     }
 
-    createGame(){
-        return ConnexionInstance.createConnexion().then(() => {
-            this.configureGame();
-            /** TODO add loader in the page **/
-            //initialise Pear Connexion of game
-            this.SimplePeer = new SimplePeer(ConnexionInstance);
-        }).catch((err) => {
-            console.error(err);
-            throw err;
-        });
+    connect(email:string) {
+        ConnexionInstance = new Connexion(email, this);
+        this.SimplePeer = new SimplePeer(ConnexionInstance);
     }
 
     /**
@@ -79,4 +72,6 @@ export class GameManager implements GameManagerInterface {
             console.error(e);
         }
     }
-}
+}
+
+export const gameManager = new GameManager();

front/src/Phaser/Game/GameScene.ts

@@ -58,7 +58,6 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
             })
         });
         this.load.tilemapTiledJSON(Textures.Map, mapUrl);
-        this.load.image(Textures.Rock, 'resources/objects/rockSprite.png');
         this.load.spritesheet(Textures.Player,
             'resources/characters/pipoya/Male 01-1.png',
             { frameWidth: 32, frameHeight: 32 }
@@ -99,7 +98,6 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
 
         //add entities
         this.Objects = new Array<Phaser.Physics.Arcade.Sprite>();
-        this.addSpite(this.physics.add.sprite(200, 400, Textures.Rock, 26));
 
         //init event click
         this.EventToClickOnTile();

front/src/Phaser/Login/LogincScene.ts

@@ -0,0 +1,51 @@
+import KeyboardKeydownCallback = Phaser.Types.Input.Keyboard.KeyboardKeydownCallback;
+import {gameManager} from "../Game/GameManager";
+import {ROOM} from "../../Enum/EnvironmentVariable";
+import {TextField} from "../Components/TextField";
+import {TextInput} from "../Components/TextInput";
+import {ClickButton} from "../Components/ClickButton";
+
+//todo: put this constants in a dedicated file
+export const LoginSceneName = "LoginScene";
+enum LoginTextures {
+    playButton = "play_button",
+}
+
+export class LogincScene extends Phaser.Scene {
+    private emailInput: TextInput;
+    private textField: TextField;
+    private playButton: ClickButton;
+    private infoTextField: TextField;
+    constructor() {
+        super({
+            key: LoginSceneName
+        });
+    }
+    
+    preload() {
+        this.load.image(LoginTextures.playButton, "resources/objects/play_button.png");
+    }
+    
+    create() {
+        this.textField = new TextField(this, 10, 10, 'Enter your email:');
+        this.emailInput = new TextInput(this, 10, 50);
+
+        let x = this.game.renderer.width / 2;
+        let y = this.game.renderer.height / 2;
+        this.playButton = new ClickButton(this, x, y, LoginTextures.playButton, this.login.bind(this));
+
+        let infoText = "Commandes de base: \n - Z,Q,S,D (ou les flèches de direction) pour bouger\n - SHIFT pour accélerer";
+        this.infoTextField = new TextField(this, 10, 300, infoText);
+    }
+    
+    update(time: number, delta: number): void {
+        
+    }
+    
+    async login() {
+        let email = this.emailInput.text;
+        if (!email) return;
+        await gameManager.connect(email);
+        this.scene.start("GameScene");
+    }
+}

front/src/index.ts

@@ -1,17 +1,16 @@
 import 'phaser';
 import GameConfig = Phaser.Types.Core.GameConfig;
-import {GameManager} from "./Phaser/Game/GameManager";
+import {gameManager, GameManager} from "./Phaser/Game/GameManager";
 import {DEBUG_MODE, RESOLUTION} from "./Enum/EnvironmentVariable";
 import {cypressAsserter} from "./Cypress/CypressAsserter";
-
-let gameManager = new GameManager();
+import {LogincScene} from "./Phaser/Login/LogincScene";
 
 const config: GameConfig = {
     title: "Office game",
     width: window.innerWidth / RESOLUTION,
     height: window.innerHeight / RESOLUTION,
     parent: "game",
-    scene: gameManager.GameScenes,
+    scene: [LogincScene, ...gameManager.GameScenes as any],
     zoom: RESOLUTION,
     physics: {
         default: "arcade",
@@ -23,10 +22,8 @@ const config: GameConfig = {
 
 cypressAsserter.gameStarted();
 
-gameManager.createGame().then(() => {
-    let game = new Phaser.Game(config);
+let game = new Phaser.Game(config);
 
-    window.addEventListener('resize', function (event) {
-        game.scale.resize(window.innerWidth / RESOLUTION, window.innerHeight / RESOLUTION);
-    });
-});
+window.addEventListener('resize', function (event) {
+    game.scale.resize(window.innerWidth / RESOLUTION, window.innerHeight / RESOLUTION);
+});