From 42ddd8b8586d8db70b26f85a4f052dbda3dffd67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Fri, 1 May 2020 23:19:51 +0200 Subject: [PATCH] Changed font from text Input name can only be 4 characters long Passing name to next scene --- front/dist/resources/fonts/arcade.png | Bin 0 -> 3892 bytes front/dist/resources/fonts/arcade.xml | 83 ++++++++++++++++++ front/src/Phaser/Components/TextField.ts | 4 +- front/src/Phaser/Components/TextInput.ts | 16 ++-- front/src/Phaser/Game/GameScene.ts | 6 +- .../Phaser/Game/GameSceneInitDataInterface.ts | 3 + front/src/Phaser/Login/LogincScene.ts | 57 ++++++++---- 7 files changed, 141 insertions(+), 28 deletions(-) create mode 100644 front/dist/resources/fonts/arcade.png create mode 100644 front/dist/resources/fonts/arcade.xml create mode 100644 front/src/Phaser/Game/GameSceneInitDataInterface.ts diff --git a/front/dist/resources/fonts/arcade.png b/front/dist/resources/fonts/arcade.png new file mode 100644 index 0000000000000000000000000000000000000000..5b953b666301cd3b2b0002f84b3654f68d57bfa6 GIT binary patch literal 3892 zcmeH~`&Uy}7ROKUgYSxMASKug}Zd<#HYhZ1mkM0N{4M&wGzY z%0DqY-jzrxRHs%^XV#x1RoOD2Nu#i5^a_NpBMK#XSVg(*C?8M$zN$jRBEHGOD5P|F zR0s{1~c*-7uPVpjT+leS1~DE96iEnqPC4=X!UE-@Q39` zFLy}8tO^`8=i|CObr@Cb;m8YAVOfAyX-$GAj}OpCkX#qG`aJ-@n`!2Pl!lcf^tgCB z`*eauI2SJ))YwdAkhTM@_mM3826J2n3KXwJ0q_nY&6%P)ly)R`AdIb}j|lPU8KF6} z6{+wH%Xw1PBk1Ar_1Z`#lsB1TgMD^qLajCg4tF5yyt@EMJP$zeH&Je&!^6I-wi;4f z-75J;il?$3`&r-h`JpC<*O*`~bDSt4jX6aLu*MxKkj36L+DTFEk(L}g$^3-T8-|GR zEb?^#tTkE+P~?36T=`xmQ|RoK$4ysGF2B*@b9e9Xjd@iD`FKI>=g~iZyb}rFe!s&3 z?QR{)<-x}aV&B9n(C%qTo?2>ga@}a?o-~XhRd>f(wAn>>F;!_(0~3=8y0@36B1b)2 z{lD-LDRnT>Uhy8#2JU^K03{ID$HF0Cjdp^TNP3uSyI4~(TiMds(*zaLpmQ{f_K%NM zn5xDjU0AyMY#5b8gA604b8=c?QY}Vt{M}de6+tgZo%?44ZcHyq7^*&5GGk_%V_+V0 zXi7!JUS^XSWF5XlGrmXNW*LxlMkCy4Angc;_|e^|9D6IP^Nu6jr{~TwTM_*i?(P{x zo>P&x`@cuh!ClMkVJvaa}NnDXB&N9?ZXNA;lcVskFAQj_1S>j&Fv($IS6A;BAw6NKoT5T#;$B-n|DtiAGa>@U-XRx zk+i3Y9j%&5kdA?E&Rc2`7^yfhux6vx&E6`by5fen7Z@k}b=qQ}u zx}&gN3eWcl<_6$72tMs^tN80nhcn=N!hHU%;FS5k858W;U=uVs(#5&tYcd#NOOm^b z;&CH}n%Xjlh7|A9hnm?=VH#d}seiG|KQ=CxCnv9;LOb>sjUDLQ0B*0Z`a7U5^;XFxeZc{LsCzbprtD7$M=4KDm>rzi_!QOhT3N>r=D7CoST`~Mz~94S zlUL(QR@sz1w}YVWu7Mz{*JE^ys9IVTn4ykd>yNA8&R!e$uES(x2G^6Jd-a0>K7&^m z57-3tV*K7sgJ=dTx^J=W$n3nSR8Ok^;8MdK4Z~&}e`sgg3Q|RUx`?gRFi!nVaL+;s+&bPSZ`@iWSbCOaFC)G){SsU22(-^f#T?Oc+pnZ+}4NrYTtzb)0b@qlIzgi zAyRwY-n7t|{382+!5UvuL(_$Rn=e7a+@hpmzmh^RqrS*!^(_s<8>O6|E`a?D<)� zAk{6`9`V{Uy4&@)1s+(Wh9q&XSuqN<{HkP2wS1H##+T4VjiUvVCOQL}cL@wnaed_~ zjNvJ@D?rY1x10B1nG`Wibg*B){*R+7n-<`tx;Czb$Q#CNf z5jWyh=KeV9yWdHvoK9nRC+&@|Dfp6bQEsomK%HgZukAU31pZ6IxOshPrgG)$7IAjo zm`T@HUh!%Aqk|_pcV}05JW_&W0!<~lFeGe9(jgII_MsIfAzn9yjYa@;Vmyxu#~C;M z;l`ycnnW{jBDJbnSQUGd8u5wpAH_8++0=hCeGs~FsM=}N7;*4i9-wdhLJ0&L(RB^vp8Y07oUIXp1_{gEn6heclZhD%w^DigP2DI~V&n$uZFkCx8zb z{-xFB@_G$3vzk0B!KO=+7|P(vDKVIQKj1v?4P@SO?hB|B2zS3w{F?{A{NUHI?D>57 zQm9{t+vi?-Hn%O1`VyFzI{43GFM0U?JlyAji + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/front/src/Phaser/Components/TextField.ts b/front/src/Phaser/Components/TextField.ts index 61a6f096..abdc0535 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 b6cfd9f4..b92da1ff 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 f7fbd7c3..904b2d06 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 00000000..0014e1b7 --- /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 42d46766..24fee6c5 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); }); - } + }*/ }