select and center on currently selected item

front/src/Phaser/Components/CustomizeWoka/WokaBodyPartSlot.ts

@@ -1,6 +1,5 @@
 import { GridItem } from "@home-based-studio/phaser3-utils";
 import { GridItemEvent } from "@home-based-studio/phaser3-utils/lib/utils/gui/containers/grids/GridItem";
-import { MathUtils } from "../../../Utils/MathUtils";
 
 export interface WokaBodyPartSlotConfig {
     color: number;
@@ -52,12 +51,12 @@ export class WokaBodyPartSlot extends GridItem {
         }
 
         this.bodyImage = this.scene.add
-            .image(this.config.offsetX, this.config.offsetY, config.bodyImageKey ?? "")
+            .image(this.config.offsetX, this.config.offsetY, this.config.bodyImageKey ?? "")
-            .setVisible(config.imageKey !== undefined);
+            .setVisible(this.config.imageKey !== undefined);
 
         this.image = this.scene.add
-            .image(this.config.offsetX, this.config.offsetY, config.imageKey ?? "")
+            .image(this.config.offsetX, this.config.offsetY, this.config.imageKey ?? "")
-            .setVisible(config.bodyImageKey !== undefined);
+            .setVisible(this.config.bodyImageKey !== undefined);
 
         this.setSize(WokaBodyPartSlot.SIZE, WokaBodyPartSlot.SIZE);
 
@@ -71,6 +70,10 @@ export class WokaBodyPartSlot extends GridItem {
         this.scene.add.existing(this);
     }
 
+    public getContentData(): { bodyImageKey?: string; key?: string } {
+        return { bodyImageKey: this.config.bodyImageKey, key: this.config.imageKey };
+    }
+
     public setTextures(bodyTextureKey?: string, imageTextureKey?: string): void {
         this.setBodyTexture(bodyTextureKey);
         this.setImageTexture(imageTextureKey);
@@ -80,6 +83,7 @@ export class WokaBodyPartSlot extends GridItem {
         this.bodyImage.setVisible(textureKey !== undefined && textureKey !== "");
         if (textureKey) {
             this.bodyImage.setTexture(textureKey, frame);
+            this.config.bodyImageKey = textureKey;
         }
     }
 
@@ -87,6 +91,7 @@ export class WokaBodyPartSlot extends GridItem {
         this.image.setVisible(textureKey !== undefined && textureKey !== "");
         if (textureKey) {
             this.image.setTexture(textureKey, frame);
+            this.config.imageKey = textureKey;
         }
     }
 

front/src/Phaser/Login/CustomizeScene.ts

@@ -45,6 +45,7 @@ export class CustomizeScene extends AbstractCharacterScene {
     private selectedLayers: number[] = [0, 0, 0, 0, 0, 0];
     private layers: BodyResourceDescriptionInterface[][] = [];
     private selectedBodyPartType?: CustomWokaBodyPart;
+    private selectedItemTextureKey?: string;
 
     protected lazyloadingAttempt = true; //permit to update texture loaded after renderer
 
@@ -98,7 +99,6 @@ export class CustomizeScene extends AbstractCharacterScene {
     }
 
     public create(): void {
-        this.selectedBodyPartType = CustomWokaBodyPart.Body;
         this.customWokaPreviewer = new CustomWokaPreviewer(
             this,
             0,
@@ -178,6 +178,10 @@ export class CustomizeScene extends AbstractCharacterScene {
             }),
         };
 
+        this.selectedBodyPartType = CustomWokaBodyPart.Body;
+        this.selectedItemTextureKey = this.layers[CustomWokaBodyPartOrder.Body][0].id;
+        this.bodyPartsSlots.Body.select();
+
         this.initializeRandomizeButton();
         this.initializeFinishButton();
 
@@ -399,8 +403,10 @@ export class CustomizeScene extends AbstractCharacterScene {
         }
 
         this.populateGrid();
-        this.bodyPartsDraggableGrid.moveContentToBeginning();
+        const selectedGridItem = this.selectGridItem();
-        void this.bodyPartsDraggableGrid.moveContentTo(0.5, 500);
+        if (selectedGridItem) {
+            this.centerGridOnItem(selectedGridItem);
+        }
     }
 
     private handleRandomizeButtonOnResize(): void {
@@ -474,9 +480,19 @@ export class CustomizeScene extends AbstractCharacterScene {
             slot.on(WokaBodyPartSlotEvent.Clicked, (selected: boolean) => {
                 if (!selected) {
                     this.selectedBodyPartType = bodyPart as CustomWokaBodyPart;
+                    this.selectedItemTextureKey = slot.getContentData().key ?? slot.getContentData().bodyImageKey;
                     this.deselectAllSlots();
                     slot.select(true);
                     this.populateGrid();
+                    if (!this.selectedItemTextureKey) {
+                        return;
+                    }
+                    const selectedGridItem = this.selectGridItem();
+                    if (!selectedGridItem) {
+                        return;
+                    }
+                    this.bodyPartsDraggableGrid.moveContentToBeginning();
+                    this.centerGridOnItem(selectedGridItem);
                 } else {
                     this.selectedBodyPartType = undefined;
                     slot.select(false);
@@ -494,6 +510,25 @@ export class CustomizeScene extends AbstractCharacterScene {
         });
     }
 
+    private selectGridItem(): WokaBodyPartSlot | undefined {
+        const items = this.bodyPartsDraggableGrid.getAllItems() as WokaBodyPartSlot[];
+        let item: WokaBodyPartSlot | undefined;
+        if (this.selectedBodyPartType === CustomWokaBodyPart.Body) {
+            item = items.find((item) => item.getContentData().bodyImageKey === this.selectedItemTextureKey);
+        } else {
+            item = items.find((item) => item.getContentData().key === this.selectedItemTextureKey);
+        }
+        item?.select();
+        return item;
+    }
+
+    private centerGridOnItem(item: WokaBodyPartSlot, duration: number = 500): void {
+        void this.bodyPartsDraggableGrid.centerOnItem(
+            this.bodyPartsDraggableGrid.getAllItems().indexOf(item),
+            duration
+        );
+    }
+
     private randomizeOutfit(): void {
         for (let i = 0; i < 6; i += 1) {
             this.selectedLayers[i] = Math.floor(Math.random() * this.layers[i].length);
@@ -514,7 +549,7 @@ export class CustomizeScene extends AbstractCharacterScene {
 
         const bodyPartsLayer = this.layers[CustomWokaBodyPartOrder[this.selectedBodyPartType]];
 
-        this.bodyPartsDraggableGrid.clearAllItems();
+        this.clearGrid();
         for (let i = 0; i < bodyPartsLayer.length; i += 1) {
             const slot = new WokaBodyPartSlot(
                 this,
@@ -538,8 +573,6 @@ export class CustomizeScene extends AbstractCharacterScene {
             }
             this.bodyPartsDraggableGrid.addItem(slot);
         }
-        this.bodyPartsDraggableGrid.moveContentToBeginning();
-        void this.bodyPartsDraggableGrid.moveContentTo(0.5, 500);
     }
 
     private clearGrid(): void {