show body parts previews

front/src/Components/App.svelte

@@ -1,14 +1,12 @@
 <script lang="ts">
     import type { Game } from "../Phaser/Game/Game";
     import { chatVisibilityStore } from "../Stores/ChatStore";
-    import { customCharacterSceneVisibleStore } from "../Stores/CustomCharacterStore";
     import { errorStore } from "../Stores/ErrorStore";
     import { loginSceneVisibleStore } from "../Stores/LoginSceneStore";
     import { enableCameraSceneVisibilityStore } from "../Stores/MediaStore";
     import { selectCharacterSceneVisibleStore } from "../Stores/SelectCharacterStore";
     import { selectCompanionSceneVisibleStore } from "../Stores/SelectCompanionStore";
     import Chat from "./Chat/Chat.svelte";
-    import CustomCharacterScene from "./CustomCharacterScene/CustomCharacterScene.svelte";
     import EnableCameraScene from "./EnableCamera/EnableCameraScene.svelte";
     import LoginScene from "./Login/LoginScene.svelte";
     import MainLayout from "./MainLayout.svelte";
@@ -31,10 +29,6 @@
     <div>
         <SelectCharacterScene {game} />
     </div>
-{:else if $customCharacterSceneVisibleStore}
-    <div>
-        <CustomCharacterScene {game} />
-    </div>
 {:else if $selectCompanionSceneVisibleStore}
     <div>
         <SelectCompanionScene {game} />

front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte

