events.endTurn() doesn't work with multiplayer: local

[peelin]

I'm trying to get Local Master multiplayer working, looking at

https://boardgame.io/#/multiplayer

In the version in the codesandbox,

• the onClick handler for the TicTacToeBoard is onClick(id) { if (this.isActive(id)) { this.props.moves.clickCell(id); } }
• and we have set flow: { movesPerTurn: 1, ... } so that the framework knows to end the turn after every move.

This works as expected, you can play as both players by alternating between the first client and the second client.

However, if we modify the code as follows, to match with the beginning tutorial at https://boardgame.io/#/tutorial:

• Adding an explicit endTurn() to the click handler: onClick(id) { if (this.isActive(id)) { this.props.moves.clickCell(id); this.props.events.endTurn(); } }
• Removing the movesPerTurn property from flow,

then the game stops working. Clicking on the first client results in error: ERROR: invalid stateID, was=[1], expected=[0] and it seems as the turn doesn't end.

Shouldn't both methods work?

Note: If we run without local multiplayer mode by using const App = Client({ game: TicTacToe, board: TicTacToeBoard, }); export default App;

Then everything works fine.

[nicolodavis]

Thanks for the report.

This is due to a race condition where the client is not seeing the new game state between the move and the end turn event. I'll take a closer look soon.

[nicolodavis]

A workaround for now (until this gets fixed) would be to wrap the endTurn in a setTimeout like this:

onClick(id) {
  this.props.move.clickCell(id);
  setTimeout(() => this.props.events.endTurn(), 0);
}

[nicolodavis]

Fixed in v0.31.5.

Can you upgrade and try?