get rid of zoom factor

front/package.json

@@ -5,6 +5,7 @@
   "license": "SEE LICENSE IN LICENSE.txt",
   "devDependencies": {
     "@geprog/vite-plugin-env-config": "^4.0.0",
+    "@home-based-studio/phaser3-utils": "0.3.0",
     "@sveltejs/vite-plugin-svelte": "^1.0.0-next.36",
     "@tsconfig/svelte": "^1.0.10",
     "@types/google-protobuf": "^3.7.3",

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

@@ -9,25 +9,49 @@ export enum CustomWokaBodyPart {
     Accessory = "Accessory",
 }
 
+export interface CustomWokaPreviewerConfig {
+    width: number;
+    height: number;
+    color: number;
+    borderThickness: number;
+    borderColor: number;
+    bodyPartsScaleModifier: number;
+    bodyPartsOffsetX: number;
+}
+
 export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
     private background: Phaser.GameObjects.Graphics;
     private sprites: Record<CustomWokaBodyPart, Phaser.GameObjects.Sprite>;
 
-    private currentAnimationDirection: PlayerAnimationDirections = PlayerAnimationDirections.Down;
+    private animationDirection: PlayerAnimationDirections = PlayerAnimationDirections.Down;
-    private currentlyMoving: boolean = true;
+    private moving: boolean = true;
 
-    constructor(scene: Phaser.Scene, x: number, y: number) {
+    private config: CustomWokaPreviewerConfig;
+
+    constructor(scene: Phaser.Scene, x: number, y: number, config: CustomWokaPreviewerConfig) {
         super(scene, x, y);
 
-        const spritesOffset = -2;
+        this.config = config;
 
         this.sprites = {
-            [CustomWokaBodyPart.Accessory]: this.scene.add.sprite(spritesOffset, 0, "").setScale(4),
+            [CustomWokaBodyPart.Accessory]: this.scene.add
-            [CustomWokaBodyPart.Body]: this.scene.add.sprite(spritesOffset, 0, "").setScale(4),
+                .sprite(this.config.bodyPartsOffsetX, 0, "")
-            [CustomWokaBodyPart.Clothes]: this.scene.add.sprite(spritesOffset, 0, "").setScale(4),
+                .setScale(this.config.bodyPartsScaleModifier),
-            [CustomWokaBodyPart.Eyes]: this.scene.add.sprite(spritesOffset, 0, "").setScale(4),
+            [CustomWokaBodyPart.Body]: this.scene.add
-            [CustomWokaBodyPart.Hair]: this.scene.add.sprite(spritesOffset, 0, "").setScale(4),
+                .sprite(this.config.bodyPartsOffsetX, 0, "")
-            [CustomWokaBodyPart.Hat]: this.scene.add.sprite(spritesOffset, 0, "").setScale(4),
+                .setScale(this.config.bodyPartsScaleModifier),
+            [CustomWokaBodyPart.Clothes]: this.scene.add
+                .sprite(this.config.bodyPartsOffsetX, 0, "")
+                .setScale(this.config.bodyPartsScaleModifier),
+            [CustomWokaBodyPart.Eyes]: this.scene.add
+                .sprite(this.config.bodyPartsOffsetX, 0, "")
+                .setScale(this.config.bodyPartsScaleModifier),
+            [CustomWokaBodyPart.Hair]: this.scene.add
+                .sprite(this.config.bodyPartsOffsetX, 0, "")
+                .setScale(this.config.bodyPartsScaleModifier),
+            [CustomWokaBodyPart.Hat]: this.scene.add
+                .sprite(this.config.bodyPartsOffsetX, 0, "")
+                .setScale(this.config.bodyPartsScaleModifier),
         };
 
         this.updateSprite("accessory1", CustomWokaBodyPart.Accessory);
@@ -37,11 +61,8 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
         this.updateSprite("hair3", CustomWokaBodyPart.Hair);
         this.updateSprite("hat2", CustomWokaBodyPart.Hat);
 
-        const width = 150;
+        this.background = this.createBackground();
-        const height = 200;
+        this.setSize(this.config.width, this.config.height);
-
-        this.background = this.createBackground(width, height);
-        this.setSize(width, height);
 
         this.add([
             this.background,
@@ -61,14 +82,17 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
     }
 
     public changeAnimation(direction: PlayerAnimationDirections, moving: boolean): void {
-        this.currentAnimationDirection = direction;
+        this.animationDirection = direction;
-        this.currentlyMoving = moving;
+        this.moving = moving;
     }
 
-    private createBackground(width: number, height: number): Phaser.GameObjects.Graphics {
+    private createBackground(): Phaser.GameObjects.Graphics {
         const background = this.scene.add.graphics();
         background.fillStyle(0xffffff);
-        background.lineStyle(5, 0xadafbc);
+        background.lineStyle(this.config.borderThickness, 0xadafbc);
+
+        const width = this.config.width;
+        const height = this.config.height;
 
         background.fillRect(-width / 2, -height / 2, width, height);
         background.strokeRect(-width / 2, -height / 2, width, height);
@@ -85,15 +109,12 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
             }
             const textureKey = sprite.texture.key;
             if (
-                this.currentlyMoving &&
+                this.moving &&
-                (!sprite.anims.currentAnim || sprite.anims.currentAnim.key !== this.currentAnimationDirection)
+                (!sprite.anims.currentAnim || sprite.anims.currentAnim.key !== this.animationDirection)
             ) {
-                sprite.play(textureKey + "-" + this.currentAnimationDirection + "-" + PlayerAnimationTypes.Walk, true);
+                sprite.play(textureKey + "-" + this.animationDirection + "-" + PlayerAnimationTypes.Walk, true);
-            } else if (!this.currentlyMoving) {
+            } else if (!this.moving) {
-                sprite.anims.play(
+                sprite.anims.play(textureKey + "-" + this.animationDirection + "-" + PlayerAnimationTypes.Idle, true);
-                    textureKey + "-" + this.currentAnimationDirection + "-" + PlayerAnimationTypes.Idle,
-                    true
-                );
             }
         }
     }
@@ -113,4 +134,12 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
             this.scene.sys.updateList.add(this.sprites[bodyPart]);
         }
     }
+
+    public isMoving(): boolean {
+        return this.moving;
+    }
+
+    public getAnimationDirection(): PlayerAnimationDirections {
+        return this.animationDirection;
+    }
 }

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

