diff --git a/public/textures/wood01.jpg b/public/textures/wood01.jpg new file mode 100644 index 0000000..006d8bd Binary files /dev/null and b/public/textures/wood01.jpg differ diff --git a/public/textures/wood01_bg.jpg b/public/textures/wood01_bg.jpg new file mode 100644 index 0000000..fb6dddd Binary files /dev/null and b/public/textures/wood01_bg.jpg differ diff --git a/public/textures/wood01_bg2.jpg b/public/textures/wood01_bg2.jpg new file mode 100644 index 0000000..b3daf0c Binary files /dev/null and b/public/textures/wood01_bg2.jpg differ diff --git a/public/textures/wood02.jpg b/public/textures/wood02.jpg new file mode 100644 index 0000000..21244df Binary files /dev/null and b/public/textures/wood02.jpg differ diff --git a/public/textures/wood02_bg.jpg b/public/textures/wood02_bg.jpg new file mode 100644 index 0000000..553cb5e Binary files /dev/null and b/public/textures/wood02_bg.jpg differ diff --git a/public/textures/wood03.jpg b/public/textures/wood03.jpg new file mode 100644 index 0000000..98d9e74 Binary files /dev/null and b/public/textures/wood03.jpg differ diff --git a/public/textures/wood03_bg.jpg b/public/textures/wood03_bg.jpg new file mode 100644 index 0000000..a65f0c1 Binary files /dev/null and b/public/textures/wood03_bg.jpg differ diff --git a/public/textures/wood04.jpg b/public/textures/wood04.jpg new file mode 100644 index 0000000..fb4e3b9 Binary files /dev/null and b/public/textures/wood04.jpg differ diff --git a/public/textures/wood04.jpg~ b/public/textures/wood04.jpg~ new file mode 100644 index 0000000..8a70004 Binary files /dev/null and b/public/textures/wood04.jpg~ differ diff --git a/public/textures/wood04_bg.jpg b/public/textures/wood04_bg.jpg new file mode 100644 index 0000000..7183360 Binary files /dev/null and b/public/textures/wood04_bg.jpg differ diff --git a/public/textures/wood04_bg.jpg~ b/public/textures/wood04_bg.jpg~ new file mode 100644 index 0000000..9896ce8 Binary files /dev/null and b/public/textures/wood04_bg.jpg~ differ diff --git a/src/board/styles-board/index.ts b/src/board/styles-board/index.ts index 2477db2..68ec492 100644 --- a/src/board/styles-board/index.ts +++ b/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; diff --git a/src/board/styles-board/pic/kittens.ts b/src/board/styles-board/pic/wood1.ts similarity index 65% rename from src/board/styles-board/pic/kittens.ts rename to src/board/styles-board/pic/wood1.ts index 3060c44..604d553 100644 --- a/src/board/styles-board/pic/kittens.ts +++ b/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", }, }; diff --git a/src/board/styles-board/pic/wood2.ts b/src/board/styles-board/pic/wood2.ts new file mode 100644 index 0000000..3e08653 --- /dev/null +++ b/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; diff --git a/src/board/styles-board/pic/wood3.ts b/src/board/styles-board/pic/wood3.ts new file mode 100644 index 0000000..41b4415 --- /dev/null +++ b/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; diff --git a/src/board/styles-board/pic/wood4.ts b/src/board/styles-board/pic/wood4.ts new file mode 100644 index 0000000..0f97e01 --- /dev/null +++ b/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; diff --git a/src/ui/App.css b/src/ui/App.css index 97c9ccc..d0d8950 100644 --- a/src/ui/App.css +++ b/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);