Merge pull request #327 from thecodingmachine/name8

improved textField component and allowed 8 caracter names
This commit is contained in:
Kharhamel 2020-10-15 15:27:45 +02:00 committed by GitHub
commit 47275acebb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 37 additions and 36 deletions

View File

@ -6,7 +6,7 @@ import {TokenInterface} from "../Controller/AuthenticateController";
class JWTTokenManager { class JWTTokenManager {
public createJWTToken(userUuid: string) { public createJWTToken(userUuid: string) {
return Jwt.sign({userUuid: userUuid}, SECRET_KEY, {expiresIn: '24h'}); return Jwt.sign({userUuid: userUuid}, SECRET_KEY, {expiresIn: '200d'}); //todo: add a mechanic to refresh or recreate token
} }
public async getUserUuidFromToken(token: unknown): Promise<string> { public async getUserUuidFromToken(token: unknown): Promise<string> {

View File

@ -1,5 +1,6 @@
import {LocalUser} from "./LocalUser"; import {LocalUser} from "./LocalUser";
//todo: add localstorage fallback
class LocalUserStore { class LocalUserStore {
saveUser(localUser: LocalUser) { saveUser(localUser: LocalUser) {
@ -10,6 +11,14 @@ class LocalUserStore {
const data = localStorage.getItem('localUser'); const data = localStorage.getItem('localUser');
return data ? JSON.parse(data) : null; return data ? JSON.parse(data) : null;
} }
setName(name:string): void {
window.localStorage.setItem('playerName', name);
}
getName(): string {
return window.localStorage.getItem('playerName') ?? '';
}
} }

View File

@ -1,7 +1,10 @@
export class TextField extends Phaser.GameObjects.BitmapText { export class TextField extends Phaser.GameObjects.BitmapText {
constructor(scene: Phaser.Scene, x: number, y: number, text: string | string[]) { constructor(scene: Phaser.Scene, x: number, y: number, text: string | string[], center: boolean = true) {
super(scene, x, y, 'main_font', text, 8); super(scene, x, y, 'main_font', text, 8);
this.scene.add.existing(this) this.scene.add.existing(this);
if (center) {
this.setOrigin(0.5).setCenterAlign()
}
} }
} }

View File

@ -1,13 +1,15 @@
export class TextInput extends Phaser.GameObjects.BitmapText { export class TextInput extends Phaser.GameObjects.BitmapText {
private underLineLength = 10; private minUnderLineLength = 4;
private underLine: Phaser.GameObjects.Text; private underLine: Phaser.GameObjects.Text;
constructor(scene: Phaser.Scene, x: number, y: number, maxLength: number, text: string, onChange: (text: string) => void) { constructor(scene: Phaser.Scene, x: number, y: number, maxLength: number, text: string, onChange: (text: string) => void) {
super(scene, x, y, 'main_font', text, 32); super(scene, x, y, 'main_font', text, 32);
this.setOrigin(0.5).setCenterAlign()
this.scene.add.existing(this); this.scene.add.existing(this);
this.underLine = this.scene.add.text(x, y+1, '_______', { fontFamily: 'Arial', fontSize: "32px", color: '#ffffff'}) this.underLine = this.scene.add.text(x, y+1, this.getUnderLineBody(text.length), { fontFamily: 'Arial', fontSize: "32px", color: '#ffffff'})
this.underLine.setOrigin(0.5)
this.scene.input.keyboard.on('keydown', (event: KeyboardEvent) => { this.scene.input.keyboard.on('keydown', (event: KeyboardEvent) => {
@ -16,23 +18,27 @@ export class TextInput extends Phaser.GameObjects.BitmapText {
} else if ((event.keyCode === 32 || (event.keyCode >= 48 && event.keyCode <= 90)) && this.text.length < maxLength) { } else if ((event.keyCode === 32 || (event.keyCode >= 48 && event.keyCode <= 90)) && this.text.length < maxLength) {
this.addLetter(event.key); this.addLetter(event.key);
} }
this.underLine.text = this.getUnderLineBody(this.text.length);
onChange(this.text); onChange(this.text);
}); });
} }
private getUnderLineBody(textLength:number): string {
if (textLength < this.minUnderLineLength) textLength = this.minUnderLineLength;
let text = '_______';
for (let i = this.minUnderLineLength; i < textLength; i++) {
text += '__'
}
return text;
}
private deleteLetter() { private deleteLetter() {
this.text = this.text.substr(0, this.text.length - 1); 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) { private addLetter(letter: string) {
this.text += letter; this.text += letter;
if (this.text.length > this.underLineLength) {
this.underLine.text += '_';
}
} }
getText(): string { getText(): string {

View File

@ -77,7 +77,7 @@ export abstract class Character extends Container {
} }
this.PlayerValue = name; this.PlayerValue = name;
this.playerName = new BitmapText(scene, x, y - 25, 'main_font', name, 8); this.playerName = new BitmapText(scene, x, y - 25, 'main_font', name, 7);
this.playerName.setOrigin(0.5).setCenterAlign().setDepth(99999); this.playerName.setOrigin(0.5).setCenterAlign().setDepth(99999);
scene.add.existing(this.playerName); scene.add.existing(this.playerName);
@ -178,6 +178,7 @@ export abstract class Character extends Container {
//this.anims.playReverse(`${this.PlayerTexture}-${PlayerAnimationNames.WalkLeft}`, true); //this.anims.playReverse(`${this.PlayerTexture}-${PlayerAnimationNames.WalkLeft}`, true);
} }
//todo:remove this, use a container tech to move the bubble instead
if (this.bubble) { if (this.bubble) {
this.bubble.moveBubble(this.x, this.y); this.bubble.moveBubble(this.x, this.y);
} }

View File

@ -54,12 +54,8 @@ export class CustomizeScene extends ResizableScene {
create() { create() {
this.textField = new TextField(this, this.game.renderer.width / 2, 30, 'Customize your own Avatar!'); this.textField = new TextField(this, this.game.renderer.width / 2, 30, 'Customize your own Avatar!');
this.textField.setOrigin(0.5).setCenterAlign();
this.textField.setVisible(true);
this.enterField = new TextField(this, this.game.renderer.width / 2, 500, 'you can start the game by pressing SPACE..'); this.enterField = new TextField(this, this.game.renderer.width / 2, 40, 'you can start the game by pressing SPACE..');
this.enterField.setOrigin(0.5).setCenterAlign();
this.enterField.setVisible(true);
this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, CustomizeTextures.icon); this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, CustomizeTextures.icon);
this.add.existing(this.logo); this.add.existing(this.logo);

View File

@ -53,16 +53,12 @@ export class EnableCameraScene extends Phaser.Scene {
create() { create() {
this.textField = new TextField(this, this.game.renderer.width / 2, 20, 'Turn on your camera and microphone'); this.textField = new TextField(this, this.game.renderer.width / 2, 20, 'Turn on your camera and microphone');
this.textField.setOrigin(0.5).setCenterAlign();
this.pressReturnField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height - 30, 'Press enter to start'); this.pressReturnField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height - 30, 'Press enter to start');
this.pressReturnField.setOrigin(0.5).setCenterAlign();
this.cameraNameField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height - 60, ''); this.cameraNameField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height - 60, '');
this.cameraNameField.setOrigin(0.5).setCenterAlign();
this.microphoneNameField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height - 40, ''); this.microphoneNameField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height - 40, '');
this.microphoneNameField.setOrigin(0.5).setCenterAlign();
this.arrowRight = new Image(this, 0, 0, LoginTextures.arrowRight); this.arrowRight = new Image(this, 0, 0, LoginTextures.arrowRight);
this.arrowRight.setOrigin(0.5, 0.5); this.arrowRight.setOrigin(0.5, 0.5);

View File

@ -8,6 +8,7 @@ import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Ch
import {cypressAsserter} from "../../Cypress/CypressAsserter"; import {cypressAsserter} from "../../Cypress/CypressAsserter";
import {SelectCharacterSceneName} from "./SelectCharacterScene"; import {SelectCharacterSceneName} from "./SelectCharacterScene";
import {ResizableScene} from "./ResizableScene"; import {ResizableScene} from "./ResizableScene";
import {localUserStore} from "../../Connexion/LocalUserStore";
//todo: put this constants in a dedicated file //todo: put this constants in a dedicated file
export const LoginSceneName = "LoginScene"; export const LoginSceneName = "LoginScene";
@ -28,9 +29,7 @@ export class LoginScene extends ResizableScene {
super({ super({
key: LoginSceneName key: LoginSceneName
}); });
if (window.localStorage) { this.name = localUserStore.getName();
this.name = window.localStorage.getItem('playerName') ?? '';
}
} }
preload() { preload() {
@ -54,22 +53,18 @@ export class LoginScene extends ResizableScene {
cypressAsserter.initStarted(); cypressAsserter.initStarted();
this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Enter your name:'); 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, 70, 8, this.name,(text: string) => {
this.nameInput = new TextInput(this, this.game.renderer.width / 2 - 64, 70, 4, this.name,(text: string) => {
this.name = text; this.name = text;
if (window.localStorage) { localUserStore.setName(text);
window.localStorage.setItem('playerName', text);
}
}); });
this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 130, 'Press enter to start'); this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 130, 'Press enter to start');
this.pressReturnField.setOrigin(0.5).setCenterAlign()
this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon); this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon);
this.add.existing(this.logo); this.add.existing(this.logo);
const infoText = "Commands: \n - Arrows or Z,Q,S,D to move\n - SHIFT to run"; const 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 - 35, infoText); this.infoTextField = new TextField(this, 10, this.game.renderer.height - 35, infoText, false);
this.input.keyboard.on('keyup-ENTER', () => { this.input.keyboard.on('keyup-ENTER', () => {
if (this.name === '') { if (this.name === '') {

View File

@ -57,10 +57,8 @@ export class SelectCharacterScene extends ResizableScene {
create() { create() {
this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Select your character'); this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Select your character');
this.textField.setOrigin(0.5).setCenterAlign()
this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 256, 'Press enter to start'); this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 256, 'Press enter to start');
this.pressReturnField.setOrigin(0.5).setCenterAlign()
const rectangleXStart = this.game.renderer.width / 2 - (this.nbCharactersPerRow / 2) * 32 + 16; const rectangleXStart = this.game.renderer.width / 2 - (this.nbCharactersPerRow / 2) * 32 + 16;

View File

@ -45,7 +45,6 @@ export class FourOFourScene extends Phaser.Scene {
this.add.existing(this.logo); this.add.existing(this.logo);
this.mapNotFoundField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height / 2, "404 - File not found"); this.mapNotFoundField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height / 2, "404 - File not found");
this.mapNotFoundField.setOrigin(0.5, 0.5).setCenterAlign();
let text: string = ''; let text: string = '';
if (this.file !== undefined) { if (this.file !== undefined) {
@ -56,7 +55,6 @@ export class FourOFourScene extends Phaser.Scene {
} }
this.couldNotFindField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height / 2 + 24, text); this.couldNotFindField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height / 2 + 24, text);
this.couldNotFindField.setOrigin(0.5, 0.5).setCenterAlign();
const url = this.file ? this.file : this.url; const url = this.file ? this.file : this.url;
if (url !== undefined) { if (url !== undefined) {

View File

@ -34,7 +34,6 @@ export class ReconnectingScene extends Phaser.Scene {
this.add.existing(this.logo); this.add.existing(this.logo);
this.reconnectingField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height / 2, "Connection lost. Reconnecting..."); this.reconnectingField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height / 2, "Connection lost. Reconnecting...");
this.reconnectingField.setOrigin(0.5, 0.5).setCenterAlign();
const cat = this.physics.add.sprite(this.game.renderer.width / 2, this.game.renderer.height / 2 - 32, 'cat'); const cat = this.physics.add.sprite(this.game.renderer.width / 2, this.game.renderer.height / 2 - 32, 'cat');
this.anims.create({ this.anims.create({