lib: ship wikimedia piece svgs as built-in data urls

lib/chessboard.js

@@ -1,5 +1,7 @@
 /* eslint-env browser */
 
+import * as pieces from './pieces.svg.js';
+
 // ---------------------------------------------------------------------------
 // Constants
 // ---------------------------------------------------------------------------
@@ -439,10 +441,10 @@ function expandConfig(config) {
   // draggable must be true if sparePieces is enabled
   if (config.sparePieces) config.draggable = true;
 
-  // default piece theme is wikipedia
+  // default piece theme is built-in svg
   if (!Object.prototype.hasOwnProperty.call(config, 'pieceTheme') ||
     (typeof config.pieceTheme !== 'string' && typeof config.pieceTheme !== 'function')) {
-    config.pieceTheme = 'img/chesspieces/wikipedia/{piece}.png';
+    config.pieceTheme = '{piece}';
   }
 
   // animation speeds
@@ -498,6 +500,10 @@ function checkContainerArg(containerElOrString) {
 // ---------------------------------------------------------------------------
 
 class Chessboard {
+  static pieces = pieces;
+  static fenToObj = fenToObj;
+  static objToFen = objToFen;
+
   #config = {};
   /**
    * @type {HTMLElement}
@@ -898,11 +904,12 @@ class Chessboard {
 
   #buildPiece(piece, hidden, id) {
     const pieceEl = new Image(this.#squareSize, this.#squareSize);
+    const src = this.#buildPieceImgSrc(piece);
 
+    pieceEl.src = src === piece ? pieces[src] : src;
     pieceEl.alt = '';
     pieceEl.classList.add(ClassNameLookup.piece);
     pieceEl.dataset.piece = piece;
-    pieceEl.src = this.#buildPieceImgSrc(piece);
 
     if (typeof id === 'string' && id.length > 0) {
       pieceEl.id = id;

templates/homepage.mustache

@@ -5,7 +5,7 @@
 
 <div class="hero-wrapper">
     <div class="body-width-115f6 hero-inner-556fe">
-        <img src="img/chesspieces/wikipedia/bK.svg" alt="Black King" />
+        <img id="hero-king" alt="Black King" />
         <h1>chessboard.js</h1>
         <h3>The easiest way to embed a chess board on your site.</h3>
         <a href="releases/chessboardjs-1.0.0.zip">Download v1.0.0</a>
@@ -62,11 +62,8 @@
 <script src="js/prettify.min.js"></script>
 {{{chessboardJsScript}}}
 <script>
-;(function () {
-    function isTouchDevice () {
-        return ('ontouchstart' in document.documentElement)
-    }
-
+    const heroKing = document.getElementById('hero-king');
+    heroKing.src = Chessboard.pieces.bK;
     prettyPrint()
 
     // example 1
@@ -82,7 +79,6 @@
     if (isTouchDevice()) {
       document.querySelectorAll('.navbar-a57cc').forEach(x => x.classList.remove('hover-effect'))
     }
-})()
 </script>
 </body>
 </html>