lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

Adding communication between LoginScene and SelectCharacterScene

Browse source
This commit is contained in:
David Négrier 2020-05-26 17:25:29 +02:00
parent 5806e379c8
commit 04a1f90ed5
6 changed files with 54 additions and 131 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
front/.gitignore vendored
View file

@ -1,3 +1,6 @@
/node_modules/
/dist/bundle.js
/yarn-error.log
/dist/webpack.config.js
/dist/webpack.config.js.map
/dist/src

91
front/src/Phaser/Login/LoginScene.ts
View 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);
}
}

4
front/src/Phaser/Login/SelectCharacterScene.ts
View 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;
}

41
front/src/Phaser/Player/Animation.ts
View 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
}];
};

44
front/src/Phaser/Player/Player.ts
View 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;

2
front/src/index.ts
View 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",