[React 도전기] 5x5 Tic Tac Toe(변형)

안녕하세요.

 

지난시간에 말씀드린 것 처럼 오늘은 5x5 게임을 구성해보려고 합니다. 

 

처음에는 3x3을 했으니 5x5를 금방하겠지? 하는 생각에 아무것도 모른채 만지작했는데.. 

 

아직 React의 개념을 몰라서 그런지 조금 헤매게 되었습니다. 하지만 성공 했습니다!

 

아래 코드를 참고 하시면서 봐주세요! 

 

특히 vscode등 다른 에디터를 쓰시는분은 import 부분을 참고 해주세요!

 

/* code adapted from https://reactjs.org/tutorial/tutorial.html */

/* import 코드는 vscode 등 다른 에디터를 사용할 때 사용해주세요. 
작성자는 react 홈페이지에 있는 웹페이지에서 진행해서 환경이 다름을 말씀드립니다. 
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
*/

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

class Board extends React.Component {
  renderSquare(i) {
    return (
      <Square 
        value={this.props.squares[i]}
        onClick ={() => this.props.onClick(i)} 
      />
    );
  }

  render() {
    return (
      <div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
          {this.renderSquare(3)}
          {this.renderSquare(4)}
        </div>
        <div className="board-row">
          {this.renderSquare(5)}
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
          {this.renderSquare(9)}
        </div>
        <div className="board-row">
          {this.renderSquare(10)}
          {this.renderSquare(11)}
          {this.renderSquare(12)}
          {this.renderSquare(13)}
          {this.renderSquare(14)}
        </div>
        <div className="board-row">
          {this.renderSquare(15)}
          {this.renderSquare(16)}
          {this.renderSquare(17)}
          {this.renderSquare(18)}
          {this.renderSquare(19)}
        </div>
        <div className="board-row">
          {this.renderSquare(20)}
          {this.renderSquare(21)}
          {this.renderSquare(22)}
          {this.renderSquare(23)}
          {this.renderSquare(24)}
        </div>
      </div>
    );
  }
}

class Game extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      history: [{
        squares: Array(25).fill(null),
      }],
      stepNumber: 0,
      xTurn: true,
    };
  }

  handleClick(i) {
    const history = this.state.history.slice(0, this.state.stepNumber + 1);
    const current = history[history.length-1];
    const squares = current.squares.slice();
    if (declareWinner(squares) || squares[i]) {
      return;
    }
    squares[i] = this.state.xTurn ? 'X' : 'O';
    this.setState({
      history: history.concat([{
        squares: squares
      }]),
      stepNumber: history.length,
      xTurn: !this.state.xTurn,
    });
  }

  jumpTo(step) {
    this.setState({
      history: [{
        squares: Array(25).fill(null),
      }],
      stepNumber: step,
      xTurn: (step%2) === 0,
    });
  }

  render() {
    const history = this.state.history;
    const current = history[history.length - 1];
    const moves = history.map((step, move) => {
      if (move === 0) {
        return (
          <div key={move}>
            <button onClick={() => this.jumpTo(move)}>{"Reset Game"}</button>
          </div>
        );
      } else {
        return null;
      }
    });

    let status;
    if (declareWinner(current.squares) === 25) {
      status = 'Tie Game! Reset?';
    } else if (declareWinner(current.squares) != null) {
      status = 'Winner: ' + declareWinner(current.squares) + '  ...Play Again?';
    } else {
      status = 'Your turn: ' + (this.state.xTurn ? 'X' : 'O');
    }

    return (
      <div className="game">
        <div className="game-board">
          <Board 
            squares = {current.squares}
            onClick={i => this.handleClick(i)}
          />
        </div>
        <div className="game-info">
          <div>{status}</div>
          <ol>{moves}</ol>
        </div>
      </div>
    );
  }
}

// ========================================

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

function declareWinner(squares) {
  const lines = [
    [0,1,2,3,4],
    [5,6,7,8,9],
    [10,11,12,13,14],
    [15,16,17,18,19],
    [20,21,22,23,24],
    [0,5,10,15,20],
    [1,6,11,16,21],
    [2,7,12,17,22],
    [3,8,13,18,23],
    [4,9,14,19,24],
    [0,6,12,18,24],
    [4,8,12,16,20],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a,b,c,d,e] = lines[i];
    if (squares[a] && 
      squares[a] === squares[b] 
      && squares[a] === squares[c]
      && squares[a] === squares[d]
      && squares[a] === squares[e]) {
      return squares[a];
    } 
  }
  for (let i = 0; i < 25; i++) {
    if (squares[i] === null) {
      return null;
    }
  }
  return 25; //In the case of a tie, return 25
}

 

코드가 많이 길지만 생각보다 많이 어렵진 않습니다!

 

다음은 5x5 3목 포스팅으로 돌아오겠습니다!

 

수고많으셨습니다!