boardSize does not allow CSS units other than pixels

[martinhinrichs]

Hi,

in the API documentation, it says:

boardSize: Size of the board (in CSS terms like '300px')

However, no units other than px seem to be currently supported - '200em', '200%', '200vh' etc are all interpreted as '200px'. Until and unless support for other units is added, the documentation should be changed to reflect this.

Thank you for this library and keep up the good work!

[mliebelt]

Thanks a lot for bringing that to my attention. The reason could be twofold (and I will check that later):

• Does Chessground allow any unit to be used? I will create some examples for that, and prove it.

• The layout algorithm uses fixed units (from my thoughts), so the computation. The line 560 of pgnvjs.js is the reason

   _boardHeight = `${parseInt(_boardHeight) + _fenHeight}px`;

So I will check if it is possible to have the unit used differently, without destroying the layout algorithm.

---

Digging a little deeper, I found 3 parts in the code (at least) that expect the boardSize to be in pixel. 2 have in common (did that functionality twice), that I had / have problems if the board is not a multiple of 8pixels in some browsers. I will just comment that out during development, and see if that brings a kind of solution.

There is of course something not thought about before. When you set boardSize e.g. to 80vh, and later set width to be the same, then you have a problem. So yes, the code is here not the best, and your demand brings that to light :-).

---

Additional remark: the board is currently not able to be resized. When you base the board on the size of the window (80%, 80vh), changing the window size is directly changing the board size, but the pieces are not adjusted. So no, there will no easy way to allow this. This will take some time, but is a valuable goal (which I would like to achieve).

[mliebelt]

I did some more experimentation. Here is the (not final) result. This helps a little bit to understand how much has to be done, when doing the implementation. I will push my results on a branch, so @martinhinrichs should be able to reproduce it.

• The resize of the Chessground board is in principle possible, but has to include a call to redrawAll. :heavy_check_mark: See the resizeBoard function and its binding.
• There are some more sizes related to the size of the board: :x:
  • Font size for the buttons. :heavy_check_mark:
  • Font size of coordinates. :heavy_check_mark:
  • Width of the moves in relation to the size of the board.
• There is the known issue when the board is not a multiple of 8px, which is only a problem for the Chrome-based browsers (which are used by most people :-( ). See the tickets #153 #107 #80 #158 (Caveat: I did not found a ticket that related to the 8px constraint. When doing experiments on Lichess, you see that the board is all the time resized to a multiple of 8px, but I have not found the code that ensured that.) :heavy_check_mark:
  • Idea: compute from the relative size the size in pixel, and calibrate to 8px then. Do that again, when the window is resized.

See the branch ticket-186 for the current state.