kokopu-react 1.5.3 → 1.6.0

package/CHANGELOG.md

@@ -1,6 +1,20 @@
 ChangeLog
 =========
 
+1.6.0 (June 1, 2022)
+--------------------
+* Allow block-formatting HTML tags in PGN comments.
+* Provide `formatMove` and `moveFormatter`.
+
+1.5.5 (May 18, 2022)
+--------------------
+* Upgrade dependencies.
+* Remove dependency with security issue.
+
+1.5.4 (May 1, 2022)
+-------------------
+* Provide method `Chessboard#size(..)` to retrieve the width/height of a `Chessboard` component instance.
+
 1.5.3 (April 30, 2022)
 ----------------------
 * Add method `Movetext#focus()`.

package/README.md

@@ -3,7 +3,7 @@ Kokopu-React
 
 <img align="right" width="96" height="96" src="graphics/logo.svg" />
 
-Kokopu-React is a [React](https://reactjs.org/)-based library to create and display chessboard components.
+Kokopu-React is a [React](https://reactjs.org/)-based library to create and display chessboard and chess-related components.
 Kokopu-React is built on top of [Kokopu](https://www.npmjs.com/package/kokopu), a headless library that
 implements all the chess logic (game rules, parsing of [FEN](https://en.wikipedia.org/wiki/Forsyth%E2%80%93Edwards_Notation)
 and [PGN](https://en.wikipedia.org/wiki/Portable_Game_Notation) formats...).

package/dist/lib/ArrowMarkerIcon.js

@@ -27,7 +27,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -37,7 +37,7 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
 var ARROW_THICKNESS_FACTOR = 0.2;
 /**

package/dist/lib/Chessboard.js

@@ -59,7 +59,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
 var TURN_FLAG_SPACING_FACTOR = 0.1;
 var RANK_COORDINATE_WIDTH_FACTOR = 1;
@@ -984,6 +984,46 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
     value: function getArrowTipId(color) {
       return 'kokopu-arrowTip-' + color + '-' + this.arrowTipIdSuffix;
     }
+    /**
+     * Return the size of the chessboard, assuming it is built with the given attributes.
+     *
+     * @param {number} squareSize
+     * @param {boolean} coordinateVisible
+     * @param {{width:number, squareSize:number, coordinateVisible:boolean}[]} smallScreenLimits
+     * @returns {{width:number, height:number}}
+     * @public
+     */
+
+  }], [{
+    key: "size",
+    value: function size(squareSize, coordinateVisible, smallScreenLimits) {
+      // Enforce small-screen limits, if any.
+      if (typeof window !== 'undefined') {
+        var squareSizeLimit = computeSmallScreenLimits('squareSize', smallScreenLimits, window.innerWidth);
+        var coordinateVisibleLimit = computeSmallScreenLimits('coordinateVisible', smallScreenLimits, window.innerWidth);
+
+        if (!isNaN(squareSizeLimit)) {
+          squareSize = (0, _util.sanitizeInteger)(squareSizeLimit, _util.MIN_SQUARE_SIZE, squareSize);
+        }
+
+        coordinateVisible = coordinateVisible && (coordinateVisibleLimit === undefined || coordinateVisibleLimit);
+      } // Compute the dimensions.
+
+
+      var width = 9 * squareSize + Math.round(TURN_FLAG_SPACING_FACTOR * squareSize);
+      var height = 8 * squareSize;
+
+      if (coordinateVisible) {
+        var fontSize = computeCoordinateFontSize(squareSize);
+        width += Math.round(RANK_COORDINATE_WIDTH_FACTOR * fontSize);
+        height += Math.round(FILE_COORDINATE_HEIGHT_FACTOR * fontSize);
+      }
+
+      return {
+        width: width,
+        height: height
+      };
+    }
     /**
      * Return the maximum square size that would allow the chessboard to fit in a rectangle of size `width x height`.
      *
@@ -995,7 +1035,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
      * @public
      */
 
-  }], [{
+  }, {
     key: "adaptSquareSize",
     value: function adaptSquareSize(width, height, coordinateVisible, smallScreenLimits) {
       var maxSquareSize = _util.MAX_SQUARE_SIZE; // Enforce small-screen limits, if any.

package/dist/lib/Movetext.js

@@ -19,9 +19,9 @@ var _Chessboard = _interopRequireDefault(require("./Chessboard"));
 
 var _ErrorBox = _interopRequireDefault(require("./ErrorBox"));
 
-var _i18n = _interopRequireDefault(require("./i18n"));
+var _formatmove = require("./formatmove");
 
-require("./css/fonts.css");
+var _i18n = _interopRequireDefault(require("./i18n"));
 
 require("./css/movetext.css");
 
@@ -49,7 +49,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -59,7 +59,7 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
 /**
  * Display a chess game, i.e. the headers (name of the players, event, etc.), the moves, and all the related annotations if any (comments, variations, NAGs...).
@@ -96,7 +96,7 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
 
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "kokopu-movetext"
-      }, this.renderHeaders(info.game), this.renderBody(info.game), this.renderFocusField());
+      }, this.renderHeaders(info.game), this.renderBody(info.game), this.renderFocusField(info.game));
     }
   }, {
     key: "renderHeaders",
@@ -233,7 +233,7 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "renderFocusField",
-    value: function renderFocusField() {
+    value: function renderFocusField(game) {
       var _this2 = this;
 
       if (this.props.interactionMode !== 'selectMove') {
@@ -247,14 +247,15 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
         href: "#",
         ref: this.focusFieldRef,
         onKeyDown: function onKeyDown(evt) {
-          return _this2.handleKeyDownInFocusField(evt);
+          return _this2.handleKeyDownInFocusField(evt, game);
         }
       }));
     }
   }, {
     key: "renderBody",
     value: function renderBody(game) {
-      return this.renderVariation(this.getNotationTextBuilder(), game.mainVariation(), 'main-variation', true, game.result());
+      var notationTextBuilder = (0, _formatmove.moveFormatter)(this.props.pieceSymbols);
+      return this.renderVariation(notationTextBuilder, game.mainVariation(), 'main-variation', true, game.result());
     }
     /**
      * Render the given variation and its sub-variations, recursively.
@@ -441,10 +442,10 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
     key: "renderComment",
     value: function renderComment(node, comment, isVariation) {
       var content;
+      var sanitizer = createSanitizer(true);
 
       if (this.props.diagramVisible && comment.includes('[#]')) {
         content = [];
-        var sanitizer = createSanitizer();
         var isFirstPart = true;
 
         var _iterator2 = _createForOfIteratorHelper(comment.split('[#]').entries()),
@@ -491,7 +492,7 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
           _iterator2.f();
         }
       } else {
-        content = sanitizeHtml(comment);
+        content = sanitizeHtml(comment, sanitizer);
       }
 
       var key = isVariation ? 'initial-comment' : node.fullMoveNumber() + node.moveColor() + '-comment';
@@ -522,7 +523,7 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "handleKeyDownInFocusField",
-    value: function handleKeyDownInFocusField(evt) {
+    value: function handleKeyDownInFocusField(evt, game) {
       if (evt.key !== 'Home' && evt.key !== 'ArrowLeft' && evt.key !== 'ArrowRight' && evt.key !== 'End') {
         return;
       }
@@ -533,9 +534,6 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
         return;
       }
 
-      var _parseGame = parseGame(this.props.game, this.props.gameIndex),
-          game = _parseGame.game;
-
       var nodeId = undefined;
       var evtOrigin = '';
 
@@ -567,40 +565,6 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
         this.props.onMoveSelected(nodeId === this.props.selection ? undefined : nodeId, 'click');
       }
     }
-    /**
-     * Return the square at the given location.
-     */
-
-  }, {
-    key: "getNotationTextBuilder",
-    value: function getNotationTextBuilder() {
-      var pieceSymbols = this.props.pieceSymbols;
-
-      if (pieceSymbols === 'localized') {
-        var mapping = _i18n["default"].PIECE_SYMBOLS;
-        return function (notation) {
-          return notation.replace(/[KQRBNP]/g, function (match) {
-            return mapping[match];
-          });
-        };
-      } else if (pieceSymbols === 'figurines') {
-        return function (notation) {
-          return figurineNotation(notation, 'alpha');
-        };
-      } else if (pieceSymbols !== 'native' && pieceSymbols && ['K', 'Q', 'R', 'B', 'N', 'P'].every(function (p) {
-        return typeof pieceSymbols[p] === 'string';
-      })) {
-        return function (notation) {
-          return notation.replace(/[KQRBNP]/g, function (match) {
-            return pieceSymbols[match];
-          });
-        };
-      } else {
-        return function (notation) {
-          return notation;
-        };
-      }
-    }
     /**
      * Set the focus to the current component.
      *
@@ -849,58 +813,50 @@ function formatResult(result) {
   }
 }
 
-function createSanitizer() {
+function createSanitizer(withBlockTags) {
+  var allowedTags = ['span', // general purpose
+  'a', // links
+  'b', 'strong', 'i', 'em', // bold, italic
+  'del', 'ins', 's', 'u', // underline, strikethrough
+  'sub', 'sup', // subscript, superscript
+  'abbr', // acronym (typically associated to a title=".." tooltip)
+  'q', 'cite', // quotation and title of a work
+  'mark', // highlighted text
+  'small' // smaller text
+  ];
+  var allowedAttributes = {
+    '*': ['class', 'id', 'title'],
+    'a': ['href', 'target']
+  };
+
+  if (withBlockTags) {
+    allowedTags = allowedTags.concat(['div', // general purpose
+    'h1', 'h2', 'h3', 'h4', 'h5', 'h6', // headings
+    'p', 'br', // paragraph and line break
+    'blockquote', // long quotation
+    'img', // image
+    'pre', // preformatted text
+    'ul', 'ol', 'li' // lists
+    ]);
+    Object.assign(allowedAttributes, {
+      'img': ['alt', 'src', 'height', 'width']
+    });
+  }
+
   return new _HtmlSanitizer["default"]({
-    allowedTags: ['a', 'span', 'b', 'strong', 'i', 'em', 'mark', 'small', 'del', 'ins', 'sub', 'sup'],
-    allowedAttributes: {
-      '*': ['class', 'id', 'title'],
-      'a': ['href', 'target']
-    }
+    allowedTags: allowedTags,
+    allowedAttributes: allowedAttributes
   });
 }
 
 function sanitizeHtml(text, sanitizer) {
   if (!sanitizer) {
-    sanitizer = createSanitizer();
+    sanitizer = createSanitizer(false);
   }
 
   var result = sanitizer.parse(text);
   return result !== null && result !== void 0 ? result : text;
 }
-/**
- * Decompose the given string into piece symbol characters and sections of non piece symbol characters, and transform the piece symbols into
- * React objects represented with the given chess font.
- */
-
-
-function figurineNotation(text, fontName) {
-  var result = [];
-  var beginOfText = 0;
-  var pieceSymbolIndex = 0;
-
-  for (var pos = 0; pos < text.length; ++pos) {
-    var currentChar = text.charAt(pos);
-
-    if (currentChar === 'K' || currentChar === 'Q' || currentChar === 'R' || currentChar === 'B' || currentChar === 'N' || currentChar === 'P') {
-      if (pos > beginOfText) {
-        result.push(text.substring(beginOfText, pos));
-      }
-
-      beginOfText = pos + 1;
-      var key = 'symbol-' + pieceSymbolIndex++;
-      result.push( /*#__PURE__*/_react["default"].createElement("span", {
-        className: 'kokopu-font-' + fontName,
-        key: key
-      }, currentChar));
-    }
-  }
-
-  if (beginOfText < text.length) {
-    result.push(text.substring(beginOfText));
-  }
-
-  return result;
-}
 /**
  * Try to interpret the given object as a chess game.
  */

package/dist/lib/formatmove.js

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatMove = formatMove;
+exports.moveFormatter = moveFormatter;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _i18n = _interopRequireDefault(require("./i18n"));
+
+require("./css/fonts.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/******************************************************************************
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    This program is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    This program is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ ******************************************************************************/
+
+/**
+ * Render the given SAN notation according to the given piece symbol style.
+ *
+ * @param {string|object} pieceSymbols See {@link moveFormatter}.
+ * @param {string} notation SAN notation.
+ * @returns {string|React.ReactFragment}
+ */
+function formatMove(pieceSymbols, notation) {
+  var formatter = moveFormatter(pieceSymbols);
+  return formatter(notation);
+}
+/**
+ * Return a callback capable of rendering a SAN notation using the given piece symbol style.
+ *
+ * @param {string|object} pieceSymbols `'native'`, `'localized'`, `'figurines'`, or an object defining a string-valued properties
+ *                                     for each English piece symbol.
+ * @returns {function(string)} Callback returning either a string or a React fragment.
+ */
+
+
+function moveFormatter(pieceSymbols) {
+  if (pieceSymbols === 'localized') {
+    var mapping = _i18n["default"].PIECE_SYMBOLS;
+    return function (notation) {
+      return notation.replace(/[KQRBNP]/g, function (match) {
+        return mapping[match];
+      });
+    };
+  } else if (pieceSymbols === 'figurines') {
+    return function (notation) {
+      return figurineNotation('alpha', notation);
+    };
+  } else if (pieceSymbols !== 'native' && pieceSymbols && ['K', 'Q', 'R', 'B', 'N', 'P'].every(function (p) {
+    return typeof pieceSymbols[p] === 'string';
+  })) {
+    return function (notation) {
+      return notation.replace(/[KQRBNP]/g, function (match) {
+        return pieceSymbols[match];
+      });
+    };
+  } else {
+    return function (notation) {
+      return notation;
+    };
+  }
+}
+/**
+ * Decompose the given string into piece symbol characters and sections of non piece symbol characters, and transform the piece symbols into
+ * React objects represented with the given chess font.
+ *
+ * @ignore
+ */
+
+
+function figurineNotation(fontName, text) {
+  var result = [];
+  var beginOfText = 0;
+  var pieceSymbolIndex = 0;
+
+  for (var pos = 0; pos < text.length; ++pos) {
+    var currentChar = text.charAt(pos);
+
+    if (currentChar === 'K' || currentChar === 'Q' || currentChar === 'R' || currentChar === 'B' || currentChar === 'N' || currentChar === 'P') {
+      if (pos > beginOfText) {
+        result.push(text.substring(beginOfText, pos));
+      }
+
+      beginOfText = pos + 1;
+      var key = 'symbol-' + pieceSymbolIndex++;
+      result.push( /*#__PURE__*/_react["default"].createElement("span", {
+        className: 'kokopu-font-' + fontName,
+        key: key
+      }, currentChar));
+    }
+  }
+
+  if (beginOfText < text.length) {
+    result.push(text.substring(beginOfText));
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, result);
+}

package/dist/lib/impl/HtmlSanitizer.js

@@ -35,9 +35,14 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
+/**
+ * Those tags cannot have any children.
+ */
+var NO_CHILDREN_TAGS = new Set(['br', 'hr', 'img']);
 /**
  * HTML sanitizer: parse HTML string, keeping only the allowed HTML nodes, and the corresponding React object.
  */
+
 var HtmlSanitizer = /*#__PURE__*/function () {
   function HtmlSanitizer(_ref) {
     var allowedTags = _ref.allowedTags,
@@ -101,7 +106,7 @@ var HtmlSanitizer = /*#__PURE__*/function () {
       if (node.type === 'text') {
         return node.data;
       } else if (node.type === 'tag') {
-        var children = node.children.map(function (child) {
+        var children = NO_CHILDREN_TAGS.has(node.name) ? undefined : node.children.map(function (child) {
           return _this2._processNode(child);
         });
 
@@ -111,9 +116,9 @@ var HtmlSanitizer = /*#__PURE__*/function () {
           attributes['key'] = this._allocateKey();
           return /*#__PURE__*/_react["default"].createElement(node.name, attributes, children);
         } else {
-          return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+          return children ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
             key: this._allocateKey()
-          }, children);
+          }, children) : undefined;
         }
       } else {
         return undefined;

package/dist/lib/index.js

@@ -57,12 +57,24 @@ Object.defineProperty(exports, "flattenTextMarkers", {
     return _markers.flattenTextMarkers;
   }
 });
+Object.defineProperty(exports, "formatMove", {
+  enumerable: true,
+  get: function get() {
+    return _formatmove.formatMove;
+  }
+});
 Object.defineProperty(exports, "i18n", {
   enumerable: true,
   get: function get() {
     return _i18n["default"];
   }
 });
+Object.defineProperty(exports, "moveFormatter", {
+  enumerable: true,
+  get: function get() {
+    return _formatmove.moveFormatter;
+  }
+});
 Object.defineProperty(exports, "parseArrowMarkers", {
   enumerable: true,
   get: function get() {
@@ -84,6 +96,8 @@ Object.defineProperty(exports, "parseTextMarkers", {
 
 var _markers = require("./markers");
 
+var _formatmove = require("./formatmove");
+
 var _i18n = _interopRequireDefault(require("./i18n"));
 
 var _Chessboard = _interopRequireDefault(require("./Chessboard"));

package/doc_src/home.md

@@ -1,4 +1,4 @@
-Kokopu-React is a [React](https://reactjs.org/)-based library to create and display chessboard components.
+Kokopu-React is a [React](https://reactjs.org/)-based library to create and display chessboard and chess-related components.
 Kokopu-React is built on top of [Kokopu](https://www.npmjs.com/package/kokopu), a headless library that
 implements all the chess logic (game rules, parsing of [FEN](https://en.wikipedia.org/wiki/Forsyth%E2%80%93Edwards_Notation)
 and [PGN](https://en.wikipedia.org/wiki/Portable_Game_Notation) formats...).

package/graphic_test_app/common/games.pgn

@@ -85,7 +85,7 @@ probably to assure himself that the combination was sound and that he had a forc
 [Date "????.??.??"]
 [Round "<strong>3</strong>.2"]
 [White "1<sup>st</sup> <em>player</em>"]
-[Black "2<sub>nd</sub> <em>player</em>"]
+[Black "2<sub>nd</sub> <i>player</i>"]
 [Result "*"]
 [WhiteElo "<ins>2800</ins>"]
 [BlackElo "<del>1010</del>"]
@@ -104,7 +104,13 @@ probably to assure himself that the combination was sound and that he had a forc
 [Black "?"]
 [Result "*"]
 
-{I'm a <strong><ins>comment</ins></strong> with some <em class="myClass">HTML content</em> in it.}
+{I'm a <strong><ins>comment</ins></strong> with some <em class="myClass">HTML content</em> in it.<br/>
+Lists are supported:
+<ul>
+<li>1<sup>st</sup> point</li>
+<li>2<sup>nd</sup> point</li>
+</ul>
+... and so are images: <img src="../smiley.png" alt="smiley" />}
 
 *
 
@@ -119,9 +125,9 @@ probably to assure himself that the combination was sound and that he had a forc
 [Result "*"]
 
 {
-Using <div class="myClass">div tags</div> is not allowed.
-... but <div class="myClass"><em>legit HTML elements</em> within forbidden HTML tags</div> are rendered.
-Using <span style="color: cyan;">style attributes</span> is not allowed.
+Using <form class="myClass">form-related tags</form> is not allowed.<br/>
+... but <button class="myClass"><em>legit HTML elements</em> within forbidden HTML tags</button> are rendered.<br/>
+Using <span style="color: cyan;">style attributes</span> is not allowed.<br/>
 Using scripts is not allowed. <script>alert('You should not see this either.');</script>
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "kokopu-react",
-	"version": "1.5.3",
-	"description": "A React-based library to create and display chessboard components.",
+	"version": "1.6.0",
+	"description": "A React-based library to create and display chessboard and chess-related components.",
 	"keywords": [
 		"chess",
 		"react",
@@ -29,41 +29,40 @@
 		".nycrc.yml"
 	],
 	"dependencies": {
-		"htmlparser2": "^7.2.0",
-		"kokopu": "^2.7.0",
+		"htmlparser2": "^8.0.1",
+		"kokopu": "^2.8.0",
 		"prop-types": "^15.8.1",
 		"react": "^17.0.2",
 		"react-draggable": "^4.4.5",
 		"react-motion": "^0.5.2"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.17.6",
-		"@babel/core": "^7.17.9",
-		"@babel/preset-env": "^7.16.11",
-		"@babel/preset-react": "^7.16.7",
+		"@babel/cli": "^7.17.10",
+		"@babel/core": "^7.18.2",
+		"@babel/preset-env": "^7.18.2",
+		"@babel/preset-react": "^7.17.12",
 		"@emotion/react": "^11.9.0",
 		"@emotion/styled": "^11.8.1",
-		"@mui/material": "^5.6.3",
+		"@mui/material": "^5.8.2",
 		"babel-loader": "^8.2.5",
 		"babel-plugin-istanbul": "^6.1.1",
-		"copy-webpack-plugin": "^10.2.4",
+		"copy-webpack-plugin": "^11.0.0",
 		"coveralls": "^3.1.1",
 		"css-loader": "^6.7.1",
-		"eslint": "^8.14.0",
-		"eslint-plugin-react": "^7.29.4",
+		"eslint": "^8.16.0",
+		"eslint-plugin-react": "^7.30.0",
 		"html-webpack-plugin": "^5.5.0",
 		"img-diff-js": "^0.5.2",
-		"mocha": "^9.2.2",
+		"mocha": "^10.0.0",
 		"null-loader": "^4.0.1",
 		"nyc": "^15.1.0",
-		"prompt": "^1.3.0",
 		"react-dom": "^17.0.2",
 		"react-styleguidist": "^11.2.0",
 		"selenium-webdriver": "^4.1.2",
-		"ssh2-sftp-client": "^8.0.0",
+		"ssh2-sftp-client": "^8.1.0",
 		"style-loader": "^3.3.1",
 		"unit.js": "^2.1.1",
-		"webpack": "^5.72.0",
+		"webpack": "^5.72.1",
 		"webpack-cli": "^4.9.2"
 	},
 	"scripts": {

package/scripts/test_graphic/webpack-config.js

@@ -39,7 +39,10 @@ var plugins = items.map(item => new HtmlWebpackPlugin({
 	filename: item + '/index.html',
 }));
 plugins.push(new CopyWebpackPlugin({
-	patterns: [ { from: './graphic_test_app/common/heartbeat.txt', to: 'heartbeat.txt' } ],
+	patterns: [
+		{ from: './graphic_test_app/common/heartbeat.txt', to: 'heartbeat.txt' },
+		{ from: './graphic_test_app/common/smiley.png', to: 'smiley.png' },
+	],
 }));
 
 module.exports = {

package/src/Chessboard.js

@@ -623,6 +623,38 @@ export default class Chessboard extends React.Component {
 		return 'kokopu-arrowTip-' + color + '-' + this.arrowTipIdSuffix;
 	}
 
+	/**
+	 * Return the size of the chessboard, assuming it is built with the given attributes.
+	 *
+	 * @param {number} squareSize
+	 * @param {boolean} coordinateVisible
+	 * @param {{width:number, squareSize:number, coordinateVisible:boolean}[]} smallScreenLimits
+	 * @returns {{width:number, height:number}}
+	 * @public
+	 */
+	static size(squareSize, coordinateVisible, smallScreenLimits) {
+
+		// Enforce small-screen limits, if any.
+		if (typeof window !== 'undefined') {
+			let squareSizeLimit = computeSmallScreenLimits('squareSize', smallScreenLimits, window.innerWidth);
+			let coordinateVisibleLimit = computeSmallScreenLimits('coordinateVisible', smallScreenLimits, window.innerWidth);
+			if (!isNaN(squareSizeLimit)) {
+				squareSize = sanitizeInteger(squareSizeLimit, MIN_SQUARE_SIZE, squareSize);
+			}
+			coordinateVisible = coordinateVisible && (coordinateVisibleLimit === undefined || coordinateVisibleLimit);
+		}
+
+		// Compute the dimensions.
+		let width = 9 * squareSize + Math.round(TURN_FLAG_SPACING_FACTOR * squareSize);
+		let height = 8 * squareSize;
+		if (coordinateVisible) {
+			let fontSize = computeCoordinateFontSize(squareSize);
+			width += Math.round(RANK_COORDINATE_WIDTH_FACTOR * fontSize);
+			height += Math.round(FILE_COORDINATE_HEIGHT_FACTOR * fontSize);
+		}
+		return { width: width, height: height };
+	}
+
 	/**
 	 * Return the maximum square size that would allow the chessboard to fit in a rectangle of size `width x height`.
 	 *

package/src/Movetext.js

@@ -27,9 +27,9 @@ import kokopu from 'kokopu';
 import HtmlSanitizer from './impl/HtmlSanitizer';
 import Chessboard from './Chessboard';
 import ErrorBox from './ErrorBox';
+import { moveFormatter } from './formatmove';
 import i18n from './i18n';
 
-import './css/fonts.css';
 import './css/movetext.css';
 
 
@@ -52,7 +52,7 @@ export default class Movetext extends React.Component {
 			<div className="kokopu-movetext">
 				{this.renderHeaders(info.game)}
 				{this.renderBody(info.game)}
-				{this.renderFocusField()}
+				{this.renderFocusField(info.game)}
 			</div>
 		);
 	}
@@ -132,19 +132,20 @@ export default class Movetext extends React.Component {
 		return <div className="kokopu-header-annotator" key="annotator">{sanitizeHtml(annotator)}</div>;
 	}
 
-	renderFocusField() {
+	renderFocusField(game) {
 		if (this.props.interactionMode !== 'selectMove') {
 			return undefined;
 		}
 		return (
 			<div className="kokopu-focusFieldContainer">
-				<a className="kokopu-focusField" href="#" ref={this.focusFieldRef} onKeyDown={evt => this.handleKeyDownInFocusField(evt)}></a>
+				<a className="kokopu-focusField" href="#" ref={this.focusFieldRef} onKeyDown={evt => this.handleKeyDownInFocusField(evt, game)}></a>
 			</div>
 		);
 	}
 
 	renderBody(game) {
-		return this.renderVariation(this.getNotationTextBuilder(), game.mainVariation(), 'main-variation', true, game.result());
+		let notationTextBuilder = moveFormatter(this.props.pieceSymbols);
+		return this.renderVariation(notationTextBuilder, game.mainVariation(), 'main-variation', true, game.result());
 	}
 
 	/**
@@ -284,9 +285,9 @@ export default class Movetext extends React.Component {
 	 */
 	renderComment(node, comment, isVariation) {
 		let content;
+		let sanitizer = createSanitizer(true);
 		if (this.props.diagramVisible && comment.includes('[#]')) {
 			content = [];
-			let sanitizer = createSanitizer();
 			let isFirstPart = true;
 			for (let [index, part] of comment.split('[#]').entries()) {
 				if (!isFirstPart) {
@@ -309,7 +310,7 @@ export default class Movetext extends React.Component {
 			}
 		}
 		else {
-			content = sanitizeHtml(comment);
+			content = sanitizeHtml(comment, sanitizer);
 		}
 		let key = isVariation ? 'initial-comment' : node.fullMoveNumber() + node.moveColor() + '-comment';
 		return node.isLongComment() ? <div className="kokopu-comment" key={key}>{content}</div> : <span className="kokopu-comment" key={key}>{content}</span>;
@@ -330,7 +331,7 @@ export default class Movetext extends React.Component {
 		return comment ? comment : undefined;
 	}
 
-	handleKeyDownInFocusField(evt) {
+	handleKeyDownInFocusField(evt, game) {
 		if (evt.key !== 'Home' && evt.key !== 'ArrowLeft' && evt.key !== 'ArrowRight' && evt.key !== 'End') {
 			return;
 		}
@@ -338,7 +339,6 @@ export default class Movetext extends React.Component {
 		if (!this.props.selection) {
 			return;
 		}
-		let { game } = parseGame(this.props.game, this.props.gameIndex);
 		let nodeId = undefined;
 		let evtOrigin = '';
 		if (evt.key === 'Home') {
@@ -369,26 +369,6 @@ export default class Movetext extends React.Component {
 		}
 	}
 
-	/**
-	 * Return the square at the given location.
-	 */
-	getNotationTextBuilder() {
-		let pieceSymbols = this.props.pieceSymbols;
-		if (pieceSymbols === 'localized') {
-			let mapping = i18n.PIECE_SYMBOLS;
-			return notation => notation.replace(/[KQRBNP]/g, match => mapping[match]);
-		}
-		else if (pieceSymbols === 'figurines') {
-			return notation => figurineNotation(notation, 'alpha');
-		}
-		else if (pieceSymbols !== 'native' && pieceSymbols && ['K', 'Q', 'R', 'B', 'N', 'P'].every(p => typeof pieceSymbols[p] === 'string')) {
-			return notation => notation.replace(/[KQRBNP]/g, match => pieceSymbols[match]);
-		}
-		else {
-			return notation => notation;
-		}
-	}
-
 	/**
 	 * Set the focus to the current component.
 	 *
@@ -616,52 +596,49 @@ function formatResult(result) {
 }
 
 
-function createSanitizer() {
-	return new HtmlSanitizer({
-		allowedTags: [ 'a', 'span', 'b', 'strong', 'i', 'em', 'mark', 'small', 'del', 'ins', 'sub', 'sup' ],
-		allowedAttributes: {
-			'*': [ 'class', 'id', 'title' ],
-			'a': [ 'href', 'target' ]
-		}
-	});
+function createSanitizer(withBlockTags) {
+	let allowedTags = [
+		'span', // general purpose
+		'a', // links
+		'b', 'strong', 'i', 'em', // bold, italic
+		'del', 'ins', 's', 'u', // underline, strikethrough
+		'sub', 'sup', // subscript, superscript
+		'abbr', // acronym (typically associated to a title=".." tooltip)
+		'q', 'cite', // quotation and title of a work
+		'mark', // highlighted text
+		'small', // smaller text
+	];
+	let allowedAttributes = {
+		'*': [ 'class', 'id', 'title' ],
+		'a': [ 'href', 'target' ],
+	};
+	if (withBlockTags) {
+		allowedTags = allowedTags.concat([
+			'div', // general purpose
+			'h1', 'h2', 'h3', 'h4', 'h5', 'h6', // headings
+			'p', 'br', // paragraph and line break
+			'blockquote', // long quotation
+			'img', // image
+			'pre', // preformatted text
+			'ul', 'ol', 'li', // lists
+		]);
+		Object.assign(allowedAttributes, {
+			'img': [ 'alt', 'src', 'height', 'width' ],
+		});
+	}
+	return new HtmlSanitizer({ allowedTags: allowedTags, allowedAttributes: allowedAttributes });
 }
 
 
 function sanitizeHtml(text, sanitizer) {
 	if (!sanitizer) {
-		sanitizer = createSanitizer();
+		sanitizer = createSanitizer(false);
 	}
 	let result = sanitizer.parse(text);
 	return result ?? text;
 }
 
 
-/**
- * Decompose the given string into piece symbol characters and sections of non piece symbol characters, and transform the piece symbols into
- * React objects represented with the given chess font.
- */
-function figurineNotation(text, fontName) {
-	let result = [];
-	let beginOfText = 0;
-	let pieceSymbolIndex = 0;
-	for (let pos = 0; pos < text.length; ++pos) {
-		let currentChar = text.charAt(pos);
-		if (currentChar === 'K' || currentChar === 'Q' || currentChar === 'R' || currentChar === 'B' || currentChar === 'N' || currentChar === 'P') {
-			if (pos > beginOfText) {
-				result.push(text.substring(beginOfText, pos));
-			}
-			beginOfText = pos + 1;
-			let key = 'symbol-' + (pieceSymbolIndex++);
-			result.push(<span className={'kokopu-font-' + fontName} key={key}>{currentChar}</span>);
-		}
-	}
-	if (beginOfText < text.length) {
-		result.push(text.substring(beginOfText));
-	}
-	return result;
-}
-
-
 /**
  * Try to interpret the given object as a chess game.
  */

package/src/formatmove.js

@@ -0,0 +1,91 @@
+/******************************************************************************
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    This program is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    This program is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ ******************************************************************************/
+
+
+import React from 'react';
+import i18n from './i18n';
+
+import './css/fonts.css';
+
+
+/**
+ * Render the given SAN notation according to the given piece symbol style.
+ *
+ * @param {string|object} pieceSymbols See {@link moveFormatter}.
+ * @param {string} notation SAN notation.
+ * @returns {string|React.ReactFragment}
+ */
+export function formatMove(pieceSymbols, notation) {
+	let formatter = moveFormatter(pieceSymbols);
+	return formatter(notation);
+}
+
+
+/**
+ * Return a callback capable of rendering a SAN notation using the given piece symbol style.
+ *
+ * @param {string|object} pieceSymbols `'native'`, `'localized'`, `'figurines'`, or an object defining a string-valued properties
+ *                                     for each English piece symbol.
+ * @returns {function(string)} Callback returning either a string or a React fragment.
+ */
+export function moveFormatter(pieceSymbols) {
+	if (pieceSymbols === 'localized') {
+		let mapping = i18n.PIECE_SYMBOLS;
+		return notation => notation.replace(/[KQRBNP]/g, match => mapping[match]);
+	}
+	else if (pieceSymbols === 'figurines') {
+		return notation => figurineNotation('alpha', notation);
+	}
+	else if (pieceSymbols !== 'native' && pieceSymbols && ['K', 'Q', 'R', 'B', 'N', 'P'].every(p => typeof pieceSymbols[p] === 'string')) {
+		return notation => notation.replace(/[KQRBNP]/g, match => pieceSymbols[match]);
+	}
+	else {
+		return notation => notation;
+	}
+}
+
+
+/**
+ * Decompose the given string into piece symbol characters and sections of non piece symbol characters, and transform the piece symbols into
+ * React objects represented with the given chess font.
+ *
+ * @ignore
+ */
+function figurineNotation(fontName, text) {
+	let result = [];
+	let beginOfText = 0;
+	let pieceSymbolIndex = 0;
+	for (let pos = 0; pos < text.length; ++pos) {
+		let currentChar = text.charAt(pos);
+		if (currentChar === 'K' || currentChar === 'Q' || currentChar === 'R' || currentChar === 'B' || currentChar === 'N' || currentChar === 'P') {
+			if (pos > beginOfText) {
+				result.push(text.substring(beginOfText, pos));
+			}
+			beginOfText = pos + 1;
+			let key = 'symbol-' + (pieceSymbolIndex++);
+			result.push(<span className={'kokopu-font-' + fontName} key={key}>{currentChar}</span>);
+		}
+	}
+	if (beginOfText < text.length) {
+		result.push(text.substring(beginOfText));
+	}
+	return <>{result}</>;
+}

package/src/impl/HtmlSanitizer.js

@@ -24,6 +24,12 @@ import React from 'react';
 import * as htmlparser2 from 'htmlparser2';
 
 
+/**
+ * Those tags cannot have any children.
+ */
+const NO_CHILDREN_TAGS = new Set([ 'br', 'hr', 'img' ]);
+
+
 /**
  * HTML sanitizer: parse HTML string, keeping only the allowed HTML nodes, and the corresponding React object.
  */
@@ -74,14 +80,14 @@ export default class HtmlSanitizer {
 			return node.data;
 		}
 		else if (node.type === 'tag') {
-			let children = node.children.map(child => this._processNode(child));
+			let children = NO_CHILDREN_TAGS.has(node.name) ? undefined : node.children.map(child => this._processNode(child));
 			if (this._allowedTags.has(node.name)) {
 				let attributes = this._filterAttributes(node.name, node.attribs);
 				attributes['key'] = this._allocateKey();
 				return React.createElement(node.name, attributes, children);
 			}
 			else {
-				return <React.Fragment key={this._allocateKey()}>{children}</React.Fragment>;
+				return children ? <React.Fragment key={this._allocateKey()}>{children}</React.Fragment> : undefined;
 			}
 		}
 		else {

package/src/index.js

@@ -21,6 +21,7 @@
 
 
 export { flattenSquareMarkers, parseSquareMarkers, flattenTextMarkers, parseTextMarkers, flattenArrowMarkers, parseArrowMarkers } from './markers';
+export { formatMove, moveFormatter } from './formatmove';
 export { default as i18n } from './i18n';
 export { default as Chessboard } from './Chessboard';
 export { default as ErrorBox } from './ErrorBox';

package/test/2_chessboard_util.js

@@ -24,19 +24,33 @@ let { Chessboard } = require('../build/test_headless/index');
 let test = require('unit.js');
 
 
+function testAdaptSquareSize(expectedSquareSize, width, height, coordinateVisible, smallScreenLimits) {
+	test.value(Chessboard.adaptSquareSize(width, height, coordinateVisible, smallScreenLimits)).is(expectedSquareSize);
+
+	let actualSize = Chessboard.size(expectedSquareSize, coordinateVisible, smallScreenLimits);
+	test.value(actualSize.width <= width && actualSize.height <= height).isTrue();
+}
+
+function testAdaptSquareSizeWithIncrement(expectedSquareSize, width, height, coordinateVisible, smallScreenLimits) {
+	testAdaptSquareSize(expectedSquareSize, width, height, coordinateVisible, smallScreenLimits);
+
+	let actualSizeIncremented = Chessboard.size(expectedSquareSize + 1, coordinateVisible, smallScreenLimits);
+	test.value(actualSizeIncremented.width > width || actualSizeIncremented.height > height).isTrue();
+}
+
 describe('Adapt square-size', () => {
 
 	it('Very small', () => { test.value(Chessboard.adaptSquareSize(10, 10, false)).is(Chessboard.minSquareSize()); });
 	it('Very large', () => { test.value(Chessboard.adaptSquareSize(9999, 9999, true)).is(Chessboard.maxSquareSize()); });
 
-	it('Size 185x300 with coordinates', () => { test.value(Chessboard.adaptSquareSize(185, 300, true)).is(19); });
-	it('Size 185x300 without coordinates', () => { test.value(Chessboard.adaptSquareSize(185, 300, false)).is(20); });
-	it('Size 300x200 with coordinates', () => { test.value(Chessboard.adaptSquareSize(300, 200, true)).is(23); });
-	it('Size 300x200 without coordinates', () => { test.value(Chessboard.adaptSquareSize(300, 200, false)).is(25); });
-	it('Size 375x500 with coordinates', () => { test.value(Chessboard.adaptSquareSize(375, 500, true)).is(40); });
-	it('Size 375x500 without coordinates', () => { test.value(Chessboard.adaptSquareSize(375, 500, false)).is(41); });
-	it('Size 600x450 with coordinates', () => { test.value(Chessboard.adaptSquareSize(600, 450, true)).is(54); });
-	it('Size 600x450 without coordinates', () => { test.value(Chessboard.adaptSquareSize(600, 450, false)).is(56); });
+	it('Size 185x300 with coordinates', () => testAdaptSquareSizeWithIncrement(19, 185, 300, true));
+	it('Size 185x300 without coordinates', () => testAdaptSquareSizeWithIncrement(20, 185, 300, false));
+	it('Size 300x200 with coordinates', () => testAdaptSquareSizeWithIncrement(23, 300, 200, true));
+	it('Size 300x200 without coordinates', () => testAdaptSquareSizeWithIncrement(25, 300, 200, false));
+	it('Size 375x500 with coordinates', () => testAdaptSquareSizeWithIncrement(40, 375, 500, true));
+	it('Size 375x500 without coordinates', () => testAdaptSquareSizeWithIncrement(41, 375, 500, false));
+	it('Size 600x450 with coordinates', () => testAdaptSquareSizeWithIncrement(54, 600, 450, true));
+	it('Size 600x450 without coordinates', () => testAdaptSquareSizeWithIncrement(56, 600, 450, false));
 });
 
 describe('Adapt square-size with small-screen limits', () => {
@@ -58,18 +72,18 @@ describe('Adapt square-size with small-screen limits', () => {
 
 	it('Window-limited', () => {
 		window.innerWidth = 640;
-		test.value(Chessboard.adaptSquareSize(9999, 9999, true, limits)).is(32);
+		testAdaptSquareSize(32, 9999, 9999, true, limits);
 	});
 	it('Available-space-limited 1', () => {
 		window.innerWidth = 800;
-		test.value(Chessboard.adaptSquareSize(375, 500, true, limits)).is(40);
+		testAdaptSquareSize(40, 375, 500, true, limits);
 	});
 	it('Available-space-limited 2', () => {
 		window.innerWidth = 800;
-		test.value(Chessboard.adaptSquareSize(375, 500, false, limits)).is(41);
+		testAdaptSquareSize(41, 375, 500, false, limits);
 	});
 	it('Force hidden coordinates', () => {
 		window.innerWidth = 600;
-		test.value(Chessboard.adaptSquareSize(185, 300, true, limits)).is(20);
+		testAdaptSquareSize(20, 185, 300, true, limits);
 	});
 });