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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user