WIP

src/board/Board.ts

@@ -245,7 +245,8 @@ class Board {
       this.innerSize,
       this.cfg.showBorder ? this.borderWidth : 0,
       (this.cfg.showBorder ? this.borderWidth : 0) + this.margin,
-      background
+      background,
+      this.cfg.tiles
     );
 
     for (let rank = 0; rank < this.cfg.tiles; rank++) {

src/board/layers/drawRectangle.ts

@@ -8,11 +8,28 @@ const drawRectangle = async (
   height: number,
   x: number,
   y: number,
-  squareStyle: SquareStyle
+  squareStyle: SquareStyle,
+  tiles: number = 8
 ) => {
   if (squareStyle.type === "image") {
     const img = await loadImage(squareStyle.data.src);
-    ctx.drawImage(img, x, y, width, height);
+
+    if (tiles < 8) {
+      ctx.drawImage(
+        img,
+        0,
+        0,
+        img.width * (tiles / 8),
+        img.height * (tiles / 8),
+        x,
+        y,
+        width,
+        height
+      );
+    } else {
+      ctx.drawImage(img, x, y, width, height);
+    }
+
     return;
   }
 

src/board/styles-board/index.ts

@@ -13,7 +13,6 @@ import calm from "./gradient/calm";
 import laguna from "./gradient/laguna";
 import sunset from "./gradient/sunset";
 
-// import kittens from "./pic/kittens";
 import wood1 from "./pic/wood1";
 import wood2 from "./pic/wood2";
 import wood3 from "./pic/wood3";
@@ -32,7 +31,6 @@ const styles = {
   calm,
   laguna,
   sunset,
-  // kittens,
   wood1,
   wood2,
   wood3,

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

@@ -36,6 +36,7 @@ const style: Style = {
     onDark: "#eee",
     onBorder: "#ffffffbb",
   },
+  ico: "/textures/wood01_ico.png",
 };
 
 export default style;

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

@@ -36,6 +36,7 @@ const style: Style = {
     onDark: "#eee",
     onBorder: "#ffffffbb",
   },
+  ico: "/textures/wood02_ico.png",
 };
 
 export default style;

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

@@ -36,6 +36,7 @@ const style: Style = {
     onDark: "#eee",
     onBorder: "#ffffffbb",
   },
+  ico: "/textures/wood03_ico.png",
 };
 
 export default style;

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

@@ -36,6 +36,7 @@ const style: Style = {
     onDark: "#eee",
     onBorder: "#ffffffbb",
   },
+  ico: "/textures/wood04_ico.png",
 };
 
 export default style;

src/types.ts

@@ -69,6 +69,7 @@ export type Style = {
   moveIndicator: MoveIndicator;
   border: SquareStyle;
   coords: Coords;
+  ico?: string;
 };
 
 export type PieceType = "k" | "q" | "r" | "b" | "n" | "p";
@@ -206,10 +207,3 @@ export type Header = {
   Site: string | null;
   Result: string | null;
 };
-
-export type CreateAnimation = (
-  pgn: string,
-  boardConfig: BoardConfig,
-  size: Size,
-  includeTitleScreen: boolean
-) => Promise<File>;

src/ui/components/Boards.css

@@ -8,6 +8,7 @@
   border: solid 5px black;
   margin: 5px;
   cursor: pointer;
+  width: 72px;
 }
 
 .boards__ico--active {

src/ui/components/Boards.tsx

@@ -17,21 +17,29 @@ const prepareBoards = async () => {
   const boards = [];
 
   const board = new Board({
-    size: 72,
+    size: 144,
     tiles: 2,
     showBorder: true,
     showExtraInfo: false,
   });
 
   for (const [key, style] of Object.entries(styles) as [BoardStyle, Style][]) {
-    await board.updateConfig({ boardStyle: key });
-    await board.frame(null);
-    board.render();
+    let img: string;
+
+    if (style.ico) {
+      img = style.ico;
+    } else {
+      await board.updateConfig({ boardStyle: key });
+      await board.frame(null);
+      board.render();
+      img = board.toImgUrl();
+    }
+
     boards.push({
       key,
       name: style.name,
       category: style.category,
-      img: board.toImgUrl(),
+      img,
     } as BoardPreview);
   }