feat(ract): show status

react/tic-tac-toe/src/App.tsx

@@ -20,8 +20,16 @@ export default function Board() {
   const [squares, setSquares] = useState<Array<string | null>>(
     Array<string | null>(9).fill(null),
   );
+  const winner = calculateWinner(squares);
+  let status: string;
+  if (winner) {
+    status = "Winner: " + winner;
+  } else {
+    status = "Next player: " + (xIsNext ? "X" : "O");
+  }
+
   const handleClick = (i: number) => {
-    if (squares[i]) {
+    if (squares[i] || !!calculateWinner(squares ?? [])) {
       // 入力済みのマス目をクリックした場合は何もしない
       return;
     }
@@ -37,6 +45,7 @@ export default function Board() {
   };
   return (
     <>
+      <div className="status">{status}</div>
       <div className="board-row">
         <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
         <Square value={squares[1]} onSquareClick={() => handleClick(1)} />
@@ -55,3 +64,23 @@ export default function Board() {
     </>
   );
 }
+
+function calculateWinner(squares: Array<string | null>): string | null {
+  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 squares[a];
+    }
+  }
+  return null;
+}