@@ -0,0 +1,96 @@
+import { GridItem } from "@home-based-studio/phaser3-utils";
+import { GridItemEvent } from "@home-based-studio/phaser3-utils/lib/utils/gui/containers/grids/GridItem";
+
+export interface WokaBodyPartSlotConfig {
+    width: number;
+    height: number;
+    color: number;
+    borderThickness: number;
+    borderColor: number;
+    borderSelectedColor: number;
+    offsetX: number;
+    offsetY: number;
+    bodyImageKey?: string;
+    imageKey?: string;
+    selected?: boolean;
+}
+
+export class WokaBodyPartSlot extends GridItem {
+    private background: Phaser.GameObjects.Rectangle;
+    private bodyImage: Phaser.GameObjects.Image;
+    private image: Phaser.GameObjects.Image;
+
+    private config: WokaBodyPartSlotConfig;
+
+    private selected: boolean;
+
+    constructor(scene: Phaser.Scene, x: number, y: number, config: WokaBodyPartSlotConfig) {
+        super(scene, undefined, { x, y });
+
+        this.config = config;
+
+        const offsetY = -3;
+        const offsetX = -2;
+        this.selected = this.config.selected ?? false;
+
+        this.background = this.scene.add
+            .rectangle(0, 0, this.config.width, this.config.height, this.config.color)
+            .setStrokeStyle(this.config.borderThickness, this.config.borderColor);
+
+        this.bodyImage = this.scene.add
+            .image(offsetX, offsetY, config.bodyImageKey ?? `body${Math.floor(Math.random() * 33) + 1}`)
+            .setScale(2);
+
+        this.image = this.scene.add
+            .image(offsetX, offsetY, config.imageKey ?? "")
+            .setScale(2)
+            .setVisible(config.imageKey !== undefined);
+
+        this.setSize(this.config.width + this.config.borderThickness, this.config.height + this.config.borderThickness);
+
+        this.add([this.background, this.bodyImage, this.image]);
+
+        this.setInteractive();
+        this.scene.input.setDraggable(this);
+
+        this.bindEventHandlers();
+
+        this.scene.add.existing(this);
+    }
+
+    public setBodyTexture(textureKey: string, frame?: string | number): void {
+        this.bodyImage.setTexture(textureKey, frame);
+    }
+
+    public setImageTexture(textureKey?: string, frame?: string | number): void {
+        this.image.setVisible(textureKey !== undefined || textureKey !== "");
+        if (textureKey) {
+            this.bodyImage.setTexture(textureKey, frame);
+        }
+    }
+
+    public select(select: boolean = true): void {
+        if (this.selected === select) {
+            return;
+        }
+        this.selected = select;
+        this.updateSelected();
+    }
+
+    public isSelected(): boolean {
+        return this.selected;
+    }
+
+    protected bindEventHandlers(): void {
+        super.bindEventHandlers();
+
+        this.on(GridItemEvent.Clicked, () => {
+            this.select(!this.selected);
+            // this.emit(CategoryGridItemEvent.Selected, this.categoryName);
+        });
+    }
+
+    private updateSelected(): void {
+        this.background.setStrokeStyle(2.5, this.selected ? this.config.borderSelectedColor : this.config.borderColor);
+    }
+}

