React Tutorial

board.js

import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

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 squares[a];
      }
    }
    return null;
  }

function calculateDraw(squares) {
    return squares.map(x => x != null).every(x => x === true)
  }

function setStatusFromSquare(squares, nextPlayer, setStatus) {
    var winner = calculateWinner(squares)

    if (winner) {
        setStatus(`Winner: ${winner}`);
    } else if (calculateDraw(squares)) {
        setStatus(`Draw`);
    } else {
        setStatus(`Next player: ${nextPlayer}`)
    }
}


function Square (props) {
    return (
        <button className="square" onClick={props.onClick}>
            {props.value}
        </button>
    )
} 

function Board (props) {

    const length = props.history.length

    function renderSquare(i) {
        return (
            <Square
              value={props.history[length - 1][i]}
              onClick={() => nextPlayer(i)}
            />
          );
    }

    function nextPlayer(i) {
        const squares = props.history[length - 1].slice();
        var winner = calculateWinner(props.history[length - 1])

        if (squares[i] || winner) {
            return
        }
        squares[i] = (length + 1) % 2 === 0 ? 'X' : "Y";
        props.onClick(squares)
    }

    return (
        <div>
            <div className="status">{props.status}</div>
            <div className="board-row">
            {renderSquare(0)}
            {renderSquare(1)}
            {renderSquare(2)}
            </div>
            <div className="board-row">
            {renderSquare(3)}
            {renderSquare(4)}
            {renderSquare(5)}
            </div>
            <div className="board-row">
            {renderSquare(6)}
            {renderSquare(7)}
            {renderSquare(8)}
            </div>
        </div>
    )
}

function Game (props) {

    const [history, setHistory] = useState([Array(9).fill(null)])
    const [status, setStatus] = React.useState('Next player: X');

    function setHistoryBoard(newHistory){
        const step = newHistory.length - 1;
        const nextPlayer = step % 2 === 0 ? 'X' : "Y";
        setStatusFromSquare(newHistory[step], nextPlayer, setStatus)
        setHistory(newHistory)
    }

    function onClick(board) {
        history.push(board)
        const newHistory = history.slice()
        setHistoryBoard(newHistory)
    }

    function goBackToStep(step) {
        const newHistory = history.slice(0,step)
        setHistoryBoard(newHistory)
    }

    const moves = history.map((_, step) => {
        if (step) {
            return (
                <li>
                    <button id={step} onClick={() => goBackToStep(step)}> Go back to step {step} </button>
                </li>
            )  
        }
    })

    console.log(moves)
    

    return (
        <div className="game">
            <div className="game-board">
                <Board history={history} onClick={onClick} status={status}/>
            </div>
            <div className="game-info">
            <ol>{moves}</ol>
            </div>
        </div>
    );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Game />);