entirely different approach to layout

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

@@ -10,12 +10,9 @@ export enum CustomWokaBodyPart {
 }
 
 export interface CustomWokaPreviewerConfig {
-    width: number;
-    height: number;
     color: number;
     borderThickness: number;
     borderColor: number;
-    bodyPartsScaleModifier: number;
     bodyPartsOffsetX: number;
 }
 
@@ -28,30 +25,20 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
 
     private config: CustomWokaPreviewerConfig;
 
+    public readonly SIZE: number = 50;
+
     constructor(scene: Phaser.Scene, x: number, y: number, config: CustomWokaPreviewerConfig) {
         super(scene, x, y);
 
         this.config = config;
 
         this.sprites = {
-            [CustomWokaBodyPart.Accessory]: this.scene.add
+            [CustomWokaBodyPart.Accessory]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, ""),
-                .sprite(this.config.bodyPartsOffsetX, 0, "")
+            [CustomWokaBodyPart.Body]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, ""),
-                .setScale(this.config.bodyPartsScaleModifier),
+            [CustomWokaBodyPart.Clothes]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, ""),
-            [CustomWokaBodyPart.Body]: this.scene.add
+            [CustomWokaBodyPart.Eyes]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, ""),
-                .sprite(this.config.bodyPartsOffsetX, 0, "")
+            [CustomWokaBodyPart.Hair]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, ""),
-                .setScale(this.config.bodyPartsScaleModifier),
+            [CustomWokaBodyPart.Hat]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, ""),
-            [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);
@@ -61,8 +48,9 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
         this.updateSprite("hair3", CustomWokaBodyPart.Hair);
         this.updateSprite("hat2", CustomWokaBodyPart.Hat);
 
