grid shadow and animations

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

@@ -29,7 +29,7 @@ export class WokaBodyPartSlot extends GridItem {
 
     private selected: boolean;
 
-    public readonly SIZE: number = 50;
+    public static readonly SIZE: number = 50;
 
     constructor(scene: Phaser.Scene, x: number, y: number, config: WokaBodyPartSlotConfig, id?: number) {
         super(scene, `${id}`, { x, y });
@@ -44,9 +44,9 @@ export class WokaBodyPartSlot extends GridItem {
 
         if (this.config.categoryImageKey) {
             this.categoryImage = this.scene.add
-                .image(this.SIZE / 2 - 1, -this.SIZE / 2 + 1, this.config.categoryImageKey)
+                .image(WokaBodyPartSlot.SIZE / 2 - 1, -WokaBodyPartSlot.SIZE / 2 + 1, this.config.categoryImageKey)
                 .setDisplaySize(16, 16)
-                .setAlpha(0.4)
+                .setAlpha(0.75)
                 .setOrigin(1, 0);
             this.add(this.categoryImage);
         }
@@ -59,7 +59,7 @@ export class WokaBodyPartSlot extends GridItem {
             .image(this.config.offsetX, this.config.offsetY, config.imageKey ?? "")
             .setVisible(config.bodyImageKey !== undefined);
 
-        this.setSize(this.SIZE, this.SIZE);
+        this.setSize(WokaBodyPartSlot.SIZE, WokaBodyPartSlot.SIZE);
 
         this.add([this.bodyImage, this.image]);
 
@@ -118,8 +118,10 @@ export class WokaBodyPartSlot extends GridItem {
             this.selected ? this.config.borderSelectedColor : this.config.borderColor
         );
 
-        this.background.fillRect(-this.SIZE / 2, -this.SIZE / 2, this.SIZE, this.SIZE);
+        const size = WokaBodyPartSlot.SIZE;
-        this.background.strokeRect(-this.SIZE / 2, -this.SIZE / 2, this.SIZE, this.SIZE);
+
+        this.background.fillRect(-size / 2, -size / 2, size, size);
+        this.background.strokeRect(-size / 2, -size / 2, size, size);
     }
 
     private updateSelected(): void {

front/src/Phaser/Entity/Character.ts

@@ -255,7 +255,6 @@ export abstract class Character extends Container implements OutlineableInterfac
             }
             const sprite = new Sprite(this.scene, 0, 0, texture, frame);
             this.add(sprite);
-            console.log(texture);
             getPlayerAnimations(texture).forEach((d) => {
                 this.scene.anims.create({
                     key: d.key,

front/src/Phaser/Helpers/TexturesHelper.ts

@@ -31,4 +31,16 @@ export class TexturesHelper {
             throw new Error("Could not get the snapshot");
         }
     }
+
+    public static createRectangleTexture(
+        scene: Phaser.Scene,
+        textureKey: string,
+        width: number,
+        height: number,
+        color: number
+    ): void {
+        const rectangleTexture = scene.add.graphics().fillStyle(color, 1).fillRect(0, 0, width, height);
+        rectangleTexture.generateTexture(textureKey, width, height);
+        rectangleTexture.destroy();
+    }
 }

front/src/Phaser/Login/CustomizeScene.ts

@@ -26,6 +26,7 @@ import {
 import { DraggableGridEvent } from "@home-based-studio/phaser3-utils/lib/utils/gui/containers/grids/DraggableGrid";
 import { Button } from "../Components/Ui/Button";
 import { wokaList } from "../../Messages/JsonMessages/PlayerTextures";
+import { TexturesHelper } from "../Helpers/TexturesHelper";
 
 export const CustomizeSceneName = "CustomizeScene";
 
@@ -33,6 +34,8 @@ export class CustomizeScene extends AbstractCharacterScene {
     private customWokaPreviewer!: CustomWokaPreviewer;
     private bodyPartsDraggableGridBackground!: Phaser.GameObjects.Graphics;
     private bodyPartsDraggableGridForeground!: Phaser.GameObjects.Graphics;
+    private bodyPartsDraggableGridLeftShadow!: Phaser.GameObjects.Image;
+    private bodyPartsDraggableGridRightShadow!: Phaser.GameObjects.Image;
     private bodyPartsDraggableGrid!: DraggableGrid;
     private bodyPartsSlots!: Record<CustomWokaBodyPart, WokaBodyPartSlot>;
 
@@ -47,6 +50,8 @@ export class CustomizeScene extends AbstractCharacterScene {
 
     private loader: Loader;
 
+    private readonly SLOT_DIMENSION = 100;
+
     constructor() {
         super({
             key: CustomizeSceneName,
@@ -64,6 +69,8 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.load.image("iconEyes", "/resources/icons/icon_eyes.png");
         this.load.image("iconBody", "/resources/icons/icon_body.png");
 
+        TexturesHelper.createRectangleTexture(this, "gridEdgeShadow", 200, 115, 0x000000);
+
         const wokaMetadataKey = "woka-list" + gameManager.currentStartedRoom.href;
         this.cache.json.remove(wokaMetadataKey);
         this.superLoad
@@ -91,6 +98,7 @@ export class CustomizeScene extends AbstractCharacterScene {
     }
 
     public create(): void {
+        this.selectedBodyPartType = CustomWokaBodyPart.Body;
         this.customWokaPreviewer = new CustomWokaPreviewer(
             this,
             0,
@@ -118,8 +126,8 @@ export class CustomizeScene extends AbstractCharacterScene {
             repositionToCenter: true,
             itemsInRow: 1,
             margin: {
-                left: 5,
+                left: (innerWidth / waScaleManager.getActualZoom() - this.SLOT_DIMENSION) * 0.5,
-                right: 5,
+                right: (innerWidth / waScaleManager.getActualZoom() - this.SLOT_DIMENSION) * 0.5,
             },
             spacing: 5,
             debug: {
@@ -128,6 +136,21 @@ export class CustomizeScene extends AbstractCharacterScene {
         });
         this.bodyPartsDraggableGridForeground = this.add.graphics();
 
+        this.bodyPartsDraggableGridLeftShadow = this.add
+            .image(0, this.cameras.main.worldView.y + this.cameras.main.height, "gridEdgeShadow")
+            .setAlpha(1, 0, 1, 0)
+            .setOrigin(0, 1);
+
+        this.bodyPartsDraggableGridRightShadow = this.add
+            .image(
+                this.cameras.main.worldView.x + this.cameras.main.width,
+                this.cameras.main.worldView.y + this.cameras.main.height,
+                "gridEdgeShadow"
+            )
+            .setAlpha(1, 0, 1, 0)
+            .setFlipX(true)
+            .setOrigin(1, 1);
+
         this.bodyPartsSlots = {
             [CustomWokaBodyPart.Hair]: new WokaBodyPartSlot(this, 0, 0, {
                 ...this.getDefaultWokaBodyPartSlotConfig(),
@@ -319,11 +342,11 @@ export class CustomizeScene extends AbstractCharacterScene {
             );
             const bottom = Math.floor(top + slotSize + 10);
 
-            this.bodyPartsSlots.Hair.setPosition(left, top);
+            this.bodyPartsSlots.Body.setPosition(left, top);
-            this.bodyPartsSlots.Hat.setPosition(middle, top);
+            this.bodyPartsSlots.Eyes.setPosition(middle, top);
-            this.bodyPartsSlots.Eyes.setPosition(right, top);
+            this.bodyPartsSlots.Hair.setPosition(right, top);
-            this.bodyPartsSlots.Body.setPosition(left, bottom);
+            this.bodyPartsSlots.Clothes.setPosition(left, bottom);
-            this.bodyPartsSlots.Clothes.setPosition(middle, bottom);
+            this.bodyPartsSlots.Hat.setPosition(middle, bottom);
             this.bodyPartsSlots.Accessory.setPosition(right, bottom);
 
             return;
@@ -341,12 +364,12 @@ export class CustomizeScene extends AbstractCharacterScene {
         const middle = Math.floor(top + slotSize + 10);
         const bottom = Math.floor(middle + slotSize + 10);
 
-        this.bodyPartsSlots.Hair.setPosition(left, top);
+        this.bodyPartsSlots.Body.setPosition(left, top);
-        this.bodyPartsSlots.Body.setPosition(left, middle);
+        this.bodyPartsSlots.Eyes.setPosition(left, middle);
-        this.bodyPartsSlots.Accessory.setPosition(ratio < 0.6 ? leftEdge : left, ratio < 0.6 ? middle : bottom);
+        this.bodyPartsSlots.Hair.setPosition(ratio < 0.6 ? leftEdge : left, ratio < 0.6 ? middle : bottom);
-        this.bodyPartsSlots.Hat.setPosition(right, top);
+        this.bodyPartsSlots.Clothes.setPosition(right, top);
-        this.bodyPartsSlots.Clothes.setPosition(right, middle);
+        this.bodyPartsSlots.Hat.setPosition(right, middle);
-        this.bodyPartsSlots.Eyes.setPosition(ratio < 0.6 ? rightEdge : right, ratio < 0.6 ? middle : bottom);
+        this.bodyPartsSlots.Accessory.setPosition(ratio < 0.6 ? rightEdge : right, ratio < 0.6 ? middle : bottom);
     }
 
     private handleBodyPartsDraggableGridOnResize(): void {
@@ -357,6 +380,12 @@ export class CustomizeScene extends AbstractCharacterScene {
             y: this.cameras.main.worldView.y + this.cameras.main.height - gridHeight * 0.5,
         };
 
+        this.bodyPartsDraggableGridLeftShadow.setPosition(0, this.cameras.main.worldView.y + this.cameras.main.height);
+        this.bodyPartsDraggableGridRightShadow.setPosition(
+            this.cameras.main.worldView.x + this.cameras.main.width,
+            this.cameras.main.worldView.y + this.cameras.main.height
+        );
+
         this.drawGridBackground(gridPos);
         this.drawGridForeground(gridPos);
         try {
@@ -371,6 +400,7 @@ export class CustomizeScene extends AbstractCharacterScene {
 
         this.populateGrid();
         this.bodyPartsDraggableGrid.moveContentToBeginning();
+        void this.bodyPartsDraggableGrid.moveContentTo(0.5, 500);
     }
 
     private handleRandomizeButtonOnResize(): void {
@@ -456,6 +486,7 @@ export class CustomizeScene extends AbstractCharacterScene {
         }
 
         this.bodyPartsDraggableGrid.on(DraggableGridEvent.ItemClicked, (item: WokaBodyPartSlot) => {
+            void this.bodyPartsDraggableGrid.centerOnItem(this.bodyPartsDraggableGrid.getAllItems().indexOf(item), 500);
             this.bodyPartsDraggableGrid.getAllItems().forEach((slot) => (slot as WokaBodyPartSlot).select(false));
             this.changeOutfitPart(Number(item.getId()));
             this.refreshPlayerCurrentOutfit();
@@ -480,7 +511,6 @@ export class CustomizeScene extends AbstractCharacterScene {
         if (this.selectedBodyPartType === undefined) {
             return;
         }
-        const slotDimension = 100;
 
         const bodyPartsLayer = this.layers[CustomWokaBodyPartOrder[this.selectedBodyPartType]];
 
@@ -496,7 +526,7 @@ export class CustomizeScene extends AbstractCharacterScene {
                     offsetY: 0,
                 },
                 i
-            ).setDisplaySize(slotDimension, slotDimension);
+            ).setDisplaySize(this.SLOT_DIMENSION, this.SLOT_DIMENSION);
             if (this.selectedBodyPartType === CustomWokaBodyPart.Body) {
                 slot.setBodyTexture(bodyPartsLayer[i].id);
                 slot.setImageTexture();
@@ -509,6 +539,7 @@ export class CustomizeScene extends AbstractCharacterScene {
             this.bodyPartsDraggableGrid.addItem(slot);
         }
         this.bodyPartsDraggableGrid.moveContentToBeginning();
+        void this.bodyPartsDraggableGrid.moveContentTo(0.5, 500);
     }
 
     private clearGrid(): void {