From d691b58d0bc93245c6471cfc40a0c7ce49862480 Mon Sep 17 00:00:00 2001 From: kharhamel Date: Sun, 26 Apr 2020 17:54:56 +0200 Subject: [PATCH 1/2] basic login page with a text input and a click button --- front/dist/resources/objects/play_button.png | Bin 0 -> 969 bytes front/dist/resources/objects/rockSprite.png | Bin 3659 -> 0 bytes front/src/Phaser/Components/ClickButton.ts | 11 +++++ front/src/Phaser/Components/TextField.ts | 7 +++ front/src/Phaser/Components/TextInput.ts | 24 ++++++++++ front/src/Phaser/Game/GameManager.ts | 24 +++++----- front/src/Phaser/Game/GameScene.ts | 2 - front/src/Phaser/Login/LogincScene.ts | 47 +++++++++++++++++++ front/src/index.ts | 17 +++---- 9 files changed, 107 insertions(+), 25 deletions(-) create mode 100644 front/dist/resources/objects/play_button.png delete mode 100644 front/dist/resources/objects/rockSprite.png create mode 100644 front/src/Phaser/Components/ClickButton.ts create mode 100644 front/src/Phaser/Components/TextField.ts create mode 100644 front/src/Phaser/Components/TextInput.ts create mode 100644 front/src/Phaser/Login/LogincScene.ts diff --git a/front/dist/resources/objects/play_button.png b/front/dist/resources/objects/play_button.png new file mode 100644 index 0000000000000000000000000000000000000000..36aa309b6b26ddb120f8562bcb8c5090c8e8f38f GIT binary patch literal 969 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 YM$joE+UD)Q$@RdIgSOVi2i$4@0|kzR_y7O^ diff --git a/front/src/Phaser/Components/ClickButton.ts b/front/src/Phaser/Components/ClickButton.ts new file mode 100644 index 00000000..204e9542 --- /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 00000000..c2a5897c --- /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 00000000..e1ea5e8e --- /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 d03a3152..e18bbdd6 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 32f57ae3..494508e9 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 00000000..845219c7 --- /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 e5306389..c55a5d0d 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 From 25ac579a90dea6ec0eb50c7b6deeddcb52d99094 Mon Sep 17 00:00:00 2001 From: kharhamel Date: Sun, 26 Apr 2020 18:48:41 +0200 Subject: [PATCH 2/2] prettier login page --- front/src/Phaser/Components/TextField.ts | 2 +- front/src/Phaser/Components/TextInput.ts | 25 +++++++++++++++++++++--- front/src/Phaser/Login/LogincScene.ts | 6 +++++- 3 files changed, 28 insertions(+), 5 deletions(-) diff --git a/front/src/Phaser/Components/TextField.ts b/front/src/Phaser/Components/TextField.ts index c2a5897c..427a25ab 100644 --- a/front/src/Phaser/Components/TextField.ts +++ b/front/src/Phaser/Components/TextField.ts @@ -1,7 +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'}); + super(scene, x, y, text, { fontFamily: 'Arial', fontSize: "20px", 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 index e1ea5e8e..b6cfd9f4 100644 --- a/front/src/Phaser/Components/TextInput.ts +++ b/front/src/Phaser/Components/TextInput.ts @@ -1,21 +1,40 @@ 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, '', { fontSize: '32px', fontStyle: 'Courier', color: '#fff'}); + 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.text = this.text.substr(0, this.text.length - 1); + this.deleteLetter(); } else if (event.keyCode === 32 || (event.keyCode >= 48 && event.keyCode < 90)) { - this.text += event.key; + 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; } diff --git a/front/src/Phaser/Login/LogincScene.ts b/front/src/Phaser/Login/LogincScene.ts index 845219c7..0fb4d2a4 100644 --- a/front/src/Phaser/Login/LogincScene.ts +++ b/front/src/Phaser/Login/LogincScene.ts @@ -15,6 +15,7 @@ export class LogincScene extends Phaser.Scene { private emailInput: TextInput; private textField: TextField; private playButton: ClickButton; + private infoTextField: TextField; constructor() { super({ key: LoginSceneName @@ -28,10 +29,13 @@ export class LogincScene extends Phaser.Scene { 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 {