fatec_ipi_tarde_pdm_jogo_da_velha

fatec_ipi_tarde_pdm_jogo_da_velha.markdown

fatec_ipi_tarde_pdm_jogo_da_velha

A Pen by Aline Soares da Silva on CodePen.

License.

index.html

<div id="root"></div>

script.babel

class Jogo extends React.Component{
  render(){
    return (
      <div className="game">
        <div className="game-board">
          <Tabuleiro/>
        </div>
        <div className="game-info">
          <ol>{"Movimentos"}</ol>
        </div>
      </div>
    );
  }
}

class Tabuleiro extends React.Component {
  constructor (props){
    super (props);
    this.state = {
      quadrados: Array(9).fill(null),
      xIsNext: true
    };
  }
  render(){
    const vencedor = calculateWinner(this.state.quadrados);
    let status;
    if(vencedor){
      status = 'Vencedor:' + vencedor;
    }
    else{
      status = 'Jogador: ' + (this.state.xIsNext ? 'X' : 'O');
    }
    //const status = 'jogador: ' + (this.state.xIsNext ? 'X' : 'O');
    return(
      
      <div>
        <div className="status">{status}</div>
        
        <div className="board-row">
          {this.renderizarQuadrado(0)}
          {this.renderizarQuadrado(1)}
          {this.renderizarQuadrado(2)}
        </div>
        <div className="board-row">
          {this.renderizarQuadrado(3)}
          {this.renderizarQuadrado(4)}
          {this.renderizarQuadrado(5)}
        </div>
        <div className="board-row">
          {this.renderizarQuadrado(6)}
          {this.renderizarQuadrado(7)}
          {this.renderizarQuadrado(8)}
        </div>
      </div>
    );  
  }
  renderizarQuadrado (i){
     return (
      <Quadrado 
        value={this.state.quadrados[i]}
        onClick={() => this.handleClick(i)}
       />
     );
   }
  
  handleClick (i){
    const quadrados = this.state.quadrados.slice();
    if(calculateWinner(quadrados)){
      alert("Jogo acabou");
      return;
    }
    if (quadrados[i]){   
      alert ('Posição ocupada') 
      return;
    }
    quadrados[i] = this.state.xIsNext ? 'X':'O';
    this.setState({quadrados:quadrados, xIsNext: !this.state.xIsNext});
  }
}

class Quadrado extends React.Component{
  /*constructor (props){
    super(props);
    this.state = {
      value: null
    };
  }*/
  render(){
    return (
      <button
        className="square"
        onClick={() => {this.props.onClick()}}
       >
        {this.props.value}
      </button>
    );
  }
}

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 Quadrado (props){
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}
*/
ReactDOM.render(
  <Jogo />,
  document.getElementById('root')
);
/*
ReactDOM.render( 
  <Tabuleiro quadrados={Array(9).fill().map((value, pos) => pos)} />,
  document.getElementById("root")
);
*/

/*ReactDOM.render(
  <Quadrado 
     onClick={ () => {
      alert('Clicou !');
    }}
    value={ 2 + 2 }
   />,
  document.getElementById("root")
);
*/

scripts

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

style.css

.square {
  background: #fff;
  border: 1px solid #999;
  font-size: 24px;
  float: left;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  width: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
}

.board-row:after {
  clear: both;
  content: "";
  display: block;
}

.game{
  display: flex;
  flex-direction: row;
}
.game-info{
  margin-left: 20px;
}