SHARE
TWEET

Untitled

a guest Oct 21st, 2019 57 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import './index.css';
  4. import { tsConstructorType, arrayExpression } from '@babel/types';
  5.  
  6. function Square(props) {
  7.   return (
  8.     <button className="square" onClick={props.onClick}>
  9.       {props.value}
  10.     </button>
  11.   );
  12. }
  13.  
  14. class Board extends React.Component {
  15.   renderSquare(i) {
  16.     return (
  17.       <Square
  18.         value={this.props.squares[i]}
  19.         onClick={() => this.props.onClick(i)}
  20.       />
  21.     );
  22.   }
  23.  
  24.   render() {
  25.     return (
  26.       <div>
  27.         <div className="board-row">
  28.           {this.renderSquare(0)}
  29.           {this.renderSquare(1)}
  30.           {this.renderSquare(2)}
  31.         </div>
  32.         <div className="board-row">
  33.           {this.renderSquare(3)}
  34.           {this.renderSquare(4)}
  35.           {this.renderSquare(5)}
  36.         </div>
  37.         <div className="board-row">
  38.           {this.renderSquare(6)}
  39.           {this.renderSquare(7)}
  40.           {this.renderSquare(8)}
  41.         </div>
  42.       </div>
  43.     );
  44.   }
  45. }
  46.  
  47. class Game extends React.Component {
  48.   constructor(props) {
  49.     super(props);
  50.     this.state = {
  51.       history: [
  52.         {
  53.           squares: Array(9).fill(null)
  54.         }
  55.       ],
  56.       stepNumber: 0,
  57.       xIsNext: true
  58.     };
  59.   }
  60.  
  61.   handleClick(i) {
  62.     const history = this.state.history.slice(0, this.state.stepNumber + 1);
  63.     const current = history[history.length - 1];
  64.     const squares = current.squares.slice();
  65.     if (calculateWinner(squares) || squares[i]) {
  66.       return;
  67.     }
  68.     squares[i] = this.state.xIsNext ? "X" : "O";
  69.     this.setState({
  70.       history: history.concat([
  71.         {
  72.           squares: squares
  73.         }
  74.       ]),
  75.       stepNumber: history.length,
  76.       xIsNext: !this.state.xIsNext
  77.     });
  78.   }
  79.  
  80.   jumpTo(step) {
  81.     this.setState({
  82.       stepNumber: step,
  83.       xIsNext: (step % 2) === 0
  84.     });
  85.   }
  86.  
  87.   render() {
  88.     const history = this.state.history;
  89.     const current = history[this.state.stepNumber];
  90.     const winner = calculateWinner(current.squares.);
  91.  
  92.     const moves = history.map((step, move) => {
  93.       const desc = move ?
  94.         'Go to move #' + move :
  95.         'Go to game start';
  96.       return (
  97.         <li key={move}>
  98.           <button onClick={() => this.jumpTo(move)}>{desc}</button>
  99.         </li>
  100.       );
  101.     });
  102.  
  103.     let status;
  104.     if (winner) {
  105.       status = "Winner: " + winner;
  106.     } else {
  107.       status = "Next player: " + (this.state.xIsNext ? "X" : "O");
  108.     }
  109.  
  110.     return (
  111.       <div className="game">
  112.         <div className="game-board">
  113.           <Board
  114.             squares={current.squares}
  115.             onClick={i => this.handleClick(i)}
  116.           />
  117.         </div>
  118.         <div className="game-info">
  119.           <div>{status}</div>
  120.           <ol>{moves}</ol>
  121.         </div>
  122.       </div>
  123.     );
  124.   }
  125. }
  126.  
  127. // ========================================
  128.  
  129. ReactDOM.render(<Game />, document.getElementById("root"));
  130.  
  131. function calculateWinner(squares) {
  132.   const lines = [
  133.     [0, 1, 2],
  134.     [3, 4, 5],
  135.     [6, 7, 8],
  136.     [0, 3, 6],
  137.     [1, 4, 7],
  138.     [2, 5, 8],
  139.     [0, 4, 8],
  140.     [2, 4, 6]
  141.   ];
  142.   for (let i = 0; i < lines.length; i++) {
  143.     const [a, b, c] = lines[i];
  144.     if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
  145.       return squares[a];
  146.     }
  147.   }
  148.   return null;
  149. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top