refactor(components): replace Lose

Author: remarkablemark

src/components/Lose.tsx

@@ -0,0 +1,49 @@
+import { createRef, type Ref, Text, useScene } from 'phaser-jsx';
+
+interface Props {
+  onClick: () => void;
+  ref: (ref: Ref<Phaser.GameObjects.Text>) => void;
+}
+
+export function Lose(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={['GAME OVER', 'Click to restart'].join('\n')}
+      style={{
+        align: 'center',
+        strokeThickness: 4,
+        fontSize: 40,
+        fontStyle: 'bold',
+        color: '#ff0000',
+      }}
+      originX={0.5}
+      originY={0.5}
+      depth={3}
+      onPointerOver={() => {
+        ref.current!.setColor('#ff7f50');
+        scene.input.setDefaultCursor('pointer');
+      }}
+      onPointerOut={() => {
+        ref.current!.setColor('#8c7ae6');
+        scene.input.setDefaultCursor('default');
+      }}
+      onPointerDown={() => {
+        scene.add.tween({
+          targets: ref.current!,
+          ease: Phaser.Math.Easing.Bounce.InOut,
+          y: -1000,
+          onComplete: () => {
+            props.onClick();
+          },
+        });
+      }}
+      ref={ref}
+    />
+  );
+}

src/components/Win.tsx

@@ -27,17 +27,6 @@ export function Win(props: Props) {
       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');

src/components/index.ts

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

src/scenes/Main.tsx

@@ -1,7 +1,7 @@
 import Phaser from 'phaser';
 import { type Ref, render } from 'phaser-jsx';
 
-import { Title, Win } from '../components';
+import { Lose, Title, Win } from '../components';
 import { Audio, Image, Scene } from '../constants';
 import { createCard } from '../utils/createCard';
 
@@ -177,8 +177,8 @@ export class Main extends Phaser.Scene {
   }
 
   startGame() {
-    // WinnerText and GameOverText
     let winnerTextRef: Ref<Phaser.GameObjects.Text>;
+
     render(
       <Win
         onClick={this.restartGame.bind(this)}
@@ -187,23 +187,15 @@ export class Main extends Phaser.Scene {
       this,
     );
 
-    const gameOverText = this.add
-      .text(
-        this.sys.game.scale.width / 2,
-        -1000,
-        'GAME OVER\nClick to restart',
-        {
-          align: 'center',
-          strokeThickness: 4,
-          fontSize: 40,
-          fontStyle: 'bold',
-          color: '#ff0000',
-        },
-      )
-      .setName('gameOverText')
-      .setDepth(3)
-      .setOrigin(0.5)
-      .setInteractive();
+    let gameOverTextRef: Ref<Phaser.GameObjects.Text>;
+
+    render(
+      <Lose
+        onClick={this.restartGame.bind(this)}
+        ref={(ref) => (gameOverTextRef = ref)}
+      />,
+      this,
+    );
 
     // Start lifes images
     const hearts = this.createHearts();
@@ -224,9 +216,10 @@ export class Main extends Phaser.Scene {
       Phaser.Input.Events.POINTER_MOVE,
       (pointer: Phaser.Input.Pointer) => {
         if (this.canMove) {
-          const card = this.cards.find((card) =>
-            card.gameObject.hasFaceAt(pointer.x, pointer.y),
-          );
+          const card = this.cards.find((card) => {
+            card.gameObject.hasFaceAt(pointer.x, pointer.y);
+          });
+
           if (card) {
             this.input.setDefaultCursor('pointer');
           } else {
@@ -303,7 +296,7 @@ export class Main extends Phaser.Scene {
                   // Show Game Over text
                   this.sound.play(Audio.Whoosh, { volume: 1.3 });
                   this.add.tween({
-                    targets: gameOverText,
+                    targets: gameOverTextRef.current,
                     ease: Phaser.Math.Easing.Bounce.Out,
                     y: this.sys.game.scale.height / 2,
                   });
@@ -339,26 +332,5 @@ export class Main extends Phaser.Scene {
         }
       },
     );
-
-    gameOverText.on(Phaser.Input.Events.POINTER_OVER, () => {
-      gameOverText.setColor('#FF7F50');
-      this.input.setDefaultCursor('pointer');
-    });
-
-    gameOverText.on(Phaser.Input.Events.POINTER_OUT, () => {
-      gameOverText.setColor('#8c7ae6');
-      this.input.setDefaultCursor('default');
-    });
-
-    gameOverText.on(Phaser.Input.Events.POINTER_DOWN, () => {
-      this.add.tween({
-        targets: gameOverText,
-        ease: Phaser.Math.Easing.Bounce.InOut,
-        y: -1000,
-        onComplete: () => {
-          this.restartGame();
-        },
-      });
-    });
   }
 }