React公式チュートリアルの三目並べを改造する

export default function Game() {
 // 中略
  const moves = history.map((squares, move) => {
    if (move === currentMove) { // 追加したコード
      return <li key={move}>You are at move #{currentMove}</li>;
    }
    let description;
    if (move > 0) {
      description = "Go to move #" + move;
    } else {
      description = "Go to game start";
    }
    return (
      <li key={move}>
        <button onClick={() => jumpTo(move)}>{description}</button>
      </li>
    );
  });

      {[...Array(3)].map((_, i) => (
        <div className="board-row" key={i}>
          {[...Array(3)].map((_, j) => {
            const index = i * 3 + j;
            return (
              <Square
                key={index}
                value={squares[index]}
                onSquareClick={() => {
                  handleClick(index);
                }}
              />
            );
          })}
        </div>
      ))}

export default function Game() {
// 中略
  const [ascendingOrder, setAscendingOrder] = useState(true); // 昇順/降順の状態を保持するstate
// 中略
  function toggleOrder() { // 昇順・降順の状態を切り替える関数
    setAscendingOrder(!ascendingOrder);
  }
// 中略
  if (!ascendingOrder) { // 降順ならmovesの順番を反転させる
    moves = moves.reverse(); 
  }
// 中略
  return (
    <div className="game">
      <div className="game-board">
        <Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay} />
      </div>
      <div className="game-info">
        <div>
          <button onClick={toggleOrder}> // ボタンクリック時に昇順/降順を切り替える
            {ascendingOrder ? "Descending Order" : "Ascending Order"} // 昇順ならボタンには「降順」と表示する
          </button>
        </div>
        <ol reversed={!ascendingOrder}>{moves}</ol> // olタグの順番も反転させる
      </div>
    </div>
  );
}

function Square({ value, onSquareClick, isWinnerSquare }) { // isWinnerSquareを追加
  return (
    <button
      className={`square ${isWinnerSquare ? "winner" : ""}`} // 勝利マスにのみwinnerのスタイルを当てる
      onClick={onSquareClick}
    >
      {value}
    </button>
  );
}

.winner {
    /* 勝利につながったマス目のスタイルを定義 */
    background-color: #FF9966; /* オレンジ色の背景色を設定 */
}

function calculateWinner(squares) {
  const lines = [
    [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 < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return { winner: squares[a], line: lines[i] }; // winnerだけでなくそのときのlineも返すようにする
    }
  }
  return { winner: null, line: null }; // 勝敗が未決のときはどちらもnull
}

function Board({ xIsNext, squares, onPlay }) {
  const { winner, line } = calculateWinner(squares);
// 中略
  function handleClick(i) {
    if (winner || squares[i] ) { // calculateWinner(squares) をwinnerに変更
      return;
    }
    const nextSquares = squares.slice();
    if (xIsNext) {
      nextSquares[i] = "X";
    } else {
      nextSquares[i] = "O";
    }
    onPlay(nextSquares);
  }

// マス目をレンダーする関数
  function renderSquare(i) {
    const isWinnerSquare = winner && line && line.includes(i); // 勝利マスに該当するか
    return (
      <Square
        key={i}
        value={squares[i]}
        onSquareClick={() => handleClick(i)}
        isWinnerSquare={isWinnerSquare} // 勝利マスならtrueにする
      />
    );
  }

return (
    <>
      <div className="status">{status}</div>
      {[...Array(3)].map((_, i) => (
        <div className="board-row" key={i}>
          {[...Array(3)].map((_, j) => {
            const index = i * 3 + j;
            return renderSquare(index); // 関数に変更
          })}
        </div>
      ))}
    </>
  );
}

