[react] 버튼 두번 누르면 1씩 증가하는 코드 만들기 Game4.js

카운트 a 

카운트 b

버튼 각각 누르고 Count를 클릭하면 1씩 증가하는 코드 만들기.

 

import React, {useState} from 'react';

import Board3 from './Board3';

import calculateWinner from './calculateWinner';

import '../App.css';

function Game4 (props) {

    const [history, setHistory] = useState([{

        squares : Array(9).fill(null)}]);

    const [stepNumber, setStepnumber] = useState(0);

    const [xIsNext, setXIsnext] = useState(true);

    const boardSize = 6;

    // let aPlayer = 0;

    // let bPlayer = 0;

    let aPlayer = 0;

    let bPlayer = 0;

    let [PB, setPB] = useState('')

    let [countA, setCountA] = useState(0)

    let [countB, setCountB] = useState(0)

    const PlusButton = () => {

        if (PB === 'A') {

            setCountA(countA += 1)

        } else {

            setCountB(countB += 1)

        }

    }

    const handleClick = (i) => {

      const historycopy = history.slice(0, stepNumber + 1);

      const current = historycopy[historycopy.length - 1];

      const squares = current.squares.slice();

        if (xIsNext) {

            aPlayer += 1;

        } else {

            bPlayer += 1;

        }

        if (calculateWinner(squares, boardSize) || squares[i]) {

            return;

        }

        squares[i] = xIsNext ? "X" : "O";

        setHistory(historycopy.concat([{squares: squares}]));

        setXIsnext(!xIsNext);

        setStepnumber(history.length);

    }

    const jumpTo = (step) => {

        setStepnumber(step);

        setXIsnext((step % 2) === 0);

  }

    const current = history[stepNumber];

    const winner = calculateWinner(current.squares, boardSize);

    const count = 9-history.length

    const moves = history.map((step, move) => {

      const desc = move ?

        'Go to move #' + move :

        'Go to game start';

      return (

        <li key={move}>

          <button onClick={() => jumpTo(move)}>{desc}</button>

        </li>

      );

    });

    let status;

    if (winner) {

      status = 'Winner' + winner;

    } else {

      status = 'Next player: ' + (xIsNext ? 'X' : 'O');

    }

    return (

      <div className="game">

        <div className="game-board">

          <Board3

          squares={current.squares}

          onClick={i => handleClick(i)}

          size={boardSize}

          count = {count}

        //   countsA={countA}

        //   countsB={countB}

          />

        </div>

        <div className="game-info">

          <div>{status}</div>

          <ol>{moves}</ol>

        </div>

        <div className='game-score'>

          <table>

            <thead>

            <tr><td>X</td><td>O</td></tr>

            </thead>

            <tbody>

            <tr><td>{aPlayer}</td><td>{bPlayer}</td></tr>

            </tbody>

          </table>

        </div>

        <div>

            <div>

          <button onClick={()=>setPB(PB = 'A')}>A Plus</button>

          <button onClick={()=>setPB(PB = 'B')}>B Plus</button>

          <div></div>

          <button onClick={()=>PlusButton()}>Count</button>

          <button onClick={()=>PlusButton()}>Count</button>

          <h1>A: {countA}    B: {countB}</h1>

          </div>

        </div>

      </div>

    );

  }

  export default Game4;