SHARE
TWEET

Untitled

a guest Apr 25th, 2019 80 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function Square(props) {
  2.   return (
  3.     <button className="square" onClick={props.onClick}>
  4.       {props.value}
  5.     </button>
  6.   );
  7. }
  8.  
  9. //---------------- Board Component ------------------
  10. class Board extends React.Component {
  11.   renderSquare(i) {
  12.     return (
  13.          <Square
  14.           value={this.props.squares[i]}
  15.           onClick={() => this.props.onClick(i)}
  16.           />
  17.     );
  18.   }
  19.  
  20. render() {    
  21.   return (
  22.     <div className="board">
  23.     {
  24.       [1,2,3].map( (x) => {
  25.        return <div key={x} className="board-row">
  26.           {
  27.             [1*(x+1),2*(x+2),3*(x+3)].map( (y) => {
  28.                 return this.renderSquare(y);                            
  29.             })
  30.           }
  31.           </div>
  32.       })
  33.     }
  34.     </div>
  35.   )
  36. }
  37. }
  38.  
  39.  
  40. class Game extends React.Component {
  41.   constructor(props) {
  42.       super (props);
  43.       this.state = {
  44.           history: [{
  45.               squares: Array(9).fill(null),
  46.           }],
  47.           stepNumber: 0,
  48.           xIsNext: true
  49.       };
  50.   }
  51.  
  52.   //----------------------History Component---------------------
  53.   handleClick(i)  {
  54.     console.log("does this do anything?")
  55.       const history = this.state.history.slice(0, this.state.stepNumber +1);
  56.       const current = history[history.length - 1];
  57.       const squares = current.squares.slice();
  58.       // Calls a copy of squares array to modify
  59.       if(calculateWinner(squares) || squares[i]) {
  60.           return;
  61.       }
  62.       // Returns early by ignoring click if there is a winner or            square is filled.  
  63.       squares[i] = this.state.xIsNext ? 'X' : 'O';
  64.       this.setState({
  65.           history: history.concat([{
  66.               squares: squares
  67.             }]),
  68.           stepNumber: history.length,
  69.           xIsNext: !this.state.xIsNext,
  70.       });
  71.   }
  72.  
  73.   jumpTo(step) {
  74.       this.setState({
  75.           stepNumber:step,
  76.           xIsNext: (step % 2) === 0,
  77.       });
  78.   }
  79.  
  80.   render() {
  81.       const history = this.state.history;
  82.       const current = history[this.state.stepNumber];
  83.       const winner = calculateWinner(current.squares);
  84.  
  85.       const moves= history.map((step, move) => {
  86.           const desc = move ?
  87.           'go to move #' + move:
  88.           'Go to game start';
  89.           return (
  90.               <li key={move}>
  91.                   <button onClick={() => this.jumpTo(move)}>{desc}</button>
  92.               </li>
  93.           );
  94.       });
  95.  
  96.       let status;
  97.       if (winner) {
  98.         status = 'Winner: ' + winner;
  99.       } else {
  100.         status = 'Next player: ' + (this.state.xIsNext ? 'X' :              'O');
  101.       }
  102.  
  103.     return (
  104.       <div className="game">
  105.         <div className="game-board">
  106.           <Board
  107.           squares={current.squares}
  108.           onClick={(i) => this.handleClick(i)}/>
  109.         </div>
  110.         <div className="game-info">
  111.           <div>{status}</div>
  112.           <ol>{moves}</ol>
  113.         </div>
  114.       </div>
  115.     );
  116.   }
  117. }
  118.  
  119. // ========================================
  120.  
  121. ReactDOM.render(
  122.   <Game />,
  123.   document.getElementById('root')
  124. );
  125.  
  126. function calculateWinner(squares) {
  127.   const lines = [
  128.     [0, 1, 2],
  129.     [3, 4, 5],
  130.     [6, 7, 8],
  131.     [0, 3, 6],
  132.     [1, 4, 7],
  133.     [2, 5, 8],
  134.     [0, 4, 8],
  135.     [2, 4, 6],
  136.   ];
  137.   for (let i = 0; i < lines.length; i++) {
  138.     const [a, b, c] = lines[i];
  139.     if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
  140.       return squares[a];
  141.     }
  142.   }
  143.   return null;
  144. }
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