get rid of zoom factor

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 currentlyMoving: boolean = true;
+    private animationDirection: PlayerAnimationDirections = PlayerAnimationDirections.Down;
+    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.Body]: this.scene.add.sprite(spritesOffset, 0, "").setScale(4),
-            [CustomWokaBodyPart.Clothes]: this.scene.add.sprite(spritesOffset, 0, "").setScale(4),
-            [CustomWokaBodyPart.Eyes]: this.scene.add.sprite(spritesOffset, 0, "").setScale(4),
-            [CustomWokaBodyPart.Hair]: this.scene.add.sprite(spritesOffset, 0, "").setScale(4),
-            [CustomWokaBodyPart.Hat]: this.scene.add.sprite(spritesOffset, 0, "").setScale(4),
+            [CustomWokaBodyPart.Accessory]: this.scene.add
+                .sprite(this.config.bodyPartsOffsetX, 0, "")
+                .setScale(this.config.bodyPartsScaleModifier),
+            [CustomWokaBodyPart.Body]: this.scene.add
+                .sprite(this.config.bodyPartsOffsetX, 0, "")
+                .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;
-        const height = 200;
-
-        this.background = this.createBackground(width, height);
-        this.setSize(width, height);
+        this.background = this.createBackground();
+        this.setSize(this.config.width, this.config.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.currentlyMoving = moving;
+        this.animationDirection = direction;
+        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 &&
-                (!sprite.anims.currentAnim || sprite.anims.currentAnim.key !== this.currentAnimationDirection)
+                this.moving &&
+                (!sprite.anims.currentAnim || sprite.anims.currentAnim.key !== this.animationDirection)
             ) {
-                sprite.play(textureKey + "-" + this.currentAnimationDirection + "-" + PlayerAnimationTypes.Walk, true);
-            } else if (!this.currentlyMoving) {
-                sprite.anims.play(
-                    textureKey + "-" + this.currentAnimationDirection + "-" + PlayerAnimationTypes.Idle,
-                    true
-                );
+                sprite.play(textureKey + "-" + this.animationDirection + "-" + PlayerAnimationTypes.Walk, true);
+            } else if (!this.moving) {
+                sprite.anims.play(textureKey + "-" + this.animationDirection + "-" + 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);
+    }
+}