feat: add draw-state support using game_over flag and update UI handling

Updated match data callback to interpret { game_over: true, winner: -1 } as a draw.

Added winner = "draw" UI state for display and disabling board interactions.

Updated status text in Board component to show “Draw!” when applicable.

Adjusted winner highlighting logic to avoid highlighting any symbol during draw.

Ensured ongoing games always set winner = null for consistent behavior.
This commit is contained in:
2025-12-01 18:16:46 +05:30
parent fa02e8b4e4
commit 7671e9b2cc
2 changed files with 7 additions and 0 deletions

View File

@@ -14,6 +14,7 @@ interface BoardProps {
board: string[][];
turn: number;
winner: string | null;
gameOver: boolean | null;
players: PlayerModel[];
myUserId: string | null;
onCellClick: (row: number, col: number) => void;
@@ -23,6 +24,7 @@ export default function Board({
board,
turn,
winner,
gameOver,
players,
myUserId,
onCellClick,
@@ -53,6 +55,8 @@ export default function Board({
status = "Waiting for opponent...";
} else if (winner) {
status = `Winner: ${winner}`;
} else if (gameOver) {
status = `Draw!!!`;
} else if (myIndex === -1) {
status = "Spectating";
} else {

View File

@@ -13,6 +13,7 @@ export default function TicTacToe() {
]);
const [turn, setTurn] = useState<number>(0);
const [winner, setWinner] = useState<string | null>(null);
const [gameOver, setGameOver] = useState<boolean | null>(null);
const [players, setPlayers] = useState<PlayerModel[]>([]);
const { sendMatchData, onMatchData, matchId, session } = useNakama();
@@ -29,6 +30,7 @@ export default function TicTacToe() {
setBoard(state.board.grid);
setTurn(state.turn);
setGameOver(state.game_over);
if (state.winner >= 0) {
// Somebody actually won (0 or 1)
setWinner(state.winner);
@@ -118,6 +120,7 @@ export default function TicTacToe() {
board={board}
turn={turn}
winner={winner}
gameOver={gameOver}
players={players}
myUserId={session?.user_id ?? null}
onCellClick={handleCellClick}