Ticket 78: Chessground

This page collects information about Chessground and the changes that are necessary to use in the future Chessground instead of chessboard.js.

Advantages

• Minified version is only 30 KB
• No dependency to any other library (but will use chess.js for logic).
• Excellent support by the community, very active.

TODOs

Here is a first list of things to do:

• Configuration of Chessground is similar to chessboard.js, with some subtle differences
  • Size of div is not relevant, and has to be set programmatically. The default size seems to be 300px.
  • Pieces and board are set by using classes in the surrounding divs (it is ok to use the div itself).
• There are many features included automatically, that can be used: marking with circles and arrows, ...
• The whole drag and drop functionality is already done, and there are some examples available, how to support chess rules by using chess.js and configuration parameter movable.
• Chessground has no dependency at all, so there is a chance to get rid of jQuery all together.

Configuration

The files api.ts, config.ts and state.ts show how to use the board. Additional with the examples, it should be easy to find for each current functionality a replacement. Edit mode will be a little bit more difficult, but doable.

Current mapping is:

• showNotation ==> coordinates (boolean)
• pieceStyle ==> set as class of the div
• theme ==> set as class of the div
• width ==> width (e.g. '400px', default ~ '320px')
• orientation ==> orientation (default 'white', or 'black')
• position ==> fen (default 'start')
• boardSize ?? Should set the size of the board, but does not work as expected.

Configuration sizes: goal

We have some different sizes at the end:

• The whole div, formerly set by setting the div in the HTML code. Now parameter width.
• The board width and height, set by boardSize.
• The moves width, set by movesWidth.
• The moves height, set by movesHeight. Only relevant, if as layout we have left or right, so the moves height defines if to scroll. If not set, takes the space needed.

Those may depend on the mode to use:

• board: boardSize, synonym to width
• view: all combinations possible
• edit: see view
• print: boards are inlined, so the board should not be wider than the moves.

jQuery

This came from chessboard.js, and I have used some functionality in it.

• pgn.js
  • $.ajax: to read PGN data from file / URL. (see https://www.w3schools.com/xml/ajax_intro.asp as introduction, and easy to use example)
  • $.each: to iterate over an array. (Found an implementation in i18n, that could be used here as well as replacement)
• pgnv.js
  • $.each as above ==> replaced by underscore (should be eliminated all together)
  • $.isEmptyObject: Could be replaced easily ==> replacement from underscore
  • $.i18n: Should come from the same library, and should be usable without that. ==> works without jQuery, inclusion of locale files is strange (and performance is not goog)
  • $('script[src*=pgnvjs]'): Complex query to find the location of the library. ==> no replacement yet, removed it, but leads to strange results elsewhere.
  • lookup of objects with ID: replace by document.getElementById or document.querySelector
  • A lot in the pgnEdit part: comments, NAGs, adding / removing classes, ... All could be done, but is work to do. ==> this is the biggest obstacle at the moment.
• jquery.multiselect.js Used for the NAGs, could be replaced. ==> How about a popup, that contains all options in a 2-dim space (like lichess.org in its study)? Works there well, and we could include some logic as well. So we don't should use a different library
• jquery.timer.js For the playing animation. Could be adapted to have no dependency to jQuery at all. ==> Found a replacement
• jquery.visible.js, jquery.hotkeys.js Not used any more.