haunter/sharechess
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added stylesheets generation for lichess boards

Browse Source
This commit is contained in:
Maciej Caderek
2022-05-03 05:34:39 +02:00
parent 2c5341a6b5
commit 00b6f63b0c
266 changed files with 1942 additions and 470 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
scripts/createBoardsStylesheets.ts
View File

@@ -1,5 +1,5 @@
import { BoardStyle, Style } from "./../src/types";
import { loadImage, createCanvas } from "canvas";
import { loadImage, createCanvas, Canvas } from "canvas";
import Board from "../src/board/Board";
import { CreateCanvas, LoadImage } from "../src/types";
import boardStyles from "../src/board/styles-board/boardStyles";
@@ -8,8 +8,32 @@ 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 OUT_DIR = "public/stylus/boards";
const LichessStylesheet = (
dataURL: string,
boardName: string,
style: Style
) => {
return `
/* ==UserStyle==
@name Lichess ${boardName} chessboard
@namespace lichess.org
@version 1.0.0
@description Chessboard for lichess.org
@author sharechess.github.io
==/UserStyle== */
@-moz-document domain("lichess.org") {
.is2d cg-board {background-image: url(${dataURL}) !important}
.is2d coords {
--cg-ccw: ${style.coords.onDark} !important;
--cg-ccb: ${style.coords.onLight} !important;
}
square.last-move {background-color: ${style.moveIndicator.color} !important}
}
`;
};
const ChesscomStylesheet = (
dataURL: string,
@@ -18,10 +42,10 @@ const ChesscomStylesheet = (
) => {
return `
/* ==UserStyle==
@name ${boardName} chess set
@name Chess.com ${boardName} chessboard
@namespace chess.com
@version 1.0.0
@description Chess set for chess.com
@description Chessboard for chess.com
@author sharechess.github.io
==/UserStyle== */
@@ -35,15 +59,8 @@ const ChesscomStylesheet = (
};
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 });
if (!fs.existsSync(OUT_DIR)) {
fs.mkdirSync(OUT_DIR, { recursive: true });
}
const create = () => createCanvas(size, size);
@@ -72,8 +89,7 @@ const main = async () => {
);
await board.renderStatic();
// @ts-ignore
const image = board.canvas.toBuffer();
const image = (board.canvas as unknown as Canvas).toBuffer();
const minified =
styleObj.category === "gradient" // Don't minify gradients, as it results in a BIGGER file
? image
@@ -83,6 +99,12 @@ const main = async () => {
const imgURL = `data:image/png;base64,${minified.toString("base64")}`;
const lichessStylesheet = LichessStylesheet(
imgURL,
boardNamePretty,
styleObj
);
const chesscomStylesheet = ChesscomStylesheet(
imgURL,
boardNamePretty,
@@ -90,7 +112,12 @@ const main = async () => {
);
fs.writeFileSync(
`${OUT_DIR_CHESSCOM}/${boardStyle}.user.css`,
`${OUT_DIR}/${boardStyle}_lichess.user.css`,
lichessStylesheet
);
fs.writeFileSync(
`${OUT_DIR}/${boardStyle}_chesscom.user.css`,
chesscomStylesheet
);
}

39
scripts/createLichessPiecesCSS.js
View File

@@ -1,39 +0,0 @@
const fs = require("fs");
const pieces = require("./utils/pieces");
const files = fs.readdirSync("_release_assets/encoded_pieces");
for (const file of files) {
const [name] = file.split(".");
const data = JSON.parse(
fs.readFileSync(`_release_assets/encoded_pieces/${file}`, {
encoding: "utf8",
})
);
const css = data
.map(([key, dataURL]) => {
const [piece, color] = key.split("");
return `.is2d .${pieces.names[piece]}.${pieces.colors[color]} {background-image:url('${dataURL}')}`;
})
.join("\n");
fs.writeFileSync(`_release_assets/lichess_css/${name}.css`, css);
const cssExternal = data
.map(([key]) => {
const [piece, color] = key.split("");
return `.is2d .${pieces.names[piece]}.${
pieces.colors[color]
} {background-image:url('/assets/piece/${name}/${color}${piece.toUpperCase()}.svg')}`;
})
.join("\n");
fs.writeFileSync(
`_release_assets/lichess_css/${name}.external.css`,
cssExternal
);
}

41
scripts/createPiecesStylesheets.js → scripts/createPiecesStylesheets.ts
View File

@@ -1,21 +1,24 @@
const fs = require("fs");
const pieces = require("./utils/pieces");
const encode = require("./utils/encode");
import { PieceType, PieceColor } from "../src/types";
import fs from "fs";
import pieces from "./utils/pieces";
import encode from "./utils/encode";
const PIECES_FOLDER = "public/pieces";
const OUT_DIR_LICHESS = "public/stylus/lichess";
const OUT_DIR_CHESSCOM = "public/stylus/chesscom";
const OUT_DIR = "public/stylus/pieces";
const LichessCSSEntry = (key, dataURL, forceStyle = true) => {
const [piece, color] = key.split("");
type CSSEntry = (key: string, dataURL: string, forceStyle?: boolean) => string;
type Header = (netName: string, entries: string[]) => string;
const LichessCSSEntry: CSSEntry = (key, dataURL, forceStyle = true) => {
const [piece, color] = key.split("") as [PieceType, PieceColor];
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 ChesscomCSSEntry: CSSEntry = (key, dataURL, forceStyle = true) => {
const [piece, color] = key.split("") as [PieceType, PieceColor];
const selector = `${color}${piece}`;
return `.piece.${selector}, .promotion-piece.${selector} {background-image:url('${dataURL}')${
@@ -23,10 +26,10 @@ const ChesscomCSSEntry = (key, dataURL, forceStyle = true) => {
}}`;
};
const LichessHeader = (setName, entries) => {
const LichessHeader: Header = (setName, entries) => {
return `
/* ==UserStyle==
@name ${setName} chess set
@name Lichess ${setName} chess set
@namespace lichess.org
@version 1.0.0
@description Chess set for lichess.org
@@ -39,10 +42,10 @@ const LichessHeader = (setName, entries) => {
`;
};
const ChesscomHeader = (setName, entries) => {
const ChesscomHeader: Header = (setName, entries) => {
return `
/* ==UserStyle==
@name ${setName} chess set
@name Chess.com ${setName} chess set
@namespace chess.com
@version 1.0.0
@description Chess set for chess.com
@@ -56,12 +59,8 @@ const ChesscomHeader = (setName, entries) => {
};
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 });
if (!fs.existsSync(OUT_DIR)) {
fs.mkdirSync(OUT_DIR, { recursive: true });
}
const sets = fs.readdirSync(PIECES_FOLDER);
@@ -88,8 +87,8 @@ const createUserStyles = () => {
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);
fs.writeFileSync(`${OUT_DIR}/${setName}_lichess.user.css`, cssLichess);
fs.writeFileSync(`${OUT_DIR}/${setName}_chesscom.user.css`, cssChesscom);
}
};

40
scripts/getPieces.js
View File

@@ -1,40 +0,0 @@
const getBackgroundUrl = (element, prop) => {
const style = window.getComputedStyle(element);
return style.getPropertyValue(prop).replace('url("', "").replace('")', "");
};
const items = {
kw: "",
qw: "",
rw: "",
bw: "",
nw: "",
pw: "",
kb: "",
qb: "",
rb: "",
bb: "",
nb: "",
pb: "",
};
document.querySelectorAll("cg-board > piece").forEach((item) => {
const color = item.classList.contains("black") ? "b" : "w";
const type = item.classList.contains("pawn")
? "p"
: item.classList.contains("king")
? "k"
: item.classList.contains("queen")
? "q"
: item.classList.contains("bishop")
? "b"
: item.classList.contains("rook")
? "r"
: "n";
const url = getBackgroundUrl(item, "background-image");
items[`${type}${color}`] = url;
});
console.log(JSON.stringify(items, null, 2));

21
scripts/tsconfig.json Normal file
View File

@@ -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"]
}

8
scripts/utils/encode.js → scripts/utils/encode.ts
View File

@@ -1,7 +1,7 @@
const fs = require("fs");
const mime = require("mime");
import fs from "fs";
import mime from "mime";
const encode = (filePath) => {
const encode = (filePath: string) => {
const data = fs.readFileSync(filePath).toString("base64");
const type = mime.getType(filePath);
@@ -9,4 +9,4 @@ const encode = (filePath) => {
return `data:${type};base64,${data}`;
};
module.exports = encode;
export default encode;

4
scripts/utils/pieces.js → scripts/utils/pieces.ts
View File

@@ -12,4 +12,6 @@ const piecesColors = {
w: "white",
};
module.exports = { colors: piecesColors, names: piecesNames };
const pieces = { colors: piecesColors, names: piecesNames };
export default pieces;