pnpm create vite react-tic-tac-toe --template react-ts
cd react-tic-tac-toe
pnpm i
code .

interface Props {
  squareContent: string | null;
  fillSquare: () => void;
}

interface Props {
  squares: Squares;
  statusMsg: string;
  nextPlayer: Player;
  fillSquare: (squareIdx: number) => void;
}

interface State {
  history: BoardPropsNeeded[];
  historyIdx: number;
}

export interface Props {
  squareContent: string | null;
  fillSquare: () => void;
}

export type Squares = Omit<Props, "fillSquare">[];

export default function Square(props: Props) {
  return (
    <div className="square" onClick={() => props.fillSquare()}>
      {props.squareContent}
    </div>
  );
}

import React from "react";
import Square from "./Square";
import type { Squares } from "./Square";

export type Player = "X" | "O";

export interface Props {
  squares: Squares;
  statusMsg: string;
  nextPlayer: Player;
  fillSquare: (squareIdx: number) => void;
}

export default class Board extends React.Component<Props> {
  renderSquare(squareIdx: number) {
    const { squareContent } = this.props.squares[squareIdx];

    return (
      <Square
        squareContent={squareContent}
        fillSquare={() => this.props.fillSquare(squareIdx)}
      />
    );
  }

  render(): React.ReactNode {
    return (
      <div>
        <h1 className="board-status-msg">{this.props.statusMsg}</h1>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

import React from "react";
import Board from "./Board";
import type { Props as BoardProps, Player } from "./Board";
import type { Squares } from "./Square";

type BoardPropsNeeded = Omit<BoardProps, "fillSquare">;

interface State {
  history: BoardPropsNeeded[];
  historyIdx: number;
}

export default class Game extends React.Component<any, State> {
  constructor(props: any) {
    super(props);

    this.state = {
      history: [
        {
          squares: new Array(9).fill({ squareContent: null }),
          nextPlayer: "X",
          statusMsg: "Next player: X",
        },
      ],
      historyIdx: 0,
    };
  }

  togglePlayer(): Player {
    const currentBoard = this.state.history[this.state.historyIdx];
    return currentBoard.nextPlayer === "X" ? "O" : "X";
  }

  fillSquare(squareIdx: number) {
    const history = this.state.history.slice(0, this.state.historyIdx + 1);
    const currentBoard = history[this.state.historyIdx];
    // 先判斷一下對局是否結(jié)束 結(jié)束的話就不能繼續(xù)落棋
    // 當前格子有棋子的話也不能落棋
    if (
      calcWinner(currentBoard.squares) ||
      currentBoard.squares[squareIdx].squareContent !== null
    )
      return;

    const squares = currentBoard.squares.slice();
    squares[squareIdx].squareContent = currentBoard.nextPlayer;
    this.setState({
      history: history.concat([
        {
          squares,
          statusMsg: currentBoard.statusMsg,
          nextPlayer: this.togglePlayer(),
        },
      ]),
      historyIdx: history.length,
    });
  }

  jumpTo(historyIdx: number) {
    this.setState({
      historyIdx,
    });
  }

  render(): React.ReactNode {
    const history = this.state.history;
    const currentBoard = history[this.state.historyIdx];
    const { nextPlayer } = currentBoard;
    const winner = calcWinner(currentBoard.squares);
    let boardStatusMsg: string;

    if (winner !== null) {
      boardStatusMsg = `Winner is ${winner}!`;
    } else {
      boardStatusMsg = `Next player: ${nextPlayer}`;
    }

    const historyItems = history.map((_, idx) => {
      const desc = idx ? `Go to #${idx}` : `Go to game start`;
      return (
        <li key={idx}>
          <button className="history-item" onClick={() => this.jumpTo(idx)}>
            {desc}
          </button>
        </li>
      );
    });

    return (
      <div className="game">
        <div className="game-board">
          <Board
            squares={currentBoard.squares}
            statusMsg={boardStatusMsg}
            nextPlayer={nextPlayer}
            fillSquare={(squareIdx: number) => this.fillSquare(squareIdx)}
          />
        </div>
        <div className="divider"></div>
        <div className="game-info">
          <h1>History</h1>
          <ol>{historyItems}</ol>
        </div>
      </div>
    );
  }
}

const calcWinner = (squares: Squares): Player | null => {
  // 贏的時候的棋局情況
  const winnerCase = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];

  for (let i = 0; i < winnerCase.length; i++) {
    const [a, b, c] = winnerCase[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a].squareContent as Player;
    }
  }

  return null;
};