Tic-Tac-Toe example

xara-tic-tac-toe is a complete game built the way any game for Xara is: a static page using @xavatech/xara-game-sdk. Guess the Number is the short example; this one adds a board, a draw, and a hint that changes every turn.

Run it

npm install
npm run dev     # opens with the mock host: both players share the screen
npm test        # the board rules
npm run build   # static files in dist/, ready to host over https

How it is built

The rules live in src/board.ts, separate from the screen, so every phone draws the same board from the same moves:

export function replay(moves: PlayedMove<{ cell: number }>[], players: Player[]): Cell[] {
  const board: Cell[] = Array(9).fill(null);
  for (const played of moves) {
    const mark = markOf(players, played.playerId);
    if (mark && !board[played.move.cell]) board[played.move.cell] = mark;
  }
  return board;
}

src/main.ts draws that board after every state, and only enables the cells when xara.isMyTurn(). A move that wins or fills the board ends the game in the same call, so nobody can move after it:

const outcome = winner(next)
  ? { winners: [me], summary: `${mark} wins with three in a row` }
  : isDraw(next)
    ? { winners: [], summary: "It's a draw" }
    : undefined;
await xara.move({ cell }, { outcome });

It also sells a hint for ₦100 with buy, using hint-<session>-<move count> as the reference so a player is never charged twice for the same hint.

Ship it

Build it, host dist/ over https, and submit its URL with 2 players.