WIP script to generate PNG images from board configs

.gitignore

@@ -4,3 +4,5 @@ dist
 dist-ssr
 *.local
 _release_assets
+*/**/*.temp.*
+*.temp.*

package.json

@@ -14,9 +14,10 @@
     "@types/gif.js": "^0.2.2",
     "@types/hammerjs": "^2.0.41",
     "@types/howler": "^2.2.6",
-    "@types/node": "^17.0.8",
+    "@types/node": "^17.0.30",
     "@types/ua-parser-js": "^0.7.36",
     "@vitejs/plugin-legacy": "^1.8.1",
+    "canvas": "^2.9.1",
     "mime": "^3.0.0",
     "npm": "^8.8.0",
     "typescript": "^4.4.4",

public/pieces/checkers/bb.svg

@@ -0,0 +1,5 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M256 439C311.942 439 363.119 423.555 400.647 397.959C438.115 372.404 463 335.86 463 294V218C463 176.14 438.115 139.596 400.647 114.041C363.119 88.4448 311.942 73 256 73C200.058 73 148.881 88.4448 111.353 114.041C73.8848 139.596 49 176.14 49 218V294C49 335.86 73.8848 372.404 111.353 397.959C148.881 423.555 200.058 439 256 439Z" fill="#111111"/>
+<path d="M256 351C363.696 351 451 291.454 451 218C451 144.546 363.696 85 256 85C148.304 85 61 144.546 61 218C61 291.454 148.304 351 256 351Z" fill="#666666"/>
+<path d="M256 427C363.696 427 451 367.454 451 294V218C451 291.454 363.696 351 256 351C148.304 351 61 291.454 61 218V294C61 367.454 148.304 427 256 427Z" fill="#333333"/>
+</svg>

public/pieces/checkers/bw.svg

@@ -0,0 +1,5 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M256 439C311.942 439 363.119 423.555 400.647 397.959C438.115 372.404 463 335.86 463 294V218C463 176.14 438.115 139.596 400.647 114.041C363.119 88.4448 311.942 73 256 73C200.058 73 148.881 88.4448 111.353 114.041C73.8848 139.596 49 176.14 49 218V294C49 335.86 73.8848 372.404 111.353 397.959C148.881 423.555 200.058 439 256 439Z" fill="#555555"/>
+<path d="M256 351C363.696 351 451 291.454 451 218C451 144.546 363.696 85 256 85C148.304 85 61 144.546 61 218C61 291.454 148.304 351 256 351Z" fill="#EEEEEE"/>
+<path d="M256 427C363.696 427 451 367.454 451 294V218C451 291.454 363.696 351 256 351C148.304 351 61 291.454 61 218V294C61 367.454 148.304 427 256 427Z" fill="#BBBBBB"/>
+</svg>

public/pieces/checkers/kb.svg

@@ -0,0 +1,5 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M256 439C311.942 439 363.119 423.555 400.647 397.959C438.115 372.404 463 335.86 463 294V218C463 176.14 438.115 139.596 400.647 114.041C363.119 88.4448 311.942 73 256 73C200.058 73 148.881 88.4448 111.353 114.041C73.8848 139.596 49 176.14 49 218V294C49 335.86 73.8848 372.404 111.353 397.959C148.881 423.555 200.058 439 256 439Z" fill="#111111"/>
+<path d="M256 351C363.696 351 451 291.454 451 218C451 144.546 363.696 85 256 85C148.304 85 61 144.546 61 218C61 291.454 148.304 351 256 351Z" fill="#666666"/>
+<path d="M256 427C363.696 427 451 367.454 451 294V218C451 291.454 363.696 351 256 351C148.304 351 61 291.454 61 218V294C61 367.454 148.304 427 256 427Z" fill="#333333"/>
+</svg>

public/pieces/checkers/kw.svg

@@ -0,0 +1,5 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M256 439C311.942 439 363.119 423.555 400.647 397.959C438.115 372.404 463 335.86 463 294V218C463 176.14 438.115 139.596 400.647 114.041C363.119 88.4448 311.942 73 256 73C200.058 73 148.881 88.4448 111.353 114.041C73.8848 139.596 49 176.14 49 218V294C49 335.86 73.8848 372.404 111.353 397.959C148.881 423.555 200.058 439 256 439Z" fill="#555555"/>
+<path d="M256 351C363.696 351 451 291.454 451 218C451 144.546 363.696 85 256 85C148.304 85 61 144.546 61 218C61 291.454 148.304 351 256 351Z" fill="#EEEEEE"/>
+<path d="M256 427C363.696 427 451 367.454 451 294V218C451 291.454 363.696 351 256 351C148.304 351 61 291.454 61 218V294C61 367.454 148.304 427 256 427Z" fill="#BBBBBB"/>
+</svg>

public/pieces/checkers/nb.svg

@@ -0,0 +1,5 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M256 439C311.942 439 363.119 423.555 400.647 397.959C438.115 372.404 463 335.86 463 294V218C463 176.14 438.115 139.596 400.647 114.041C363.119 88.4448 311.942 73 256 73C200.058 73 148.881 88.4448 111.353 114.041C73.8848 139.596 49 176.14 49 218V294C49 335.86 73.8848 372.404 111.353 397.959C148.881 423.555 200.058 439 256 439Z" fill="#111111"/>
+<path d="M256 351C363.696 351 451 291.454 451 218C451 144.546 363.696 85 256 85C148.304 85 61 144.546 61 218C61 291.454 148.304 351 256 351Z" fill="#666666"/>
+<path d="M256 427C363.696 427 451 367.454 451 294V218C451 291.454 363.696 351 256 351C148.304 351 61 291.454 61 218V294C61 367.454 148.304 427 256 427Z" fill="#333333"/>
+</svg>

public/pieces/checkers/nw.svg

@@ -0,0 +1,5 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M256 439C311.942 439 363.119 423.555 400.647 397.959C438.115 372.404 463 335.86 463 294V218C463 176.14 438.115 139.596 400.647 114.041C363.119 88.4448 311.942 73 256 73C200.058 73 148.881 88.4448 111.353 114.041C73.8848 139.596 49 176.14 49 218V294C49 335.86 73.8848 372.404 111.353 397.959C148.881 423.555 200.058 439 256 439Z" fill="#555555"/>
+<path d="M256 351C363.696 351 451 291.454 451 218C451 144.546 363.696 85 256 85C148.304 85 61 144.546 61 218C61 291.454 148.304 351 256 351Z" fill="#EEEEEE"/>
+<path d="M256 427C363.696 427 451 367.454 451 294V218C451 291.454 363.696 351 256 351C148.304 351 61 291.454 61 218V294C61 367.454 148.304 427 256 427Z" fill="#BBBBBB"/>
+</svg>

public/pieces/checkers/pb.svg

@@ -0,0 +1,5 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M256 439C311.942 439 363.119 423.555 400.647 397.959C438.115 372.404 463 335.86 463 294V218C463 176.14 438.115 139.596 400.647 114.041C363.119 88.4448 311.942 73 256 73C200.058 73 148.881 88.4448 111.353 114.041C73.8848 139.596 49 176.14 49 218V294C49 335.86 73.8848 372.404 111.353 397.959C148.881 423.555 200.058 439 256 439Z" fill="#111111"/>
+<path d="M256 351C363.696 351 451 291.454 451 218C451 144.546 363.696 85 256 85C148.304 85 61 144.546 61 218C61 291.454 148.304 351 256 351Z" fill="#666666"/>
+<path d="M256 427C363.696 427 451 367.454 451 294V218C451 291.454 363.696 351 256 351C148.304 351 61 291.454 61 218V294C61 367.454 148.304 427 256 427Z" fill="#333333"/>
+</svg>

public/pieces/checkers/pw.svg

@@ -0,0 +1,5 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M256 439C311.942 439 363.119 423.555 400.647 397.959C438.115 372.404 463 335.86 463 294V218C463 176.14 438.115 139.596 400.647 114.041C363.119 88.4448 311.942 73 256 73C200.058 73 148.881 88.4448 111.353 114.041C73.8848 139.596 49 176.14 49 218V294C49 335.86 73.8848 372.404 111.353 397.959C148.881 423.555 200.058 439 256 439Z" fill="#555555"/>
+<path d="M256 351C363.696 351 451 291.454 451 218C451 144.546 363.696 85 256 85C148.304 85 61 144.546 61 218C61 291.454 148.304 351 256 351Z" fill="#EEEEEE"/>
+<path d="M256 427C363.696 427 451 367.454 451 294V218C451 291.454 363.696 351 256 351C148.304 351 61 291.454 61 218V294C61 367.454 148.304 427 256 427Z" fill="#BBBBBB"/>
+</svg>

public/pieces/checkers/qb.svg

@@ -0,0 +1,5 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M256 439C311.942 439 363.119 423.555 400.647 397.959C438.115 372.404 463 335.86 463 294V218C463 176.14 438.115 139.596 400.647 114.041C363.119 88.4448 311.942 73 256 73C200.058 73 148.881 88.4448 111.353 114.041C73.8848 139.596 49 176.14 49 218V294C49 335.86 73.8848 372.404 111.353 397.959C148.881 423.555 200.058 439 256 439Z" fill="#111111"/>
+<path d="M256 351C363.696 351 451 291.454 451 218C451 144.546 363.696 85 256 85C148.304 85 61 144.546 61 218C61 291.454 148.304 351 256 351Z" fill="#666666"/>
+<path d="M256 427C363.696 427 451 367.454 451 294V218C451 291.454 363.696 351 256 351C148.304 351 61 291.454 61 218V294C61 367.454 148.304 427 256 427Z" fill="#333333"/>
+</svg>

public/pieces/checkers/qw.svg

@@ -0,0 +1,5 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M256 439C311.942 439 363.119 423.555 400.647 397.959C438.115 372.404 463 335.86 463 294V218C463 176.14 438.115 139.596 400.647 114.041C363.119 88.4448 311.942 73 256 73C200.058 73 148.881 88.4448 111.353 114.041C73.8848 139.596 49 176.14 49 218V294C49 335.86 73.8848 372.404 111.353 397.959C148.881 423.555 200.058 439 256 439Z" fill="#555555"/>
+<path d="M256 351C363.696 351 451 291.454 451 218C451 144.546 363.696 85 256 85C148.304 85 61 144.546 61 218C61 291.454 148.304 351 256 351Z" fill="#EEEEEE"/>
+<path d="M256 427C363.696 427 451 367.454 451 294V218C451 291.454 363.696 351 256 351C148.304 351 61 291.454 61 218V294C61 367.454 148.304 427 256 427Z" fill="#BBBBBB"/>
+</svg>

