improved textField component and allowed 8 caracter names

front/src/Connexion/LocalUserStore.ts

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

front/src/Phaser/Components/TextField.ts

@@ -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()
+        }
     }
 }

front/src/Phaser/Components/TextInput.ts

@@ -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 {

front/src/Phaser/Entity/Character.ts

@@ -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);
         }

front/src/Phaser/Login/CustomizeScene.ts

@@ -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);

front/src/Phaser/Login/EnableCameraScene.ts

@@ -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);

front/src/Phaser/Login/LoginScene.ts

@@ -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 === '') {

front/src/Phaser/Login/SelectCharacterScene.ts

@@ -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;
 

front/src/Phaser/Reconnecting/FourOFourScene.ts

@@ -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) {

front/src/Phaser/Reconnecting/ReconnectingScene.ts

@@ -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({