Files
sharechess/scripts/createBoardsStylesheets.ts
2022-05-03 02:28:57 +02:00

102 lines
2.9 KiB
TypeScript

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";
import imagemin from "imagemin";
import imageminPngquant from "imagemin-pngquant";
const size = 1200;
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 () => {
// const imagemin = await import("imagemin");
// console.log(imagemin);
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 stylesheets for board: ${boardStyle}...`);
const boardNamePretty = boardStyle
.split(/[-_]/)
.map((chunk) => chunk[0].toUpperCase() + chunk.substring(1))
.join(" ");
const styleObj = boardStyles[boardStyle as 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();
const minified =
styleObj.category === "gradient" // Don't minify gradients, as it results in a BIGGER file
? image
: await imagemin.buffer(image, {
plugins: [imageminPngquant({ quality: [0.7, 0.9] })],
});
// fs.writeFileSync(`${OUT_DIR_CHESSCOM}/${boardStyle}.min.png`, minified);
const imgURL = `data:image/png;base64,${minified.toString("base64")}`;
const chesscomStylesheet = ChesscomStylesheet(
imgURL,
boardNamePretty,
styleObj
);
fs.writeFileSync(
`${OUT_DIR_CHESSCOM}/${boardStyle}.user.css`,
chesscomStylesheet
);
}
};
main();