Closed ps2-controller closed 6 months ago
Hi! I've opened PR with fix. For a temporary solution you can use customPieces
prop and for each piece either render <svg>
with display:block;
style or an <img>
Thanks! The workaround gets the job done! I downloaded all the images and used them as follows:
import WP from 'assets/pieces/wP.png'
import WR from 'assets/pieces/wR.png'
etc
customPieces={{
wP: () => <img src={WP} alt="White Pawn" style={{display: 'block'}} />,
wR: () => <img src={WR} alt="White Rook" style={{display: 'block'}} />,
wN: () => <img src={WN} alt="White Knight" style={{display: 'block'}} />,
wB: () => <img src={WB} alt="White Bishop" style={{display: 'block'}} />,
wQ: () => <img src={WQ} alt="White Queen" style={{display: 'block'}} />,
wK: () => <img src={WK} alt="White King" style={{display: 'block'}} />,
bP: () => <img src={BP} alt="Black Pawn" style={{display: 'block'}} />,
bR: () => <img src={BR} alt="Black Rook" style={{display: 'block'}} />,
bN: () => <img src={BN} alt="Black Knight" style={{display: 'block'}} />,
bB: () => <img src={BB} alt="Black Bishop" style={{display: 'block'}} />,
bQ: () => <img src={BQ} alt="Black Queen" style={{display: 'block'}} />,
bK: () => <img src={BK} alt="Black King" style={{display: 'block'}} />,
}}
I'll keep an eye out for the merged fix!
Hi - thanks so much for building this library! I'm a big fan. I've been running into an issue; I show small boards on a card that a user can click into, so for some screen sizes, the board is about 100px wide. It appears that with this library, the pieces skew slighly downward, so they fall into the wrong square at this board size.
Here's a reference repo to easily reproduce the issue: https://github.com/ps2-controller/r-piece-issue
And a screenshot - where you can see how the pieces render on different board sizes.