Adding communication between LoginScene and SelectCharacterScene
authorDavid Négrier <d.negrier@thecodingmachine.com>
Tue, 26 May 2020 15:25:29 +0000 (17:25 +0200)
committerDavid Négrier <d.negrier@thecodingmachine.com>
Tue, 26 May 2020 15:25:29 +0000 (17:25 +0200)
front/.gitignore
front/src/Phaser/Login/LoginScene.ts
front/src/Phaser/Login/SelectCharacterScene.ts
front/src/Phaser/Player/Animation.ts
front/src/Phaser/Player/Player.ts
front/src/index.ts

index 048e02caa7425eddc10beb9b010a75fb26263d07..a74d68d590d7f1bc6ebcbeb1eea4f43583398fc9 100644 (file)
@@ -1,3 +1,6 @@
 /node_modules/
 /dist/bundle.js
 /yarn-error.log
+/dist/webpack.config.js
+/dist/webpack.config.js.map
+/dist/src
index 4b42c6a94e8be3765784ca4554f77641d05f85ee..dc344565918b10f470aca76b286a98ff2577f0d5 100644 (file)
@@ -6,12 +6,11 @@ import Image = Phaser.GameObjects.Image;
 import Rectangle = Phaser.GameObjects.Rectangle;
 import {PLAYER_RESOURCES} from "../Entity/PlayableCaracter";
 import {cypressAsserter} from "../../Cypress/CypressAsserter";
-import {GroupCreatedUpdatedMessageInterface, MessageUserJoined, MessageUserPositionInterface} from "../../Connection";
+import {SelectCharacterSceneInitDataInterface, SelectCharacterSceneName} from "./SelectCharacterScene";
 
 //todo: put this constants in a dedicated file
 export const LoginSceneName = "LoginScene";
 enum LoginTextures {
-    //playButton = "play_button",
     icon = "icon",
     mainFont = "main_font"
 }
@@ -19,15 +18,10 @@ enum LoginTextures {
 export class LoginScene extends Phaser.Scene {
     private nameInput: TextInput;
     private textField: TextField;
-    private playButton: ClickButton;
     private infoTextField: TextField;
     private pressReturnField: TextField;
     private logo: Image;
 
-    private selectedRectangle: Rectangle;
-    private selectedPlayer: Phaser.Physics.Arcade.Sprite;
-    private players: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
-
     constructor() {
         super({
             key: LoginSceneName
@@ -61,8 +55,6 @@ export class LoginScene extends Phaser.Scene {
         this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 130, 'Press enter to start');
         this.pressReturnField.setOrigin(0.5).setCenterAlign()
 
-        this.selectedRectangle = this.add.rectangle(32, 32, 32, 32).setStrokeStyle(2, 0xFFFFFF);
-
         this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon);
         this.add.existing(this.logo);
 
@@ -74,11 +66,9 @@ export class LoginScene extends Phaser.Scene {
             if (name === '') {
                 return
             }
-            return this.login(name);
+            this.login(name);
         });
 
-        /*create user*/
-        this.createCurrentPlayer();
         cypressAsserter.initFinished();
     }
 
@@ -90,80 +80,7 @@ export class LoginScene extends Phaser.Scene {
         }
     }
 
-    private async login(name: string) {
-        return gameManager.connect(name, this.selectedPlayer.texture.key).then(() => {
-            // Do we have a start URL in the address bar? If so, let's redirect to this address
-            let instanceAndMapUrl = this.findMapUrl();
-            if (instanceAndMapUrl !== null) {
-                let [mapUrl, instance] = instanceAndMapUrl;
-                let key = gameManager.loadMap(mapUrl, this.scene, instance);
-                this.scene.start(key);
-                return mapUrl;
-            } else {
-                // If we do not have a map address in the URL, let's ask the server for a start map.
-                return gameManager.loadStartMap().then((scene : any) => {
-                    if (!scene) {
-                        return;
-                    }
-                    let key = gameManager.loadMap(window.location.protocol + "//" + scene.mapUrlStart, this.scene, scene.startInstance);
-                    this.scene.start(key);
-                    return scene;
-                }).catch((err) => {
-                    console.error(err);
-                    throw err;
-                });
-            }
-        }).catch((err) => {
-            console.error(err);
-            throw err;
-        });
-    }
-
-    /**
-     * Returns the map URL and the instance from the current URL
-     */
-    private findMapUrl(): [string, string]|null {
-        let path = window.location.pathname;
-        if (!path.startsWith('/_/')) {
-            return null;
-        }
-        let instanceAndMap = path.substr(3);
-        let firstSlash = instanceAndMap.indexOf('/');
-        if (firstSlash === -1) {
-            return null;
-        }
-        let instance = instanceAndMap.substr(0, firstSlash);
-        return [window.location.protocol+'//'+instanceAndMap.substr(firstSlash+1), instance];
-    }
-
-    Map: Phaser.Tilemaps.Tilemap;
-
-    initAnimation(): void {
-        throw new Error("Method not implemented.");
-    }
-
-    createCurrentPlayer(): void {
-        for (let i = 0; i <PLAYER_RESOURCES.length; i++) {
-            let playerResource = PLAYER_RESOURCES[i];
-            let player = this.physics.add.sprite(playerResource.x, playerResource.y, playerResource.name, playerResource.name);
-            player.setBounce(0.2);
-            player.setCollideWorldBounds(true);
-            this.anims.create({
-                key: playerResource.name,
-                frames: this.anims.generateFrameNumbers(playerResource.name, {start: 0, end: 2,}),
-                frameRate: 10,
-                repeat: -1
-            });
-            player.setInteractive().on("pointerdown", () => {
-                this.selectedPlayer.anims.pause();
-                this.selectedRectangle.setY(player.y);
-                this.selectedRectangle.setX(player.x);
-                player.play(playerResource.name);
-                this.selectedPlayer = player;
-            });
-            this.players.push(player);
-        }
-        this.selectedPlayer = this.players[0];
-        this.selectedPlayer.play(PLAYER_RESOURCES[0].name);
+    private login(name: string): void {
+        this.scene.start(SelectCharacterSceneName, { name } as SelectCharacterSceneInitDataInterface);
     }
 }
index 138621daeea71333e355baa403f88eea2ab0d068..222b84ce8b6cf75a1c139ba8ccbfb1838c7fb546 100644 (file)
@@ -13,7 +13,7 @@ enum LoginTextures {
     mainFont = "main_font"
 }
 
-interface InitDataInterface {
+export interface SelectCharacterSceneInitDataInterface {
     name: string
 }
 
@@ -36,7 +36,7 @@ export class SelectCharacterScene extends Phaser.Scene {
         });
     }
 
