basic login page with a text input and a click button

This commit is contained in:
kharhamel 2020-04-26 17:54:56 +02:00
parent 33bcbd4650
commit d691b58d0b
9 changed files with 107 additions and 25 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 969 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.6 KiB

View File

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

View File

@ -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, { fontSize: '32px', fontStyle: 'Courier', color: '#ffffff'});
this.scene.add.existing(this)
}
}

View File

@ -0,0 +1,24 @@
export class TextInput extends Phaser.GameObjects.Text {
constructor(scene: Phaser.Scene, x: number, y: number) {
super(scene, x, y, '', { fontSize: '32px', fontStyle: 'Courier', color: '#fff'});
this.scene.add.existing(this);
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.text = this.text.substr(0, this.text.length - 1);
} else if (event.keyCode === 32 || (event.keyCode >= 48 && event.keyCode < 90)) {
this.text += event.key;
}
});
}
getText(): string {
return this.text;
}
}

View File

@ -18,20 +18,16 @@ export interface GameManagerInterface {
export class GameManager implements GameManagerInterface { export class GameManager implements GameManagerInterface {
GameScenes: Array<GameSceneInterface> = []; GameScenes: Array<GameSceneInterface> = [];
status: number; status: number;
private ConnexionInstance: Connexion;
constructor() { constructor() {
this.status = StatusGameManagerEnum.IN_PROGRESS; this.status = StatusGameManagerEnum.IN_PROGRESS;
ConnexionInstance = new Connexion("test@gmail.com", this); this.configureGame();
} }
createGame(){ connect(email:string) {
return ConnexionInstance.createConnexion().then(() => { this.ConnexionInstance = new Connexion(email, this);
this.configureGame(); return this.ConnexionInstance.createConnexion()
/** TODO add loader in the page **/
}).catch((err) => {
console.error(err);
throw err;
});
} }
/** /**
@ -51,8 +47,8 @@ export class GameManager implements GameManagerInterface {
*/ */
createCurrentPlayer(): void { createCurrentPlayer(): void {
//Get started room send by the backend //Get started room send by the backend
let game: GameSceneInterface = this.GameScenes.find((Game: GameSceneInterface) => Game.RoomId === ConnexionInstance.startedRoom); let game: GameSceneInterface = this.GameScenes.find((Game: GameSceneInterface) => Game.RoomId === this.ConnexionInstance.startedRoom);
game.createCurrentPlayer(ConnexionInstance.userId); game.createCurrentPlayer(this.ConnexionInstance.userId);
this.status = StatusGameManagerEnum.CURRENT_USER_CREATED; this.status = StatusGameManagerEnum.CURRENT_USER_CREATED;
} }
@ -75,3 +71,5 @@ export class GameManager implements GameManagerInterface {
} }
} }
} }
export const gameManager = new GameManager();

View File

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

View File

@ -0,0 +1,47 @@
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;
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));
}
update(time: number, delta: number): void {
}
async login() {
let email = this.emailInput.text;
if (!email) return;
await gameManager.connect(email);
this.scene.start("GameScene");
}
}

View File

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