Clariity / react-chessboard

The React Chessboard Library used at ChessOpenings.co.uk. Inspired and adapted from the unmaintained Chessboard.jsx.
https://react-chessboard.vercel.app
MIT License
356 stars 107 forks source link

Bug: Pieces land below the square on small boards #136

Closed ps2-controller closed 6 months ago

ps2-controller commented 7 months ago

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.

Screen Shot 2024-04-12 at 3 10 16 PM
Manukyanq commented 7 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>

ps2-controller commented 7 months ago

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!