changing only piece type does not update completely

[attogram]

Hi, I'm having fun integrating chessboardjsx, but came upon an issue.

When a position includes only changes to the piece type, then the board is not completely updated.

position={{ a1: 'wQ' }} ...then... position={{ a1: 'bQ' }}

For live example, try playing: https://attogram.github.io/EightQueens/ and view the developer console. A click places a wQ. If any piece is under attack, then it is changed to (customized) bQ. The new 'correct' position is being sent into <Chessboard>, but changes to existing pieces do not take effect.

code at: https://github.com/attogram/EightQueens

Any ideas? Thanks!

[willb335]

Could you try setting the undo prop to true?

[attogram]

Sure. Released v0.0.11 with <Chessboard undo={true} ... />

Try https://attogram.github.io/EightQueens/ again. (If you don't see v0.0.11, then may have to close/restart browser session to reset webworker cache)

But, still have same issue. Existing piece is not being updated.

[attogram]

example of issue, with react dev console:

[willb335]

Could you try unmounting and mounting a new board on each piece addition? I don't think there will be noticeable performance implications.

[attogram]

Could you try unmounting and mounting a new board on each piece addition? I don't think there will be noticeable performance implications.

✔️ It works! Unmounting and remounting forces the the chessboard to update.

See v0.0.12 now on https://attogram.github.io/EightQueens/

[slig]

Hi all,

I believe that you can just change the Chessboard component's key and it should work without having to mount/unmount manually (React will do that for you). Like so:

<Chessboard
  id="EightQueens"
  position={this.state.position}
  key={this.state.position}
  ....
  />

Edit: should work only if you're passing the FEN position as a string.

[attogram]

Just using key= would be cleaner, indeed.

But code is passing in a position object, not FEN. I tried a test anyways, adding key={this.state.position}, both with undo={true} and undo={false}. Both gave the same issue of not updating existing pieces.

Would be possible to convert the local position object into fen for rendering, possibly....

[attogram]

and....... ✔️ it works. Using FEN string in position and key props forces a refresh, with no need for undo={true} or remounting.

I couldn't figure out how to access objToFen() via chessboardjsx import, so I just copied helpers.js into the EightQueens project. Is there a better way?

Version 0.1.0 now online https://attogram.github.io/EightQueens/

[willb335]

so I just copied helpers.js

Smart, yeah, that's the best way. Glad you found it and it's working!

[attogram]

Thanks for the help. I've added you both to the EightQueens all-contributors list.

Closing ticket.