From: kharhamel Date: Sun, 26 Apr 2020 15:54:56 +0000 (+0200) Subject: basic login page with a text input and a click button X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=d691b58d0bc93245c6471cfc40a0c7ce49862480;p=libreadventure.git basic login page with a text input and a click button --- diff --git a/front/dist/resources/objects/play_button.png b/front/dist/resources/objects/play_button.png new file mode 100644 index 0000000..36aa309 Binary files /dev/null and b/front/dist/resources/objects/play_button.png differ diff --git a/front/dist/resources/objects/rockSprite.png b/front/dist/resources/objects/rockSprite.png deleted file mode 100644 index 40820ab..0000000 Binary files a/front/dist/resources/objects/rockSprite.png and /dev/null differ diff --git a/front/src/Phaser/Components/ClickButton.ts b/front/src/Phaser/Components/ClickButton.ts new file mode 100644 index 0000000..204e954 --- /dev/null +++ b/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); + } + +} \ No newline at end of file diff --git a/front/src/Phaser/Components/TextField.ts b/front/src/Phaser/Components/TextField.ts new file mode 100644 index 0000000..c2a5897 --- /dev/null +++ b/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, { fontSize: '32px', fontStyle: 'Courier', color: '#ffffff'}); + this.scene.add.existing(this) + } +} \ No newline at end of file diff --git a/front/src/Phaser/Components/TextInput.ts b/front/src/Phaser/Components/TextInput.ts new file mode 100644 index 0000000..e1ea5e8 --- /dev/null +++ b/front/src/Phaser/Components/TextInput.ts @@ -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; + } + + +} \ No newline at end of file diff --git a/front/src/Phaser/Game/GameManager.ts b/front/src/Phaser/Game/GameManager.ts index d03a315..e18bbdd 100644 --- a/front/src/Phaser/Game/GameManager.ts +++ b/front/src/Phaser/Game/GameManager.ts @@ -18,20 +18,16 @@ export interface GameManagerInterface { export class GameManager implements GameManagerInterface { GameScenes: Array = []; status: number; + private ConnexionInstance: Connexion; 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 **/ - }).catch((err) => { - console.error(err); - throw err; - }); + + connect(email:string) { + this.ConnexionInstance = new Connexion(email, this); + return this.ConnexionInstance.createConnexion() } /** @@ -51,8 +47,8 @@ export class GameManager implements GameManagerInterface { */ createCurrentPlayer(): void { //Get started room send by the backend - let game: GameSceneInterface = this.GameScenes.find((Game: GameSceneInterface) => Game.RoomId === ConnexionInstance.startedRoom); - game.createCurrentPlayer(ConnexionInstance.userId); + let game: GameSceneInterface = this.GameScenes.find((Game: GameSceneInterface) => Game.RoomId === this.ConnexionInstance.startedRoom); + game.createCurrentPlayer(this.ConnexionInstance.userId); this.status = StatusGameManagerEnum.CURRENT_USER_CREATED; } @@ -74,4 +70,6 @@ export class GameManager implements GameManagerInterface { console.error(e); } } -} \ No newline at end of file +} + +export const gameManager = new GameManager(); \ No newline at end of file diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 32f57ae..494508e 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -59,7 +59,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 } @@ -100,7 +99,6 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ //add entities this.Objects = new Array(); - this.addSpite(this.physics.add.sprite(200, 400, Textures.Rock, 26)); //init event click this.EventToClickOnTile(); diff --git a/front/src/Phaser/Login/LogincScene.ts b/front/src/Phaser/Login/LogincScene.ts new file mode 100644 index 0000000..845219c --- /dev/null +++ b/front/src/Phaser/Login/LogincScene.ts @@ -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"); + } +} \ No newline at end of file diff --git a/front/src/index.ts b/front/src/index.ts index e530638..c55a5d0 100644 --- a/front/src/index.ts +++ b/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); +}); \ No newline at end of file