0

Estou fazendo um jogo da velha em React.js que utiliza o algoritmo Minimax para produzir as jogadas da IA. Esse algoritmo, pelo que vi, está demorando entre 600ms ~ 1000ms para retornar uma jogada nos primeiros estágios do jogo. Esse tempo não seria problema se não fosse pelo fato de que eu não estou conseguindo fazer com que a jogada da IA aconteça depois do click handler que ocorre quando o jogador humano clica em um quadrado para fazer sua jogada. Resultando em o usuário clicando no quadrado e o browser "travando" até o algoritmo terminar.

Board.js

class Board extends React.Component{
    constructor(props){
      super(props);
      this.state ={
        whosTurn: this.props.playerSymbol,
        gameState: new GameState(Array(9).fill(null))
      }
    }

    handleSquareClick(index){
      let board = this.state.gameState.board;

      if(board[index] === null){
        board[index] = this.state.whosTurn;
        this.setState({
          whosTurn: Math.abs(this.state.whosTurn - 1),
          gameState: new GameState(board)
        });
      }
    }

    componentDidUpdate(prevProps, prevState){
      if(this.state.whosTurn !== this.props.playerSymbol){
        // Aqui é a função que "trava" minha execução
        let newGameState = this.state.gameState.minimax();
        this.setState({
          gameState: newGameState
        });
      }
    }

    render(){
      // Renderiza o jogo de acordo com o this.state.gameState
    }
}

Não sei muito de React ainda, mas pelo que eu li na documentação, o método componentDidUpdate() vem depois do render() no ciclo de vida do componente, sendo assim, o click do jogador humano não deveria já ter sido renderizado?

Um exemplo +/- visual:

Vez do jogador humano

Vez do jogador humano

Quando ele clica, um for-loop é acionado para simular o algoritmo pensando. Perceba que o símbolo dele não foi renderizado ainda

Thinking

Ao terminar o loop o simbolo finalmente é renderizado. E vem aquele warning de graça ainda

Done

Agradeço qualquer ajuda possível.

2
  • Podes colocar o código que tens aqui: jsfiddle.net/1ve7gc8e ? Não acho boa ideia usares o componentDidUpdate para fazer nova chamada do algoritmo. Seria melhor uma callback do setState, mas com um jsFidddle seria melhor para perceber como tens agora.
    – Sergio
    Commented 12/05/2017 às 3:06
  • Olá sérgio, estou tendo dificuldades em botar nesse jsFiddle que você passou, mas aqui está o repositório do projeto. Vou pesquisar sobre isso de callback no setState, e aplicarei. Obrigado Commented 13/05/2017 às 12:54

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .