Added minification of board images in stylesheets

package.json

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

scripts/createBoardsStylesheets.ts

@@ -4,9 +4,10 @@ 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 = "public/boards";
 const OUT_DIR_LICHESS = "public/stylus/lichess/boards";
 const OUT_DIR_CHESSCOM = "public/stylus/chesscom/boards";
 
@@ -34,6 +35,9 @@ 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 });
   }
@@ -53,6 +57,8 @@ const main = async () => {
       .map((chunk) => chunk[0].toUpperCase() + chunk.substring(1))
       .join(" ");
 
+    const styleObj = boardStyles[boardStyle as BoardStyle];
+
     const board = new Board(
       {
         size,
@@ -67,12 +73,22 @@ const main = async () => {
 
     await board.renderStatic();
     // @ts-ignore
-    // const image = board.canvas.toBuffer();
+    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(
-      board.toImgUrl(),
+      imgURL,
       boardNamePretty,
-      boardStyles[boardStyle as BoardStyle]
+      styleObj
     );
 
     fs.writeFileSync(

src/player/Player.ts

@@ -111,12 +111,10 @@ class Player {
   }
 
   playAnarchySFX(position: Position) {
-    if (position.mate) {
-      sfx.death.play();
-    }
-
     if (position.move?.flags && position.move.flags.includes("e")) {
       sfx.enPassant.play();
+    } else if (position.mate) {
+      sfx.death.play();
     }
 
     if (position.move?.flags && position.move.flags.includes("p")) {

src/player/sfx.ts

@@ -23,7 +23,7 @@ const sfx = {
   }),
   enPassant: new Howl({
     src: ["/sfx/anarchy/en-passant.mp3"],
-    volume: 0.2,
+    volume: 0.5,
   }),
   horsyMove: new Howl({
     src: ["/sfx/anarchy/horsy-move.mp3"],