different animations for previewer

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

@@ -10,20 +10,24 @@ export enum CustomWokaBodyPart {
 }
 
 export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
-    private background: Phaser.GameObjects.Rectangle;
-
+    private background: Phaser.GameObjects.Graphics;
     private sprites: Record<CustomWokaBodyPart, Phaser.GameObjects.Sprite>;
 
+    private currentAnimationDirection: PlayerAnimationDirections = PlayerAnimationDirections.Down;
+    private currentlyMoving: boolean = true;
+
     constructor(scene: Phaser.Scene, x: number, y: number) {
         super(scene, x, y);
 
+        const spritesOffset = -2;
+
         this.sprites = {
-            [CustomWokaBodyPart.Accessory]: this.scene.add.sprite(0, 0, "").setScale(4),
-            [CustomWokaBodyPart.Body]: this.scene.add.sprite(0, 0, "").setScale(4),
-            [CustomWokaBodyPart.Clothes]: this.scene.add.sprite(0, 0, "").setScale(4),
-            [CustomWokaBodyPart.Eyes]: this.scene.add.sprite(0, 0, "").setScale(4),
-            [CustomWokaBodyPart.Hair]: this.scene.add.sprite(0, 0, "").setScale(4),
-            [CustomWokaBodyPart.Hat]: this.scene.add.sprite(0, 0, "").setScale(4),
+            [CustomWokaBodyPart.Accessory]: this.scene.add.sprite(spritesOffset, 0, "").setScale(4),
+            [CustomWokaBodyPart.Body]: this.scene.add.sprite(spritesOffset, 0, "").setScale(4),
+            [CustomWokaBodyPart.Clothes]: this.scene.add.sprite(spritesOffset, 0, "").setScale(4),
+            [CustomWokaBodyPart.Eyes]: this.scene.add.sprite(spritesOffset, 0, "").setScale(4),
+            [CustomWokaBodyPart.Hair]: this.scene.add.sprite(spritesOffset, 0, "").setScale(4),
+            [CustomWokaBodyPart.Hat]: this.scene.add.sprite(spritesOffset, 0, "").setScale(4),
         };
 
         this.updateSprite("accessory1", CustomWokaBodyPart.Accessory);
@@ -33,8 +37,11 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
         this.updateSprite("hair3", CustomWokaBodyPart.Hair);
         this.updateSprite("hat2", CustomWokaBodyPart.Hat);
 
-        this.background = this.createBackground();
-        this.setSize(this.background.displayWidth, this.background.displayHeight);
+        const width = 150;
+        const height = 200;
+
+        this.background = this.createBackground(width, height);
+        this.setSize(width, height);
 
         this.add([
             this.background,
@@ -50,14 +57,26 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
     }
 
     public update(): void {
-        this.playAnimation(PlayerAnimationDirections.Down, true);
+        this.animate();
     }
 
-    private createBackground(): Phaser.GameObjects.Rectangle {
-        return this.scene.add.rectangle(0, 0, 150, 300, 0xbfbfbf, 0.5);
+    public changeAnimation(direction: PlayerAnimationDirections, moving: boolean): void {
+        this.currentAnimationDirection = direction;
+        this.currentlyMoving = moving;
     }
 
-    public playAnimation(direction: PlayerAnimationDirections, moving: boolean): void {
+    private createBackground(width: number, height: number): Phaser.GameObjects.Graphics {
+        const background = this.scene.add.graphics();
+        background.fillStyle(0xffffff);
+        background.lineStyle(5, 0xadafbc);
+
+        background.fillRect(-width / 2, -height / 2, width, height);
+        background.strokeRect(-width / 2, -height / 2, width, height);
+
+        return background;
+    }
+
+    private animate(): void {
         for (const bodyPartKey in this.sprites) {
             const sprite = this.sprites[bodyPartKey as CustomWokaBodyPart];
             if (!sprite.anims) {
@@ -65,10 +84,16 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
                 return;
             }
             const textureKey = sprite.texture.key;
-            if (moving && (!sprite.anims.currentAnim || sprite.anims.currentAnim.key !== direction)) {
-                sprite.play(textureKey + "-" + direction + "-" + PlayerAnimationTypes.Walk, true);
-            } else if (!moving) {
-                sprite.anims.play(textureKey + "-" + direction + "-" + PlayerAnimationTypes.Idle, true);
+            if (
+                this.currentlyMoving &&
+                (!sprite.anims.currentAnim || sprite.anims.currentAnim.key !== this.currentAnimationDirection)
+            ) {
+                sprite.play(textureKey + "-" + this.currentAnimationDirection + "-" + PlayerAnimationTypes.Walk, true);
+            } else if (!this.currentlyMoving) {
+                sprite.anims.play(
+                    textureKey + "-" + this.currentAnimationDirection + "-" + PlayerAnimationTypes.Idle,
+                    true
+                );
             }
         }
     }

front/src/Phaser/Login/CustomizeScene.ts

@@ -16,7 +16,7 @@ import { get } from "svelte/store";
 import { analyticsClient } from "../../Administration/AnalyticsClient";
 import { isMediaBreakpointUp } from "../../Utils/BreakpointsUtils";
 import { PUSHER_URL } from "../../Enum/EnvironmentVariable";
-import { CustomWokaPreviewer } from "../Components/CustomizeWoka/CustomWokaPreviewer";
+import { CustomWokaBodyPart, CustomWokaPreviewer } from "../Components/CustomizeWoka/CustomWokaPreviewer";
 
 export const CustomizeSceneName = "CustomizeScene";
 
@@ -207,6 +207,37 @@ export class CustomizeScene extends AbstractCharacterScene {
         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();
+        });
+    }
+
+    private randomizeOutfit(): void {
+        this.customWokaPreviewer.updateSprite(
+            this.layers[0][Math.floor(Math.random() * this.layers[0].length)].id,
+            CustomWokaBodyPart.Body
+        );
+        this.customWokaPreviewer.updateSprite(
+            this.layers[1][Math.floor(Math.random() * this.layers[1].length)].id,
+            CustomWokaBodyPart.Eyes
+        );
+        this.customWokaPreviewer.updateSprite(
+            this.layers[2][Math.floor(Math.random() * this.layers[2].length)].id,
+            CustomWokaBodyPart.Hair
+        );
+        this.customWokaPreviewer.updateSprite(
+            this.layers[3][Math.floor(Math.random() * this.layers[3].length)].id,
+            CustomWokaBodyPart.Clothes
+        );
+        this.customWokaPreviewer.updateSprite(
+            this.layers[4][Math.floor(Math.random() * this.layers[4].length)].id,
+            CustomWokaBodyPart.Hat
+        );
+        this.customWokaPreviewer.updateSprite(
+            this.layers[5][Math.floor(Math.random() * this.layers[5].length)].id,
+            CustomWokaBodyPart.Accessory
+        );
     }
 
     private doMoveCursorHorizontally(index: number): void {

front/src/Phaser/Login/EntryScene.ts

@@ -47,8 +47,8 @@ export class EntryScene extends Scene {
                         // We can do it at this stage.
                         waScaleManager.applyNewSize();
                         // this.scene.start(nextSceneName);
-                        // this.scene.start(CustomizeSceneName);
-                        this.scene.start(SelectCharacterSceneName);
+                        this.scene.start(CustomizeSceneName);
+                        // this.scene.start(SelectCharacterSceneName);
                     })
                     .catch((err) => {
                         const $LL = get(LL);