randomize and finish buttons

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

@@ -56,6 +56,7 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
         this.background = this.scene.add.graphics();
         this.drawBackground();
         this.setSize(this.SIZE, this.SIZE);
+        this.setInteractive({ cursor: "pointer" });
 
         this.add([
             this.background,
@@ -67,6 +68,8 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
             this.sprites.Accessory,
         ]);
 
+        this.bindEventHandlers();
+
         this.scene.add.existing(this);
     }
 
@@ -74,11 +77,6 @@ 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;
@@ -112,6 +110,14 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
         return this.animationDirection;
     }
 
+    private bindEventHandlers(): void {
+        this.on(Phaser.Input.Events.POINTER_UP, () => {
+            const direction = this.getNextAnimationDirection();
+            const moving = direction === PlayerAnimationDirections.Down ? !this.moving : this.moving;
+            this.changeAnimation(direction, moving);
+        });
+    }
+
     private drawBackground(): void {
         this.background.clear();
         this.background.fillStyle(0xffffff);
@@ -142,4 +148,17 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
             }
         }
     }
+
+    private getNextAnimationDirection(): PlayerAnimationDirections {
+        switch (this.animationDirection) {
+            case PlayerAnimationDirections.Down:
+                return PlayerAnimationDirections.Left;
+            case PlayerAnimationDirections.Left:
+                return PlayerAnimationDirections.Up;
+            case PlayerAnimationDirections.Up:
+                return PlayerAnimationDirections.Right;
+            case PlayerAnimationDirections.Right:
+                return PlayerAnimationDirections.Down;
+        }
+    }
 }

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

@@ -53,7 +53,7 @@ export class WokaBodyPartSlot extends GridItem {
 
         this.add([this.background, this.bodyImage, this.image]);
 
-        this.setInteractive();
+        this.setInteractive({ cursor: "pointer" });
         this.scene.input.setDraggable(this);
 
         this.bindEventHandlers();

front/src/Phaser/Components/Ui/Button.ts

@@ -0,0 +1,53 @@
+export interface ButtonConfig {
+    width: number;
+    height: number;
+    idle: ButtonAppearanceConfig;
+    hover: ButtonAppearanceConfig;
+    pressed: ButtonAppearanceConfig;
+}
+
+export interface ButtonAppearanceConfig {
+    color: number;
+    borderThickness: number;
+    borderColor: number;
+}
+
+export class Button extends Phaser.GameObjects.Container {
+    private background: Phaser.GameObjects.Graphics;
+    private text: Phaser.GameObjects.Text;
+
+    private config: ButtonConfig;
+
+    constructor(scene: Phaser.Scene, x: number, y: number, config: ButtonConfig) {
+        super(scene, x, y);
+
+        this.config = config;
+
+        this.background = this.scene.add.graphics();
+        this.drawBackground(this.config.idle);
+        this.text = this.scene.add.text(0, 0, "", { color: "0x000000" }).setOrigin(0.5);
+
+        this.add([this.background, this.text]);
+
+        this.setSize(this.config.width, this.config.height);
+        this.setInteractive({ cursor: "pointer" });
+
+        this.scene.add.existing(this);
+    }
+
+    public setText(text: string): void {
+        this.text.setText(text);
+    }
+
+    private drawBackground(appearance: ButtonAppearanceConfig): void {
+        this.background.clear();
+        this.background.fillStyle(appearance.color);
+        this.background.lineStyle(appearance.borderThickness, appearance.borderColor);
+
+        const w = this.config.width;
+        const h = this.config.height;
+
+        this.background.fillRect(-w / 2, -h / 2, w, h);
+        this.background.strokeRect(-w / 2, -h / 2, w, h);
+    }
+}