feat: ability to add pieces from outside the board

[Manukyanq]

DEMO:

https://github.com/Clariity/react-chessboard/assets/42891870/530636cf-3ea1-4244-9454-51885ac3f372

Things TO DO:

• [ ] Discuss and agree new archtecture, components and props
• [ ] Actualize documentation

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-chessboard	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 24, 2023 2:52pm

[Clariity]

looking good, with some clean up I don't see any reason why we couldn't add this

however it may be beneficial to export the spare pieces as components, as well as a context provider to wrap everything in, so that they can place the spare pieces where they wish, not sure how that will be accomplished however

[LalaSimon]

Hi! When can we expect to merge this function into a code? Would be a crucial into my project 🙏

[Manukyanq]

Hi! When can we expect to merge this function into a code? Would be a crucial into my project 🙏

Hi, currently it is on pause, but I will try my best on this weekends to make this PR alive again and try to release this feature with basic functionality and ability to improve it gradually.

[Manukyanq]

Ok, I couldn't found nothing better than the structure like this for fully customizable board editor. The current structure I suggest to looks like:

  import {ChessboardDnDProvider, ChessBoard, SparePiece } from 'react-chessboard'

  <ChessboardDnDProvider> // here we can pass optional react-dnd props 
      <SparePiece piece='wQ' dndId='exact-same-id'/>
      <SparePiece piece='bQ' dndId='exact-same-id'/>
      <ChessBoard 
          id='exact-same-id'
          position={'START'}
          onSparePieceDrop={(piece, targetSquare)=>console.log({piece, targetSquare})}
          dropOffBoardAction="trash"
      />
  </ChessboardDnDProvider>

This structure is beneficial, because it allows to place spare pieces anywhere the users want, and luckuly they should not care about react-dnd settings at all, but for me the usecase looks still complicated. But here are some questions to consider:

1. How to manage custom pieces? Is it ok to duplicate their JSX's both in SparePiece components and ChessBoard?
2. Probably SparePiece components outside the board should have access to ChessBoard actual boardWidth size, how to acieve this? I've made onBoardChange event listener, but it looks ugly
3. Maybe it will be more practical to create and import SparePieceSet component instead of SparePiece?

Looking forward for your feedback and thoughts. @Clariity @LalaSimon

[LalaSimon]

Hey @Manukyanq, thank you for taggin me right there! I think you did great job, still i got some questions that maybe will give you some ideas in future.

Is there any function/method/way to return us a fen position after setting up a position with SparePices? Or maybe should we on onSparePieceDrop to manage our chess logic (chess.js in my scenario) return something like

chess.put({type: piece.length[-1], color: piece.length[0]}, targetSquare)

According to docs in chess.js we can use shorthand it, thats why i considering using index'es from piece string length as we can declare as w or b as white and black, and also put first letter of piece. What do you think?

[Manukyanq]

@LalaSimon Please look at onSparePieceDrop realisation, I think its what you are asking for:

https://github.com/Clariity/react-chessboard/pull/88/files#diff-9248df83add55acf7fd02bae20bbed94bdff0987045464d8d0cafe30b27504afR1083

Also it's possible to add much more listeners, like onSparePieceDragStart, onSparePieceDrag, onSparePieceDragEnd, onSparePieceClick, onSparePieceRightClick ...

but for me it make sense to add them in the future by users demand.

[LalaSimon]

@Manukyanq Oh, my bad. I should check the commit and code instead of reading only that what u posted here in comment section. You really created what i also had in my mind. Great job! Should i use your forked repo for this to start using it or it would be better to wait for merge?

[Manukyanq]

Feel free to use the build of my fork for a while, this feature still needs stabilisation before merging and approve from Ryan. (IDK how much time it will require)

[Manukyanq]

@Clariity can we somehow mark this feature like BETA, and release it with warning that things and props may change in the future? It will be super useful to get other developers chance to work with this feature and collect some feedback. For the current moment I don't know what to do with this feature

[tempestshad0w]

I think this function is essential for a chessboard. I hope it to be merged to the react-chessboard soon.

[AlexLee09]

Hello, I'm looking to use this in an AI chess application I'm developing. Have there been any updates? Is this a feature that is ready for production?