public/pieces/checkers/rb.svg

@@ -0,0 +1,5 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M256 439C311.942 439 363.119 423.555 400.647 397.959C438.115 372.404 463 335.86 463 294V218C463 176.14 438.115 139.596 400.647 114.041C363.119 88.4448 311.942 73 256 73C200.058 73 148.881 88.4448 111.353 114.041C73.8848 139.596 49 176.14 49 218V294C49 335.86 73.8848 372.404 111.353 397.959C148.881 423.555 200.058 439 256 439Z" fill="#111111"/>
+<path d="M256 351C363.696 351 451 291.454 451 218C451 144.546 363.696 85 256 85C148.304 85 61 144.546 61 218C61 291.454 148.304 351 256 351Z" fill="#666666"/>
+<path d="M256 427C363.696 427 451 367.454 451 294V218C451 291.454 363.696 351 256 351C148.304 351 61 291.454 61 218V294C61 367.454 148.304 427 256 427Z" fill="#333333"/>
+</svg>

public/pieces/checkers/rw.svg

@@ -0,0 +1,5 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M256 439C311.942 439 363.119 423.555 400.647 397.959C438.115 372.404 463 335.86 463 294V218C463 176.14 438.115 139.596 400.647 114.041C363.119 88.4448 311.942 73 256 73C200.058 73 148.881 88.4448 111.353 114.041C73.8848 139.596 49 176.14 49 218V294C49 335.86 73.8848 372.404 111.353 397.959C148.881 423.555 200.058 439 256 439Z" fill="#555555"/>
+<path d="M256 351C363.696 351 451 291.454 451 218C451 144.546 363.696 85 256 85C148.304 85 61 144.546 61 218C61 291.454 148.304 351 256 351Z" fill="#EEEEEE"/>
+<path d="M256 427C363.696 427 451 367.454 451 294V218C451 291.454 363.696 351 256 351C148.304 351 61 291.454 61 218V294C61 367.454 148.304 427 256 427Z" fill="#BBBBBB"/>
+</svg>

public/stylus/chesscom/checkers.user.css

