custom background for slots

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

@@ -27,7 +27,8 @@ export interface CustomWokaPreviewerConfig {
 }
 
 export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
-    private background: Phaser.GameObjects.Graphics;
+    private background: Phaser.GameObjects.Image;
+    private frame: Phaser.GameObjects.Graphics;
     private sprites: Record<CustomWokaBodyPart, Phaser.GameObjects.Sprite>;
 
     private animationDirection: PlayerAnimationDirections = PlayerAnimationDirections.Down;
@@ -53,13 +54,15 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
             [CustomWokaBodyPart.Hat]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, "").setVisible(false),
         };
 
-        this.background = this.scene.add.graphics();
+        this.background = this.scene.add.image(0, 0, "floorTexture");
-        this.drawBackground();
+        this.frame = this.scene.add.graphics();
+        this.drawFrame();
         this.setSize(this.SIZE, this.SIZE);
         this.setInteractive({ cursor: "pointer" });
 
         this.add([
             this.background,
+            this.frame,
             this.sprites.Body,
             this.sprites.Eyes,
             this.sprites.Hair,
@@ -118,13 +121,10 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
         });
     }
 
-    private drawBackground(): void {
+    private drawFrame(): void {
-        this.background.clear();
+        this.frame.clear();
-        this.background.fillStyle(0xffffff);
+        this.frame.lineStyle(this.config.borderThickness, 0xadafbc);
-        this.background.lineStyle(this.config.borderThickness, 0xadafbc);
+        this.frame.strokeRect(-this.SIZE / 2, -this.SIZE / 2, this.SIZE, this.SIZE);
-
-        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 animate(): void {

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

@@ -19,7 +19,8 @@ export enum WokaBodyPartSlotEvent {
 }
 
 export class WokaBodyPartSlot extends GridItem {
-    private background: Phaser.GameObjects.Graphics;
+    private background: Phaser.GameObjects.Image;
+    private frame: Phaser.GameObjects.Graphics;
     private categoryImage?: Phaser.GameObjects.Image;
     private bodyImage: Phaser.GameObjects.Image;
     private image: Phaser.GameObjects.Image;
@@ -37,9 +38,10 @@ export class WokaBodyPartSlot extends GridItem {
 
         this.selected = this.config.selected ?? false;
 
-        this.background = this.scene.add.graphics();
+        this.background = this.background = this.scene.add.image(0, 0, "floorTexture");
-        this.drawBackground();
+        this.frame = this.scene.add.graphics();
-        this.add(this.background);
+        this.drawFrame();
+        this.add([this.background, this.frame]);
 
         if (this.config.categoryImageKey) {
             this.categoryImage = this.scene.add
@@ -115,21 +117,19 @@ export class WokaBodyPartSlot extends GridItem {
         });
     }
 
-    private drawBackground(): void {
+    private drawFrame(): void {
-        this.background.clear();
+        this.frame.clear();
-        this.background.fillStyle(0xffffff);
+        this.frame.lineStyle(
-        this.background.lineStyle(
             this.config.borderThickness,
             this.selected ? this.config.borderSelectedColor : this.config.borderColor
         );
 
         const size = WokaBodyPartSlot.SIZE;
 
-        this.background.fillRect(-size / 2, -size / 2, size, size);
+        this.frame.strokeRect(-size / 2, -size / 2, size, size);
-        this.background.strokeRect(-size / 2, -size / 2, size, size);
     }
 
     private updateSelected(): void {
-        this.drawBackground();
+        this.drawFrame();
     }
 }

front/src/Phaser/Helpers/TexturesHelper.ts

@@ -32,6 +32,30 @@ export class TexturesHelper {
         }
     }
 
+    public static createFloorRectangleTexture(
+        scene: Phaser.Scene,
+        newTextureKey: string,
+        width: number,
+        height: number,
+        sourceTextureKey: string,
+        sourceTextureFrame?: number | string,
+        sourceTextureWidth: number = 32,
+        sourceTextureHeight: number = 32
+    ): void {
+        const rt = scene.make.renderTexture({ x: 0, y: 0, width, height }, false);
+        const widthTiles = Math.ceil(width / sourceTextureWidth);
+        const heightTiles = Math.ceil(height / sourceTextureHeight);
+
+        for (let x = 0; x < widthTiles; x += 1) {
+            for (let y = 0; y < heightTiles; y += 1) {
+                rt.drawFrame(sourceTextureKey, sourceTextureFrame, x * 32, y * 32);
+            }
+        }
+
+        rt.saveTexture(newTextureKey);
+        rt.destroy();
+    }
+
     public static createRectangleTexture(
         scene: Phaser.Scene,
         textureKey: string,

front/src/Phaser/Login/CustomizeScene.ts

@@ -32,8 +32,6 @@ export const CustomizeSceneName = "CustomizeScene";
 
 export class CustomizeScene extends AbstractCharacterScene {
     private customWokaPreviewer!: CustomWokaPreviewer;
-    private bodyPartsDraggableGridBackground!: Phaser.GameObjects.Graphics;
-    private bodyPartsDraggableGridForeground!: Phaser.GameObjects.Graphics;
     private bodyPartsDraggableGridLeftShadow!: Phaser.GameObjects.Image;
     private bodyPartsDraggableGridRightShadow!: Phaser.GameObjects.Image;
     private bodyPartsDraggableGrid!: DraggableGrid;
@@ -69,8 +67,9 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.load.image("iconHair", "/resources/icons/icon_hair.png");
         this.load.image("iconEyes", "/resources/icons/icon_eyes.png");
         this.load.image("iconBody", "/resources/icons/icon_body.png");
+        this.load.spritesheet("floorTiles", "/resources/tilesets/floor_tiles.png", { frameWidth: 32, frameHeight: 32 });
 
-        TexturesHelper.createRectangleTexture(this, "gridEdgeShadow", 200, 115, 0x000000);
+        TexturesHelper.createRectangleTexture(this, "gridEdgeShadow", this.cameras.main.width * 0.2, 115, 0x000000);
 
         const wokaMetadataKey = "woka-list" + gameManager.currentStartedRoom.href;
         this.cache.json.remove(wokaMetadataKey);
@@ -99,6 +98,7 @@ export class CustomizeScene extends AbstractCharacterScene {
     }
 
     public create(): void {
+        TexturesHelper.createFloorRectangleTexture(this, "floorTexture", 50, 50, "floorTiles", 0);
         this.customWokaPreviewer = new CustomWokaPreviewer(
             this,
             0,
@@ -106,18 +106,6 @@ export class CustomizeScene extends AbstractCharacterScene {
             this.getCustomWokaPreviewerConfig()
         ).setDisplaySize(200, 200);
 
-        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 },
@@ -134,7 +122,6 @@ export class CustomizeScene extends AbstractCharacterScene {
                 showDraggableSpace: false,
             },
         });
-        this.bodyPartsDraggableGridForeground = this.add.graphics();
 
         this.bodyPartsDraggableGridLeftShadow = this.add
             .image(0, this.cameras.main.worldView.y + this.cameras.main.height, "gridEdgeShadow")
@@ -231,32 +218,6 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.scene.run(SelectCharacterSceneName);
     }
 
-    private drawGridBackground(gridPosition: { x: number; y: number }): void {
-        const gridBackgroundWidth = innerWidth / waScaleManager.getActualZoom();
-        const gridBackgroundHeight = 115;
-        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 = (innerWidth + 10) / waScaleManager.getActualZoom();
-        const gridBackgroundHeight = 115;
-        this.bodyPartsDraggableGridForeground.clear();
-        this.bodyPartsDraggableGridForeground.lineStyle(4, 0xadafbc);
-        this.bodyPartsDraggableGridForeground.strokeRect(
-            gridPosition.x - gridBackgroundWidth / 2,
-            gridPosition.y - gridBackgroundHeight / 2,
-            gridBackgroundWidth,
-            gridBackgroundHeight
-        );
-    }
-
     private initializeRandomizeButton(): void {
         this.randomizeButton = new Button(this, 50, 50, {
             width: 95,
@@ -381,7 +342,7 @@ export class CustomizeScene extends AbstractCharacterScene {
         const gridWidth = innerWidth / waScaleManager.getActualZoom();
         const gridPos = {
             x: this.cameras.main.worldView.x + this.cameras.main.width / 2,
-            y: this.cameras.main.worldView.y + this.cameras.main.height - gridHeight * 0.5,
+            y: this.cameras.main.worldView.y + this.cameras.main.height - gridHeight * 0.5 - 5,
         };
 
         this.bodyPartsDraggableGridLeftShadow.setPosition(0, this.cameras.main.worldView.y + this.cameras.main.height);
@@ -390,8 +351,6 @@ export class CustomizeScene extends AbstractCharacterScene {
             this.cameras.main.worldView.y + this.cameras.main.height
         );
 
-        this.drawGridBackground(gridPos);
-        this.drawGridForeground(gridPos);
         try {
             this.bodyPartsDraggableGrid.changeDraggableSpacePosAndSize(
                 gridPos,

front/src/Phaser/Login/EntryScene.ts

@@ -9,6 +9,7 @@ import { get } from "svelte/store";
 import { localeDetector } from "../../i18n/locales";
 import { PlayerTextures } from "../Entity/PlayerTextures";
 import { PUSHER_URL } from "../../Enum/EnvironmentVariable";
+import { CustomizeSceneName } from "./CustomizeScene";
 
 export const EntrySceneName = "EntryScene";
 
@@ -46,7 +47,8 @@ export class EntryScene extends Scene {
                         // Let's rescale before starting the game
                         // We can do it at this stage.
                         waScaleManager.applyNewSize();
-                        this.scene.start(nextSceneName);
+                        // this.scene.start(nextSceneName);
+                        this.scene.start(CustomizeSceneName);
                     })
                     .catch((err) => {
                         const $LL = get(LL);