@@ -1,142 +0,0 @@
-<script lang="ts">
-    import type { Game } from "../../Phaser/Game/Game";
-    import { CustomizeScene, CustomizeSceneName } from "../../Phaser/Login/CustomizeScene";
-    import { activeRowStore } from "../../Stores/CustomCharacterStore";
-    import LL from "../../i18n/i18n-svelte";
-
-    export let game: Game;
-
-    const customCharacterScene = game.scene.getScene(CustomizeSceneName) as CustomizeScene;
-
-    function selectLeft() {
-        customCharacterScene.moveCursorHorizontally(-1);
-    }
-
-    function selectRight() {
-        customCharacterScene.moveCursorHorizontally(1);
-    }
-
-    function selectUp() {
-        customCharacterScene.moveCursorVertically(-1);
-    }
-
-    function selectDown() {
-        customCharacterScene.moveCursorVertically(1);
-    }
-
-    function previousScene() {
-        customCharacterScene.backToPreviousScene();
-    }
-
-    function finish() {
-        customCharacterScene.nextSceneToCamera();
-    }
-</script>
-
-<form class="customCharacterScene">
-    <section class="text-center">
-        <h2>{$LL.woka.customWoka.title()}</h2>
-    </section>
-    <section class="action action-move">
-        <button
-            class="customCharacterSceneButton customCharacterSceneButtonLeft nes-btn"
-            on:click|preventDefault={selectLeft}
-        >
-            &lt;
-        </button>
-        <button
-            class="customCharacterSceneButton customCharacterSceneButtonRight nes-btn"
-            on:click|preventDefault={selectRight}
-        >
-            &gt;
-        </button>
-    </section>
-    <section class="action">
-        {#if $activeRowStore === 0}
-            <button type="submit" class="customCharacterSceneFormBack nes-btn" on:click|preventDefault={previousScene}
-                >{$LL.woka.customWoka.navigation.return()}</button
-            >
-        {/if}
-        {#if $activeRowStore !== 0}
-            <button type="submit" class="customCharacterSceneFormBack nes-btn" on:click|preventDefault={selectUp}
-                >{$LL.woka.customWoka.navigation.back()}
-                <img src="resources/objects/arrow_up_black.png" alt="" /></button
-            >
-        {/if}
-        {#if $activeRowStore === 5}
-            <button
-                type="submit"
-                class="customCharacterSceneFormSubmit nes-btn is-primary"
-                on:click|preventDefault={finish}>{$LL.woka.customWoka.navigation.finish()}</button
-            >
-        {/if}
-        {#if $activeRowStore !== 5}
-            <button
-                type="submit"
-                class="customCharacterSceneFormSubmit nes-btn is-primary"
-                on:click|preventDefault={selectDown}
-                >{$LL.woka.customWoka.navigation.next()}
-                <img src="resources/objects/arrow_down.png" alt="" /></button
-            >
-        {/if}
-    </section>
-</form>
-
-<style lang="scss">
-    @import "../../../style/breakpoints.scss";
-
-    form.customCharacterScene {
-        font-family: "Press Start 2P";
-        pointer-events: auto;
-        color: #ebeeee;
-
-        section {
-            margin: 10px;
-
-            &.action {
-                text-align: center;
-                margin-top: 55vh;
-            }
-
-            h2 {
-                font-family: "Press Start 2P";
-                margin: 1px;
-            }
-
-            &.text-center {
-                text-align: center;
-            }
-
-            button.customCharacterSceneButton {
-                position: absolute;
-                top: 33vh;
-                margin: 0;
-            }
-
-            button.customCharacterSceneFormBack {
-                color: #292929;
-            }
-        }
-
-        button {
-            font-family: "Press Start 2P";
-
-            &.customCharacterSceneButtonLeft {
-                left: 33vw;
-            }
-
-            &.customCharacterSceneButtonRight {
-                right: 33vw;
-            }
-        }
-    }
-
-    @include media-breakpoint-up(md) {
-        form.customCharacterScene button.customCharacterSceneButtonLeft {
-            left: 5vw;
-        }
-        form.customCharacterScene button.customCharacterSceneButtonRight {
-            right: 5vw;
-        }
-    }
-</style>

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

@@ -9,6 +9,15 @@ export enum CustomWokaBodyPart {
     Accessory = "Accessory",
 }
 
+export enum CustomWokaBodyPartOrder {
+    Body = 0,
+    Eyes = 1,
+    Hair = 2,
+    Clothes = 3,
+    Hat = 4,
+    Accessory = 5,
+}
+
 export interface CustomWokaPreviewerConfig {
     color: number;
     borderThickness: number;
@@ -33,20 +42,22 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
         this.config = config;
 
         this.sprites = {
-            [CustomWokaBodyPart.Accessory]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, ""),
+            [CustomWokaBodyPart.Accessory]: this.scene.add
-            [CustomWokaBodyPart.Body]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, ""),
+                .sprite(this.config.bodyPartsOffsetX, 0, "")
-            [CustomWokaBodyPart.Clothes]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, ""),
+                .setVisible(false),
-            [CustomWokaBodyPart.Eyes]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, ""),
+            [CustomWokaBodyPart.Body]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, "").setVisible(false),
-            [CustomWokaBodyPart.Hair]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, ""),
+            [CustomWokaBodyPart.Clothes]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, "").setVisible(false),
-            [CustomWokaBodyPart.Hat]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, ""),
+            [CustomWokaBodyPart.Eyes]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, "").setVisible(false),
+            [CustomWokaBodyPart.Hair]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, "").setVisible(false),
+            [CustomWokaBodyPart.Hat]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, "").setVisible(false),
         };
 
-        this.updateSprite("accessory1", CustomWokaBodyPart.Accessory);
+        // this.updateSprite("accessory1", CustomWokaBodyPart.Accessory);
-        this.updateSprite("body1", CustomWokaBodyPart.Body);
+        // this.updateSprite("body1", CustomWokaBodyPart.Body);
-        this.updateSprite("clothes4", CustomWokaBodyPart.Clothes);
+        // this.updateSprite("clothes4", CustomWokaBodyPart.Clothes);
-        this.updateSprite("eyes5", CustomWokaBodyPart.Eyes);
+        // this.updateSprite("eyes5", CustomWokaBodyPart.Eyes);
-        this.updateSprite("hair3", CustomWokaBodyPart.Hair);
+        // this.updateSprite("hair3", CustomWokaBodyPart.Hair);
-        this.updateSprite("hat2", CustomWokaBodyPart.Hat);
+        // this.updateSprite("hat2", CustomWokaBodyPart.Hat);
 
         this.background = this.scene.add.graphics();
         this.drawBackground();
@@ -74,36 +85,12 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
         this.moving = moving;
     }
 
