Vfrdtyky

I am building a chess engine using react and javascript and I am trying to implement a feature where the engine makes a move after you make your own move. I have a function "change_states" that changes the states of the chess game whenever a user makes a move. I also have a function "engine_move" which makes an engine move on the board based on the current states of the game.

When I call "engine_move" as either a callback for setState, a function in ComponentDidUpdate, or even requestAnimationFrame the "engine_move" function runs before the changes from the "change_state" function are reflected in the browser. This means that the moved piece disappears for as long as the engine_move function is running and then two moves render on the board immediately (the original players move and the engine move). I can't figure out how to get it so the browser repaints in-between the user move and the engine move. Any help would be greatly appreciated. Thanks!

class Chess extends Component {

constructor(props) {

super(props);

this.state = {

  history: [{ position: new Position('white', initialize_engine_board(), [95, 

  25], [1, 1, 1, 1], 0) }],

  drag_end: null,

  promotion:{class:'hidden',start: null, end: null, player: null},

  status:null

  }

}





change_states(history, position, start, end, promotion_piece) {

  let possible_moves = legal_moves(position);

  let move = create_move(start, end, position, promotion_piece);

  let status = null;

  if (is_legal(move, possible_moves)) {

    let new_position = make_move(position, move);

    let new_moves = legal_moves(new_position);



    if (new_moves.length === 0) {

        status = 'Game Over'

    }

    this.setState({

      history: history.concat([{position: new_position}]),

      drag_end: null,

      status: status,

    });

  }

}



engine_move() {

    const history = this.state.history.slice();

    const position = history[history.length - 1].position;

    //Time in milliseconds

    let search_time = 1000;

    let engine_move = alphabeta_search(position,10,search_time).move;



    if (engine_move === null) {

        this.setState({

            status: 'Game Over',

        });

        return;

    }



    let new_position = make_move(position, engine_move);

    this.setState({

      history: history.concat([{position: new_position}]),

      engine_turn: false

    });

  }