Board styles - crated script for chesscom board styles, changed moves indicator type to handle different targets

scripts/createBoardsStylesheets.ts

@@ -1,19 +1,57 @@
-import { BoardStyle } from "./../src/types";
+import { BoardStyle, Style } 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 = 128;
+const size = 1200;
-const OUT_DIR = "public/boards";
+// const OUT_DIR = "public/boards";
+const OUT_DIR_LICHESS = "public/stylus/lichess/boards";
+const OUT_DIR_CHESSCOM = "public/stylus/chesscom/boards";
+
+const ChesscomStylesheet = (
+  dataURL: string,
+  boardName: string,
+  style: Style
+) => {
+  return `
+    /* ==UserStyle==
+    @name           ${boardName} 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") {
+      .board {background-image: url(${dataURL}) !important}
+      .coordinate-light {fill: ${style.coords.onLight} !important}
+      .coordinate-dark {fill: ${style.coords.onDark} !important}
+      .highlight {opacity: 1 !important; background-color: ${style.moveIndicator.color} !important}
+    }
+  `;
+};
 
 const main = async () => {
+  if (!fs.existsSync(OUT_DIR_CHESSCOM)) {
+    fs.mkdirSync(OUT_DIR_CHESSCOM, { recursive: true });
+  }
+
+  if (!fs.existsSync(OUT_DIR_LICHESS)) {
+    fs.mkdirSync(OUT_DIR_LICHESS, { recursive: true });
+  }
+
   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}...`);
+    console.log(`Generating stylesheets for board: ${boardStyle}...`);
+
+    const boardNamePretty = boardStyle
+      .split(/[-_]/)
+      .map((chunk) => chunk[0].toUpperCase() + chunk.substring(1))
+      .join(" ");
 
     const board = new Board(
       {
@@ -29,13 +67,18 @@ const main = async () => {
 
     await board.renderStatic();
     // @ts-ignore
-    const image = board.canvas.toBuffer();
+    // const image = board.canvas.toBuffer();
 
-    if (!fs.existsSync(OUT_DIR)) {
+    const chesscomStylesheet = ChesscomStylesheet(
-      fs.mkdirSync(OUT_DIR, { recursive: true });
+      board.toImgUrl(),
-    }
+      boardNamePretty,
+      boardStyles[boardStyle as BoardStyle]
+    );
 
-    fs.writeFileSync(`${OUT_DIR}/${boardStyle}.png`, image);
+    fs.writeFileSync(
+      `${OUT_DIR_CHESSCOM}/${boardStyle}.user.css`,
+      chesscomStylesheet
+    );
   }
 };
 

src/board/layers/drawMoveIndicators.ts

@@ -34,12 +34,12 @@ const drawMoveIndicators = async (
   let fromStyle;
   let toStyle;
 
-  if (moveIndicator.type === "hueShift") {
+  if (moveIndicator.hueShift !== 0) {
     const newLight: Solid = {
       type: "solid",
       data: {
         color: light.data.color
-          ? changeHSL(light.data.color, moveIndicator.data)
+          ? changeHSL(light.data.color, moveIndicator.hueShift)
           : "#00ff0055",
       },
     };
@@ -48,7 +48,7 @@ const drawMoveIndicators = async (
       type: "solid",
       data: {
         color: dark.data.color
-          ? changeHSL(dark.data.color, moveIndicator.data)
+          ? changeHSL(dark.data.color, moveIndicator.hueShift)
           : "#00ff0055",
       },
     };
@@ -58,7 +58,7 @@ const drawMoveIndicators = async (
   } else {
     fromStyle = {
       type: "solid",
-      data: { color: moveIndicator.data },
+      data: { color: moveIndicator.color },
     } as SquareStyle;
     toStyle = fromStyle;
   }

src/board/styles-board/gradient/contrast_a.ts

@@ -22,8 +22,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "color",
+    hueShift: 0,
-    data: "#3cff0055",
+    color: "#3cff0055",
   },
   border: {
     type: "gradient",

src/board/styles-board/gradient/contrast_b.ts

@@ -22,8 +22,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "color",
+    hueShift: 0,
-    data: "#ffaa0055",
+    color: "#ffaa0055",
   },
   border: {
     type: "gradient",

src/board/styles-board/gradient/contrast_c.ts

@@ -22,8 +22,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "color",
+    hueShift: 0,
-    data: "#00ffff55",
+    color: "#00ffff55",
   },
   border: {
     type: "gradient",

src/board/styles-board/gradient/contrast_d.ts

@@ -22,8 +22,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "color",
+    hueShift: 0,
-    data: "#ffaa0055",
+    color: "#ffaa0055",
   },
   border: {
     type: "gradient",

src/board/styles-board/gradient/smooth_forest.ts

@@ -22,8 +22,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "color",
+    hueShift: 0,
-    data: "#ffff0055",
+    color: "#ffff0055",
   },
   border: {
     type: "gradient",

src/board/styles-board/gradient/smooth_laguna.ts

@@ -22,8 +22,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "color",
+    hueShift: 0,
-    data: "#3cff0055",
+    color: "#3cff0055",
   },
   border: {
     type: "gradient",

src/board/styles-board/gradient/smooth_mono.ts

@@ -22,8 +22,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "color",
+    hueShift: 0,
-    data: "#3cff0055",
+    color: "#3cff0055",
   },
   border: {
     type: "gradient",

src/board/styles-board/gradient/smooth_sea.ts

@@ -22,8 +22,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "color",
+    hueShift: 0,
-    data: "#ff00ff55",
+    color: "#ff00ff55",
   },
   border: {
     type: "gradient",

src/board/styles-board/gradient/smooth_spring.ts

@@ -22,8 +22,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "color",
+    hueShift: 0,
-    data: "#00ffff55",
+    color: "#00ffff55",
   },
   border: {
     type: "gradient",

src/board/styles-board/gradient/smooth_summer.ts

@@ -22,8 +22,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "color",
+    hueShift: 0,
-    data: "#00ffee55",
+    color: "#00ffee55",
   },
   border: {
     type: "gradient",

src/board/styles-board/gradient/smooth_sunset.ts

@@ -22,8 +22,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "color",
+    hueShift: 0,
-    data: "#00ffee55",
+    color: "#00ffee55",
   },
   border: {
     type: "gradient",

src/board/styles-board/gradient/smooth_violet.ts

@@ -22,8 +22,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "color",
+    hueShift: 0,
-    data: "#ffaa0055",
+    color: "#ffaa0055",
   },
   border: {
     type: "gradient",

src/board/styles-board/pic/lines_alabaster.ts

@@ -21,8 +21,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "color",
+    hueShift: 0,
-    data: "#55ff0022",
+    color: "#55ff0022",
   },
   border: {
     type: "solid",

src/board/styles-board/pic/lines_cardboard.ts

@@ -21,8 +21,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "color",
+    hueShift: 0,
-    data: "#55ff0022",
+    color: "#55ff0022",
   },
   border: {
     type: "image",

src/board/styles-board/pic/lines_paper.ts

@@ -21,8 +21,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "color",
+    hueShift: 0,
-    data: "#55ff0022",
+    color: "#55ff0022",
   },
   border: {
     type: "image",

src/board/styles-board/pic/lines_parchment.ts

@@ -21,8 +21,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "color",
+    hueShift: 0,
-    data: "#55ff0022",
+    color: "#55ff0022",
   },
   border: {
     type: "solid",

src/board/styles-board/pic/wood1.ts

@@ -21,8 +21,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "color",
+    hueShift: 0,
-    data: "#55ff0022",
+    color: "#55ff0022",
   },
   border: {
     type: "image",

src/board/styles-board/pic/wood2.ts

@@ -21,8 +21,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "color",
+    hueShift: 0,
-    data: "#55ff0022",
+    color: "#55ff0022",
   },
   border: {
     type: "image",

src/board/styles-board/pic/wood3.ts

@@ -21,8 +21,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "color",
+    hueShift: 0,
-    data: "#ff007733",
+    color: "#ff007733",
   },
   border: {
     type: "image",

src/board/styles-board/pic/wood4.ts

@@ -21,8 +21,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "color",
+    hueShift: 0,
-    data: "#ff007733",
+    color: "#ff007733",
   },
   border: {
     type: "image",

src/board/styles-board/pic/wood5.ts

@@ -21,8 +21,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "color",
+    hueShift: 0,
-    data: "#55ff0022",
+    color: "#55ff0022",
   },
   border: {
     type: "image",

src/board/styles-board/pic/wood6.ts

@@ -21,8 +21,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "color",
+    hueShift: 0,
-    data: "#55ff0022",
+    color: "#55ff0022",
   },
   border: {
     type: "image",

src/board/styles-board/pic/wood7.ts

@@ -21,8 +21,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "color",
+    hueShift: 0,
-    data: "#55ff0022",
+    color: "#55ff0022",
   },
   border: {
     type: "image",

src/board/styles-board/pic/wood8.ts

@@ -21,8 +21,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "color",
+    hueShift: 0,
-    data: "#55ff0022",
+    color: "#55ff0022",
   },
   border: {
     type: "image",

src/board/styles-board/solid/avocado.ts

@@ -21,8 +21,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "hueShift",
+    hueShift: 70,
-    data: 70,
+    color: "#",
   },
   border: {
     type: "solid",

src/board/styles-board/solid/azure.ts

@@ -21,8 +21,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "color",
+    hueShift: 0,
-    data: "#ff000044",
+    color: "#ff000044",
   },
   border: {
     type: "solid",

src/board/styles-board/solid/botez.ts

@@ -21,8 +21,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "color",
+    hueShift: 0,
-    data: "#7dacc97f",
+    color: "#7dacc97f",
   },
   border: {
     type: "solid",

src/board/styles-board/solid/clay.ts

@@ -21,8 +21,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "color",
+    hueShift: 0,
-    data: "#ffff0055",
+    color: "#ffff0055",
   },
   border: {
     type: "solid",

src/board/styles-board/solid/danny.ts

@@ -21,8 +21,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "color",
+    hueShift: 0,
-    data: "#ffff007f",
+    color: "#ffff007f",
   },
   border: {
     type: "solid",

src/board/styles-board/solid/danny_blue.ts

@@ -21,8 +21,8 @@ const style: Style = {
     },
   },
   moveIndicator: {
-    type: "color",
+    hueShift: 0,
-    data: "#00bfff7f",
+    color: "#00bfff7f",
   },
   border: {
     type: "solid",