-    init({ name }: InitDataInterface) {
+    init({ name }: SelectCharacterSceneInitDataInterface) {
         this.loginName = name;
     }
 
index 10cee1e89804d00097f523b5acf366398ecbe6d9..8ca7d6717bb092f1f0f2ee671c01916ad98baf78 100644 (file)
@@ -1,14 +1,5 @@
 import {Textures} from "../Game/GameScene";
 
-interface AnimationData {
-    key: string;
-    frameRate: number;
-    repeat: number;
-    frameModel: string; //todo use an enum
-    frameStart: number;
-    frameEnd: number;
-}
-
 export enum PlayerAnimationNames {
     WalkDown = 'down',
     WalkLeft = 'left',
@@ -16,34 +7,4 @@ export enum PlayerAnimationNames {
     WalkRight = 'right',
 }
 
-export const getPlayerAnimations = (name: string = Textures.Player): AnimationData[] => {
-    return [{
-        key: `${name}-${PlayerAnimationNames.WalkDown}`,
-        frameModel: name,
-        frameStart: 0,
-        frameEnd: 2,
-        frameRate: 10,
-        repeat: -1
-    }, {
-        key: `${name}-${PlayerAnimationNames.WalkLeft}`,
-        frameModel: name,
-        frameStart: 3,
-        frameEnd: 5,
-        frameRate: 10,
-        repeat: -1
-    }, {
-        key: `${name}-${PlayerAnimationNames.WalkRight}`,
-        frameModel: name,
-        frameStart: 6,
-        frameEnd: 8,
-        frameRate: 10,
-        repeat: -1
-    }, {
-        key: `${name}-${PlayerAnimationNames.WalkUp}`,
-        frameModel: name,
-        frameStart: 9,
-        frameEnd: 11,
-        frameRate: 10,
-        repeat: -1
-    }];
-};
+
index 2b5f8fea4582d5a9f9e60aca7684142b3afa5a48..ba41c05e6db946fdc712435d6f802ad35d30cd7f 100644 (file)
@@ -17,6 +17,16 @@ export interface GamerInterface extends PlayableCaracter{
     say(text : string) : void;
 }
 
+interface AnimationData {
+    key: string;
+    frameRate: number;
+    repeat: number;
+    frameModel: string; //todo use an enum
+    frameStart: number;
+    frameEnd: number;
+}
+
+
 export class Player extends PlayableCaracter implements CurrentGamerInterface, GamerInterface {
     userId: string;
     userInputManager: UserInputManager;
@@ -49,7 +59,7 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G
     }
 
     private initAnimation(): void {
-        getPlayerAnimations(this.PlayerTexture).forEach(d => {
+        this.getPlayerAnimations(this.PlayerTexture).forEach(d => {
             this.scene.anims.create({
                 key: d.key,
                 frames: this.scene.anims.generateFrameNumbers(d.frameModel, {start: d.frameStart, end: d.frameEnd}),
@@ -59,6 +69,38 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G
         })
     }
 
+    private getPlayerAnimations(name: string): AnimationData[] {
+        return [{
+            key: `${name}-${PlayerAnimationNames.WalkDown}`,
+            frameModel: name,
+            frameStart: 0,
+            frameEnd: 2,
+            frameRate: 10,
+            repeat: -1
+        }, {
+            key: `${name}-${PlayerAnimationNames.WalkLeft}`,
+            frameModel: name,
+            frameStart: 3,
+            frameEnd: 5,
+            frameRate: 10,
+            repeat: -1
+        }, {
+            key: `${name}-${PlayerAnimationNames.WalkRight}`,
+            frameModel: name,
+            frameStart: 6,
+            frameEnd: 8,
+            frameRate: 10,
+            repeat: -1
+        }, {
+            key: `${name}-${PlayerAnimationNames.WalkUp}`,
+            frameModel: name,
+            frameStart: 9,
+            frameEnd: 11,
+            frameRate: 10,
+            repeat: -1
+        }];
+    };
+
     moveUser(delta: number): void {
         //if user client on shift, camera and player speed
         let direction = null;
index ab374c2ff93a10463ee713ba29590e6a7b60c303..843925accdb2cf249fc1cea3c297fc6fb548348b 100644 (file)
@@ -12,7 +12,7 @@ const config: GameConfig = {
     width: window.innerWidth / RESOLUTION,
     height: window.innerHeight / RESOLUTION,
     parent: "game",
-    scene: [SelectCharacterScene, LoginScene, ReconnectingScene],
+    scene: [LoginScene, SelectCharacterScene, ReconnectingScene],
     zoom: RESOLUTION,
     physics: {
         default: "arcade",