fixing grid. wip

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

@@ -74,10 +74,10 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
         this.animate();
     }
 
-    public setDisplaySize(width: number, height: number): this {
+    // public setDisplaySize(width: number, height: number): this {
-        const [newWidth, newHeight] = MathUtils.getWholePixelsNewSize(this.SIZE, this.SIZE, width, height);
+    //     const [newWidth, newHeight] = MathUtils.getWholePixelsNewSize(this.SIZE, this.SIZE, width, height);
-        return super.setDisplaySize(newWidth, newHeight);
+    //     return super.setDisplaySize(newWidth, newHeight);
-    }
+    // }
 
     public changeAnimation(direction: PlayerAnimationDirections, moving: boolean): void {
         this.animationDirection = direction;

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

@@ -19,7 +19,7 @@ export enum WokaBodyPartSlotEvent {
 }
 
 export class WokaBodyPartSlot extends GridItem {
-    private background: Phaser.GameObjects.Rectangle;
+    private background: Phaser.GameObjects.Graphics;
     private bodyImage: Phaser.GameObjects.Image;
     private image: Phaser.GameObjects.Image;
 
@@ -38,9 +38,8 @@ export class WokaBodyPartSlot extends GridItem {
         const offsetX = -2;
         this.selected = this.config.selected ?? false;
 
-        this.background = this.scene.add
+        this.background = this.scene.add.graphics();
-            .rectangle(0, 0, this.SIZE, this.SIZE, this.config.color)
+        this.drawBackground();
-            .setStrokeStyle(this.config.borderThickness, this.config.borderColor);
 
         this.bodyImage = this.scene.add
             .image(offsetX, offsetY, config.bodyImageKey ?? "")
@@ -50,7 +49,7 @@ export class WokaBodyPartSlot extends GridItem {
             .image(offsetX, offsetY, config.imageKey ?? "")
             .setVisible(config.bodyImageKey !== undefined);
 
-        this.setSize(this.SIZE + this.config.borderThickness, this.SIZE + this.config.borderThickness);
+        this.setSize(this.SIZE, this.SIZE);
 
         this.add([this.background, this.bodyImage, this.image]);
 
@@ -62,11 +61,6 @@ 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);
@@ -106,7 +100,19 @@ export class WokaBodyPartSlot extends GridItem {
         });
     }
 
+    private drawBackground(): void {
+        this.background.clear();
+        this.background.fillStyle(0xffffff);
+        this.background.lineStyle(
+            this.config.borderThickness,
+            this.selected ? this.config.borderSelectedColor : this.config.borderColor
+        );
+
+        this.background.fillRect(-this.SIZE / 2, -this.SIZE / 2, this.SIZE, this.SIZE);
+        this.background.strokeRect(-this.SIZE / 2, -this.SIZE / 2, this.SIZE, this.SIZE);
+    }
+
     private updateSelected(): void {
-        this.background.setStrokeStyle(2.5, this.selected ? this.config.borderSelectedColor : this.config.borderColor);
+        this.drawBackground();
     }
 }

front/src/Phaser/Login/CustomizeScene.ts

