refactor(game): unify move handling using typed payloads and remove UI-driven handlers

- Removed onCellClick from TicTacToeGameProps and migrated move sending inside TicTacToeGame
- Updated TicTacToeGame to:
  - import TicTacToePayload
  - use movePayload() builder
  - send moves using handleMove() with matchId + sendMatchData
  - remove old matchId destructuring duplication

- Updated BattleshipGame to:
  - import BattleshipPayload
  - use placePayload() and shootPayload() helpers
  - collapse place and shoot handlers into a single handleMove()
  - send typed payloads instead of raw objects

- Updated App.tsx:
  - Removed handleCellClick and no longer pass onCellClick down
  - Created typed ticTacToeProps and battleshipProps without UI callbacks
  - Cleaned unused state and simplified board rendering
  - Use {...commonProps} to propagate shared game state

- Updated props:
  - Removed TicTacToeGameProps.onCellClick
  - BattleshipGameProps continues to extend GameProps

- Removed duplicate MatchDataModel definition from interfaces/models
- Fixed imports to use revised models and payload types

This refactor completes the transition from UI-triggered handlers to
typed action payloads per game, significantly improving type safety,
consistency, and separation of concerns.
This commit is contained in:
2025-12-04 19:56:46 +05:30
parent 135fdd332d
commit 8436cdbcdd
9 changed files with 92 additions and 45 deletions

View File

@@ -5,6 +5,11 @@ import { useNakama } from "../../providers/NakamaProvider";
import PlacementGrid from "./placement/PlacementGrid";
import ShotGrid from "./battle/ShotGrid";
import { BattleshipGameProps } from "./props";
import { BattleshipPayload } from "./models";
import {
placePayload,
shootPayload,
} from "./utils";
const Fleet: Record<string, number> = {
carrier: 5,
@@ -40,28 +45,10 @@ export default function BattleshipGame({
const nextShip = FLEET_ORDER[placed] || null;
const nextShipSize = nextShip ? Fleet[nextShip] : null;
// ------------------- PLACE SHIP -------------------
function handlePlace(ship: string, r: number, c: number, dir: "h" | "v") {
sendMatchData(matchId!, 1, {
action: "place",
data: {
ship: ship,
row: r,
col: c,
dir,
}
});
}
function handleMove(matchPayload: BattleshipPayload) {
if (!matchId) return;
// ------------------- SHOOT -------------------
function handleShoot(r: number, c: number) {
sendMatchData(matchId!, 1, {
action: "shoot",
data: {
row: r,
col: c,
}
});
sendMatchData(matchId!, 1, matchPayload);
}
// ------------------- STATUS LABEL -------------------
@@ -90,7 +77,11 @@ export default function BattleshipGame({
shipBoard={myShips}
shipName={nextShip}
shipSize={nextShipSize}
onPlace={handlePlace}
onPlace={(
s,r,c,d
) => handleMove(
placePayload(s,r,c,d)
)}
/>
)}
@@ -103,7 +94,11 @@ export default function BattleshipGame({
grid={myShots}
isMyTurn={isMyTurn}
gameOver={!!gameOver}
onShoot={handleShoot}
onShoot={(
r,c
) => handleMove(
shootPayload(r,c)
)}
/>
<h3 style={{ marginTop: "18px" }}>Your Ships</h3>