Added script to create user styles for Stylus + generated stylesheets for pieces

scripts/createLichessPiecesCSS.js

@@ -1,21 +1,8 @@
 const fs = require("fs");
+const pieces = require("./utils/pieces");
 
 const files = fs.readdirSync("_release_assets/encoded_pieces");
 
-const piecesNames = {
-  p: "pawn",
-  b: "bishop",
-  r: "rook",
-  n: "knight",
-  q: "queen",
-  k: "king",
-};
-
-const piecesColors = {
-  b: "black",
-  w: "white",
-};
-
 for (const file of files) {
   const [name] = file.split(".");
 
@@ -29,7 +16,7 @@ for (const file of files) {
     .map(([key, dataURL]) => {
       const [piece, color] = key.split("");
 
-      return `.is2d .${piecesNames[piece]}.${piecesColors[color]} {background-image:url('${dataURL}')}`;
+      return `.is2d .${pieces.names[piece]}.${pieces.colors[color]} {background-image:url('${dataURL}')}`;
     })
     .join("\n");
 
@@ -39,8 +26,8 @@ for (const file of files) {
     .map(([key]) => {
       const [piece, color] = key.split("");
 
-      return `.is2d .${piecesNames[piece]}.${
-        piecesColors[color]
+      return `.is2d .${pieces.names[piece]}.${
+        pieces.colors[color]
       } {background-image:url('/assets/piece/${name}/${color}${piece.toUpperCase()}.svg')}`;
     })
     .join("\n");

scripts/createPiecesStylesheets.js

@@ -0,0 +1,96 @@
+const fs = require("fs");
+const pieces = require("./utils/pieces");
+const encode = require("./utils/encode");
+
+const PIECES_FOLDER = "public/pieces";
+const OUT_DIR_LICHESS = "public/stylus/lichess";
+const OUT_DIR_CHESSCOM = "public/stylus/chesscom";
+
+const LichessCSSEntry = (key, dataURL, forceStyle = true) => {
+  const [piece, color] = key.split("");
+
+  return `.is2d .${pieces.names[piece]}.${
+    pieces.colors[color]
+  } {background-image:url('${dataURL}')${forceStyle ? " !important" : ""}}`;
+};
+
+const ChesscomCSSEntry = (key, dataURL, forceStyle = true) => {
+  const [piece, color] = key.split("");
+  const selector = `${color}${piece}`;
+
+  return `.piece.${selector}, .promotion-piece.${selector} {background-image:url('${dataURL}')${
+    forceStyle ? " !important" : ""
+  }}`;
+};
+
+const LichessHeader = (setName, entries) => {
+  return `
+    /* ==UserStyle==
+    @name           ${setName} 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") {
+      ${entries.join("\n")}
+    }
+  `;
+};
+
+const ChesscomHeader = (setName, entries) => {
+  return `
+    /* ==UserStyle==
+    @name           ${setName} 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") {
+      ${entries.join("\n")}
+    }
+  `;
+};
+
+const createUserStyles = () => {
+  if (!fs.existsSync(OUT_DIR_LICHESS)) {
+    fs.mkdirSync(OUT_DIR_LICHESS, { recursive: true });
+  }
+
+  if (!fs.existsSync(OUT_DIR_CHESSCOM)) {
+    fs.mkdirSync(OUT_DIR_CHESSCOM, { recursive: true });
+  }
+
+  const sets = fs.readdirSync(PIECES_FOLDER);
+
+  for (const setName of sets) {
+    const files = fs.readdirSync(`${PIECES_FOLDER}/${setName}`);
+
+    const setNamePretty = setName
+      .split(/[-_]/)
+      .map((chunk) => chunk[0].toUpperCase() + chunk.substring(1))
+      .join(" ");
+
+    const entriesLichess = [];
+    const entriesChesscom = [];
+
+    for (const fileName of files) {
+      const key = fileName.split(".")[0];
+      const dataURL = encode(`${PIECES_FOLDER}/${setName}/${fileName}`);
+
+      entriesLichess.push(LichessCSSEntry(key, dataURL));
+      entriesChesscom.push(ChesscomCSSEntry(key, dataURL));
+    }
+
+    const cssLichess = LichessHeader(setNamePretty, entriesLichess);
+    const cssChesscom = ChesscomHeader(setNamePretty, entriesChesscom);
+
+    fs.writeFileSync(`${OUT_DIR_LICHESS}/${setName}.user.css`, cssLichess);
+    fs.writeFileSync(`${OUT_DIR_CHESSCOM}/${setName}.user.css`, cssChesscom);
+  }
+};
+
+createUserStyles();

scripts/utils/encode.js

@@ -0,0 +1,12 @@
+const fs = require("fs");
+const mime = require("mime");
+
+const encode = (filePath) => {
+  const data = fs.readFileSync(filePath).toString("base64");
+
+  const type = mime.getType(filePath);
+
+  return `data:${type};base64,${data}`;
+};
+
+module.exports = encode;

scripts/utils/pieces.js

@@ -0,0 +1,15 @@
+const piecesNames = {
+  p: "pawn",
+  b: "bishop",
+  r: "rook",
+  n: "knight",
+  q: "queen",
+  k: "king",
+};
+
+const piecesColors = {
+  b: "black",
+  w: "white",
+};
+
+module.exports = { colors: piecesColors, names: piecesNames };