-    private drawBackground(): void {
+    public updateSprite(textureKey: string, bodyPart: CustomWokaBodyPart): void {
-        this.background.clear();
+        this.sprites[bodyPart].setTexture(textureKey).setVisible(textureKey !== "");
-        this.background.fillStyle(0xffffff);
+        console.log(this.sprites[bodyPart].texture.key);
-        this.background.lineStyle(this.config.borderThickness, 0xadafbc);
+        if (textureKey === "") {
-
-        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 {
-        for (const bodyPartKey in this.sprites) {
-            const sprite = this.sprites[bodyPartKey as CustomWokaBodyPart];
-            if (!sprite.anims) {
-                console.error("ANIMS IS NOT DEFINED!!!");
             return;
         }
-            const textureKey = sprite.texture.key;
-            if (
-                this.moving &&
-                (!sprite.anims.currentAnim || sprite.anims.currentAnim.key !== this.animationDirection)
-            ) {
-                sprite.play(textureKey + "-" + this.animationDirection + "-" + PlayerAnimationTypes.Walk, true);
-            } else if (!this.moving) {
-                sprite.anims.play(textureKey + "-" + this.animationDirection + "-" + PlayerAnimationTypes.Idle, true);
-            }
-        }
-    }
-
-    public updateSprite(textureKey: string, bodyPart: CustomWokaBodyPart): void {
-        this.sprites[bodyPart].setTexture(textureKey);
         getPlayerAnimations(textureKey).forEach((d) => {
             this.scene.anims.create({
                 key: d.key,
@@ -125,4 +112,35 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
     public getAnimationDirection(): PlayerAnimationDirections {
         return this.animationDirection;
     }
+
+    private drawBackground(): void {
+        this.background.clear();
+        this.background.fillStyle(0xffffff);
+        this.background.lineStyle(this.config.borderThickness, 0xadafbc);
+
+        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 {
+        for (const bodyPartKey in this.sprites) {
+            const sprite = this.sprites[bodyPartKey as CustomWokaBodyPart];
+            if (!sprite.anims) {
+                console.error("ANIMS IS NOT DEFINED!!!");
+                return;
+            }
+            const textureKey = sprite.texture.key;
+            if (textureKey === "__MISSING") {
+                continue;
+            }
+            if (
+                this.moving &&
+                (!sprite.anims.currentAnim || sprite.anims.currentAnim.key !== this.animationDirection)
+            ) {
+                sprite.play(textureKey + "-" + this.animationDirection + "-" + PlayerAnimationTypes.Walk, true);
+            } else if (!this.moving) {
+                sprite.anims.play(textureKey + "-" + this.animationDirection + "-" + PlayerAnimationTypes.Idle, true);
+            }
+        }
+    }
 }

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

@@ -37,15 +37,13 @@ export class WokaBodyPartSlot extends GridItem {
             .rectangle(0, 0, this.SIZE, this.SIZE, this.config.color)
             .setStrokeStyle(this.config.borderThickness, this.config.borderColor);
 
-        this.bodyImage = this.scene.add.image(
+        this.bodyImage = this.scene.add
-            offsetX,
+            .image(offsetX, offsetY, config.bodyImageKey ?? "")
-            offsetY,
+            .setVisible(config.imageKey !== undefined);
-            config.bodyImageKey ?? `body${Math.floor(Math.random() * 33) + 1}`
-        );
 
         this.image = this.scene.add
             .image(offsetX, offsetY, config.imageKey ?? "")
-            .setVisible(config.imageKey !== undefined);
+            .setVisible(config.bodyImageKey !== undefined);
 
         this.setSize(this.SIZE + this.config.borderThickness, this.SIZE + this.config.borderThickness);
 
@@ -59,14 +57,22 @@ export class WokaBodyPartSlot extends GridItem {
         this.scene.add.existing(this);
     }
 
-    public setBodyTexture(textureKey: string, frame?: string | number): void {
+    public setTextures(bodyTextureKey?: string, imageTextureKey?: string): void {
+        this.setBodyTexture(bodyTextureKey);
+        this.setImageTexture(imageTextureKey);
+    }
+
+    public setBodyTexture(textureKey?: string, frame?: string | number): void {
+        this.bodyImage.setVisible(textureKey !== undefined && textureKey !== "");
+        if (textureKey) {
             this.bodyImage.setTexture(textureKey, frame);
         }
+    }
 
     public setImageTexture(textureKey?: string, frame?: string | number): void {
-        this.image.setVisible(textureKey !== undefined || textureKey !== "");
+        this.image.setVisible(textureKey !== undefined && textureKey !== "");
         if (textureKey) {
-            this.bodyImage.setTexture(textureKey, frame);
+            this.image.setTexture(textureKey, frame);
         }
     }
 

front/src/Phaser/Login/CustomizeScene.ts

@@ -7,15 +7,14 @@ import type { BodyResourceDescriptionInterface } from "../Entity/PlayerTextures"
 import { AbstractCharacterScene } from "./AbstractCharacterScene";
 import { areCharacterLayersValid } from "../../Connexion/LocalUser";
 import { SelectCharacterSceneName } from "./SelectCharacterScene";
-import { activeRowStore } from "../../Stores/CustomCharacterStore";
 import { waScaleManager } from "../Services/WaScaleManager";
 import { CustomizedCharacter } from "../Entity/CustomizedCharacter";
-import { get } from "svelte/store";
 import { analyticsClient } from "../../Administration/AnalyticsClient";
 import { isMediaBreakpointUp } from "../../Utils/BreakpointsUtils";
 import { PUSHER_URL } from "../../Enum/EnvironmentVariable";
 import {
     CustomWokaBodyPart,
+    CustomWokaBodyPartOrder,
     CustomWokaPreviewer,
     CustomWokaPreviewerConfig,
 } from "../Components/CustomizeWoka/CustomWokaPreviewer";
@@ -25,21 +24,18 @@ import { WokaBodyPartSlot, WokaBodyPartSlotConfig } from "../Components/Customiz
 export const CustomizeSceneName = "CustomizeScene";
 
 export class CustomizeScene extends AbstractCharacterScene {
-    private Rectangle!: Phaser.GameObjects.Rectangle;
-
     private customWokaPreviewer!: CustomWokaPreviewer;
+    private bodyPartsDraggableGridBackground!: Phaser.GameObjects.Rectangle;
+    private bodyPartsDraggableGridForeground!: Phaser.GameObjects.Rectangle;
     private bodyPartsDraggableGrid!: DraggableGrid;
     private bodyPartsSlots!: Record<CustomWokaBodyPart, WokaBodyPartSlot>;
 
-    private selectedLayers: number[] = [0];
+    private selectedLayers: number[] = [0, 1, 2, 3, 4, 5];
     private containersRow: CustomizedCharacter[][] = [];
     private layers: BodyResourceDescriptionInterface[][] = [];
 
     protected lazyloadingAttempt = true; //permit to update texture loaded after renderer
 
-    private moveHorizontally: number = 0;
-    private moveVertically: number = 0;
-
     private loader: Loader;
 
     constructor() {
@@ -96,33 +92,9 @@ export class CustomizeScene extends AbstractCharacterScene {
 
         const isVertical = isMediaBreakpointUp("md");
 
-        this.Rectangle = this.add.rectangle(
-            this.cameras.main.worldView.x + this.cameras.main.width / 2,
-            this.cameras.main.worldView.y + this.cameras.main.height / 3,
-            32,
-            33
-        );
-        this.Rectangle.setStrokeStyle(2, 0xffffff);
-
-        this.createCustomizeLayer(0, 0, 0);
-        this.createCustomizeLayer(0, 0, 1);
-        this.createCustomizeLayer(0, 0, 2);
-        this.createCustomizeLayer(0, 0, 3);
-        this.createCustomizeLayer(0, 0, 4);
-        this.createCustomizeLayer(0, 0, 5);
-
-        this.moveLayers();
-
-        const customCursorPosition = localUserStore.getCustomCursorPosition();
-        if (customCursorPosition) {
-            activeRowStore.set(customCursorPosition.activeRow);
-            this.selectedLayers = customCursorPosition.selectedLayers;
-            this.moveLayers();
-            this.updateSelectedLayer();
-        }
-
         this.customWokaPreviewer = new CustomWokaPreviewer(this, 0, 0, this.getCustomWokaPreviewerConfig());
 
+        this.bodyPartsDraggableGridBackground = this.add.rectangle(0, 0, 485, 165, 0xf9f9f9);
         this.bodyPartsDraggableGrid = new DraggableGrid(this, {
             position: { x: 0, y: 0 },
             maskPosition: { x: 0, y: 0 },
@@ -136,9 +108,10 @@ export class CustomizeScene extends AbstractCharacterScene {
             },
             spacing: 5,
             debug: {
-                showDraggableSpace: true,
+                showDraggableSpace: false,
             },
         });
+        this.bodyPartsDraggableGridForeground = this.add.rectangle(0, 0, 485, 165, 0xffffff, 0);
 
         this.bodyPartsSlots = {
             [CustomWokaBodyPart.Hair]: new WokaBodyPartSlot(
@@ -179,6 +152,8 @@ export class CustomizeScene extends AbstractCharacterScene {
             ),
         };
 
+        this.setPlayerCurrentOutfit();
+
         this.onResize();
 
         this.bindEventHandlers();
@@ -186,37 +161,10 @@ export class CustomizeScene extends AbstractCharacterScene {
 
     public update(time: number, dt: number): void {
         this.customWokaPreviewer.update();
-
-        if (this.lazyloadingAttempt) {
-            this.moveLayers();
-            this.doMoveCursorHorizontally(this.moveHorizontally);
-            this.lazyloadingAttempt = false;
-        }
-
-        if (this.moveHorizontally !== 0) {
-            this.doMoveCursorHorizontally(this.moveHorizontally);
-            this.moveHorizontally = 0;
-        }
-        if (this.moveVertically !== 0) {
-            this.doMoveCursorVertically(this.moveVertically);
-            this.moveVertically = 0;
-        }
-    }
-
-    public moveCursorHorizontally(index: number): void {
-        this.moveHorizontally = index;
-    }
-
-    public moveCursorVertically(index: number): void {
-        this.moveVertically = index;
     }
 
     public onResize(): void {
         const isVertical = this.cameras.main.width / this.cameras.main.height < 0.75;
-        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.handleCustomWokaPreviewerOnResize(isVertical);
         this.handleBodyPartSlotsOnResize(isVertical);
@@ -250,25 +198,42 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.scene.run(SelectCharacterSceneName);
     }
 
+    private setPlayerCurrentOutfit(): void {
+        let i = 0;
+        for (const layerItem of this.selectedLayers) {
+            const bodyPart = CustomWokaBodyPart[CustomWokaBodyPartOrder[i] as CustomWokaBodyPart];
+            this.customWokaPreviewer.updateSprite(this.layers[i][layerItem].id, bodyPart);
+            this.bodyPartsSlots[bodyPart].setTextures(
+                this.layers[CustomWokaBodyPartOrder.Body][this.selectedLayers[CustomWokaBodyPartOrder.Body]].id,
+                this.layers[i][layerItem].id
+            );
+            i += 1;
+        }
+    }
+
     private handleCustomWokaPreviewerOnResize(isVertical: boolean): void {
+        const slotDimension =
+            Math.min(innerWidth * (isVertical ? 0.2 : 0.15), innerHeight * (isVertical ? 0.2 : 0.15)) /
+            waScaleManager.getActualZoom();
+
         const boxDimension =
             Math.min(innerWidth * (isVertical ? 0.4 : 0.3), innerHeight * (isVertical ? 0.4 : 0.3)) /
             waScaleManager.getActualZoom();
-        const boxScale = boxDimension / this.customWokaPreviewer.SIZE;
 
-        this.customWokaPreviewer.setScale(boxScale);
+        this.customWokaPreviewer.setDisplaySize(boxDimension, boxDimension);
         this.customWokaPreviewer.x = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-        this.customWokaPreviewer.y = this.customWokaPreviewer.displayHeight * 0.5 + 10;
+        this.customWokaPreviewer.y = isVertical
+            ? this.customWokaPreviewer.displayHeight * 0.5 + 20
+            : slotDimension * 1.5 + 20;
     }
 
     private handleBodyPartSlotsOnResize(isVertical: boolean): void {
         const slotDimension =
             Math.min(innerWidth * (isVertical ? 0.2 : 0.15), innerHeight * (isVertical ? 0.2 : 0.15)) /
             waScaleManager.getActualZoom();
-        const slotScale = slotDimension / this.customWokaPreviewer.SIZE;
 
         for (const part in this.bodyPartsSlots) {
-            this.bodyPartsSlots[part as CustomWokaBodyPart].setScale(slotScale);
+            this.bodyPartsSlots[part as CustomWokaBodyPart].setDisplaySize(slotDimension, slotDimension);
         }
 
         const slotSize = this.bodyPartsSlots.Accessory.displayHeight;
@@ -306,23 +271,28 @@ export class CustomizeScene extends AbstractCharacterScene {
 
     private handleBodyPartsDraggableGridOnResize(isVertical: boolean): void {
         const gridHeight = (innerHeight * (isVertical ? 0.3 : 0.35)) / waScaleManager.getActualZoom();
-        const gridWidth = (innerWidth * (isVertical ? 0.9 : 0.8)) / waScaleManager.getActualZoom();
+        const gridWidth = (innerWidth * (isVertical ? 1 : 0.8)) / 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 - 10,
+            y: this.cameras.main.worldView.y + this.cameras.main.height - gridHeight * 0.5,
         };
 
+        this.bodyPartsDraggableGridBackground.setPosition(gridPos.x, gridPos.y).setDisplaySize(gridWidth, gridHeight);
+        this.bodyPartsDraggableGridForeground
+            .setPosition(gridPos.x, gridPos.y)
+            .setDisplaySize(gridWidth, gridHeight)
+            .setStrokeStyle(4, 0xaaaaaa);
         this.bodyPartsDraggableGrid.changeDraggableSpacePosAndSize(gridPos, { x: gridWidth, y: gridHeight }, gridPos);
 
         const slotDimension = (innerHeight * (isVertical ? 0.125 : 0.15)) / waScaleManager.getActualZoom();
         const slotScale = slotDimension / this.customWokaPreviewer.SIZE;
 
-        this.bodyPartsDraggableGrid.clearAllItems();
+        // this.bodyPartsDraggableGrid.clearAllItems();
-        for (let i = 0; i < 50; i += 1) {
+        // for (let i = 0; i < 50; i += 1) {
-            this.bodyPartsDraggableGrid.addItem(
+        //     this.bodyPartsDraggableGrid.addItem(
-                new WokaBodyPartSlot(this, 0, 0, this.getDefaultWokaBodyPartSlotConfig(isVertical)).setScale(slotScale)
+        //         new WokaBodyPartSlot(this, 0, 0, this.getDefaultWokaBodyPartSlotConfig(isVertical)).setScale(slotScale)
-            );
+        //     );
-        }
+        // }
         this.bodyPartsDraggableGrid.moveContentToBeginning();
     }
 
@@ -363,14 +333,6 @@ export class CustomizeScene extends AbstractCharacterScene {
             this.backToPreviousScene();
         });
 
-        // Note: the key bindings are not directly put on the moveCursorVertically or moveCursorHorizontally methods
-        // because if 2 such events are fired close to one another, it makes the whole application crawl to a halt (for a reason I cannot
-        // explain, the list of sprites managed by the update list become immense
-        this.input.keyboard.on("keyup-RIGHT", () => (this.moveHorizontally = 1));
-        this.input.keyboard.on("keyup-LEFT", () => (this.moveHorizontally = -1));
-        this.input.keyboard.on("keyup-DOWN", () => (this.moveVertically = 1));
-        this.input.keyboard.on("keyup-UP", () => (this.moveVertically = -1));
-
         this.input.keyboard.on("keydown-R", () => {
             this.randomizeOutfit();
         });
@@ -402,115 +364,4 @@ export class CustomizeScene extends AbstractCharacterScene {
             CustomWokaBodyPart.Accessory
         );
     }
-
-    private doMoveCursorHorizontally(index: number): void {
-        this.selectedLayers[get(activeRowStore)] += index;
-        if (this.selectedLayers[get(activeRowStore)] < 0) {
-            this.selectedLayers[get(activeRowStore)] = 0;
-        } else if (this.selectedLayers[get(activeRowStore)] > this.layers[get(activeRowStore)].length - 1) {
-            this.selectedLayers[get(activeRowStore)] = this.layers[get(activeRowStore)].length - 1;
-        }
-        this.moveLayers();
-        this.updateSelectedLayer();
-        this.saveInLocalStorage();
-    }
-
-    private doMoveCursorVertically(index: number): void {
-        activeRowStore.set(get(activeRowStore) + index);
-        if (get(activeRowStore) < 0) {
-            activeRowStore.set(0);
-        } else if (get(activeRowStore) > this.layers.length - 1) {
-            activeRowStore.set(this.layers.length - 1);
-        }
-        this.moveLayers();
-        this.saveInLocalStorage();
-    }
-
-    private saveInLocalStorage() {
-        localUserStore.setCustomCursorPosition(get(activeRowStore), this.selectedLayers);
-    }
-
-    /**
-     * @param x, the layer's vertical position
-     * @param y, the layer's horizontal position
-     * @param layerNumber, index of the this.layers array
-     * create the layer and display it on the scene
-     */
-    private createCustomizeLayer(x: number, y: number, layerNumber: number): void {
-        this.containersRow[layerNumber] = [];
-        this.selectedLayers[layerNumber] = 0;
-        let alpha = 0;
-        let layerPosX = 0;
-        for (let i = 0; i < this.layers[layerNumber].length; i++) {
-            const container = this.generateCharacter(300 + x + layerPosX, y, layerNumber, i);
-
-            this.containersRow[layerNumber][i] = container;
-            this.add.existing(container);
-            layerPosX += 30;
-            alpha += 0.1;
-        }
-    }
-
-    /**
-     * Generates a character from the current selected items BUT replaces
-     * one layer item with an item we pass in parameter.
-     *
-     * Current selected items are fetched from this.selectedLayers
-     *
-     * @param x,
-     * @param y,
-     * @param layerNumber, The selected layer number (0 for body...)
-     * @param selectedItem, The number of the item select (0 for black body...)
-     */
-    private generateCharacter(x: number, y: number, layerNumber: number, selectedItem: number) {
-        return new CustomizedCharacter(this, x, y, this.getContainerChildren(layerNumber, selectedItem));
-    }
-
-    private getContainerChildren(layerNumber: number, selectedItem: number): Array<string> {
-        const children: Array<string> = new Array<string>();
-        for (let j = 0; j <= layerNumber; j++) {
-            if (j === layerNumber) {
-                children.push(this.layers[j][selectedItem].id);
-            } else {
-                const layer = this.selectedLayers[j];
-                if (layer === undefined) {
-                    continue;
-                }
-                children.push(this.layers[j][layer].id);
-            }
-        }
-        return children;
-    }
-
-    /**
-     * Move the layer left, right, up and down and update the selected layer
-     */
-    private moveLayers(): void {
-        const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-        const screenCenterY = this.cameras.main.worldView.y + this.cameras.main.height / 3;
-        const screenWidth = this.game.renderer.width;
-        const screenHeight = this.game.renderer.height;
-        for (let i = 0; i < this.containersRow.length; i++) {
-            for (let j = 0; j < this.containersRow[i].length; j++) {
-                let selectedX = this.selectedLayers[i];
-                if (selectedX === undefined) {
-                    selectedX = 0;
-                }
-                this.containersRow[i][j].x = screenCenterX + (j - selectedX) * 40;
-                this.containersRow[i][j].y = screenCenterY + (i - get(activeRowStore)) * 40;
-                const alpha1 = (Math.abs(selectedX - j) * 47 * 2) / screenWidth;
-                const alpha2 = (Math.abs(get(activeRowStore) - i) * 49 * 2) / screenHeight;
-                this.containersRow[i][j].setAlpha((1 - alpha1) * (1 - alpha2));
-            }
-        }
-    }
-
-    private updateSelectedLayer() {
-        for (let i = 0; i < this.containersRow.length; i++) {
-            for (let j = 0; j < this.containersRow[i].length; j++) {
-                const children = this.getContainerChildren(i, j);
-                this.containersRow[i][j].updateSprites(children);
-            }
-        }
-    }
 }

front/src/Stores/CustomCharacterStore.ts

@@ -1,5 +1,3 @@
 import { derived, writable, Writable } from "svelte/store";
 
-export const customCharacterSceneVisibleStore = writable(false);
-
 export const activeRowStore = writable(0);