WIP

src/board/styles-board/index.ts

@@ -14,6 +14,10 @@ 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";
+import wood4 from "./pic/wood4";
 
 const styles = {
   standard,
@@ -29,6 +33,10 @@ const styles = {
   laguna,
   sunset,
   // kittens,
+  wood1,
+  wood2,
+  wood3,
+  wood4,
 };
 
 export default styles;

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

@@ -1,40 +1,40 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Kittens",
+  name: "Wood 1",
   category: "pic",
   background: {
     type: "image",
     data: {
-      src: "https://placekitten.com/720/720",
+      src: "/textures/wood01.jpg",
     },
   },
   dark: {
     type: "solid",
     data: {
-      color: "#00000055",
+      color: "transparent",
     },
   },
   light: {
     type: "solid",
     data: {
-      color: "#ffffff55",
+      color: "transparent",
     },
   },
   moveIndicator: {
     type: "color",
-    data: "#ffff0055",
+    data: "#55ff0022",
   },
   border: {
-    type: "solid",
+    type: "image",
     data: {
-      color: "#444",
+      src: "/textures/wood01_bg.jpg",
     },
   },
   coords: {
     onLight: "#333",
     onDark: "#eee",
-    onBorder: "#eee",
+    onBorder: "#ffffffbb",
   },
 };
 

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

@@ -0,0 +1,41 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Wood 2",
+  category: "pic",
+  background: {
+    type: "image",
+    data: {
+      src: "/textures/wood02.jpg",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#55ff0022",
+  },
+  border: {
+    type: "image",
+    data: {
+      src: "/textures/wood02_bg.jpg",
+    },
+  },
+  coords: {
+    onLight: "#333",
+    onDark: "#eee",
+    onBorder: "#ffffffbb",
+  },
+};
+
+export default style;

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

@@ -0,0 +1,41 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Wood 3",
+  category: "pic",
+  background: {
+    type: "image",
+    data: {
+      src: "/textures/wood03.jpg",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#55ff0022",
+  },
+  border: {
+    type: "image",
+    data: {
+      src: "/textures/wood03_bg.jpg",
+    },
+  },
+  coords: {
+    onLight: "#333",
+    onDark: "#eee",
+    onBorder: "#ffffffbb",
+  },
+};
+
+export default style;

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

@@ -0,0 +1,41 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Wood 4",
+  category: "pic",
+  background: {
+    type: "image",
+    data: {
+      src: "/textures/wood04.jpg",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#55ff0022",
+  },
+  border: {
+    type: "image",
+    data: {
+      src: "/textures/wood04_bg.jpg",
+    },
+  },
+  coords: {
+    onLight: "#333",
+    onDark: "#eee",
+    onBorder: "#ffffffbb",
+  },
+};
+
+export default style;

src/ui/App.css

@@ -49,7 +49,7 @@ body {
 }
 
 .light {
-  background-color: #b2bcc0;
+  background-color: #959ea1;
   background-image: url(/img/pattern-light.png);
   color: rgb(29, 31, 32);
   --logo-url: url(/img/logo-dark.svg);