_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #327 from thecodingmachine/name8

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
back/src/Services/JWTTokenManager.ts
View File

@ -6,7 +6,7 @@ import {TokenInterface} from "../Controller/AuthenticateController";
class JWTTokenManager {
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> {

9
front/src/Connexion/LocalUserStore.ts
View File

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

7
front/src/Phaser/Components/TextField.ts
View File

@ -1,7 +1,10 @@
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);
this.scene.add.existing(this)
this.scene.add.existing(this);
if (center) {
this.setOrigin(0.5).setCenterAlign()
}
}
}

22
front/src/Phaser/Components/TextInput.ts
View File

@ -1,13 +1,15 @@
export class TextInput extends Phaser.GameObjects.BitmapText {
private underLineLength = 10;
private minUnderLineLength = 4;
private underLine: Phaser.GameObjects.Text;
constructor(scene: Phaser.Scene, x: number, y: number, maxLength: number, text: string, onChange: (text: string) => void) {
super(scene, x, y, 'main_font', text, 32);
this.setOrigin(0.5).setCenterAlign()
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) => {
@ -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) {
this.addLetter(event.key);
}
this.underLine.text = this.getUnderLineBody(this.text.length);
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() {
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 {

3
front/src/Phaser/Entity/Character.ts
View File

@ -77,7 +77,7 @@ export abstract class Character extends Container {
}
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);
scene.add.existing(this.playerName);
@ -178,6 +178,7 @@ export abstract class Character extends Container {
//this.anims.playReverse(`${this.PlayerTexture}-${PlayerAnimationNames.WalkLeft}`, true);
}
//todo:remove this, use a container tech to move the bubble instead
if (this.bubble) {
this.bubble.moveBubble(this.x, this.y);
}

6
front/src/Phaser/Login/CustomizeScene.ts
View File

@ -54,12 +54,8 @@ export class CustomizeScene extends ResizableScene {
create() {
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.setOrigin(0.5).setCenterAlign();
this.enterField.setVisible(true);
this.enterField = new TextField(this, this.game.renderer.width / 2, 40, 'you can start the game by pressing SPACE..');
this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, CustomizeTextures.icon);
this.add.existing(this.logo);

4
front/src/Phaser/Login/EnableCameraScene.ts
View File

@ -53,16 +53,12 @@ export class EnableCameraScene extends Phaser.Scene {
create() {
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.setOrigin(0.5).setCenterAlign();
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.setOrigin(0.5).setCenterAlign();
this.arrowRight = new Image(this, 0, 0, LoginTextures.arrowRight);
this.arrowRight.setOrigin(0.5, 0.5);

15
front/src/Phaser/Login/LoginScene.ts
View File

@ -8,6 +8,7 @@ import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Ch
import {cypressAsserter} from "../../Cypress/CypressAsserter";
import {SelectCharacterSceneName} from "./SelectCharacterScene";
import {ResizableScene} from "./ResizableScene";
import {localUserStore} from "../../Connexion/LocalUserStore";
//todo: put this constants in a dedicated file
export const LoginSceneName = "LoginScene";
@ -28,9 +29,7 @@ export class LoginScene extends ResizableScene {
super({
key: LoginSceneName
});
if (window.localStorage) {
this.name = window.localStorage.getItem('playerName') ?? '';
}
this.name = localUserStore.getName();
}
preload() {
@ -54,22 +53,18 @@ export class LoginScene extends ResizableScene {
cypressAsserter.initStarted();
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, this.name,(text: string) => {
this.nameInput = new TextInput(this, this.game.renderer.width / 2, 70, 8, this.name,(text: string) => {
this.name = text;
if (window.localStorage) {
window.localStorage.setItem('playerName', text);
}
localUserStore.setName(text);
});
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.add.existing(this.logo);
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', () => {
if (this.name === '') {

2
front/src/Phaser/Login/SelectCharacterScene.ts
View File

@ -57,10 +57,8 @@ export class SelectCharacterScene extends ResizableScene {
create() {
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.setOrigin(0.5).setCenterAlign()
const rectangleXStart = this.game.renderer.width / 2 - (this.nbCharactersPerRow / 2) * 32 + 16;

2
front/src/Phaser/Reconnecting/FourOFourScene.ts
View File

@ -45,7 +45,6 @@ export class FourOFourScene extends Phaser.Scene {
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.setOrigin(0.5, 0.5).setCenterAlign();
let text: string = '';
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.setOrigin(0.5, 0.5).setCenterAlign();
const url = this.file ? this.file : this.url;
if (url !== undefined) {

1
front/src/Phaser/Reconnecting/ReconnectingScene.ts
View File

@ -34,7 +34,6 @@ export class ReconnectingScene extends Phaser.Scene {
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.setOrigin(0.5, 0.5).setCenterAlign();
const cat = this.physics.add.sprite(this.game.renderer.width / 2, this.game.renderer.height / 2 - 32, 'cat');
this.anims.create({