fix: resetting methods

packages/sample-game/src/scenes/GameScene.ts

@@ -32,6 +32,9 @@ export class GameScene extends GameHostScene<TicTacToeState> {
       const winner = this.state.winner;
       if (winner) {
         this.showWinner(winner);
+      } else if (this.winnerOverlay) {
+        this.winnerOverlay.destroy();
+        this.winnerOverlay = undefined;
       }
     });
 
@@ -121,16 +124,20 @@ export class GameScene extends GameHostScene<TicTacToeState> {
 
     const text = winner === 'draw' ? "It's a draw!" : `${winner} wins!`;
 
-    this.winnerOverlay.add(
-      this.add.rectangle(
-        BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2,
-        BOARD_OFFSET.y + (BOARD_SIZE * CELL_SIZE) / 2,
-        BOARD_SIZE * CELL_SIZE,
-        BOARD_SIZE * CELL_SIZE,
-        0x000000,
-        0.6,
-      ),
-    );
+    const bg = this.add.rectangle(
+      BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2,
+      BOARD_OFFSET.y + (BOARD_SIZE * CELL_SIZE) / 2,
+      BOARD_SIZE * CELL_SIZE,
+      BOARD_SIZE * CELL_SIZE,
+      0x000000,
+      0.6,
+    ).setInteractive({ useHandCursor: true });
+
+    bg.on('pointerdown', () => {
+      this.gameHost.setup('setup');
+    });
+
+    this.winnerOverlay.add(bg);
 
     const winText = this.add.text(
       BOARD_OFFSET.x + (BOARD_SIZE * CELL_SIZE) / 2,
@@ -196,6 +203,12 @@ class TicTacToePartSpawner implements Spawner<TicTacToePart, Phaser.GameObjects.
   }
   
   onDespawn(obj: Phaser.GameObjects.Text) {
-    obj.removedFromScene();
+    this.scene.tweens.add({
+      targets: obj,
+      alpha: 0,
+      duration: 200,
+      ease: 'Back.easeIn',
+      onComplete: () => obj.destroy(),
+    });
   }
 }

packages/sample-game/src/ui/App.tsx

@@ -1,4 +1,4 @@
-import { useComputed } from '@preact/signals';
+import {useComputed} from '@preact/signals';
 import { createGameHost, type GameModule } from 'boardgame-core';
 import Phaser from 'phaser';
 import { h } from 'preact';
@@ -8,12 +8,16 @@ export default function App<TState extends Record<string, unknown>>(props: { gam
 
     const gameHost = useComputed(() => {
         const gameHost = createGameHost(props.gameModule);
-        gameHost.setup('setup');
         return { gameHost };
     });
 
     const scene = useComputed(() => new props.gameScene());
 
+    const handleReset = async () => {
+        gameHost.value.gameHost.setup('setup');
+    };
+    const label = useComputed(() => gameHost.value.gameHost.status.value === 'running' ? 'Restart' : 'Start');
+
     return (
         <div className="flex flex-col h-screen">
             <div className="flex-1 relative">
@@ -21,6 +25,14 @@ export default function App<TState extends Record<string, unknown>>(props: { gam
                     <PhaserScene sceneKey="GameScene" scene={scene.value} autoStart data={gameHost.value} />
                 </PhaserGame>
             </div>
+            <div className="p-4 bg-gray-100 border-t border-gray-200">
+                <button
+                    onClick={handleReset}
+                    className="px-6 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors font-medium"
+                >
+                    {label}
+                </button>
+            </div>
         </div>
     );
 }