From: David Négrier Date: Fri, 1 May 2020 21:19:51 +0000 (+0200) Subject: Changed font from text X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=42ddd8b8586d8db70b26f85a4f052dbda3dffd67;p=libreadventure.git Changed font from text Input name can only be 4 characters long Passing name to next scene --- diff --git a/front/dist/resources/fonts/arcade.png b/front/dist/resources/fonts/arcade.png new file mode 100644 index 0000000..5b953b6 Binary files /dev/null and b/front/dist/resources/fonts/arcade.png differ diff --git a/front/dist/resources/fonts/arcade.xml b/front/dist/resources/fonts/arcade.xml new file mode 100644 index 0000000..38e27e7 --- /dev/null +++ b/front/dist/resources/fonts/arcade.xml @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/front/src/Phaser/Components/TextField.ts b/front/src/Phaser/Components/TextField.ts index 61a6f09..abdc053 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 { +export class TextField extends Phaser.GameObjects.BitmapText { constructor(scene: Phaser.Scene, x: number, y: number, text: string | string[]) { - super(scene, x, y, text, { fontFamily: 'Arial', fontSize: "15px", color: '#ffffff'}); + super(scene, x, y, 'main_font', text, 8); this.scene.add.existing(this) } } diff --git a/front/src/Phaser/Components/TextInput.ts b/front/src/Phaser/Components/TextInput.ts index b6cfd9f..b92da1f 100644 --- a/front/src/Phaser/Components/TextInput.ts +++ b/front/src/Phaser/Components/TextInput.ts @@ -1,25 +1,25 @@ -export class TextInput extends Phaser.GameObjects.Text { +export class TextInput extends Phaser.GameObjects.BitmapText { private underLineLength = 10; private underLine: Phaser.GameObjects.Text; - constructor(scene: Phaser.Scene, x: number, y: number) { - super(scene, x, y, '', { fontFamily: 'Arial', fontSize: "20px", color: '#ffffff'}); + constructor(scene: Phaser.Scene, x: number, y: number, maxLength: number) { + super(scene, x, y, 'main_font', '', 32); this.scene.add.existing(this); - this.underLine = this.scene.add.text(x, y+1, '__________', { fontFamily: 'Arial', fontSize: "20px", color: '#ffffff'}) + this.underLine = this.scene.add.text(x, y+1, '_______', { fontFamily: 'Arial', fontSize: "32px", 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.deleteLetter(); - } else if (event.keyCode === 32 || (event.keyCode >= 48 && event.keyCode < 90)) { + } else if ((event.keyCode === 32 || (event.keyCode >= 48 && event.keyCode <= 90)) && this.text.length < maxLength) { this.addLetter(event.key); } }); } - + private deleteLetter() { this.text = this.text.substr(0, this.text.length - 1); if (this.underLine.text.length > this.underLineLength) { @@ -40,4 +40,4 @@ export class TextInput extends Phaser.GameObjects.Text { } -} \ No newline at end of file +} diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index f7fbd7c..904b2d0 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -5,6 +5,7 @@ import {DEBUG_MODE, RESOLUTION, ROOM, ZOOM_LEVEL} from "../../Enum/EnvironmentVa import Tile = Phaser.Tilemaps.Tile; import {ITiledMap, ITiledTileSet} from "../Map/ITiledMap"; import {cypressAsserter} from "../../Cypress/CypressAsserter"; +import { GameSceneInitDataInterface } from "./GameSceneInitDataInterface"; export const GameSceneName = "GameScene"; export enum Textures { @@ -28,6 +29,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ map: ITiledMap; startX = (window.innerWidth / 2) / RESOLUTION; startY = (window.innerHeight / 2) / RESOLUTION; + playerName: string; constructor() { @@ -65,7 +67,9 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ } //hook initialisation - init(){} + init(data: GameSceneInitDataInterface) { + this.playerName = data.name; + } //hook create scene create(): void { diff --git a/front/src/Phaser/Game/GameSceneInitDataInterface.ts b/front/src/Phaser/Game/GameSceneInitDataInterface.ts new file mode 100644 index 0000000..0014e1b --- /dev/null +++ b/front/src/Phaser/Game/GameSceneInitDataInterface.ts @@ -0,0 +1,3 @@ +export interface GameSceneInitDataInterface { + name: string +} diff --git a/front/src/Phaser/Login/LogincScene.ts b/front/src/Phaser/Login/LogincScene.ts index 42d4676..24fee6c 100644 --- a/front/src/Phaser/Login/LogincScene.ts +++ b/front/src/Phaser/Login/LogincScene.ts @@ -4,19 +4,22 @@ import {TextInput} from "../Components/TextInput"; import {ClickButton} from "../Components/ClickButton"; import {GameSceneName} from "../Game/GameScene"; import Image = Phaser.GameObjects.Image; +import Key = Phaser.Input.Keyboard.Key; //todo: put this constants in a dedicated file export const LoginSceneName = "LoginScene"; enum LoginTextures { - playButton = "play_button", - icon = "icon" + //playButton = "play_button", + icon = "icon", + mainFont = "main_font" } export class LogincScene extends Phaser.Scene { - private emailInput: TextInput; + private nameInput: TextInput; private textField: TextField; private playButton: ClickButton; private infoTextField: TextField; + private pressReturnField: TextField; private logo: Image; constructor() { @@ -26,35 +29,55 @@ export class LogincScene extends Phaser.Scene { } preload() { - this.load.image(LoginTextures.playButton, "resources/objects/play_button.png"); + //this.load.image(LoginTextures.playButton, "resources/objects/play_button.png"); this.load.image(LoginTextures.icon, "resources/logos/tcm_full.png"); + // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap + this.load.bitmapFont(LoginTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml'); } create() { - this.textField = new TextField(this, 10, 10, 'Enter your name:'); - this.emailInput = new TextInput(this, 10, 50); + this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Enter your name:'); + this.textField.setOrigin(0.5).setCenterAlign() + this.nameInput = new TextInput(this, this.game.renderer.width / 2 - 64, 70, 4); - 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)); + this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 130, 'Press enter to start'); + this.pressReturnField.setOrigin(0.5).setCenterAlign() + + //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)); this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon); this.add.existing(this.logo); - let infoText = "Commands: \n - Arrows or Z,Q,S,D to move\n - SHIFT to run"; - this.infoTextField = new TextField(this, 10, this.game.renderer.height - 60, infoText); + this.infoTextField = new TextField(this, 10, this.game.renderer.height - 35, infoText); + + this.input.keyboard.on('keyup-ENTER', () => { + let name = this.nameInput.getText(); + if (name === '') { + return + }; + gameManager.connect(name).then(() => { + this.scene.start(GameSceneName, { name }); + }); + }); + } update(time: number, delta: number): void { - + if (this.nameInput.getText() == '') { + this.pressReturnField.setVisible(false); + } else { + this.pressReturnField.setVisible(!!(Math.floor(time / 500) % 2)); + } } - async login() { - let email = this.emailInput.text; - if (!email) return; - gameManager.connect(email).then(() => { + /*async login() { + let name = this.nameInput.text; + if (!name) return; + gameManager.connect(name).then(() => { this.scene.start(GameSceneName); }); - } + }*/ }