@@ -0,0 +1,24 @@
+
+    /* ==UserStyle==
+    @name           Checkers chess set
+    @namespace      chess.com
+    @version        1.0.0
+    @description    Chess set for chess.com
+    @author         sharechess.github.io
+    ==/UserStyle== */
+
+    @-moz-document domain("chess.com") {
+      .piece.bb, .promotion-piece.bb {background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjU2IDQzOUMzMTEuOTQyIDQzOSAzNjMuMTE5IDQyMy41NTUgNDAwLjY0NyAzOTcuOTU5QzQzOC4xMTUgMzcyLjQwNCA0NjMgMzM1Ljg2IDQ2MyAyOTRWMjE4QzQ2MyAxNzYuMTQgNDM4LjExNSAxMzkuNTk2IDQwMC42NDcgMTE0LjA0MUMzNjMuMTE5IDg4LjQ0NDggMzExLjk0MiA3MyAyNTYgNzNDMjAwLjA1OCA3MyAxNDguODgxIDg4LjQ0NDggMTExLjM1MyAxMTQuMDQxQzczLjg4NDggMTM5LjU5NiA0OSAxNzYuMTQgNDkgMjE4VjI5NEM0OSAzMzUuODYgNzMuODg0OCAzNzIuNDA0IDExMS4zNTMgMzk3Ljk1OUMxNDguODgxIDQyMy41NTUgMjAwLjA1OCA0MzkgMjU2IDQzOVoiIGZpbGw9IiMxMTExMTEiLz4KPHBhdGggZD0iTTI1NiAzNTFDMzYzLjY5NiAzNTEgNDUxIDI5MS40NTQgNDUxIDIxOEM0NTEgMTQ0LjU0NiAzNjMuNjk2IDg1IDI1NiA4NUMxNDguMzA0IDg1IDYxIDE0NC41NDYgNjEgMjE4QzYxIDI5MS40NTQgMTQ4LjMwNCAzNTEgMjU2IDM1MVoiIGZpbGw9IiM2NjY2NjYiLz4KPHBhdGggZD0iTTI1NiA0MjdDMzYzLjY5NiA0MjcgNDUxIDM2Ny40NTQgNDUxIDI5NFYyMThDNDUxIDI5MS40NTQgMzYzLjY5NiAzNTEgMjU2IDM1MUMxNDguMzA0IDM1MSA2MSAyOTEuNDU0IDYxIDIxOFYyOTRDNjEgMzY3LjQ1NCAxNDguMzA0IDQyNyAyNTYgNDI3WiIgZmlsbD0iIzMzMzMzMyIvPgo8L3N2Zz4K') !important}
+.piece.wb, .promotion-piece.wb {background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjU2IDQzOUMzMTEuOTQyIDQzOSAzNjMuMTE5IDQyMy41NTUgNDAwLjY0NyAzOTcuOTU5QzQzOC4xMTUgMzcyLjQwNCA0NjMgMzM1Ljg2IDQ2MyAyOTRWMjE4QzQ2MyAxNzYuMTQgNDM4LjExNSAxMzkuNTk2IDQwMC42NDcgMTE0LjA0MUMzNjMuMTE5IDg4LjQ0NDggMzExLjk0MiA3MyAyNTYgNzNDMjAwLjA1OCA3MyAxNDguODgxIDg4LjQ0NDggMTExLjM1MyAxMTQuMDQxQzczLjg4NDggMTM5LjU5NiA0OSAxNzYuMTQgNDkgMjE4VjI5NEM0OSAzMzUuODYgNzMuODg0OCAzNzIuNDA0IDExMS4zNTMgMzk3Ljk1OUMxNDguODgxIDQyMy41NTUgMjAwLjA1OCA0MzkgMjU2IDQzOVoiIGZpbGw9IiM1NTU1NTUiLz4KPHBhdGggZD0iTTI1NiAzNTFDMzYzLjY5NiAzNTEgNDUxIDI5MS40NTQgNDUxIDIxOEM0NTEgMTQ0LjU0NiAzNjMuNjk2IDg1IDI1NiA4NUMxNDguMzA0IDg1IDYxIDE0NC41NDYgNjEgMjE4QzYxIDI5MS40NTQgMTQ4LjMwNCAzNTEgMjU2IDM1MVoiIGZpbGw9IiNFRUVFRUUiLz4KPHBhdGggZD0iTTI1NiA0MjdDMzYzLjY5NiA0MjcgNDUxIDM2Ny40NTQgNDUxIDI5NFYyMThDNDUxIDI5MS40NTQgMzYzLjY5NiAzNTEgMjU2IDM1MUMxNDguMzA0IDM1MSA2MSAyOTEuNDU0IDYxIDIxOFYyOTRDNjEgMzY3LjQ1NCAxNDguMzA0IDQyNyAyNTYgNDI3WiIgZmlsbD0iI0JCQkJCQiIvPgo8L3N2Zz4K') !important}
+.piece.bk, .promotion-piece.bk {background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjU2IDQzOUMzMTEuOTQyIDQzOSAzNjMuMTE5IDQyMy41NTUgNDAwLjY0NyAzOTcuOTU5QzQzOC4xMTUgMzcyLjQwNCA0NjMgMzM1Ljg2IDQ2MyAyOTRWMjE4QzQ2MyAxNzYuMTQgNDM4LjExNSAxMzkuNTk2IDQwMC42NDcgMTE0LjA0MUMzNjMuMTE5IDg4LjQ0NDggMzExLjk0MiA3MyAyNTYgNzNDMjAwLjA1OCA3MyAxNDguODgxIDg4LjQ0NDggMTExLjM1MyAxMTQuMDQxQzczLjg4NDggMTM5LjU5NiA0OSAxNzYuMTQgNDkgMjE4VjI5NEM0OSAzMzUuODYgNzMuODg0OCAzNzIuNDA0IDExMS4zNTMgMzk3Ljk1OUMxNDguODgxIDQyMy41NTUgMjAwLjA1OCA0MzkgMjU2IDQzOVoiIGZpbGw9IiMxMTExMTEiLz4KPHBhdGggZD0iTTI1NiAzNTFDMzYzLjY5NiAzNTEgNDUxIDI5MS40NTQgNDUxIDIxOEM0NTEgMTQ0LjU0NiAzNjMuNjk2IDg1IDI1NiA4NUMxNDguMzA0IDg1IDYxIDE0NC41NDYgNjEgMjE4QzYxIDI5MS40NTQgMTQ4LjMwNCAzNTEgMjU2IDM1MVoiIGZpbGw9IiM2NjY2NjYiLz4KPHBhdGggZD0iTTI1NiA0MjdDMzYzLjY5NiA0MjcgNDUxIDM2Ny40NTQgNDUxIDI5NFYyMThDNDUxIDI5MS40NTQgMzYzLjY5NiAzNTEgMjU2IDM1MUMxNDguMzA0IDM1MSA2MSAyOTEuNDU0IDYxIDIxOFYyOTRDNjEgMzY3LjQ1NCAxNDguMzA0IDQyNyAyNTYgNDI3WiIgZmlsbD0iIzMzMzMzMyIvPgo8L3N2Zz4K') !important}
+.piece.wk, .promotion-piece.wk {background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjU2IDQzOUMzMTEuOTQyIDQzOSAzNjMuMTE5IDQyMy41NTUgNDAwLjY0NyAzOTcuOTU5QzQzOC4xMTUgMzcyLjQwNCA0NjMgMzM1Ljg2IDQ2MyAyOTRWMjE4QzQ2MyAxNzYuMTQgNDM4LjExNSAxMzkuNTk2IDQwMC42NDcgMTE0LjA0MUMzNjMuMTE5IDg4LjQ0NDggMzExLjk0MiA3MyAyNTYgNzNDMjAwLjA1OCA3MyAxNDguODgxIDg4LjQ0NDggMTExLjM1MyAxMTQuMDQxQzczLjg4NDggMTM5LjU5NiA0OSAxNzYuMTQgNDkgMjE4VjI5NEM0OSAzMzUuODYgNzMuODg0OCAzNzIuNDA0IDExMS4zNTMgMzk3Ljk1OUMxNDguODgxIDQyMy41NTUgMjAwLjA1OCA0MzkgMjU2IDQzOVoiIGZpbGw9IiM1NTU1NTUiLz4KPHBhdGggZD0iTTI1NiAzNTFDMzYzLjY5NiAzNTEgNDUxIDI5MS40NTQgNDUxIDIxOEM0NTEgMTQ0LjU0NiAzNjMuNjk2IDg1IDI1NiA4NUMxNDguMzA0IDg1IDYxIDE0NC41NDYgNjEgMjE4QzYxIDI5MS40NTQgMTQ4LjMwNCAzNTEgMjU2IDM1MVoiIGZpbGw9IiNFRUVFRUUiLz4KPHBhdGggZD0iTTI1NiA0MjdDMzYzLjY5NiA0MjcgNDUxIDM2Ny40NTQgNDUxIDI5NFYyMThDNDUxIDI5MS40NTQgMzYzLjY5NiAzNTEgMjU2IDM1MUMxNDguMzA0IDM1MSA2MSAyOTEuNDU0IDYxIDIxOFYyOTRDNjEgMzY3LjQ1NCAxNDguMzA0IDQyNyAyNTYgNDI3WiIgZmlsbD0iI0JCQkJCQiIvPgo8L3N2Zz4K') !important}
+.piece.bn, .promotion-piece.bn {background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjU2IDQzOUMzMTEuOTQyIDQzOSAzNjMuMTE5IDQyMy41NTUgNDAwLjY0NyAzOTcuOTU5QzQzOC4xMTUgMzcyLjQwNCA0NjMgMzM1Ljg2IDQ2MyAyOTRWMjE4QzQ2MyAxNzYuMTQgNDM4LjExNSAxMzkuNTk2IDQwMC42NDcgMTE0LjA0MUMzNjMuMTE5IDg4LjQ0NDggMzExLjk0MiA3MyAyNTYgNzNDMjAwLjA1OCA3MyAxNDguODgxIDg4LjQ0NDggMTExLjM1MyAxMTQuMDQxQzczLjg4NDggMTM5LjU5NiA0OSAxNzYuMTQgNDkgMjE4VjI5NEM0OSAzMzUuODYgNzMuODg0OCAzNzIuNDA0IDExMS4zNTMgMzk3Ljk1OUMxNDguODgxIDQyMy41NTUgMjAwLjA1OCA0MzkgMjU2IDQzOVoiIGZpbGw9IiMxMTExMTEiLz4KPHBhdGggZD0iTTI1NiAzNTFDMzYzLjY5NiAzNTEgNDUxIDI5MS40NTQgNDUxIDIxOEM0NTEgMTQ0LjU0NiAzNjMuNjk2IDg1IDI1NiA4NUMxNDguMzA0IDg1IDYxIDE0NC41NDYgNjEgMjE4QzYxIDI5MS40NTQgMTQ4LjMwNCAzNTEgMjU2IDM1MVoiIGZpbGw9IiM2NjY2NjYiLz4KPHBhdGggZD0iTTI1NiA0MjdDMzYzLjY5NiA0MjcgNDUxIDM2Ny40NTQgNDUxIDI5NFYyMThDNDUxIDI5MS40NTQgMzYzLjY5NiAzNTEgMjU2IDM1MUMxNDguMzA0IDM1MSA2MSAyOTEuNDU0IDYxIDIxOFYyOTRDNjEgMzY3LjQ1NCAxNDguMzA0IDQyNyAyNTYgNDI3WiIgZmlsbD0iIzMzMzMzMyIvPgo8L3N2Zz4K') !important}
+.piece.wn, .promotion-piece.wn {background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjU2IDQzOUMzMTEuOTQyIDQzOSAzNjMuMTE5IDQyMy41NTUgNDAwLjY0NyAzOTcuOTU5QzQzOC4xMTUgMzcyLjQwNCA0NjMgMzM1Ljg2IDQ2MyAyOTRWMjE4QzQ2MyAxNzYuMTQgNDM4LjExNSAxMzkuNTk2IDQwMC42NDcgMTE0LjA0MUMzNjMuMTE5IDg4LjQ0NDggMzExLjk0MiA3MyAyNTYgNzNDMjAwLjA1OCA3MyAxNDguODgxIDg4LjQ0NDggMTExLjM1MyAxMTQuMDQxQzczLjg4NDggMTM5LjU5NiA0OSAxNzYuMTQgNDkgMjE4VjI5NEM0OSAzMzUuODYgNzMuODg0OCAzNzIuNDA0IDExMS4zNTMgMzk3Ljk1OUMxNDguODgxIDQyMy41NTUgMjAwLjA1OCA0MzkgMjU2IDQzOVoiIGZpbGw9IiM1NTU1NTUiLz4KPHBhdGggZD0iTTI1NiAzNTFDMzYzLjY5NiAzNTEgNDUxIDI5MS40NTQgNDUxIDIxOEM0NTEgMTQ0LjU0NiAzNjMuNjk2IDg1IDI1NiA4NUMxNDguMzA0IDg1IDYxIDE0NC41NDYgNjEgMjE4QzYxIDI5MS40NTQgMTQ4LjMwNCAzNTEgMjU2IDM1MVoiIGZpbGw9IiNFRUVFRUUiLz4KPHBhdGggZD0iTTI1NiA0MjdDMzYzLjY5NiA0MjcgNDUxIDM2Ny40NTQgNDUxIDI5NFYyMThDNDUxIDI5MS40NTQgMzYzLjY5NiAzNTEgMjU2IDM1MUMxNDguMzA0IDM1MSA2MSAyOTEuNDU0IDYxIDIxOFYyOTRDNjEgMzY3LjQ1NCAxNDguMzA0IDQyNyAyNTYgNDI3WiIgZmlsbD0iI0JCQkJCQiIvPgo8L3N2Zz4K') !important}
+.piece.bp, .promotion-piece.bp {background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjU2IDQzOUMzMTEuOTQyIDQzOSAzNjMuMTE5IDQyMy41NTUgNDAwLjY0NyAzOTcuOTU5QzQzOC4xMTUgMzcyLjQwNCA0NjMgMzM1Ljg2IDQ2MyAyOTRWMjE4QzQ2MyAxNzYuMTQgNDM4LjExNSAxMzkuNTk2IDQwMC42NDcgMTE0LjA0MUMzNjMuMTE5IDg4LjQ0NDggMzExLjk0MiA3MyAyNTYgNzNDMjAwLjA1OCA3MyAxNDguODgxIDg4LjQ0NDggMTExLjM1MyAxMTQuMDQxQzczLjg4NDggMTM5LjU5NiA0OSAxNzYuMTQgNDkgMjE4VjI5NEM0OSAzMzUuODYgNzMuODg0OCAzNzIuNDA0IDExMS4zNTMgMzk3Ljk1OUMxNDguODgxIDQyMy41NTUgMjAwLjA1OCA0MzkgMjU2IDQzOVoiIGZpbGw9IiMxMTExMTEiLz4KPHBhdGggZD0iTTI1NiAzNTFDMzYzLjY5NiAzNTEgNDUxIDI5MS40NTQgNDUxIDIxOEM0NTEgMTQ0LjU0NiAzNjMuNjk2IDg1IDI1NiA4NUMxNDguMzA0IDg1IDYxIDE0NC41NDYgNjEgMjE4QzYxIDI5MS40NTQgMTQ4LjMwNCAzNTEgMjU2IDM1MVoiIGZpbGw9IiM2NjY2NjYiLz4KPHBhdGggZD0iTTI1NiA0MjdDMzYzLjY5NiA0MjcgNDUxIDM2Ny40NTQgNDUxIDI5NFYyMThDNDUxIDI5MS40NTQgMzYzLjY5NiAzNTEgMjU2IDM1MUMxNDguMzA0IDM1MSA2MSAyOTEuNDU0IDYxIDIxOFYyOTRDNjEgMzY3LjQ1NCAxNDguMzA0IDQyNyAyNTYgNDI3WiIgZmlsbD0iIzMzMzMzMyIvPgo8L3N2Zz4K') !important}
+.piece.wp, .promotion-piece.wp {background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjU2IDQzOUMzMTEuOTQyIDQzOSAzNjMuMTE5IDQyMy41NTUgNDAwLjY0NyAzOTcuOTU5QzQzOC4xMTUgMzcyLjQwNCA0NjMgMzM1Ljg2IDQ2MyAyOTRWMjE4QzQ2MyAxNzYuMTQgNDM4LjExNSAxMzkuNTk2IDQwMC42NDcgMTE0LjA0MUMzNjMuMTE5IDg4LjQ0NDggMzExLjk0MiA3MyAyNTYgNzNDMjAwLjA1OCA3MyAxNDguODgxIDg4LjQ0NDggMTExLjM1MyAxMTQuMDQxQzczLjg4NDggMTM5LjU5NiA0OSAxNzYuMTQgNDkgMjE4VjI5NEM0OSAzMzUuODYgNzMuODg0OCAzNzIuNDA0IDExMS4zNTMgMzk3Ljk1OUMxNDguODgxIDQyMy41NTUgMjAwLjA1OCA0MzkgMjU2IDQzOVoiIGZpbGw9IiM1NTU1NTUiLz4KPHBhdGggZD0iTTI1NiAzNTFDMzYzLjY5NiAzNTEgNDUxIDI5MS40NTQgNDUxIDIxOEM0NTEgMTQ0LjU0NiAzNjMuNjk2IDg1IDI1NiA4NUMxNDguMzA0IDg1IDYxIDE0NC41NDYgNjEgMjE4QzYxIDI5MS40NTQgMTQ4LjMwNCAzNTEgMjU2IDM1MVoiIGZpbGw9IiNFRUVFRUUiLz4KPHBhdGggZD0iTTI1NiA0MjdDMzYzLjY5NiA0MjcgNDUxIDM2Ny40NTQgNDUxIDI5NFYyMThDNDUxIDI5MS40NTQgMzYzLjY5NiAzNTEgMjU2IDM1MUMxNDguMzA0IDM1MSA2MSAyOTEuNDU0IDYxIDIxOFYyOTRDNjEgMzY3LjQ1NCAxNDguMzA0IDQyNyAyNTYgNDI3WiIgZmlsbD0iI0JCQkJCQiIvPgo8L3N2Zz4K') !important}
+.piece.bq, .promotion-piece.bq {background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjU2IDQzOUMzMTEuOTQyIDQzOSAzNjMuMTE5IDQyMy41NTUgNDAwLjY0NyAzOTcuOTU5QzQzOC4xMTUgMzcyLjQwNCA0NjMgMzM1Ljg2IDQ2MyAyOTRWMjE4QzQ2MyAxNzYuMTQgNDM4LjExNSAxMzkuNTk2IDQwMC42NDcgMTE0LjA0MUMzNjMuMTE5IDg4LjQ0NDggMzExLjk0MiA3MyAyNTYgNzNDMjAwLjA1OCA3MyAxNDguODgxIDg4LjQ0NDggMTExLjM1MyAxMTQuMDQxQzczLjg4NDggMTM5LjU5NiA0OSAxNzYuMTQgNDkgMjE4VjI5NEM0OSAzMzUuODYgNzMuODg0OCAzNzIuNDA0IDExMS4zNTMgMzk3Ljk1OUMxNDguODgxIDQyMy41NTUgMjAwLjA1OCA0MzkgMjU2IDQzOVoiIGZpbGw9IiMxMTExMTEiLz4KPHBhdGggZD0iTTI1NiAzNTFDMzYzLjY5NiAzNTEgNDUxIDI5MS40NTQgNDUxIDIxOEM0NTEgMTQ0LjU0NiAzNjMuNjk2IDg1IDI1NiA4NUMxNDguMzA0IDg1IDYxIDE0NC41NDYgNjEgMjE4QzYxIDI5MS40NTQgMTQ4LjMwNCAzNTEgMjU2IDM1MVoiIGZpbGw9IiM2NjY2NjYiLz4KPHBhdGggZD0iTTI1NiA0MjdDMzYzLjY5NiA0MjcgNDUxIDM2Ny40NTQgNDUxIDI5NFYyMThDNDUxIDI5MS40NTQgMzYzLjY5NiAzNTEgMjU2IDM1MUMxNDguMzA0IDM1MSA2MSAyOTEuNDU0IDYxIDIxOFYyOTRDNjEgMzY3LjQ1NCAxNDguMzA0IDQyNyAyNTYgNDI3WiIgZmlsbD0iIzMzMzMzMyIvPgo8L3N2Zz4K') !important}
+.piece.wq, .promotion-piece.wq {background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjU2IDQzOUMzMTEuOTQyIDQzOSAzNjMuMTE5IDQyMy41NTUgNDAwLjY0NyAzOTcuOTU5QzQzOC4xMTUgMzcyLjQwNCA0NjMgMzM1Ljg2IDQ2MyAyOTRWMjE4QzQ2MyAxNzYuMTQgNDM4LjExNSAxMzkuNTk2IDQwMC42NDcgMTE0LjA0MUMzNjMuMTE5IDg4LjQ0NDggMzExLjk0MiA3MyAyNTYgNzNDMjAwLjA1OCA3MyAxNDguODgxIDg4LjQ0NDggMTExLjM1MyAxMTQuMDQxQzczLjg4NDggMTM5LjU5NiA0OSAxNzYuMTQgNDkgMjE4VjI5NEM0OSAzMzUuODYgNzMuODg0OCAzNzIuNDA0IDExMS4zNTMgMzk3Ljk1OUMxNDguODgxIDQyMy41NTUgMjAwLjA1OCA0MzkgMjU2IDQzOVoiIGZpbGw9IiM1NTU1NTUiLz4KPHBhdGggZD0iTTI1NiAzNTFDMzYzLjY5NiAzNTEgNDUxIDI5MS40NTQgNDUxIDIxOEM0NTEgMTQ0LjU0NiAzNjMuNjk2IDg1IDI1NiA4NUMxNDguMzA0IDg1IDYxIDE0NC41NDYgNjEgMjE4QzYxIDI5MS40NTQgMTQ4LjMwNCAzNTEgMjU2IDM1MVoiIGZpbGw9IiNFRUVFRUUiLz4KPHBhdGggZD0iTTI1NiA0MjdDMzYzLjY5NiA0MjcgNDUxIDM2Ny40NTQgNDUxIDI5NFYyMThDNDUxIDI5MS40NTQgMzYzLjY5NiAzNTEgMjU2IDM1MUMxNDguMzA0IDM1MSA2MSAyOTEuNDU0IDYxIDIxOFYyOTRDNjEgMzY3LjQ1NCAxNDguMzA0IDQyNyAyNTYgNDI3WiIgZmlsbD0iI0JCQkJCQiIvPgo8L3N2Zz4K') !important}
+.piece.br, .promotion-piece.br {background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjU2IDQzOUMzMTEuOTQyIDQzOSAzNjMuMTE5IDQyMy41NTUgNDAwLjY0NyAzOTcuOTU5QzQzOC4xMTUgMzcyLjQwNCA0NjMgMzM1Ljg2IDQ2MyAyOTRWMjE4QzQ2MyAxNzYuMTQgNDM4LjExNSAxMzkuNTk2IDQwMC42NDcgMTE0LjA0MUMzNjMuMTE5IDg4LjQ0NDggMzExLjk0MiA3MyAyNTYgNzNDMjAwLjA1OCA3MyAxNDguODgxIDg4LjQ0NDggMTExLjM1MyAxMTQuMDQxQzczLjg4NDggMTM5LjU5NiA0OSAxNzYuMTQgNDkgMjE4VjI5NEM0OSAzMzUuODYgNzMuODg0OCAzNzIuNDA0IDExMS4zNTMgMzk3Ljk1OUMxNDguODgxIDQyMy41NTUgMjAwLjA1OCA0MzkgMjU2IDQzOVoiIGZpbGw9IiMxMTExMTEiLz4KPHBhdGggZD0iTTI1NiAzNTFDMzYzLjY5NiAzNTEgNDUxIDI5MS40NTQgNDUxIDIxOEM0NTEgMTQ0LjU0NiAzNjMuNjk2IDg1IDI1NiA4NUMxNDguMzA0IDg1IDYxIDE0NC41NDYgNjEgMjE4QzYxIDI5MS40NTQgMTQ4LjMwNCAzNTEgMjU2IDM1MVoiIGZpbGw9IiM2NjY2NjYiLz4KPHBhdGggZD0iTTI1NiA0MjdDMzYzLjY5NiA0MjcgNDUxIDM2Ny40NTQgNDUxIDI5NFYyMThDNDUxIDI5MS40NTQgMzYzLjY5NiAzNTEgMjU2IDM1MUMxNDguMzA0IDM1MSA2MSAyOTEuNDU0IDYxIDIxOFYyOTRDNjEgMzY3LjQ1NCAxNDguMzA0IDQyNyAyNTYgNDI3WiIgZmlsbD0iIzMzMzMzMyIvPgo8L3N2Zz4K') !important}
+.piece.wr, .promotion-piece.wr {background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjU2IDQzOUMzMTEuOTQyIDQzOSAzNjMuMTE5IDQyMy41NTUgNDAwLjY0NyAzOTcuOTU5QzQzOC4xMTUgMzcyLjQwNCA0NjMgMzM1Ljg2IDQ2MyAyOTRWMjE4QzQ2MyAxNzYuMTQgNDM4LjExNSAxMzkuNTk2IDQwMC42NDcgMTE0LjA0MUMzNjMuMTE5IDg4LjQ0NDggMzExLjk0MiA3MyAyNTYgNzNDMjAwLjA1OCA3MyAxNDguODgxIDg4LjQ0NDggMTExLjM1MyAxMTQuMDQxQzczLjg4NDggMTM5LjU5NiA0OSAxNzYuMTQgNDkgMjE4VjI5NEM0OSAzMzUuODYgNzMuODg0OCAzNzIuNDA0IDExMS4zNTMgMzk3Ljk1OUMxNDguODgxIDQyMy41NTUgMjAwLjA1OCA0MzkgMjU2IDQzOVoiIGZpbGw9IiM1NTU1NTUiLz4KPHBhdGggZD0iTTI1NiAzNTFDMzYzLjY5NiAzNTEgNDUxIDI5MS40NTQgNDUxIDIxOEM0NTEgMTQ0LjU0NiAzNjMuNjk2IDg1IDI1NiA4NUMxNDguMzA0IDg1IDYxIDE0NC41NDYgNjEgMjE4QzYxIDI5MS40NTQgMTQ4LjMwNCAzNTEgMjU2IDM1MVoiIGZpbGw9IiNFRUVFRUUiLz4KPHBhdGggZD0iTTI1NiA0MjdDMzYzLjY5NiA0MjcgNDUxIDM2Ny40NTQgNDUxIDI5NFYyMThDNDUxIDI5MS40NTQgMzYzLjY5NiAzNTEgMjU2IDM1MUMxNDguMzA0IDM1MSA2MSAyOTEuNDU0IDYxIDIxOFYyOTRDNjEgMzY3LjQ1NCAxNDguMzA0IDQyNyAyNTYgNDI3WiIgZmlsbD0iI0JCQkJCQiIvPgo8L3N2Zz4K') !important}
+    }
+  

public/stylus/lichess/checkers.user.css

@@ -0,0 +1,24 @@
+
+    /* ==UserStyle==
+    @name           Checkers chess set
+    @namespace      lichess.org
+    @version        1.0.0
+    @description    Chess set for lichess.org
+    @author         sharechess.github.io
+    ==/UserStyle== */
+
+    @-moz-document domain("lichess.org") {
+      .is2d .bishop.black {background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjU2IDQzOUMzMTEuOTQyIDQzOSAzNjMuMTE5IDQyMy41NTUgNDAwLjY0NyAzOTcuOTU5QzQzOC4xMTUgMzcyLjQwNCA0NjMgMzM1Ljg2IDQ2MyAyOTRWMjE4QzQ2MyAxNzYuMTQgNDM4LjExNSAxMzkuNTk2IDQwMC42NDcgMTE0LjA0MUMzNjMuMTE5IDg4LjQ0NDggMzExLjk0MiA3MyAyNTYgNzNDMjAwLjA1OCA3MyAxNDguODgxIDg4LjQ0NDggMTExLjM1MyAxMTQuMDQxQzczLjg4NDggMTM5LjU5NiA0OSAxNzYuMTQgNDkgMjE4VjI5NEM0OSAzMzUuODYgNzMuODg0OCAzNzIuNDA0IDExMS4zNTMgMzk3Ljk1OUMxNDguODgxIDQyMy41NTUgMjAwLjA1OCA0MzkgMjU2IDQzOVoiIGZpbGw9IiMxMTExMTEiLz4KPHBhdGggZD0iTTI1NiAzNTFDMzYzLjY5NiAzNTEgNDUxIDI5MS40NTQgNDUxIDIxOEM0NTEgMTQ0LjU0NiAzNjMuNjk2IDg1IDI1NiA4NUMxNDguMzA0IDg1IDYxIDE0NC41NDYgNjEgMjE4QzYxIDI5MS40NTQgMTQ4LjMwNCAzNTEgMjU2IDM1MVoiIGZpbGw9IiM2NjY2NjYiLz4KPHBhdGggZD0iTTI1NiA0MjdDMzYzLjY5NiA0MjcgNDUxIDM2Ny40NTQgNDUxIDI5NFYyMThDNDUxIDI5MS40NTQgMzYzLjY5NiAzNTEgMjU2IDM1MUMxNDguMzA0IDM1MSA2MSAyOTEuNDU0IDYxIDIxOFYyOTRDNjEgMzY3LjQ1NCAxNDguMzA0IDQyNyAyNTYgNDI3WiIgZmlsbD0iIzMzMzMzMyIvPgo8L3N2Zz4K') !important}
+.is2d .bishop.white {background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjU2IDQzOUMzMTEuOTQyIDQzOSAzNjMuMTE5IDQyMy41NTUgNDAwLjY0NyAzOTcuOTU5QzQzOC4xMTUgMzcyLjQwNCA0NjMgMzM1Ljg2IDQ2MyAyOTRWMjE4QzQ2MyAxNzYuMTQgNDM4LjExNSAxMzkuNTk2IDQwMC42NDcgMTE0LjA0MUMzNjMuMTE5IDg4LjQ0NDggMzExLjk0MiA3MyAyNTYgNzNDMjAwLjA1OCA3MyAxNDguODgxIDg4LjQ0NDggMTExLjM1MyAxMTQuMDQxQzczLjg4NDggMTM5LjU5NiA0OSAxNzYuMTQgNDkgMjE4VjI5NEM0OSAzMzUuODYgNzMuODg0OCAzNzIuNDA0IDExMS4zNTMgMzk3Ljk1OUMxNDguODgxIDQyMy41NTUgMjAwLjA1OCA0MzkgMjU2IDQzOVoiIGZpbGw9IiM1NTU1NTUiLz4KPHBhdGggZD0iTTI1NiAzNTFDMzYzLjY5NiAzNTEgNDUxIDI5MS40NTQgNDUxIDIxOEM0NTEgMTQ0LjU0NiAzNjMuNjk2IDg1IDI1NiA4NUMxNDguMzA0IDg1IDYxIDE0NC41NDYgNjEgMjE4QzYxIDI5MS40NTQgMTQ4LjMwNCAzNTEgMjU2IDM1MVoiIGZpbGw9IiNFRUVFRUUiLz4KPHBhdGggZD0iTTI1NiA0MjdDMzYzLjY5NiA0MjcgNDUxIDM2Ny40NTQgNDUxIDI5NFYyMThDNDUxIDI5MS40NTQgMzYzLjY5NiAzNTEgMjU2IDM1MUMxNDguMzA0IDM1MSA2MSAyOTEuNDU0IDYxIDIxOFYyOTRDNjEgMzY3LjQ1NCAxNDguMzA0IDQyNyAyNTYgNDI3WiIgZmlsbD0iI0JCQkJCQiIvPgo8L3N2Zz4K') !important}
+.is2d .king.black {background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjU2IDQzOUMzMTEuOTQyIDQzOSAzNjMuMTE5IDQyMy41NTUgNDAwLjY0NyAzOTcuOTU5QzQzOC4xMTUgMzcyLjQwNCA0NjMgMzM1Ljg2IDQ2MyAyOTRWMjE4QzQ2MyAxNzYuMTQgNDM4LjExNSAxMzkuNTk2IDQwMC42NDcgMTE0LjA0MUMzNjMuMTE5IDg4LjQ0NDggMzExLjk0MiA3MyAyNTYgNzNDMjAwLjA1OCA3MyAxNDguODgxIDg4LjQ0NDggMTExLjM1MyAxMTQuMDQxQzczLjg4NDggMTM5LjU5NiA0OSAxNzYuMTQgNDkgMjE4VjI5NEM0OSAzMzUuODYgNzMuODg0OCAzNzIuNDA0IDExMS4zNTMgMzk3Ljk1OUMxNDguODgxIDQyMy41NTUgMjAwLjA1OCA0MzkgMjU2IDQzOVoiIGZpbGw9IiMxMTExMTEiLz4KPHBhdGggZD0iTTI1NiAzNTFDMzYzLjY5NiAzNTEgNDUxIDI5MS40NTQgNDUxIDIxOEM0NTEgMTQ0LjU0NiAzNjMuNjk2IDg1IDI1NiA4NUMxNDguMzA0IDg1IDYxIDE0NC41NDYgNjEgMjE4QzYxIDI5MS40NTQgMTQ4LjMwNCAzNTEgMjU2IDM1MVoiIGZpbGw9IiM2NjY2NjYiLz4KPHBhdGggZD0iTTI1NiA0MjdDMzYzLjY5NiA0MjcgNDUxIDM2Ny40NTQgNDUxIDI5NFYyMThDNDUxIDI5MS40NTQgMzYzLjY5NiAzNTEgMjU2IDM1MUMxNDguMzA0IDM1MSA2MSAyOTEuNDU0IDYxIDIxOFYyOTRDNjEgMzY3LjQ1NCAxNDguMzA0IDQyNyAyNTYgNDI3WiIgZmlsbD0iIzMzMzMzMyIvPgo8L3N2Zz4K') !important}
+.is2d .king.white {background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjU2IDQzOUMzMTEuOTQyIDQzOSAzNjMuMTE5IDQyMy41NTUgNDAwLjY0NyAzOTcuOTU5QzQzOC4xMTUgMzcyLjQwNCA0NjMgMzM1Ljg2IDQ2MyAyOTRWMjE4QzQ2MyAxNzYuMTQgNDM4LjExNSAxMzkuNTk2IDQwMC42NDcgMTE0LjA0MUMzNjMuMTE5IDg4LjQ0NDggMzExLjk0MiA3MyAyNTYgNzNDMjAwLjA1OCA3MyAxNDguODgxIDg4LjQ0NDggMTExLjM1MyAxMTQuMDQxQzczLjg4NDggMTM5LjU5NiA0OSAxNzYuMTQgNDkgMjE4VjI5NEM0OSAzMzUuODYgNzMuODg0OCAzNzIuNDA0IDExMS4zNTMgMzk3Ljk1OUMxNDguODgxIDQyMy41NTUgMjAwLjA1OCA0MzkgMjU2IDQzOVoiIGZpbGw9IiM1NTU1NTUiLz4KPHBhdGggZD0iTTI1NiAzNTFDMzYzLjY5NiAzNTEgNDUxIDI5MS40NTQgNDUxIDIxOEM0NTEgMTQ0LjU0NiAzNjMuNjk2IDg1IDI1NiA4NUMxNDguMzA0IDg1IDYxIDE0NC41NDYgNjEgMjE4QzYxIDI5MS40NTQgMTQ4LjMwNCAzNTEgMjU2IDM1MVoiIGZpbGw9IiNFRUVFRUUiLz4KPHBhdGggZD0iTTI1NiA0MjdDMzYzLjY5NiA0MjcgNDUxIDM2Ny40NTQgNDUxIDI5NFYyMThDNDUxIDI5MS40NTQgMzYzLjY5NiAzNTEgMjU2IDM1MUMxNDguMzA0IDM1MSA2MSAyOTEuNDU0IDYxIDIxOFYyOTRDNjEgMzY3LjQ1NCAxNDguMzA0IDQyNyAyNTYgNDI3WiIgZmlsbD0iI0JCQkJCQiIvPgo8L3N2Zz4K') !important}
+.is2d .knight.black {background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjU2IDQzOUMzMTEuOTQyIDQzOSAzNjMuMTE5IDQyMy41NTUgNDAwLjY0NyAzOTcuOTU5QzQzOC4xMTUgMzcyLjQwNCA0NjMgMzM1Ljg2IDQ2MyAyOTRWMjE4QzQ2MyAxNzYuMTQgNDM4LjExNSAxMzkuNTk2IDQwMC42NDcgMTE0LjA0MUMzNjMuMTE5IDg4LjQ0NDggMzExLjk0MiA3MyAyNTYgNzNDMjAwLjA1OCA3MyAxNDguODgxIDg4LjQ0NDggMTExLjM1MyAxMTQuMDQxQzczLjg4NDggMTM5LjU5NiA0OSAxNzYuMTQgNDkgMjE4VjI5NEM0OSAzMzUuODYgNzMuODg0OCAzNzIuNDA0IDExMS4zNTMgMzk3Ljk1OUMxNDguODgxIDQyMy41NTUgMjAwLjA1OCA0MzkgMjU2IDQzOVoiIGZpbGw9IiMxMTExMTEiLz4KPHBhdGggZD0iTTI1NiAzNTFDMzYzLjY5NiAzNTEgNDUxIDI5MS40NTQgNDUxIDIxOEM0NTEgMTQ0LjU0NiAzNjMuNjk2IDg1IDI1NiA4NUMxNDguMzA0IDg1IDYxIDE0NC41NDYgNjEgMjE4QzYxIDI5MS40NTQgMTQ4LjMwNCAzNTEgMjU2IDM1MVoiIGZpbGw9IiM2NjY2NjYiLz4KPHBhdGggZD0iTTI1NiA0MjdDMzYzLjY5NiA0MjcgNDUxIDM2Ny40NTQgNDUxIDI5NFYyMThDNDUxIDI5MS40NTQgMzYzLjY5NiAzNTEgMjU2IDM1MUMxNDguMzA0IDM1MSA2MSAyOTEuNDU0IDYxIDIxOFYyOTRDNjEgMzY3LjQ1NCAxNDguMzA0IDQyNyAyNTYgNDI3WiIgZmlsbD0iIzMzMzMzMyIvPgo8L3N2Zz4K') !important}
+.is2d .knight.white {background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjU2IDQzOUMzMTEuOTQyIDQzOSAzNjMuMTE5IDQyMy41NTUgNDAwLjY0NyAzOTcuOTU5QzQzOC4xMTUgMzcyLjQwNCA0NjMgMzM1Ljg2IDQ2MyAyOTRWMjE4QzQ2MyAxNzYuMTQgNDM4LjExNSAxMzkuNTk2IDQwMC42NDcgMTE0LjA0MUMzNjMuMTE5IDg4LjQ0NDggMzExLjk0MiA3MyAyNTYgNzNDMjAwLjA1OCA3MyAxNDguODgxIDg4LjQ0NDggMTExLjM1MyAxMTQuMDQxQzczLjg4NDggMTM5LjU5NiA0OSAxNzYuMTQgNDkgMjE4VjI5NEM0OSAzMzUuODYgNzMuODg0OCAzNzIuNDA0IDExMS4zNTMgMzk3Ljk1OUMxNDguODgxIDQyMy41NTUgMjAwLjA1OCA0MzkgMjU2IDQzOVoiIGZpbGw9IiM1NTU1NTUiLz4KPHBhdGggZD0iTTI1NiAzNTFDMzYzLjY5NiAzNTEgNDUxIDI5MS40NTQgNDUxIDIxOEM0NTEgMTQ0LjU0NiAzNjMuNjk2IDg1IDI1NiA4NUMxNDguMzA0IDg1IDYxIDE0NC41NDYgNjEgMjE4QzYxIDI5MS40NTQgMTQ4LjMwNCAzNTEgMjU2IDM1MVoiIGZpbGw9IiNFRUVFRUUiLz4KPHBhdGggZD0iTTI1NiA0MjdDMzYzLjY5NiA0MjcgNDUxIDM2Ny40NTQgNDUxIDI5NFYyMThDNDUxIDI5MS40NTQgMzYzLjY5NiAzNTEgMjU2IDM1MUMxNDguMzA0IDM1MSA2MSAyOTEuNDU0IDYxIDIxOFYyOTRDNjEgMzY3LjQ1NCAxNDguMzA0IDQyNyAyNTYgNDI3WiIgZmlsbD0iI0JCQkJCQiIvPgo8L3N2Zz4K') !important}
+.is2d .pawn.black {background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjU2IDQzOUMzMTEuOTQyIDQzOSAzNjMuMTE5IDQyMy41NTUgNDAwLjY0NyAzOTcuOTU5QzQzOC4xMTUgMzcyLjQwNCA0NjMgMzM1Ljg2IDQ2MyAyOTRWMjE4QzQ2MyAxNzYuMTQgNDM4LjExNSAxMzkuNTk2IDQwMC42NDcgMTE0LjA0MUMzNjMuMTE5IDg4LjQ0NDggMzExLjk0MiA3MyAyNTYgNzNDMjAwLjA1OCA3MyAxNDguODgxIDg4LjQ0NDggMTExLjM1MyAxMTQuMDQxQzczLjg4NDggMTM5LjU5NiA0OSAxNzYuMTQgNDkgMjE4VjI5NEM0OSAzMzUuODYgNzMuODg0OCAzNzIuNDA0IDExMS4zNTMgMzk3Ljk1OUMxNDguODgxIDQyMy41NTUgMjAwLjA1OCA0MzkgMjU2IDQzOVoiIGZpbGw9IiMxMTExMTEiLz4KPHBhdGggZD0iTTI1NiAzNTFDMzYzLjY5NiAzNTEgNDUxIDI5MS40NTQgNDUxIDIxOEM0NTEgMTQ0LjU0NiAzNjMuNjk2IDg1IDI1NiA4NUMxNDguMzA0IDg1IDYxIDE0NC41NDYgNjEgMjE4QzYxIDI5MS40NTQgMTQ4LjMwNCAzNTEgMjU2IDM1MVoiIGZpbGw9IiM2NjY2NjYiLz4KPHBhdGggZD0iTTI1NiA0MjdDMzYzLjY5NiA0MjcgNDUxIDM2Ny40NTQgNDUxIDI5NFYyMThDNDUxIDI5MS40NTQgMzYzLjY5NiAzNTEgMjU2IDM1MUMxNDguMzA0IDM1MSA2MSAyOTEuNDU0IDYxIDIxOFYyOTRDNjEgMzY3LjQ1NCAxNDguMzA0IDQyNyAyNTYgNDI3WiIgZmlsbD0iIzMzMzMzMyIvPgo8L3N2Zz4K') !important}
+.is2d .pawn.white {background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjU2IDQzOUMzMTEuOTQyIDQzOSAzNjMuMTE5IDQyMy41NTUgNDAwLjY0NyAzOTcuOTU5QzQzOC4xMTUgMzcyLjQwNCA0NjMgMzM1Ljg2IDQ2MyAyOTRWMjE4QzQ2MyAxNzYuMTQgNDM4LjExNSAxMzkuNTk2IDQwMC42NDcgMTE0LjA0MUMzNjMuMTE5IDg4LjQ0NDggMzExLjk0MiA3MyAyNTYgNzNDMjAwLjA1OCA3MyAxNDguODgxIDg4LjQ0NDggMTExLjM1MyAxMTQuMDQxQzczLjg4NDggMTM5LjU5NiA0OSAxNzYuMTQgNDkgMjE4VjI5NEM0OSAzMzUuODYgNzMuODg0OCAzNzIuNDA0IDExMS4zNTMgMzk3Ljk1OUMxNDguODgxIDQyMy41NTUgMjAwLjA1OCA0MzkgMjU2IDQzOVoiIGZpbGw9IiM1NTU1NTUiLz4KPHBhdGggZD0iTTI1NiAzNTFDMzYzLjY5NiAzNTEgNDUxIDI5MS40NTQgNDUxIDIxOEM0NTEgMTQ0LjU0NiAzNjMuNjk2IDg1IDI1NiA4NUMxNDguMzA0IDg1IDYxIDE0NC41NDYgNjEgMjE4QzYxIDI5MS40NTQgMTQ4LjMwNCAzNTEgMjU2IDM1MVoiIGZpbGw9IiNFRUVFRUUiLz4KPHBhdGggZD0iTTI1NiA0MjdDMzYzLjY5NiA0MjcgNDUxIDM2Ny40NTQgNDUxIDI5NFYyMThDNDUxIDI5MS40NTQgMzYzLjY5NiAzNTEgMjU2IDM1MUMxNDguMzA0IDM1MSA2MSAyOTEuNDU0IDYxIDIxOFYyOTRDNjEgMzY3LjQ1NCAxNDguMzA0IDQyNyAyNTYgNDI3WiIgZmlsbD0iI0JCQkJCQiIvPgo8L3N2Zz4K') !important}
+.is2d .queen.black {background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjU2IDQzOUMzMTEuOTQyIDQzOSAzNjMuMTE5IDQyMy41NTUgNDAwLjY0NyAzOTcuOTU5QzQzOC4xMTUgMzcyLjQwNCA0NjMgMzM1Ljg2IDQ2MyAyOTRWMjE4QzQ2MyAxNzYuMTQgNDM4LjExNSAxMzkuNTk2IDQwMC42NDcgMTE0LjA0MUMzNjMuMTE5IDg4LjQ0NDggMzExLjk0MiA3MyAyNTYgNzNDMjAwLjA1OCA3MyAxNDguODgxIDg4LjQ0NDggMTExLjM1MyAxMTQuMDQxQzczLjg4NDggMTM5LjU5NiA0OSAxNzYuMTQgNDkgMjE4VjI5NEM0OSAzMzUuODYgNzMuODg0OCAzNzIuNDA0IDExMS4zNTMgMzk3Ljk1OUMxNDguODgxIDQyMy41NTUgMjAwLjA1OCA0MzkgMjU2IDQzOVoiIGZpbGw9IiMxMTExMTEiLz4KPHBhdGggZD0iTTI1NiAzNTFDMzYzLjY5NiAzNTEgNDUxIDI5MS40NTQgNDUxIDIxOEM0NTEgMTQ0LjU0NiAzNjMuNjk2IDg1IDI1NiA4NUMxNDguMzA0IDg1IDYxIDE0NC41NDYgNjEgMjE4QzYxIDI5MS40NTQgMTQ4LjMwNCAzNTEgMjU2IDM1MVoiIGZpbGw9IiM2NjY2NjYiLz4KPHBhdGggZD0iTTI1NiA0MjdDMzYzLjY5NiA0MjcgNDUxIDM2Ny40NTQgNDUxIDI5NFYyMThDNDUxIDI5MS40NTQgMzYzLjY5NiAzNTEgMjU2IDM1MUMxNDguMzA0IDM1MSA2MSAyOTEuNDU0IDYxIDIxOFYyOTRDNjEgMzY3LjQ1NCAxNDguMzA0IDQyNyAyNTYgNDI3WiIgZmlsbD0iIzMzMzMzMyIvPgo8L3N2Zz4K') !important}
+.is2d .queen.white {background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjU2IDQzOUMzMTEuOTQyIDQzOSAzNjMuMTE5IDQyMy41NTUgNDAwLjY0NyAzOTcuOTU5QzQzOC4xMTUgMzcyLjQwNCA0NjMgMzM1Ljg2IDQ2MyAyOTRWMjE4QzQ2MyAxNzYuMTQgNDM4LjExNSAxMzkuNTk2IDQwMC42NDcgMTE0LjA0MUMzNjMuMTE5IDg4LjQ0NDggMzExLjk0MiA3MyAyNTYgNzNDMjAwLjA1OCA3MyAxNDguODgxIDg4LjQ0NDggMTExLjM1MyAxMTQuMDQxQzczLjg4NDggMTM5LjU5NiA0OSAxNzYuMTQgNDkgMjE4VjI5NEM0OSAzMzUuODYgNzMuODg0OCAzNzIuNDA0IDExMS4zNTMgMzk3Ljk1OUMxNDguODgxIDQyMy41NTUgMjAwLjA1OCA0MzkgMjU2IDQzOVoiIGZpbGw9IiM1NTU1NTUiLz4KPHBhdGggZD0iTTI1NiAzNTFDMzYzLjY5NiAzNTEgNDUxIDI5MS40NTQgNDUxIDIxOEM0NTEgMTQ0LjU0NiAzNjMuNjk2IDg1IDI1NiA4NUMxNDguMzA0IDg1IDYxIDE0NC41NDYgNjEgMjE4QzYxIDI5MS40NTQgMTQ4LjMwNCAzNTEgMjU2IDM1MVoiIGZpbGw9IiNFRUVFRUUiLz4KPHBhdGggZD0iTTI1NiA0MjdDMzYzLjY5NiA0MjcgNDUxIDM2Ny40NTQgNDUxIDI5NFYyMThDNDUxIDI5MS40NTQgMzYzLjY5NiAzNTEgMjU2IDM1MUMxNDguMzA0IDM1MSA2MSAyOTEuNDU0IDYxIDIxOFYyOTRDNjEgMzY3LjQ1NCAxNDguMzA0IDQyNyAyNTYgNDI3WiIgZmlsbD0iI0JCQkJCQiIvPgo8L3N2Zz4K') !important}
+.is2d .rook.black {background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjU2IDQzOUMzMTEuOTQyIDQzOSAzNjMuMTE5IDQyMy41NTUgNDAwLjY0NyAzOTcuOTU5QzQzOC4xMTUgMzcyLjQwNCA0NjMgMzM1Ljg2IDQ2MyAyOTRWMjE4QzQ2MyAxNzYuMTQgNDM4LjExNSAxMzkuNTk2IDQwMC42NDcgMTE0LjA0MUMzNjMuMTE5IDg4LjQ0NDggMzExLjk0MiA3MyAyNTYgNzNDMjAwLjA1OCA3MyAxNDguODgxIDg4LjQ0NDggMTExLjM1MyAxMTQuMDQxQzczLjg4NDggMTM5LjU5NiA0OSAxNzYuMTQgNDkgMjE4VjI5NEM0OSAzMzUuODYgNzMuODg0OCAzNzIuNDA0IDExMS4zNTMgMzk3Ljk1OUMxNDguODgxIDQyMy41NTUgMjAwLjA1OCA0MzkgMjU2IDQzOVoiIGZpbGw9IiMxMTExMTEiLz4KPHBhdGggZD0iTTI1NiAzNTFDMzYzLjY5NiAzNTEgNDUxIDI5MS40NTQgNDUxIDIxOEM0NTEgMTQ0LjU0NiAzNjMuNjk2IDg1IDI1NiA4NUMxNDguMzA0IDg1IDYxIDE0NC41NDYgNjEgMjE4QzYxIDI5MS40NTQgMTQ4LjMwNCAzNTEgMjU2IDM1MVoiIGZpbGw9IiM2NjY2NjYiLz4KPHBhdGggZD0iTTI1NiA0MjdDMzYzLjY5NiA0MjcgNDUxIDM2Ny40NTQgNDUxIDI5NFYyMThDNDUxIDI5MS40NTQgMzYzLjY5NiAzNTEgMjU2IDM1MUMxNDguMzA0IDM1MSA2MSAyOTEuNDU0IDYxIDIxOFYyOTRDNjEgMzY3LjQ1NCAxNDguMzA0IDQyNyAyNTYgNDI3WiIgZmlsbD0iIzMzMzMzMyIvPgo8L3N2Zz4K') !important}
+.is2d .rook.white {background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjU2IDQzOUMzMTEuOTQyIDQzOSAzNjMuMTE5IDQyMy41NTUgNDAwLjY0NyAzOTcuOTU5QzQzOC4xMTUgMzcyLjQwNCA0NjMgMzM1Ljg2IDQ2MyAyOTRWMjE4QzQ2MyAxNzYuMTQgNDM4LjExNSAxMzkuNTk2IDQwMC42NDcgMTE0LjA0MUMzNjMuMTE5IDg4LjQ0NDggMzExLjk0MiA3MyAyNTYgNzNDMjAwLjA1OCA3MyAxNDguODgxIDg4LjQ0NDggMTExLjM1MyAxMTQuMDQxQzczLjg4NDggMTM5LjU5NiA0OSAxNzYuMTQgNDkgMjE4VjI5NEM0OSAzMzUuODYgNzMuODg0OCAzNzIuNDA0IDExMS4zNTMgMzk3Ljk1OUMxNDguODgxIDQyMy41NTUgMjAwLjA1OCA0MzkgMjU2IDQzOVoiIGZpbGw9IiM1NTU1NTUiLz4KPHBhdGggZD0iTTI1NiAzNTFDMzYzLjY5NiAzNTEgNDUxIDI5MS40NTQgNDUxIDIxOEM0NTEgMTQ0LjU0NiAzNjMuNjk2IDg1IDI1NiA4NUMxNDguMzA0IDg1IDYxIDE0NC41NDYgNjEgMjE4QzYxIDI5MS40NTQgMTQ4LjMwNCAzNTEgMjU2IDM1MVoiIGZpbGw9IiNFRUVFRUUiLz4KPHBhdGggZD0iTTI1NiA0MjdDMzYzLjY5NiA0MjcgNDUxIDM2Ny40NTQgNDUxIDI5NFYyMThDNDUxIDI5MS40NTQgMzYzLjY5NiAzNTEgMjU2IDM1MUMxNDguMzA0IDM1MSA2MSAyOTEuNDU0IDYxIDIxOFYyOTRDNjEgMzY3LjQ1NCAxNDguMzA0IDQyNyAyNTYgNDI3WiIgZmlsbD0iI0JCQkJCQiIvPgo8L3N2Zz4K') !important}
+    }
+  

scripts/createBoardsStylesheets.ts

@@ -0,0 +1,42 @@
+import { BoardStyle } from "./../src/types";
+import { loadImage, createCanvas } from "canvas";
+import Board from "../src/board/Board";
+import { CreateCanvas, LoadImage } from "../src/types";
+import boardStyles from "../src/board/styles-board/boardStyles";
+import fs from "fs";
+
+const size = 1024;
+const OUT_DIR = "public/boards";
+
+const main = async () => {
+  const create = () => createCanvas(size, size);
+  const load = (src: string) => loadImage(`public${src}`);
+
+  for (const boardStyle of Object.keys(boardStyles)) {
+    console.log(`Generating image for board ${boardStyle}...`);
+
+    const board = new Board(
+      {
+        size,
+        tiles: 8,
+        showBorder: false,
+        showExtraInfo: false,
+        boardStyle: boardStyle as BoardStyle,
+      },
+      load as unknown as LoadImage,
+      create as unknown as CreateCanvas
+    );
+
+    await board.renderStatic();
+    // @ts-ignore
+    const image = board.canvas.toBuffer();
+
+    if (!fs.existsSync(OUT_DIR)) {
+      fs.mkdirSync(OUT_DIR, { recursive: true });
+    }
+
+    fs.writeFileSync(`${OUT_DIR}/${boardStyle}.png`, image);
+  }
+};
+
+main();

src/board/Board.ts

@@ -1,5 +1,13 @@
-import { BoardConfig, Header, Position } from "./../types";
+import {
-import { Style, BoardStyle } from "../types";
+  BoardConfig,
+  CreateCanvas,
+  Header,
+  LoadImage,
+  Position,
+  Style,
+  BoardStyle,
+} from "./../types";
+// @ts-ignore
 import drawRectangle from "./layers/drawRectangle";
 import drawCoords from "./layers/drawCoords";
 import drawMoveIndicators from "./layers/drawMoveIndicators";
@@ -9,6 +17,7 @@ import drawExtraInfo from "./layers/drawExtraInfo";
 import boards from "./styles-board/boardStyles";
 import isLink from "../utils/isLink";
 import { PiecesStyle } from "./styles-pieces/piecesStyles";
+import loadImageBrowser from "./loaders/loadImage";
 
 const defaultConfig: BoardConfig = {
   size: 720,
@@ -62,13 +71,19 @@ class Board {
   private ctx: CanvasRenderingContext2D;
   private tempCtx: CanvasRenderingContext2D;
 
-  private tempCanvas: HTMLCanvasElement = document.createElement("canvas");
+  private tempCanvas: HTMLCanvasElement;
-  public canvas: HTMLCanvasElement = document.createElement("canvas");
+  public canvas: HTMLCanvasElement;
+
+  constructor(
+    config: Partial<BoardConfig> = {},
+    private loadImage: LoadImage = loadImageBrowser,
+    private createCanvas: CreateCanvas = () => document.createElement("canvas")
+  ) {
+    this.canvas = this.createCanvas();
+    this.tempCanvas = this.createCanvas();
 
-  constructor(config: Partial<BoardConfig> = {}) {
     const ctx = this.canvas.getContext("2d");
     const tempCtx = this.tempCanvas.getContext("2d");
-    this.canvas.classList.add("board");
 
     if (ctx === null || tempCtx === null) {
       throw new Error("Cannot create canvas 2D context");
@@ -94,7 +109,7 @@ class Board {
     this.cfg = cfg;
 
     this.setSize(cfg.size);
-    this.setStyle(cfg.boardStyle);
+    this.setStyle(cfg.boardStyle, refresh);
 
     if (refresh) {
       await this.refresh();
@@ -151,10 +166,12 @@ class Board {
     this.borderScale = scale;
   }
 
-  setStyle(style: BoardStyle) {
+  setStyle(style: BoardStyle, refresh: boolean = true) {
     this.style = boards[style];
     this.cfg.boardStyle = style;
+    if (refresh) {
       this.refresh();
+    }
     return this;
   }
 
@@ -252,12 +269,13 @@ class Board {
       this.scale,
       this.margin,
       this.style,
-      this.getFinalHeader()
+      this.getFinalHeader(),
+      this.loadImage
     );
   }
 
   async renderBackground() {
-    const canvas = document.createElement("canvas");
+    const canvas = this.createCanvas();
     const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
 
     canvas.width = this.size;
@@ -265,7 +283,19 @@ class Board {
 
     const { background, dark, light, border, coords } = this.style;
 
-    await drawRectangle(ctx, this.width, this.height, 0, 0, border);
+    ctx.clearRect(0, 0, this.size, this.size);
+    ctx.fillStyle = "#FF0000";
+    ctx.fillRect(0, 0, this.size, this.size);
+
+    await drawRectangle(
+      ctx,
+      this.width,
+      this.height,
+      0,
+      0,
+      border,
+      this.loadImage
+    );
 
     await drawRectangle(
       ctx,
@@ -274,6 +304,7 @@ class Board {
       this.cfg.showBorder ? this.borderWidth : 0,
       (this.cfg.showBorder ? this.borderWidth : 0) + this.margin,
       background,
+      this.loadImage,
       this.cfg.tiles
     );
 
@@ -288,7 +319,15 @@ class Board {
         const x = file * this.squareSize + this.borderWidth;
         const y = rank * this.squareSize + this.borderWidth + this.margin;
 
-        await drawRectangle(ctx, this.squareSize, this.squareSize, x, y, style);
+        await drawRectangle(
+          ctx,
+          this.squareSize,
+          this.squareSize,
+          x,
+          y,
+          style,
+          this.loadImage
+        );
       }
     }
 
@@ -306,6 +345,7 @@ class Board {
       );
     }
 
+    console.log("Background rendered!");
     this.background = canvas;
   }
 
@@ -331,7 +371,8 @@ class Board {
         this.borderWidth,
         this.cfg.tiles,
         this.cfg.flipped,
-        this.margin
+        this.margin,
+        this.loadImage
       );
     }
 
@@ -361,7 +402,8 @@ class Board {
       this.cfg.flipped,
       this.margin,
       this.cfg.piecesStyle,
-      this.cfg.showShadows
+      this.cfg.showShadows,
+      this.loadImage
     );
 
     if (this.cfg.showExtraInfo && header) {
@@ -384,6 +426,55 @@ class Board {
     this.ctx.drawImage(this.tempCanvas, 0, 0);
   }
 
+  async renderStatic() {
+    this.ctx.clearRect(0, 0, this.size, this.size);
+    const { background, dark, light, border } = this.style;
+
+    drawRectangle(
+      this.ctx,
+      this.width,
+      this.height,
+      0,
+      0,
+      border,
+      this.loadImage
+    );
+
+    drawRectangle(
+      this.ctx,
+      this.innerSize,
+      this.innerSize,
+      this.cfg.showBorder ? this.borderWidth : 0,
+      (this.cfg.showBorder ? this.borderWidth : 0) + this.margin,
+      background,
+      this.loadImage,
+      this.cfg.tiles
+    );
+
+    for (let rank = 0; rank < this.cfg.tiles; rank++) {
+      for (let file = 0; file < this.cfg.tiles; file++) {
+        const style =
+          (file % 2 === 0 && rank % 2 === 0) ||
+          (file % 2 !== 0 && rank % 2 !== 0)
+            ? light
+            : dark;
+
+        const x = file * this.squareSize + this.borderWidth;
+        const y = rank * this.squareSize + this.borderWidth + this.margin;
+
+        drawRectangle(
+          this.ctx,
+          this.squareSize,
+          this.squareSize,
+          x,
+          y,
+          style,
+          this.loadImage
+        );
+      }
+    }
+  }
+
   toImgUrl() {
     return this.canvas.toDataURL();
   }

src/board/layers/drawHeader.ts

@@ -1,7 +1,6 @@
-import { Header, Style } from "../../types";
+import { Header, LoadImage, Style } from "../../types";
 import drawRectangle from "./drawRectangle";
 import drawText from "./drawText";
-import loadImage from "../loaders/loadImage";
 
 const drawHeader = async (
   ctx: CanvasRenderingContext2D,
@@ -9,10 +8,19 @@ const drawHeader = async (
   scale: number,
   margin: number,
   style: Style,
-  data: Header
+  data: Header,
+  loadImage: LoadImage
 ) => {
   ctx.clearRect(0, 0, size, size);
-  await drawRectangle(ctx, size, size + margin * 2, 0, 0, style.border);
+  await drawRectangle(
+    ctx,
+    size,
+    size + margin * 2,
+    0,
+    0,
+    style.border,
+    loadImage
+  );
 
   const font = "Ubuntu";
 

src/board/layers/drawMoveIndicators.ts

@@ -1,4 +1,4 @@
-import { Solid } from "./../../types";
+import { Solid, LoadImage } from "./../../types";
 import { Move } from "chess.js";
 import { Style, SquareStyle } from "../../types";
 import drawRectangle from "./drawRectangle";
@@ -21,7 +21,8 @@ const drawMoveIndicators = async (
   borderWidth: number,
   tiles: number,
   flipped: boolean,
-  margin: number
+  margin: number,
+  loadImage: LoadImage
 ) => {
   const [x0, y0] = notationToXY(move.from, flipped, tiles);
   const [x1, y1] = notationToXY(move.to, flipped, tiles);
@@ -62,8 +63,24 @@ const drawMoveIndicators = async (
     toStyle = fromStyle;
   }
 
-  drawRectangle(ctx, squareSize, squareSize, fromX, fromY + margin, fromStyle);
+  drawRectangle(
-  drawRectangle(ctx, squareSize, squareSize, toX, toY + margin, toStyle);
+    ctx,
+    squareSize,
+    squareSize,
+    fromX,
+    fromY + margin,
+    fromStyle,
+    loadImage
+  );
+  drawRectangle(
+    ctx,
+    squareSize,
+    squareSize,
+    toX,
+    toY + margin,
+    toStyle,
+    loadImage
+  );
 };
 
 export default drawMoveIndicators;

src/board/layers/drawPieces.ts

@@ -1,6 +1,5 @@
-import { state } from "../../state";
+import { LoadImage, Position } from "../../types";
-import { Position } from "../../types";
+import PiecesCache from "../loaders/PiecesCache";
-import ImagesCache from "../loaders/PiecesCache";
 import { PiecesStyle } from "../styles-pieces/piecesStyles";
 
 const drawPieces = async (
@@ -11,7 +10,8 @@ const drawPieces = async (
   flipped: boolean,
   margin: number,
   piecesStyle: PiecesStyle,
-  shadow: boolean = true
+  shadow: boolean = true,
+  loadImage: LoadImage
 ) => {
   const { placement, check, mate, turn } = position;
   ctx.shadowColor = "rgba(0, 0, 0, 0)";
@@ -20,7 +20,7 @@ const drawPieces = async (
   ctx.shadowOffsetY = 0;
 
   for (const { x, y, type, color } of placement) {
-    const img = await ImagesCache.get(piecesStyle, type, color);
+    const img = await PiecesCache.get(piecesStyle, type, color, loadImage);
     const rank = flipped ? 8 - 1 - y : y;
     const file = flipped ? 8 - 1 - x : x;
 
@@ -28,7 +28,7 @@ const drawPieces = async (
       const hex = mate ? "#ff002f" : "#ffa600";
 
       ctx.shadowColor = hex;
-      ctx.shadowBlur = squareSize * (state.mobile ? 0.15 : 0.15);
+      ctx.shadowBlur = squareSize * 0.15;
       ctx.shadowOffsetX = 0;
       ctx.shadowOffsetY = 0;
       ctx.drawImage(

src/board/layers/drawRectangle.ts

@@ -1,6 +1,5 @@
-import { SquareStyle } from "../../types";
+import { LoadImage, SquareStyle } from "../../types";
 import createGradient from "../fill/createGradient";
-import loadImage from "../loaders/loadImage";
 
 const drawRectangle = async (
   ctx: CanvasRenderingContext2D,
@@ -9,6 +8,7 @@ const drawRectangle = async (
   x: number,
   y: number,
   squareStyle: SquareStyle,
+  loadImage: LoadImage,
   tiles: number = 8
 ) => {
   if (squareStyle.type === "image") {

src/board/loaders/PiecesCache.ts

@@ -1,16 +1,15 @@
-import { PieceType, PieceColor } from "../../types";
+import { PieceType, PieceColor, LoadImage } from "../../types";
 import {
   PiecesStyle,
   pieceNames,
   PieceName,
 } from "../styles-pieces/piecesStyles";
-import loadImage from "./loadImage";
 
 let style: PiecesStyle | null = null;
 let piecesImages: Map<string, HTMLImageElement> = new Map();
 
 const PiecesCache = {
-  async load(piecesSetName: PiecesStyle) {
+  async load(piecesSetName: PiecesStyle, loadImage: LoadImage) {
     await Promise.all(
       pieceNames.map((key) => {
         const src = `/pieces/${piecesSetName}/${key}.svg`;
@@ -24,10 +23,11 @@ const PiecesCache = {
   async get(
     piecesSetName: PiecesStyle,
     pieceName: PieceType,
-    pieceColor: PieceColor
+    pieceColor: PieceColor,
+    loadImage: LoadImage
   ) {
     if (style !== piecesSetName) {
-      await this.load(piecesSetName);
+      await this.load(piecesSetName, loadImage);
       style = piecesSetName;
     }
 
@@ -35,23 +35,6 @@ const PiecesCache = {
 
     return piecesImages.get(piece) as HTMLImageElement;
   },
-
-  async getDataURLs() {
-    return Promise.all(
-      [...piecesImages.entries()].map(
-        async ([key, img]: [string, HTMLImageElement]) => {
-          let blob = await fetch(img.src).then((r) => r.blob());
-          let dataUrl = await new Promise((resolve) => {
-            let reader = new FileReader();
-            reader.onload = () => resolve(reader.result);
-            reader.readAsDataURL(blob);
-          });
-
-          return [key, dataUrl];
-        }
-      )
-    );
-  },
 };
 
 export default PiecesCache;

src/board/styles-pieces/piecesStyles.ts

@@ -11,6 +11,7 @@ const piecesStyles = [
   "cardinal",
   "cases",
   "cburnett",
+  "checkers",
   "chess7",
   "chessnut",
   "companion",

src/player/Player.ts

@@ -210,7 +210,7 @@ class Player {
     }
 
     if (this.ply > 0 && state.siteConfig.sounds) {
-      state.boardConfig.piecesStyle.includes("anarc")
+      state.boardConfig.piecesStyle.includes("anarchy")
         ? this.playAnarchySFX(position)
         : this.playSFX(position);
     }

src/types.ts

@@ -205,3 +205,7 @@ export type Header = {
   Site: string | null;
   Result: string | null;
 };
+
+export type LoadImage = (src: string) => Promise<HTMLImageElement>;
+
+export type CreateCanvas = () => HTMLCanvasElement;

tsconfig.json

@@ -15,7 +15,7 @@
     "noImplicitReturns": true,
     "jsx": "preserve",
     "jsxImportSource": "solid-js",
-    "types": ["vite/client"]
+    "types": ["vite/client", "node"]
   },
   "include": ["./src", "public/gif.worker.js", "public/gif.worker.js"]
 }

tsconfig.scripts.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "CommonJS",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "Node",
+    "strict": true,
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "types": ["vite/client", "node"]
+  },
+  "include": ["./src", "public/gif.worker.js", "public/gif.worker.js"]
+}