front/src/Phaser/Login/CustomizeScene.ts

@@ -1,7 +1,5 @@
 import { EnableCameraSceneName } from "./EnableCameraScene";
-import Rectangle = Phaser.GameObjects.Rectangle;
 import { loadAllLayers } from "../Entity/PlayerTexturesLoadingManager";
-import Sprite = Phaser.GameObjects.Sprite;
 import { gameManager } from "../Game/GameManager";
 import { localUserStore } from "../../Connexion/LocalUserStore";
 import { Loader } from "../Components/Loader";
@@ -17,13 +15,17 @@ import { analyticsClient } from "../../Administration/AnalyticsClient";
 import { isMediaBreakpointUp } from "../../Utils/BreakpointsUtils";
 import { PUSHER_URL } from "../../Enum/EnvironmentVariable";
 import { CustomWokaBodyPart, CustomWokaPreviewer } from "../Components/CustomizeWoka/CustomWokaPreviewer";
+import { DraggableGrid } from "@home-based-studio/phaser3-utils";
+import { WokaBodyPartSlot, WokaBodyPartSlotConfig } from "../Components/CustomizeWoka/WokaBodyPartSlot";
 
 export const CustomizeSceneName = "CustomizeScene";
 
 export class CustomizeScene extends AbstractCharacterScene {
-    private Rectangle!: Rectangle;
+    private Rectangle!: Phaser.GameObjects.Rectangle;
 
-    private customWokaPreviewer: CustomWokaPreviewer;
+    private customWokaPreviewer!: CustomWokaPreviewer;
+    private bodyPartsDraggableGrid!: DraggableGrid;
+    private bodyPartsSlots!: Record<CustomWokaBodyPart, WokaBodyPartSlot>;
 
     private selectedLayers: number[] = [0];
     private containersRow: CustomizedCharacter[][] = [];
@@ -88,8 +90,7 @@ export class CustomizeScene extends AbstractCharacterScene {
     public create(): void {
         console.log(this.layers);
 
-        waScaleManager.saveZoom();
+        const isVertical = isMediaBreakpointUp("md");
-        waScaleManager.zoomModifier = isMediaBreakpointUp("md") ? 3 : 1;
 
         this.Rectangle = this.add.rectangle(
             this.cameras.main.worldView.x + this.cameras.main.width / 2,
@@ -116,7 +117,55 @@ export class CustomizeScene extends AbstractCharacterScene {
             this.updateSelectedLayer();
         }
 
-        this.customWokaPreviewer = new CustomWokaPreviewer(this, 300, 300);
+        this.customWokaPreviewer = new CustomWokaPreviewer(this, 0, 0, {
+            width: 150,
+            height: 200,
+            color: 0xffffff,
+            borderThickness: 5,
+            borderColor: 0xadafbc,
+            bodyPartsScaleModifier: 4,
+            bodyPartsOffsetX: -2,
+        });
+        this.bodyPartsDraggableGrid = new DraggableGrid(this, {
+            position: { x: 0, y: 0 },
+            maskPosition: { x: 0, y: 0 },
+            dimension: { x: 485, y: 165 },
+            horizontal: true,
+            repositionToCenter: true,
+            itemsInRow: 2,
+            margin: {
+                left: 5,
+                right: 5,
+            },
+            spacing: 5,
+            debug: {
+                showDraggableSpace: false,
+            },
+        });
+
+        const defaultWokaBodyPartSlotConfig: WokaBodyPartSlotConfig = {
+            width: 72.5,
+            height: 72.5,
+            color: 0xffffff,
+            borderThickness: 2.5,
+            borderColor: 0xadafbc,
+            borderSelectedColor: 0x00ffff,
+            offsetX: -3,
+            offsetY: -2,
+        };
+
+        for (let i = 0; i < 50; i += 1) {
+            this.bodyPartsDraggableGrid.addItem(new WokaBodyPartSlot(this, 0, 0, defaultWokaBodyPartSlotConfig));
+        }
+
+        this.bodyPartsSlots = {
+            [CustomWokaBodyPart.Hair]: new WokaBodyPartSlot(this, 220, 50, defaultWokaBodyPartSlotConfig),
+            [CustomWokaBodyPart.Body]: new WokaBodyPartSlot(this, 220, 130, defaultWokaBodyPartSlotConfig),
+            [CustomWokaBodyPart.Accessory]: new WokaBodyPartSlot(this, 220, 210, defaultWokaBodyPartSlotConfig),
+            [CustomWokaBodyPart.Hat]: new WokaBodyPartSlot(this, 520, 50, defaultWokaBodyPartSlotConfig),
+            [CustomWokaBodyPart.Clothes]: new WokaBodyPartSlot(this, 520, 130, defaultWokaBodyPartSlotConfig),
+            [CustomWokaBodyPart.Eyes]: new WokaBodyPartSlot(this, 520, 210, defaultWokaBodyPartSlotConfig),
+        };
 
         this.onResize();
 
@@ -151,13 +200,16 @@ export class CustomizeScene extends AbstractCharacterScene {
     }
 
     public onResize(): void {
+        const isVertical = this.cameras.main.height > this.cameras.main.width;
+        console.log(`isVertical: ${isVertical}`);
         this.moveLayers();
 
         this.Rectangle.x = this.cameras.main.worldView.x + this.cameras.main.width / 2;
         this.Rectangle.y = this.cameras.main.worldView.y + this.cameras.main.height / 3;
 
-        this.customWokaPreviewer.x = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+        this.repositionCustomWokaPreviewer(isVertical);
-        this.customWokaPreviewer.y = this.cameras.main.worldView.y + this.cameras.main.height / 2;
+        this.repositionBodyPartSlots(isVertical);
+        this.repositionBodyPartsDraggableGrid(isVertical);
     }
 
     public nextSceneToCamera() {
@@ -187,6 +239,43 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.scene.run(SelectCharacterSceneName);
     }
 
+    private repositionCustomWokaPreviewer(isVertical: boolean): void {
+        this.customWokaPreviewer.x = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+        this.customWokaPreviewer.y =
+            this.cameras.main.worldView.y +
+            this.customWokaPreviewer.displayHeight * 0.5 +
+            this.cameras.main.height * 0.1;
+    }
+
+    private repositionBodyPartSlots(isVertical: boolean): void {
+        const slotWidth = this.bodyPartsSlots.Accessory.displayWidth;
+
+        const left = this.customWokaPreviewer.x - this.customWokaPreviewer.displayWidth * 0.5 - slotWidth;
+        const right = this.customWokaPreviewer.x + this.customWokaPreviewer.displayWidth * 0.5 + slotWidth;
+        const top = this.customWokaPreviewer.y - this.customWokaPreviewer.displayHeight * 0.5;
+        const middle = this.customWokaPreviewer.y;
+        const bottom = this.customWokaPreviewer.y + this.customWokaPreviewer.displayHeight * 0.5;
+
+        this.bodyPartsSlots.Hair.setPosition(left, top);
+        this.bodyPartsSlots.Body.setPosition(left, middle);
+        this.bodyPartsSlots.Accessory.setPosition(left, bottom);
+        this.bodyPartsSlots.Hat.setPosition(right, top);
+        this.bodyPartsSlots.Clothes.setPosition(right, middle);
+        this.bodyPartsSlots.Eyes.setPosition(right, bottom);
+    }
+
+    private repositionBodyPartsDraggableGrid(isVertical: boolean): void {
+        const gridPos = {
+            x: this.cameras.main.worldView.x + this.cameras.main.width / 2,
+            y:
+                this.cameras.main.worldView.y +
+                this.cameras.main.height -
+                this.bodyPartsDraggableGrid.displayHeight * 0.5 -
+                this.cameras.main.height * 0.02,
+        };
+        this.bodyPartsDraggableGrid.changeDraggableSpacePosAndSize(gridPos, { x: 485, y: 165 }, gridPos);
+    }
+
     private bindEventHandlers(): void {
         this.events.addListener("wake", () => {
             waScaleManager.saveZoom();

front/yarn.lock

@@ -98,6 +98,13 @@
   resolved "https://registry.yarnpkg.com/@geprog/vite-plugin-env-config/-/vite-plugin-env-config-4.0.0.tgz#989d95f23fbab5eae7c4c96d04a18abdc289b81e"
   integrity sha512-25ZMNdpssqkyv1sxfa6gBhmL8yCxCqjRRc1c05GJfhPkqD6Cn9dnG6xnHHHfJaEqrDFCViD0Bcnr+tgs76OZ2Q==
 
+"@home-based-studio/phaser3-utils@0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@home-based-studio/phaser3-utils/-/phaser3-utils-0.3.0.tgz#e23337162252e9cb5db0dc0b4f3393e95369f254"
+  integrity sha512-p7FQKyLP2xjQsGxgQwAhlghLE3vdkSCLPSFvYohrNwglkUigbSJrpv7iq6oxK/0Uvmby8S6fU2Sv1BIbDysKoA==
+  dependencies:
+    phaser "3.55.1"
+
 "@humanwhocodes/config-array@^0.9.2":
   version "0.9.2"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.9.2.tgz#68be55c737023009dfc5fe245d51181bb6476914"
@@ -2218,6 +2225,14 @@ phaser3-rex-plugins@^1.1.42:
     papaparse "^5.3.0"
     webfontloader "^1.6.28"
 
+phaser@3.55.1:
+  version "3.55.1"
+  resolved "https://registry.yarnpkg.com/phaser/-/phaser-3.55.1.tgz#25923fe845f6598aec57cfb37a5641834e9943a7"
+  integrity sha512-A5J9/diRz05qc498UNJAaXp85JVkBAEMqxP8pmcRMu1RCLBs4Kx7axd7YxNbXnQuK58JBhTRucngLt8LSpsUlQ==
+  dependencies:
+    eventemitter3 "^4.0.7"
+    path "^0.12.7"
+
 phaser@^3.54.0:
   version "3.54.0"
   resolved "https://registry.yarnpkg.com/phaser/-/phaser-3.54.0.tgz#46b191e46059aab2a9a57f78525c60b595767eee"