diff --git a/front/src/Phaser/Entity/CustomizedCharacter.ts b/front/src/Phaser/Entity/CustomizedCharacter.ts new file mode 100644 index 00000000..3a7f1597 --- /dev/null +++ b/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)); + } + } +} diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts index cc0c7208..f1d48235 100644 --- a/front/src/Phaser/Login/CustomizeScene.ts +++ b/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)); - this.input.keyboard.on('keyup-LEFT', () => this.moveCursorHorizontally(-1)); - this.input.keyboard.on('keyup-DOWN', () => this.moveCursorVertically(1)); - this.input.keyboard.on('keyup-UP', () => this.moveCursorVertically(-1)); + // Note: the key bindings are not directly put on the moveCursorVertically or moveCursorHorizontally methods + // 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 + // explain, the list of sprites managed by the update list become immense + 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 { - const children: Array = new Array(); + private getContainerChildren(layerNumber: number, selectedItem: number): Array { + const children: Array = new Array(); 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); - this.containersRow[i][j].removeAll(true); - this.containersRow[i][j].add(children); + const children = this.getContainerChildren(i, j); + this.containersRow[i][j].updateSprites(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; + } }