WIP

src/board/loaders/PiecesCache.ts

@@ -2,24 +2,33 @@ import { PieceType, PieceColor, Piece } from "../../types";
 import piecesSets from "../styles-pieces";
 import loadImage from "./loadImage";
 
-const images: Map<string, HTMLImageElement> = new Map();
+let style: keyof typeof piecesSets | null = null;
+let piecesImages: Map<string, HTMLImageElement> = new Map();
 
 const PiecesCache = {
+  async load(piecesSetName: keyof typeof piecesSets) {
+    await Promise.all(
+      Object.entries(piecesSets[piecesSetName]).map(([key, src]) => {
+        return loadImage(src).then((img) => {
+          piecesImages.set(key, img);
+        });
+      })
+    );
+  },
+
   async get(
     piecesSetName: keyof typeof piecesSets,
     pieceName: PieceType,
     pieceColor: PieceColor
   ) {
-    const piece = `${pieceName}${pieceColor}` as Piece;
+    if (style !== piecesSetName) {
-    const key = `${piecesSetName}_${piece}`;
+      await this.load(piecesSetName);
-    if (!images.has(key)) {
+      style = piecesSetName;
-      const pieceSrc = piecesSets[piecesSetName][piece];
-      const img = await loadImage(pieceSrc);
-
-      images.set(key, img);
     }
 
-    return images.get(key) as HTMLImageElement;
+    const piece = `${pieceName}${pieceColor}` as Piece;
+
+    return piecesImages.get(piece) as HTMLImageElement;
   },
 };
 

src/board/styles-board/index.ts

@@ -19,8 +19,6 @@ import mud from "./solid/mud";
 import rose from "./solid/rose";
 import avocado from "./solid/avocado";
 
-// import flagUkraine from "./solid/flag-ukraine";
-
 import smoothSunset from "./gradient/smooth-sunset";
 import smoothSummer from "./gradient/smooth-summer";
 import smoothSpring from "./gradient/smooth-spring";
@@ -65,8 +63,6 @@ const styles = {
   botez,
   avocado,
 
-  // flagUkraine,
-
   smoothSunset,
   smoothSummer,
   smoothSpring,

src/board/styles-board/solid/flag-ukraine.ts

@@ -1,41 +0,0 @@
-import { Style } from "../../../types";
-
-const style: Style = {
-  name: "Ukraine",
-  category: "solid",
-  background: {
-    type: "solid",
-    data: {
-      color: "transparent",
-    },
-  },
-  dark: {
-    type: "solid",
-    data: {
-      color: "#3e81c9",
-    },
-  },
-  light: {
-    type: "solid",
-    data: {
-      color: "#FFEB82",
-    },
-  },
-  moveIndicator: {
-    type: "color",
-    data: "#00ff0055",
-  },
-  border: {
-    type: "solid",
-    data: {
-      color: "#003D7E",
-    },
-  },
-  coords: {
-    onLight: "#001D3C",
-    onDark: "#fff",
-    onBorder: "#FED500",
-  },
-};
-
-export default style;