diff --git a/front/src/Phaser/Components/CustomizeWoka/CustomWokaPreviewer.ts b/front/src/Phaser/Components/CustomizeWoka/CustomWokaPreviewer.ts index 29c010bd..a015082c 100644 --- a/front/src/Phaser/Components/CustomizeWoka/CustomWokaPreviewer.ts +++ b/front/src/Phaser/Components/CustomizeWoka/CustomWokaPreviewer.ts @@ -79,6 +79,7 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container { } public updateSprite(textureKey: string, bodyPart: CustomWokaBodyPart): void { + this.sprites[bodyPart].anims.stop(); this.sprites[bodyPart].setTexture(textureKey).setVisible(textureKey !== ""); if (textureKey === "") { return; diff --git a/front/src/Phaser/Components/CustomizeWoka/WokaBodyPartSlot.ts b/front/src/Phaser/Components/CustomizeWoka/WokaBodyPartSlot.ts index 833784dd..e2bad69c 100644 --- a/front/src/Phaser/Components/CustomizeWoka/WokaBodyPartSlot.ts +++ b/front/src/Phaser/Components/CustomizeWoka/WokaBodyPartSlot.ts @@ -28,8 +28,8 @@ export class WokaBodyPartSlot extends GridItem { public readonly SIZE: number = 50; - constructor(scene: Phaser.Scene, x: number, y: number, config: WokaBodyPartSlotConfig) { - super(scene, undefined, { x, y }); + constructor(scene: Phaser.Scene, x: number, y: number, config: WokaBodyPartSlotConfig, id?: number) { + super(scene, `${id}`, { x, y }); this.config = config; diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts index b437735f..e4813119 100644 --- a/front/src/Phaser/Login/CustomizeScene.ts +++ b/front/src/Phaser/Login/CustomizeScene.ts @@ -24,6 +24,7 @@ import { WokaBodyPartSlotConfig, WokaBodyPartSlotEvent, } from "../Components/CustomizeWoka/WokaBodyPartSlot"; +import { DraggableGridEvent } from "@home-based-studio/phaser3-utils/lib/utils/gui/containers/grids/DraggableGrid"; export const CustomizeSceneName = "CustomizeScene"; @@ -37,6 +38,7 @@ export class CustomizeScene extends AbstractCharacterScene { private selectedLayers: number[] = [0, 1, 2, 3, 4, 5]; private containersRow: CustomizedCharacter[][] = []; private layers: BodyResourceDescriptionInterface[][] = []; + private selectedBodyPartType?: CustomWokaBodyPart; protected lazyloadingAttempt = true; //permit to update texture loaded after renderer @@ -96,7 +98,6 @@ export class CustomizeScene extends AbstractCharacterScene { public create(): void { this.isVertical = this.cameras.main.width / this.cameras.main.height < 0.75; - console.log(this.layers); this.customWokaPreviewer = new CustomWokaPreviewer(this, 0, 0, this.getCustomWokaPreviewerConfig()); @@ -128,7 +129,7 @@ export class CustomizeScene extends AbstractCharacterScene { [CustomWokaBodyPart.Eyes]: new WokaBodyPartSlot(this, 0, 0, this.getDefaultWokaBodyPartSlotConfig()), }; - this.setPlayerCurrentOutfit(); + this.refreshPlayerCurrentOutfit(); this.onResize(); @@ -174,7 +175,7 @@ export class CustomizeScene extends AbstractCharacterScene { this.scene.run(SelectCharacterSceneName); } - private setPlayerCurrentOutfit(): void { + private refreshPlayerCurrentOutfit(): void { let i = 0; for (const layerItem of this.selectedLayers) { const bodyPart = CustomWokaBodyPart[CustomWokaBodyPartOrder[i] as CustomWokaBodyPart]; @@ -304,22 +305,31 @@ export class CustomizeScene extends AbstractCharacterScene { this.randomizeOutfit(); this.clearGrid(); this.deselectAllSlots(); - this.setPlayerCurrentOutfit(); + this.refreshPlayerCurrentOutfit(); }); for (const bodyPart in CustomWokaBodyPart) { const slot = this.bodyPartsSlots[bodyPart as CustomWokaBodyPart]; slot.on(WokaBodyPartSlotEvent.Clicked, (selected: boolean) => { if (!selected) { + this.selectedBodyPartType = bodyPart as CustomWokaBodyPart; this.deselectAllSlots(); slot.select(true); this.populateGrid(bodyPart as CustomWokaBodyPart); } else { + this.selectedBodyPartType = undefined; slot.select(false); this.clearGrid(); } }); } + + this.bodyPartsDraggableGrid.on(DraggableGridEvent.ItemClicked, (item: WokaBodyPartSlot) => { + this.bodyPartsDraggableGrid.getAllItems().forEach((slot) => (slot as WokaBodyPartSlot).select(false)); + this.changeOutfitPart(Number(item.getId())); + this.refreshPlayerCurrentOutfit(); + item.select(true); + }); } private randomizeOutfit(): void { @@ -328,6 +338,13 @@ export class CustomizeScene extends AbstractCharacterScene { } } + private changeOutfitPart(index: number): void { + if (this.selectedBodyPartType === undefined) { + return; + } + this.selectedLayers[CustomWokaBodyPartOrder[this.selectedBodyPartType]] = index; + } + private populateGrid(bodyParts: CustomWokaBodyPart): void { const slotDimension = (innerHeight * (this.isVertical ? 0.125 : 0.15)) / waScaleManager.getActualZoom(); const slotScale = slotDimension / this.customWokaPreviewer.SIZE; @@ -336,7 +353,9 @@ export class CustomizeScene extends AbstractCharacterScene { this.bodyPartsDraggableGrid.clearAllItems(); for (let i = 0; i < bodyPartsLayer.length; i += 1) { - const slot = new WokaBodyPartSlot(this, 0, 0, this.getDefaultWokaBodyPartSlotConfig()).setScale(slotScale); + const slot = new WokaBodyPartSlot(this, 0, 0, this.getDefaultWokaBodyPartSlotConfig(), i).setScale( + slotScale + ); if (bodyParts === CustomWokaBodyPart.Body) { slot.setBodyTexture(bodyPartsLayer[i].id); slot.setImageTexture(); @@ -348,6 +367,7 @@ export class CustomizeScene extends AbstractCharacterScene { } this.bodyPartsDraggableGrid.addItem(slot); } + this.bodyPartsDraggableGrid.moveContentToBeginning(); } private clearGrid(): void {