fighting with not cripsy pixels when resizing

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

@@ -1,3 +1,4 @@
+import { MathUtils } from "../../../Utils/MathUtils";
 import { getPlayerAnimations, PlayerAnimationDirections, PlayerAnimationTypes } from "../../Player/Animation";
 
 export enum CustomWokaBodyPart {
@@ -73,6 +74,11 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
         this.animate();
     }
 
+    public setDisplaySize(width: number, height: number): this {
+        const [newWidth, newHeight] = MathUtils.getWholePixelsNewSize(this.SIZE, this.SIZE, width, height);
+        return super.setDisplaySize(newWidth, newHeight);
+    }
+
     public changeAnimation(direction: PlayerAnimationDirections, moving: boolean): void {
         this.animationDirection = direction;
         this.moving = moving;

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

@@ -1,5 +1,6 @@
 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;
@@ -61,6 +62,11 @@ export class WokaBodyPartSlot extends GridItem {
         this.scene.add.existing(this);
     }
 
+    public setDisplaySize(width: number, height: number): this {
+        const [newWidth, newHeight] = MathUtils.getWholePixelsNewSize(this.SIZE, this.SIZE, width, height, 32, 32);
+        return super.setDisplaySize(newWidth, newHeight);
+    }
+
     public setTextures(bodyTextureKey?: string, imageTextureKey?: string): void {
         this.setBodyTexture(bodyTextureKey);
         this.setImageTexture(imageTextureKey);

front/src/Phaser/Login/CustomizeScene.ts

@@ -190,11 +190,11 @@ export class CustomizeScene extends AbstractCharacterScene {
 
     private handleCustomWokaPreviewerOnResize(): void {
         const slotDimension =
-            Math.min(innerWidth * (this.isVertical ? 0.2 : 0.15), innerHeight * (this.isVertical ? 0.2 : 0.15)) /
+            Math.min(innerWidth * (this.isVertical ? 0.2 : 0.2), innerHeight * (this.isVertical ? 0.2 : 0.2)) /
             waScaleManager.getActualZoom();
 
         const boxDimension =
-            Math.min(innerWidth * (this.isVertical ? 0.4 : 0.3), innerHeight * (this.isVertical ? 0.4 : 0.3)) /
+            Math.min(innerWidth * (this.isVertical ? 0.4 : 0.5), innerHeight * (this.isVertical ? 0.4 : 0.5)) /
             waScaleManager.getActualZoom();
 
         this.customWokaPreviewer.setDisplaySize(boxDimension, boxDimension);
@@ -206,12 +206,16 @@ export class CustomizeScene extends AbstractCharacterScene {
 
     private handleBodyPartSlotsOnResize(): void {
         const slotDimension =
-            Math.min(innerWidth * (this.isVertical ? 0.2 : 0.15), innerHeight * (this.isVertical ? 0.2 : 0.15)) /
+            Math.min(innerWidth * (this.isVertical ? 0.2 : 0.25), innerHeight * (this.isVertical ? 0.2 : 0.25)) /
             waScaleManager.getActualZoom();
+        // 1;
 
+        console.log("zoom: ", waScaleManager.getActualZoom());
+        console.log("slotDimension: ", slotDimension);
         for (const part in this.bodyPartsSlots) {
             this.bodyPartsSlots[part as CustomWokaBodyPart].setDisplaySize(slotDimension, slotDimension);
         }
+        console.log(this.bodyPartsSlots.Body.displayWidth);
 
         const slotSize = this.bodyPartsSlots.Accessory.displayHeight;