oakmac / chessboardjs

JavaScript chessboard
https://chessboardjs.com
MIT License
2k stars 406 forks source link

Chessboard doesn't fit container completely #242

Open kenneth-venken opened 1 year ago

kenneth-venken commented 1 year ago

I have a container element of width 600px which could support a board with 8 squares of 75px. Yet the board is only 592px wide with squares of 74px.

Looking at the code i noticed...

// calculates square size based on the width of the container
    // got a little CSS black magic here, so let me explain:
    // get the width of the container element (could be anything), reduce by 1 for
    // fudge factor, and then keep reducing until we find an exact mod 8 for
    // our square size
    function calculateSquareSize () {
      var containerWidth = parseInt($container.width(), 10)

      // defensive, prevent infinite loop
      if (!containerWidth || containerWidth <= 0) {
        return 0
      }

      // pad one pixel
      var boardWidth = containerWidth - 1

      while (boardWidth % 8 !== 0 && boardWidth > 0) {
        boardWidth = boardWidth - 1
      }

      return boardWidth / 8
    }

... a fudge factor of 1pixel. Or something like that. Why is this? Wouldn't it be cleaner if the board fits the container completely if possible. Could you please change this behaviour?

daqnal commented 1 year ago

I'm experiencing the same. The slight margin is very noticeable on some sizes. When I make the viewport smaller, the extra margin gradually disappears then reappears once it hits some point, maybe the width of mod 8 from the code above.

img