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;