function Board({ xIsNext, squares, onPlay, isDraw }) { // isDrawを追加
  const { winner, line } = calculateWinner(squares);
  let status;
  if (isDraw) { // もし引き分けになったらDrawと表示する
    status = "Draw";
  } else if (winner) {
    status = "Winner: " + winner;
  } else {
    status = "Next player: " + (xIsNext ? "x" : "o");
  }

export default function Game() {
// 中略
// 最大手番で、かつ勝者が決まっていない場合に引き分けとする
  const isDraw = currentMove === 9 && !calculateWinner(currentSquares).winner;

  let moves = history.map((squares, move) => {
    let description;
    if (move > 0) { // 最初の手番だと直前の盤面が存在していないため差分を計算できない
      const clickedSquare = squares.findIndex(
        (value, index) => value !== history[move - 1][index] // 1つ前の手番の盤面と一致しないマスのindexを取得する
      );
      const row = Math.floor(clickedSquare / 3) + 1; // 列数で割った商+1
      const col = (clickedSquare % 3) + 1; // 列数で割った余り+1
      description =
        move === currentMove // 現在の着手かでメッセージを分岐
          ? `You are at move #${currentMove} (row: ${row}, col: ${col})`
          : `Go to move #${move} (row: ${row}, col: ${col})`;
    } else { // 最初の手番の場合
      description = "Go to game start";
    }
    return (
      <li key={move}>
        {move === currentMove ? ( // 現在の着手かでボタンかメッセージかの表示を分岐
          <span>{description}</span>
        ) : (
          <button onClick={() => jumpTo(move)}>{description}</button>
        )}
      </li>
    );
  });

function Square({ value, onSquareClick, isWinnerSquare, isCurrentSquare }) {
  return (
    <button
      className={`square ${isWinnerSquare ? "winner" : ""} ${
        !isWinnerSquare && isCurrentSquare ? "current" : "" // 勝利時でなく、最新の着手であればスタイル適用
      }`}
      onClick={onSquareClick}
    >
      {value}
    </button>
  );
}

.current {
  background-color: #87dc86; /* 緑色の背景色を設定 */
}

function Board({ xIsNext, squares, onPlay, isDraw, currentMoveIndex }) { // currentMoveIndexを追加
// 中略
  // マス目をレンダーする関数
  function renderSquare(i) {
    const isWinnerSquare = winner && line && line.includes(i);
    const isCurrentSquare = i === currentMoveIndex; // そのマスのインデックスと最新の着手のインデックスが一致しているか
    return (
      <Square
        key={i}
        value={squares[i]}
        onSquareClick={() => handleClick(i)}
        isWinnerSquare={isWinnerSquare}
        isCurrentSquare={isCurrentSquare} // Squareコンポーネントに渡す
      />
    );
  }

export default function Game() {
// 中略
  const currentMoveIndex = currentMove 
    ? history[currentMove].findIndex( // 現在の盤面から条件に合う要素のインデックスを取得する
                (value, index) => value !== history[currentMove - 1][index] // 盤面の各マスを見て、その値が1つ前の盤面の同じマスと一致しない = 最新の着手
      )
    : null; // 着手が無い(前の盤面が存在しない)場合はnull
// 中略
        <Board
          xIsNext={xIsNext}
          squares={currentSquares}
          onPlay={handlePlay}
          isDraw={isDraw}
          currentMoveIndex={currentMoveIndex} // Boardコンポーネントに渡す
        />
// 後略

let moves = history.map((squares, move) => {
    let description;
    if (move > 0) {
      const clickedSquare = squares.findIndex(
        (value, index) => value !== history[move - 1][index]
      );
      const row = Math.floor(clickedSquare / 3) + 1;
      const col = (clickedSquare % 3) + 1;
      description =
        move === currentMove
          ? `You are at move #${currentMove} (row: ${row}, col: ${col})`
          : `Go to move #${move} (row: ${row}, col: ${col})`;
    } else {
      if (currentMove) {
        description = "Go to game start";
      } else { // 着手がまだ存在しない場合(最初の盤面では)
        description = "Now, let's get started";  // プレイスタートの文を表示
      }
    }