refactor(components): replace Title

package.json

@@ -26,6 +26,7 @@
     "@eslint/eslintrc": "3.2.0",
     "@eslint/js": "9.17.0",
     "@types/gtag.js": "0.0.20",
+    "@types/react": "19.0.2",
     "@typescript-eslint/eslint-plugin": "8.18.1",
     "@typescript-eslint/parser": "8.18.1",
     "eslint": "9.17.0",

src/components/Title.tsx

@@ -0,0 +1,64 @@
+import { createRef, Text, useScene } from 'phaser-jsx';
+
+import { Audio } from '../constants';
+
+interface Props {
+  onClick: () => void;
+}
+
+export function Title(props: Props) {
+  const scene = useScene();
+  const ref = createRef<Phaser.GameObjects.Text>();
+
+  return (
+    <Text
+      x={scene.sys.game.scale.width / 2}
+      y={scene.sys.game.scale.height / 2}
+      text={['Memory Card Game', 'Click to Play'].join('\n')}
+      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('#9c88ff');
+        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: () => {
+            if (!scene.sound.get(Audio.ThemeSong)) {
+              scene.sound.play(Audio.ThemeSong, { loop: true, volume: 0.5 });
+            }
+            props.onClick();
+          },
+        });
+      }}
+      ref={ref}
+    />
+  );
+}

src/components/index.ts

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

src/scenes/Main.ts → src/scenes/Main.tsx

@@ -1,5 +1,7 @@
 import Phaser from 'phaser';
+import { render } from 'phaser-jsx';
 
+import { Title } from '../components';
 import { Audio, Image, Scene } from '../constants';
 import { createCard } from '../utils/createCard';
 
@@ -67,57 +69,7 @@ export class Main extends Phaser.Scene {
       )
       .setOrigin(0);
 
-    const titleText = this.add
-      .text(
-        this.sys.game.scale.width / 2,
-        this.sys.game.scale.height / 2,
-        'Memory Card Game\nClick to Play',
-        {
-          align: 'center',
-          strokeThickness: 4,
-          fontSize: 40,
-          fontStyle: 'bold',
-          color: '#8c7ae6',
-        },
-      )
-      .setOrigin(0.5)
-      .setDepth(3)
-      .setInteractive();
-    // title tween like retro arcade
-    this.add.tween({
-      targets: titleText,
-      duration: 800,
-      ease: (value: number) => value > 0.8,
-      alpha: 0,
-      repeat: -1,
-      yoyo: true,
-    });
-
-    // Text Events
-    titleText.on(Phaser.Input.Events.POINTER_OVER, () => {
-      titleText.setColor('#9c88ff');
-      this.input.setDefaultCursor('pointer');
-    });
-
-    titleText.on(Phaser.Input.Events.POINTER_OUT, () => {
-      titleText.setColor('#8c7ae6');
-      this.input.setDefaultCursor('default');
-    });
-
-    titleText.on(Phaser.Input.Events.POINTER_DOWN, () => {
-      this.sound.play(Audio.Whoosh, { volume: 1.3 });
-      this.add.tween({
-        targets: titleText,
-        ease: Phaser.Math.Easing.Bounce.InOut,
-        y: -1000,
-        onComplete: () => {
-          if (!this.sound.get(Audio.ThemeSong)) {
-            this.sound.play(Audio.ThemeSong, { loop: true, volume: 0.5 });
-          }
-          this.startGame();
-        },
-      });
-    });
+    render(<Title onClick={this.startGame.bind(this)} />, this);
   }
 
   restartGame() {