元素，以在棋盘上显示文本。让我们尝试编写代码以满足以下要求。

• 盤面の上に文字を表示するには return 文のどこに

export default function Board() {

  /* 省略 */

  return (
    <>
      <div>ゲームの状況</div>
      <div className="board-row">
        <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
        <Square value={squares[1]} onSquareClick={() => handleClick(1)} />
        <Square value={squares[2]} onSquareClick={() => handleClick(2)} />
      </div>
      <div className="board-row">
        <Square value={squares[3]} onSquareClick={() => handleClick(3)} />
        <Square value={squares[4]} onSquareClick={() => handleClick(4)} />
        <Square value={squares[5]} onSquareClick={() => handleClick(5)} />
      </div>
      <div className="board-row">
        <Square value={squares[6]} onSquareClick={() => handleClick(6)} />
        <Square value={squares[7]} onSquareClick={() => handleClick(7)} />
        <Square value={squares[8]} onSquareClick={() => handleClick(8)} />
      </div>
    </>
  );
}

下面将展示动作结果。现在我们可以在棋盘上显示“游戏状况”的文本。

显示轮到的玩家

通过文本显示当前玩家是“X”还是“O”。

使用第6篇文章中定义的用于管理回合顺序的状态类型变量xIsNext，来获取当前的玩家。该变量表示为true时代表玩家“X”，表示为false时代表玩家“O”。

因此，控制文本（状态变量）如下所示，可以表示正在操作的玩家。

  let status = "プレイヤー: ";

  if (xIsNext) {
    status += "X";
  } else {
    status += "O";
  }

现在让我们对 App.js 中的 Board() 组件进行如下更改。

• 手番を表示するテキストの制御するプログラムを実装する

ゲームの状況を文字列で示す status 変数を宣言する

status 変数の内容を手番 (xIsNext 変数) に応じて更新する

return 文にある

export default function Board() {
  /* 省略 */
  let status = "プレイヤー: ";

  if (xIsNext) {
    status += "X";
  } else {
    status += "O";
  }

  return (
    <>
      <div>{status}</div>

      <div className="board-row">
      /* 省略 */
      </div>
    </>
  );

以下是动作结果。现在，在点击空白格之后，文本将会发生变化。

使用三个条件运算符

以下是关于JavaScript语法的内容。由于不涉及操作结果的更改，可以跳过显示胜者的部分而不会有问题。

我们将之前的代码使用条件（三元）运算符进行简化。首先，我们展示熟悉的if-else语句的语法。

if (条件) {
  真のときに実行する処理;
} else {
  偽のときに実行する処理;
}

如果用条件（三元）运算符来表示这个，那么它的语法将变为下面这样。

条件 ? 真のときに返す値 : 偽のときに返す値;

如果您想查阅更详细的内容，请查看以下参考资料。

因此，我们可以用以下代码来控制显示回合的文字信息。

  let status = "プレイヤー: " + (xIsNext ? "X" : "O");

闲谈一下，据说将代码省略成这样就叫做“快捷方式”。

胜者的展示

为了在游戏结束时能够显示出胜利者，让我们对App.js文件中的Board组件进行以下更改。

• 勝者を示す winner 変数を宣言する

初期値を勝利判定 (calculateWinner() 関数) の結果とする

勝利判定の結果に応じてテキストの内容を変更する

勝者がいる場合は、その印を表示する

「X」が勝ったとき、「勝者: X」
「O」が勝ったとき、「勝者: O」

勝者が決まっていない場合は、次のプレイヤーを表示する

import { useState } from "react";
import "./styles.css";

function Square({ value, onSquareClick }) {
  return (
    <button className="square" onClick={onSquareClick}>
      {value}
    </button>
  );
}

export default function Board() {
  const [squares, setSquares] = useState(Array(9).fill(null));
  const [xIsNext, setXIsNext] = useState(true);

  const winner = calculateWinner(squares);
  let status;

  if (winner) {
    status = "勝者: " + winner;
  } else {
    status = "プレイヤー: " + (xIsNext ? "X" : "O");
  }

  function handleClick(i) {
    if (squares[i]) {
      return;
    }

    const nextSquares = squares.slice();

    if (xIsNext) {
      nextSquares[i] = "X";
    } else {
      nextSquares[i] = "O";
    }
    setSquares(nextSquares);
    setXIsNext(!xIsNext);
  }

  return (
    <>
      <div>{status}</div>
      <div className="board-row">
        <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
        <Square value={squares[1]} onSquareClick={() => handleClick(1)} />
        <Square value={squares[2]} onSquareClick={() => handleClick(2)} />
      </div>
      <div className="board-row">
        <Square value={squares[3]} onSquareClick={() => handleClick(3)} />
        <Square value={squares[4]} onSquareClick={() => handleClick(4)} />
        <Square value={squares[5]} onSquareClick={() => handleClick(5)} />
      </div>
      <div className="board-row">
        <Square value={squares[6]} onSquareClick={() => handleClick(6)} />
        <Square value={squares[7]} onSquareClick={() => handleClick(7)} />
        <Square value={squares[8]} onSquareClick={() => handleClick(8)} />
      </div>
    </>
  );
}

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 = lines[i][0];
    const b = lines[i][1];
    const c = lines[i][2];

    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

下面将展示动作的结果。这样，不仅可以显示操作玩家，还可以显示获胜者。

这样游戏系统就完成了！

最后

这次我们实现了一个用于显示游戏状态的文本。通过这个功能，井字游戏的主要功能已经完成了！辛苦了。下一页将展示源代码文件。

从下一次开始，我们将逐步添加时间旅行功能到游戏中。