refactor(components): replace Win

src/components/Win.tsx

@@ -0,0 +1,63 @@
+import { createRef, type Ref, Text, useScene } from 'phaser-jsx';
+
+import { Audio } from '../constants';
+
+interface Props {
+  onClick: () => void;
+  ref: (ref: Ref<Phaser.GameObjects.Text>) => void;
+}
+
+export function Win(props: Props) {
+  const scene = useScene();
+  const ref = createRef<Phaser.GameObjects.Text>();
+  props.ref(ref);
+
+  return (
+    <Text
+      x={scene.sys.game.scale.width / 2}
+      y={-1000}
+      text="YOU WIN"
+      style={{
+        align: 'center',
+        strokeThickness: 4,
+        fontSize: 40,
+        fontStyle: 'bold',
+        color: '#8c7ae6',
+      }}
+      originX={0.5}
+      originY={0.5}
+      depth={3}
+      addedToScene={() => {
+        // title tween like retro arcade
+        scene.add.tween({
+          targets: ref.current!,
+          duration: 800,
+          ease: (value: number) => value > 0.8,
+          alpha: 0,
+          repeat: -1,
+          yoyo: true,
+        });
+      }}
+      onPointerOver={() => {
+        ref.current!.setColor('#ff7f50');
+        scene.input.setDefaultCursor('pointer');
+      }}
+      onPointerOut={() => {
+        ref.current!.setColor('#8c7ae6');
+        scene.input.setDefaultCursor('default');
+      }}
+      onPointerDown={() => {
+        scene.sound.play(Audio.Whoosh, { volume: 1.3 });
+        scene.add.tween({
+          targets: ref.current!,
+          ease: Phaser.Math.Easing.Bounce.InOut,
+          y: -1000,
+          onComplete: () => {
+            props.onClick();
+          },
+        });
+      }}
+      ref={ref}
+    />
+  );
+}

src/components/index.ts

@@ -1 +1,2 @@
 export * from './Title';
+export * from './Win';

src/scenes/Main.tsx

@@ -1,7 +1,7 @@
 import Phaser from 'phaser';
-import { render } from 'phaser-jsx';
+import { type Ref, render } from 'phaser-jsx';
 
-import { Title } from '../components';
+import { Title, Win } from '../components';
 import { Audio, Image, Scene } from '../constants';
 import { createCard } from '../utils/createCard';
 
@@ -178,17 +178,14 @@ export class Main extends Phaser.Scene {
 
   startGame() {
     // WinnerText and GameOverText
-    const winnerText = this.add
-      .text(this.sys.game.scale.width / 2, -1000, 'YOU WIN', {
-        align: 'center',
-        strokeThickness: 4,
-        fontSize: 40,
-        fontStyle: 'bold',
-        color: '#8c7ae6',
-      })
-      .setOrigin(0.5)
-      .setDepth(3)
-      .setInteractive();
+    let winnerTextRef: Ref<Phaser.GameObjects.Text>;
+    render(
+      <Win
+        onClick={this.restartGame.bind(this)}
+        ref={(ref) => (winnerTextRef = ref)}
+      />,
+      this,
+    );
 
     const gameOverText = this.add
       .text(
@@ -320,7 +317,7 @@ export class Main extends Phaser.Scene {
                   this.sound.play(Audio.Victory);
 
                   this.add.tween({
-                    targets: winnerText,
+                    targets: winnerTextRef.current,
                     ease: Phaser.Math.Easing.Bounce.Out,
                     y: this.sys.game.scale.height / 2,
                   });
@@ -343,29 +340,6 @@ export class Main extends Phaser.Scene {
       },
     );
 
-    // Text events
-    winnerText.on(Phaser.Input.Events.POINTER_OVER, () => {
-      winnerText.setColor('#FF7F50');
-      this.input.setDefaultCursor('pointer');
-    });
-
-    winnerText.on(Phaser.Input.Events.POINTER_OUT, () => {
-      winnerText.setColor('#8c7ae6');
-      this.input.setDefaultCursor('default');
-    });
-
-    winnerText.on(Phaser.Input.Events.POINTER_DOWN, () => {
-      this.sound.play(Audio.Whoosh, { volume: 1.3 });
-      this.add.tween({
-        targets: winnerText,
-        ease: Phaser.Math.Easing.Bounce.InOut,
-        y: -1000,
-        onComplete: () => {
-          this.restartGame();
-        },
-      });
-    });
-
     gameOverText.on(Phaser.Input.Events.POINTER_OVER, () => {
       gameOverText.setColor('#FF7F50');
       this.input.setDefaultCursor('pointer');