-        this.background = this.createBackground();
+        this.background = this.scene.add.graphics();
-        this.setSize(this.config.width, this.config.height);
+        this.drawBackground();
+        this.setSize(this.SIZE, this.SIZE);
 
         this.add([
             this.background,
@@ -86,18 +74,13 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
         this.moving = moving;
     }
 
-    private createBackground(): Phaser.GameObjects.Graphics {
+    private drawBackground(): void {
-        const background = this.scene.add.graphics();
+        this.background.clear();
-        background.fillStyle(0xffffff);
+        this.background.fillStyle(0xffffff);
-        background.lineStyle(this.config.borderThickness, 0xadafbc);
+        this.background.lineStyle(this.config.borderThickness, 0xadafbc);
 
-        const width = this.config.width;
+        this.background.fillRect(-this.SIZE / 2, -this.SIZE / 2, this.SIZE, this.SIZE);
-        const height = this.config.height;
+        this.background.strokeRect(-this.SIZE / 2, -this.SIZE / 2, this.SIZE, this.SIZE);
-
-        background.fillRect(-width / 2, -height / 2, width, height);
-        background.strokeRect(-width / 2, -height / 2, width, height);
-
-        return background;
     }
 
     private animate(): void {

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

@@ -2,8 +2,6 @@ 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;
@@ -24,6 +22,8 @@ export class WokaBodyPartSlot extends GridItem {
 
     private selected: boolean;
 
+    public readonly SIZE: number = 50;
+
     constructor(scene: Phaser.Scene, x: number, y: number, config: WokaBodyPartSlotConfig) {
         super(scene, undefined, { x, y });
 
@@ -34,19 +34,20 @@ export class WokaBodyPartSlot extends GridItem {
         this.selected = this.config.selected ?? false;
 
         this.background = this.scene.add
-            .rectangle(0, 0, this.config.width, this.config.height, this.config.color)
+            .rectangle(0, 0, this.SIZE, this.SIZE, this.config.color)
             .setStrokeStyle(this.config.borderThickness, this.config.borderColor);
 
-        this.bodyImage = this.scene.add
+        this.bodyImage = this.scene.add.image(
-            .image(offsetX, offsetY, config.bodyImageKey ?? `body${Math.floor(Math.random() * 33) + 1}`)
+            offsetX,
-            .setScale(2);
+            offsetY,
+            config.bodyImageKey ?? `body${Math.floor(Math.random() * 33) + 1}`
+        );
 
         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.setSize(this.SIZE + this.config.borderThickness, this.SIZE + this.config.borderThickness);
 
         this.add([this.background, this.bodyImage, this.image]);
 

front/src/Phaser/Login/CustomizeScene.ts

@@ -14,7 +14,11 @@ import { get } from "svelte/store";
 import { analyticsClient } from "../../Administration/AnalyticsClient";
 import { isMediaBreakpointUp } from "../../Utils/BreakpointsUtils";
 import { PUSHER_URL } from "../../Enum/EnvironmentVariable";
-import { CustomWokaBodyPart, CustomWokaPreviewer } from "../Components/CustomizeWoka/CustomWokaPreviewer";
+import {
+    CustomWokaBodyPart,
+    CustomWokaPreviewer,
+    CustomWokaPreviewerConfig,
+} from "../Components/CustomizeWoka/CustomWokaPreviewer";
 import { DraggableGrid } from "@home-based-studio/phaser3-utils";
 import { WokaBodyPartSlot, WokaBodyPartSlotConfig } from "../Components/CustomizeWoka/WokaBodyPartSlot";
 
@@ -117,15 +121,8 @@ export class CustomizeScene extends AbstractCharacterScene {
             this.updateSelectedLayer();
         }
 
-        this.customWokaPreviewer = new CustomWokaPreviewer(this, 0, 0, {
+        this.customWokaPreviewer = new CustomWokaPreviewer(this, 0, 0, this.getCustomWokaPreviewerConfig());
-            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 },
@@ -139,32 +136,53 @@ export class CustomizeScene extends AbstractCharacterScene {
             },
             spacing: 5,
             debug: {
-                showDraggableSpace: false,
+                showDraggableSpace: true,
             },
         });
 
-        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.bodyPartsDraggableGrid.addItem(
+                new WokaBodyPartSlot(this, 0, 0, this.getDefaultWokaBodyPartSlotConfig(isVertical))
+            );
         }
 
         this.bodyPartsSlots = {
-            [CustomWokaBodyPart.Hair]: new WokaBodyPartSlot(this, 220, 50, defaultWokaBodyPartSlotConfig),
+            [CustomWokaBodyPart.Hair]: new WokaBodyPartSlot(
-            [CustomWokaBodyPart.Body]: new WokaBodyPartSlot(this, 220, 130, defaultWokaBodyPartSlotConfig),
+                this,
-            [CustomWokaBodyPart.Accessory]: new WokaBodyPartSlot(this, 220, 210, defaultWokaBodyPartSlotConfig),
+                0,
-            [CustomWokaBodyPart.Hat]: new WokaBodyPartSlot(this, 520, 50, defaultWokaBodyPartSlotConfig),
+                0,
-            [CustomWokaBodyPart.Clothes]: new WokaBodyPartSlot(this, 520, 130, defaultWokaBodyPartSlotConfig),
+                this.getDefaultWokaBodyPartSlotConfig(isVertical)
-            [CustomWokaBodyPart.Eyes]: new WokaBodyPartSlot(this, 520, 210, defaultWokaBodyPartSlotConfig),
+            ),
+            [CustomWokaBodyPart.Body]: new WokaBodyPartSlot(
+                this,
+                0,
+                0,
+                this.getDefaultWokaBodyPartSlotConfig(isVertical)
+            ),
+            [CustomWokaBodyPart.Accessory]: new WokaBodyPartSlot(
+                this,
+                0,
+                0,
+                this.getDefaultWokaBodyPartSlotConfig(isVertical)
+            ),
+            [CustomWokaBodyPart.Hat]: new WokaBodyPartSlot(
+                this,
+                0,
+                0,
+                this.getDefaultWokaBodyPartSlotConfig(isVertical)
+            ),
+            [CustomWokaBodyPart.Clothes]: new WokaBodyPartSlot(
+                this,
+                0,
+                0,
+                this.getDefaultWokaBodyPartSlotConfig(isVertical)
+            ),
+            [CustomWokaBodyPart.Eyes]: new WokaBodyPartSlot(
+                this,
+                0,
+                0,
+                this.getDefaultWokaBodyPartSlotConfig(isVertical)
+            ),
         };
 
         this.onResize();
@@ -201,15 +219,14 @@ 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.repositionCustomWokaPreviewer(isVertical);
+        this.handleCustomWokaPreviewerOnResize(isVertical);
-        this.repositionBodyPartSlots(isVertical);
+        this.handleBodyPartSlotsOnResize(isVertical);
-        this.repositionBodyPartsDraggableGrid(isVertical);
+        this.handleBodyPartsDraggableGridOnResize(isVertical);
     }
 
     public nextSceneToCamera() {
@@ -239,22 +256,47 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.scene.run(SelectCharacterSceneName);
     }
 
-    private repositionCustomWokaPreviewer(isVertical: boolean): void {
+    private handleCustomWokaPreviewerOnResize(isVertical: boolean): void {
+        const boxDimension = Math.min(innerWidth * 0.3, innerHeight * 0.3) / waScaleManager.getActualZoom();
+        const boxScale = boxDimension / this.customWokaPreviewer.SIZE;
+
+        this.customWokaPreviewer.setScale(boxScale);
         this.customWokaPreviewer.x = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-        this.customWokaPreviewer.y =
+        this.customWokaPreviewer.y = this.customWokaPreviewer.displayHeight * 0.5 + 10;
-            this.cameras.main.worldView.y +
-            this.customWokaPreviewer.displayHeight * 0.5 +
-            this.cameras.main.height * 0.1;
     }
 
-    private repositionBodyPartSlots(isVertical: boolean): void {
+    private handleBodyPartSlotsOnResize(isVertical: boolean): void {
-        const slotWidth = this.bodyPartsSlots.Accessory.displayWidth;
+        const slotDimension = Math.min(innerWidth * 0.15, innerHeight * 0.15) / waScaleManager.getActualZoom();
+        const slotScale = slotDimension / this.customWokaPreviewer.SIZE;
 
-        const left = this.customWokaPreviewer.x - this.customWokaPreviewer.displayWidth * 0.5 - slotWidth;
+        for (const part in this.bodyPartsSlots) {
-        const right = this.customWokaPreviewer.x + this.customWokaPreviewer.displayWidth * 0.5 + slotWidth;
+            this.bodyPartsSlots[part as CustomWokaBodyPart].setScale(slotScale);
-        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;
+        const slotSize = this.bodyPartsSlots.Accessory.displayHeight;
+
+        if (isVertical) {
+            const left = this.customWokaPreviewer.x - this.customWokaPreviewer.displayWidth * 0.5;
+            const right = this.customWokaPreviewer.x + this.customWokaPreviewer.displayWidth * 0.5;
+            const middle = this.customWokaPreviewer.x;
+            const top = this.customWokaPreviewer.y + this.customWokaPreviewer.displayHeight * 0.5;
+            const bottom = top + slotSize;
+
+            this.bodyPartsSlots.Hair.setPosition(left, top);
+            this.bodyPartsSlots.Hat.setPosition(middle, top);
+            this.bodyPartsSlots.Eyes.setPosition(right, top);
+            this.bodyPartsSlots.Body.setPosition(left, bottom);
+            this.bodyPartsSlots.Clothes.setPosition(middle, bottom);
+            this.bodyPartsSlots.Accessory.setPosition(right, bottom);
+
+            return;
+        }
+
+        const left = this.customWokaPreviewer.x - this.customWokaPreviewer.displayWidth * 0.5 - slotSize;
+        const right = this.customWokaPreviewer.x + this.customWokaPreviewer.displayWidth * 0.5 + slotSize;
+        const top = 0 + slotSize * 0.5 + 10;
+        const middle = top + slotSize + 10;
+        const bottom = middle + slotSize + 10;
 
         this.bodyPartsSlots.Hair.setPosition(left, top);
         this.bodyPartsSlots.Body.setPosition(left, middle);
@@ -264,16 +306,49 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.bodyPartsSlots.Eyes.setPosition(right, bottom);
     }
 
-    private repositionBodyPartsDraggableGrid(isVertical: boolean): void {
+    private handleBodyPartsDraggableGridOnResize(isVertical: boolean): void {
+        const gridHeight = (innerHeight * 0.35) / waScaleManager.getActualZoom();
+        const gridWidth = (innerWidth * 0.7) / waScaleManager.getActualZoom();
         const gridPos = {
             x: this.cameras.main.worldView.x + this.cameras.main.width / 2,
-            y:
+            y: this.cameras.main.worldView.y + this.cameras.main.height - gridHeight * 0.5 - 10,
-                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);
+
+        this.bodyPartsDraggableGrid.changeDraggableSpacePosAndSize(gridPos, { x: gridWidth, y: gridHeight }, gridPos);
+
+        const slotDimension = Math.min(innerWidth * 0.15, innerHeight * 0.15) / waScaleManager.getActualZoom();
+        const slotScale = slotDimension / this.customWokaPreviewer.SIZE;
+
+        this.bodyPartsDraggableGrid.clearAllItems();
+        for (let i = 0; i < 50; i += 1) {
+            this.bodyPartsDraggableGrid.addItem(
+                new WokaBodyPartSlot(this, 0, 0, this.getDefaultWokaBodyPartSlotConfig(isVertical)).setScale(slotScale)
+            );
+        }
+    }
+
+    private getCustomWokaPreviewerConfig(): CustomWokaPreviewerConfig {
+        return {
+            color: 0xffffff,
+            borderThickness: 2.5,
+            borderColor: 0xadafbc,
+            bodyPartsOffsetX: -1,
+        };
+    }
+
+    private getDefaultWokaBodyPartSlotConfig(isVertical: boolean): WokaBodyPartSlotConfig {
+        return {
+            color: 0xffffff,
+            borderThickness: this.countZoom(isVertical ? 4 : 4),
+            borderColor: 0xadafbc,
+            borderSelectedColor: 0x00ffff,
+            offsetX: this.countZoom(isVertical ? -4 : -3),
+            offsetY: this.countZoom(isVertical ? -3 : -2),
+        };
+    }
+
+    private countZoom(value: number): number {
+        return Math.floor(value / waScaleManager.getActualZoom());
     }
 
     private bindEventHandlers(): void {

front/src/Phaser/Services/WaScaleManager.ts

@@ -128,6 +128,10 @@ export class WaScaleManager {
         this.applyNewSize();
     }
 
+    public getActualZoom(): number {
+        return this.actualZoom;
+    }
+
     /**
      * This is used to scale back the ui components to counter-act the zoom.
      */