Fixing bug slowing down the CustomizeScene a lot

By forcing the containers to be updated only in the "update" method, we seem to be solving some bugs regarding the way sprites are handled.
There is still an issue though. Some times, for some reasons, the update list seems to be growing a lot.
The more we click the left/right arrow to choose a character, the slower it gets (but with this commit, it does not lock anymore)

front/src/Phaser/Entity/CustomizedCharacter.ts

@@ -0,0 +1,20 @@
+import Container = Phaser.GameObjects.Container;
+import type {Scene} from "phaser";
+import Sprite = Phaser.GameObjects.Sprite;
+
+/**
+ * A sprite of a customized character (used in the Customize Scene only)
+ */
+export class CustomizedCharacter extends Container {
+    public constructor(scene: Scene, x: number, y: number, layers: string[]) {
+        super(scene, x, y);
+        this.updateSprites(layers);
+    }
+
+    public updateSprites(layers: string[]): void {
+        this.removeAll(true);
+        for (const layer of layers) {
+            this.add(new Sprite(this.scene, 0, 0, layer));
+        }
+    }
+}

front/src/Phaser/Login/CustomizeScene.ts

@@ -15,6 +15,7 @@ import {customCharacterSceneVisibleStore} from "../../Stores/CustomCharacterStor
 import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore";
 import {waScaleManager} from "../Services/WaScaleManager";
 import {isMobile} from "../../Enum/EnvironmentVariable";
+import {CustomizedCharacter} from "../Entity/CustomizedCharacter";
 
 export const CustomizeSceneName = "CustomizeScene";
 
@@ -25,12 +26,15 @@ export class CustomizeScene extends AbstractCharacterScene {
     private Rectangle!: Rectangle;
 
     private selectedLayers: number[] = [0];
-    private containersRow: Container[][] = [];
+    private containersRow: CustomizedCharacter[][] = [];
     public activeRow:number = 0;
     private layers: BodyResourceDescriptionInterface[][] = [];
 
     protected lazyloadingAttempt = true; //permit to update texture loaded after renderer
 
+    private moveHorizontally: number = 0;
+    private moveVertically: number = 0;
+
     constructor() {
         super({
             key: CustomizeSceneName
@@ -88,10 +92,13 @@ export class CustomizeScene extends AbstractCharacterScene {
             this.backToPreviousScene();
         });
 
-        this.input.keyboard.on('keyup-RIGHT', () => this.moveCursorHorizontally(1));
+        // Note: the key bindings are not directly put on the moveCursorVertically or moveCursorHorizontally methods
-        this.input.keyboard.on('keyup-LEFT', () => this.moveCursorHorizontally(-1));
+        // because if 2 such events are fired close to one another, it makes the whole application crawl to a halt (for a reason I cannot
-        this.input.keyboard.on('keyup-DOWN', () => this.moveCursorVertically(1));
+        // explain, the list of sprites managed by the update list become immense
-        this.input.keyboard.on('keyup-UP', () => this.moveCursorVertically(-1));
+        this.input.keyboard.on('keyup-RIGHT', () => this.moveHorizontally = 1);
+        this.input.keyboard.on('keyup-LEFT', () => this.moveHorizontally = -1);
+        this.input.keyboard.on('keyup-DOWN', () => this.moveVertically = 1);
+        this.input.keyboard.on('keyup-UP', () => this.moveVertically = -1);
 
         const customCursorPosition = localUserStore.getCustomCursorPosition();
         if (customCursorPosition) {
@@ -104,7 +111,7 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.onResize();
     }
 
-    public moveCursorHorizontally(index: number): void {
+    public doMoveCursorHorizontally(index: number): void {
         this.selectedLayers[this.activeRow] += index;
         if (this.selectedLayers[this.activeRow] < 0) {
             this.selectedLayers[this.activeRow] = 0
@@ -116,7 +123,7 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.saveInLocalStorage();
     }
 
-    public moveCursorVertically(index:number): void {
+    public doMoveCursorVertically(index:number): void {
 
         this.activeRow += index;
         if (this.activeRow < 0) {
@@ -165,20 +172,20 @@ export class CustomizeScene extends AbstractCharacterScene {
      * @param selectedItem, The number of the item select (0 for black body...)
      */
     private generateCharacter(x: number, y: number, layerNumber: number, selectedItem: number) {
-        return new Container(this, x, y,this.getContainerChildren(layerNumber,selectedItem));
+        return new CustomizedCharacter(this, x, y, this.getContainerChildren(layerNumber,selectedItem));
     }
 
-    private getContainerChildren(layerNumber: number, selectedItem: number): Array<Sprite> {
+    private getContainerChildren(layerNumber: number, selectedItem: number): Array<string> {
-        const children: Array<Sprite> = new Array<Sprite>();
+        const children: Array<string> = new Array<string>();
         for (let j = 0; j <= layerNumber; j++) {
             if (j === layerNumber) {
-                children.push(this.generateLayers(0, 0, this.layers[j][selectedItem].name));
+                children.push(this.layers[j][selectedItem].name);
             } else {
                 const layer = this.selectedLayers[j];
                 if (layer === undefined) {
                     continue;
                 }
-                children.push(this.generateLayers(0, 0, this.layers[j][layer].name));
+                children.push(this.layers[j][layer].name);
             }
          }
         return children;
@@ -215,15 +222,15 @@ export class CustomizeScene extends AbstractCharacterScene {
      * @return a new sprite
      */
     private generateLayers(x: number, y: number, name: string): Sprite {
-        return new Sprite(this, x, y, name);
+        //return new Sprite(this, x, y, name);
+        return this.add.sprite(0, 0, name);
     }
 
     private updateSelectedLayer() {
         for(let i = 0; i < this.containersRow.length; i++){
             for(let j = 0; j < this.containersRow[i].length; j++){
-               const children = this.getContainerChildren(i, j);
+                const children = this.getContainerChildren(i, j);
-               this.containersRow[i][j].removeAll(true);
+                this.containersRow[i][j].updateSprites(children);
-                this.containersRow[i][j].add(children);
             }
         }
     }
@@ -234,6 +241,15 @@ export class CustomizeScene extends AbstractCharacterScene {
             this.moveLayers();
             this.lazyloadingAttempt = false;
         }
+
+        if (this.moveHorizontally !== 0) {
+            this.doMoveCursorHorizontally(this.moveHorizontally);
+            this.moveHorizontally = 0;
+        }
+        if (this.moveVertically !== 0) {
+            this.doMoveCursorVertically(this.moveVertically);
+            this.moveVertically = 0;
+        }
     }