@@ -30,8 +30,8 @@ export const CustomizeSceneName = "CustomizeScene";
 
 export class CustomizeScene extends AbstractCharacterScene {
     private customWokaPreviewer!: CustomWokaPreviewer;
-    private bodyPartsDraggableGridBackground!: Phaser.GameObjects.Rectangle;
+    private bodyPartsDraggableGridBackground!: Phaser.GameObjects.Graphics;
-    private bodyPartsDraggableGridForeground!: Phaser.GameObjects.Rectangle;
+    private bodyPartsDraggableGridForeground!: Phaser.GameObjects.Graphics;
     private bodyPartsDraggableGrid!: DraggableGrid;
     private bodyPartsSlots!: Record<CustomWokaBodyPart, WokaBodyPartSlot>;
 
@@ -101,7 +101,18 @@ export class CustomizeScene extends AbstractCharacterScene {
 
         this.customWokaPreviewer = new CustomWokaPreviewer(this, 0, 0, this.getCustomWokaPreviewerConfig());
 
-        this.bodyPartsDraggableGridBackground = this.add.rectangle(0, 0, 485, 165, 0xf9f9f9);
+        this.bodyPartsDraggableGridBackground = this.add.graphics();
+
+        const gridBackgroundWidth = 500;
+        const gridBackgroundHeight = 170;
+        this.bodyPartsDraggableGridBackground.fillStyle(0xf9f9f9);
+        this.bodyPartsDraggableGridBackground.fillRect(
+            -gridBackgroundWidth / 2,
+            -gridBackgroundHeight / 2,
+            gridBackgroundWidth,
+            gridBackgroundHeight
+        );
+
         this.bodyPartsDraggableGrid = new DraggableGrid(this, {
             position: { x: 0, y: 0 },
             maskPosition: { x: 0, y: 0 },
@@ -115,10 +126,10 @@ export class CustomizeScene extends AbstractCharacterScene {
             },
             spacing: 5,
             debug: {
-                showDraggableSpace: false,
+                showDraggableSpace: true,
             },
         });
-        this.bodyPartsDraggableGridForeground = this.add.rectangle(0, 0, 485, 165, 0xffffff, 0);
+        this.bodyPartsDraggableGridForeground = this.add.graphics();
 
         this.bodyPartsSlots = {
             [CustomWokaBodyPart.Hair]: new WokaBodyPartSlot(this, 0, 0, this.getDefaultWokaBodyPartSlotConfig()),
@@ -137,7 +148,7 @@ export class CustomizeScene extends AbstractCharacterScene {
     }
 
     public update(time: number, dt: number): void {
-        this.customWokaPreviewer.update();
+        // this.customWokaPreviewer.update();
     }
 
     public onResize(): void {
@@ -175,6 +186,32 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.scene.run(SelectCharacterSceneName);
     }
 
+    private drawGridBackground(gridPosition: { x: number; y: number }): void {
+        const gridBackgroundWidth = 500;
+        const gridBackgroundHeight = 170;
+        this.bodyPartsDraggableGridBackground.clear();
+        this.bodyPartsDraggableGridBackground.fillStyle(0xf9f9f9);
+        this.bodyPartsDraggableGridBackground.fillRect(
+            gridPosition.x - gridBackgroundWidth / 2,
+            gridPosition.y - gridBackgroundHeight / 2,
+            gridBackgroundWidth,
+            gridBackgroundHeight
+        );
+    }
+
+    private drawGridForeground(gridPosition: { x: number; y: number }): void {
+        const gridBackgroundWidth = 500;
+        const gridBackgroundHeight = 170;
+        this.bodyPartsDraggableGridForeground.clear();
+        this.bodyPartsDraggableGridForeground.lineStyle(2, 0xadafbc);
+        this.bodyPartsDraggableGridForeground.strokeRect(
+            gridPosition.x - gridBackgroundWidth / 2,
+            gridPosition.y - gridBackgroundHeight / 2,
+            gridBackgroundWidth,
+            gridBackgroundHeight
+        );
+    }
+
     private refreshPlayerCurrentOutfit(): void {
         let i = 0;
         for (const layerItem of this.selectedLayers) {
@@ -189,13 +226,9 @@ export class CustomizeScene extends AbstractCharacterScene {
     }
 
     private handleCustomWokaPreviewerOnResize(): void {
-        const slotDimension =
+        const slotDimension = 100;
-            Math.min(innerWidth * (this.isVertical ? 0.2 : 0.2), innerHeight * (this.isVertical ? 0.2 : 0.2)) /
-            waScaleManager.getActualZoom();
 
-        const boxDimension =
+        const boxDimension = 200;
-            Math.min(innerWidth * (this.isVertical ? 0.4 : 0.5), innerHeight * (this.isVertical ? 0.4 : 0.5)) /
-            waScaleManager.getActualZoom();
 
         this.customWokaPreviewer.setDisplaySize(boxDimension, boxDimension);
         this.customWokaPreviewer.x = this.cameras.main.worldView.x + this.cameras.main.width / 2;
@@ -214,11 +247,13 @@ export class CustomizeScene extends AbstractCharacterScene {
         const slotSize = this.bodyPartsSlots.Accessory.displayHeight;
 
         if (this.isVertical) {
-            const middle = this.customWokaPreviewer.x;
+            const middle = Math.floor(this.customWokaPreviewer.x);
-            const left = middle - slotSize - 10;
+            const left = Math.floor(middle - slotSize - 10);
-            const right = middle + slotSize + 10;
+            const right = Math.floor(middle + slotSize + 10);
-            const top = this.customWokaPreviewer.y + this.customWokaPreviewer.displayHeight * 0.5 + slotSize * 0.5 + 10;
+            const top = Math.floor(
-            const bottom = top + slotSize + 10;
+                this.customWokaPreviewer.y + this.customWokaPreviewer.displayHeight * 0.5 + slotSize * 0.5 + 10
+            );
+            const bottom = Math.floor(top + slotSize + 10);
 
             this.bodyPartsSlots.Hair.setPosition(left, top);
             this.bodyPartsSlots.Hat.setPosition(middle, top);
@@ -232,13 +267,13 @@ export class CustomizeScene extends AbstractCharacterScene {
 
         const ratio = innerHeight / innerWidth;
 
-        const left = this.customWokaPreviewer.x - this.customWokaPreviewer.displayWidth * 0.5 - slotSize;
+        const left = Math.floor(this.customWokaPreviewer.x - this.customWokaPreviewer.displayWidth * 0.5 - slotSize);
-        const leftEdge = left - slotSize - 10;
+        const leftEdge = Math.floor(left - slotSize - 10);
-        const right = this.customWokaPreviewer.x + this.customWokaPreviewer.displayWidth * 0.5 + slotSize;
+        const right = Math.floor(this.customWokaPreviewer.x + this.customWokaPreviewer.displayWidth * 0.5 + slotSize);
-        const rightEdge = right + slotSize + 10;
+        const rightEdge = Math.floor(right + slotSize + 10);
-        const top = 0 + slotSize * 0.5 + 10;
+        const top = Math.floor(0 + slotSize * 0.5 + 10);
-        const middle = top + slotSize + 10;
+        const middle = Math.floor(top + slotSize + 10);
-        const bottom = middle + slotSize + 10;
+        const bottom = Math.floor(middle + slotSize + 10);
 
         this.bodyPartsSlots.Hair.setPosition(left, top);
         this.bodyPartsSlots.Body.setPosition(left, middle);
@@ -256,11 +291,8 @@ export class CustomizeScene extends AbstractCharacterScene {
             y: this.cameras.main.worldView.y + this.cameras.main.height - gridHeight * 0.5,
         };
 
-        this.bodyPartsDraggableGridBackground.setPosition(gridPos.x, gridPos.y).setDisplaySize(gridWidth, gridHeight);
+        this.drawGridBackground(gridPos);
-        this.bodyPartsDraggableGridForeground
+        this.drawGridForeground(gridPos);
-            .setPosition(gridPos.x, gridPos.y)
-            .setDisplaySize(gridWidth, gridHeight)
-            .setStrokeStyle(4, 0xaaaaaa);
         this.bodyPartsDraggableGrid.changeDraggableSpacePosAndSize(gridPos, { x: gridWidth, y: gridHeight }, gridPos);
 
         this.populateGrid();
@@ -270,7 +302,7 @@ export class CustomizeScene extends AbstractCharacterScene {
     private getCustomWokaPreviewerConfig(): CustomWokaPreviewerConfig {
         return {
             color: 0xffffff,
-            borderThickness: 2.5,
+            borderThickness: 1,
             borderColor: 0xadafbc,
             bodyPartsOffsetX: -1,
         };
@@ -279,18 +311,14 @@ export class CustomizeScene extends AbstractCharacterScene {
     private getDefaultWokaBodyPartSlotConfig(): WokaBodyPartSlotConfig {
         return {
             color: 0xffffff,
-            borderThickness: this.countZoom(this.isVertical ? 4 : 4),
+            borderThickness: 1,
             borderColor: 0xadafbc,
             borderSelectedColor: 0x00ffff,
-            offsetX: this.countZoom(this.isVertical ? -4 : -3),
+            offsetX: -4,
-            offsetY: this.countZoom(this.isVertical ? -3 : -2),
+            offsetY: -3,
         };
     }
 
-    private countZoom(value: number): number {
-        return Math.floor(value / waScaleManager.getActualZoom());
-    }
-
     private bindEventHandlers(): void {
         this.events.addListener("wake", () => {
             waScaleManager.saveZoom();