WIP

src/board/Board.ts

@@ -62,7 +62,11 @@ class Board {
   private tempCanvas: HTMLCanvasElement = document.createElement("canvas");
   public canvas: HTMLCanvasElement = document.createElement("canvas");
 
-  constructor(config: Partial<BoardConfig> = {}) {
+  constructor(config: Partial<BoardConfig> = {}, canvas?: HTMLCanvasElement) {
+    if (canvas) {
+      this.canvas = canvas;
+    }
+
     const ctx = this.canvas.getContext("2d");
     const tempCtx = this.tempCanvas.getContext("2d");
     this.canvas.classList.add("board");

src/board/styles-board/index.ts

@@ -1,17 +1,23 @@
-import standard from "./mono/standard";
-import chesscom from "./mono/chesscom";
-import lichess from "./mono/lichess";
-import leko from "./mono/leko";
-import patina from "./mono/patina";
-import lila from "./mono/lila";
-import peach from "./mono/peach";
-import violet from "./mono/violet";
-import danya from "./mono/danya";
-import botez from "./mono/botez";
-import mud from "./mono/mud";
-import rose from "./mono/rose";
-
-import avocado from "./colorful/avocado";
+import standard from "./solid/standard";
+import danny from "./solid/danny";
+import dannyGreen from "./solid/danny-green";
+import dannyCyan from "./solid/danny-cyan";
+import dannyBlue from "./solid/danny-blue";
+import dannyPurple from "./solid/danny-purple";
+import dannyPink from "./solid/danny-pink";
+import dannyRed from "./solid/danny-red";
+import dannyYellow from "./solid/danny-yellow";
+import lichess from "./solid/lichess";
+import leko from "./solid/leko";
+import patina from "./solid/patina";
+import lila from "./solid/lila";
+import peach from "./solid/peach";
+import violet from "./solid/violet";
+import danya from "./solid/danya";
+import botez from "./solid/botez";
+import mud from "./solid/mud";
+import rose from "./solid/rose";
+import avocado from "./solid/avocado";
 
 import calm from "./gradient/calm";
 import laguna from "./gradient/laguna";
@@ -30,7 +36,14 @@ const styles = {
   mud,
   peach,
   violet,
-  chesscom,
+  danny,
+  dannyGreen,
+  dannyCyan,
+  dannyBlue,
+  dannyPurple,
+  dannyPink,
+  dannyRed,
+  dannyYellow,
   lichess,
   danya,
   botez,

src/board/styles-board/solid/avocado.ts

@@ -2,7 +2,7 @@ import { Style } from "../../../types";
 
 const style: Style = {
   name: "Avocado",
-  category: "colorful",
+  category: "solid",
   background: {
     type: "solid",
     data: {

src/board/styles-board/solid/botez.ts

@@ -2,7 +2,7 @@ import { Style } from "../../../types";
 
 const style: Style = {
   name: "Botez",
-  category: "mono",
+  category: "solid",
   background: {
     type: "solid",
     data: {

src/board/styles-board/solid/danny-blue.ts

@@ -0,0 +1,41 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Danny Blue",
+  category: "solid",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "#566696",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#eeeed2",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#ffff007f",
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: "#2B2E31",
+    },
+  },
+  coords: {
+    onLight: "#2F3752",
+    onDark: "#fcfce1",
+    onBorder: "#eeeed2",
+  },
+};
+
+export default style;

src/board/styles-board/solid/danny-cyan.ts

@@ -0,0 +1,41 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Danny Cyan",
+  category: "solid",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "#569696",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#eeeed2",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#ffff007f",
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: "#2B3130",
+    },
+  },
+  coords: {
+    onLight: "#2F5152",
+    onDark: "#fcfce1",
+    onBorder: "#eeeed2",
+  },
+};
+
+export default style;

src/board/styles-board/solid/danny-green.ts

@@ -0,0 +1,41 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Danny Green",
+  category: "solid",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "#569666",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#eeeed2",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#ffff007f",
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: "#2B312B",
+    },
+  },
+  coords: {
+    onLight: "#2F5238",
+    onDark: "#fcfce1",
+    onBorder: "#eeeed2",
+  },
+};
+
+export default style;

src/board/styles-board/solid/danny-pink.ts

@@ -0,0 +1,41 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Danny Pink",
+  category: "solid",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "#965686",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#eeeed2",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#ffff007f",
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: "#312B31",
+    },
+  },
+  coords: {
+    onLight: "#522F49",
+    onDark: "#fcfce1",
+    onBorder: "#eeeed2",
+  },
+};
+
+export default style;

src/board/styles-board/solid/danny-purple.ts

@@ -0,0 +1,41 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Danny Purple",
+  category: "solid",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "#765696",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#eeeed2",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#ffff007f",
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: "#2D2B31",
+    },
+  },
+  coords: {
+    onLight: "#412F52",
+    onDark: "#fcfce1",
+    onBorder: "#eeeed2",
+  },
+};
+
+export default style;

src/board/styles-board/solid/danny-red.ts

@@ -0,0 +1,41 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Danny Red",
+  category: "solid",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "#965656",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#eeeed2",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#ffff007f",
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: "#312B2D",
+    },
+  },
+  coords: {
+    onLight: "#522F2F",
+    onDark: "#fcfce1",
+    onBorder: "#eeeed2",
+  },
+};
+
+export default style;

src/board/styles-board/solid/danny-yellow.ts

@@ -0,0 +1,41 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Danny Yellow",
+  category: "solid",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "#968656",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#eeeed2",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#ffff007f",
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: "#312E2B",
+    },
+  },
+  coords: {
+    onLight: "#524A2F",
+    onDark: "#fcfce1",
+    onBorder: "#eeeed2",
+  },
+};
+
+export default style;

src/board/styles-board/solid/danny.ts

@@ -1,8 +1,8 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Chessc*m",
-  category: "mono",
+  name: "Danny",
+  category: "solid",
   background: {
     type: "solid",
     data: {

src/board/styles-board/solid/danya.ts

@@ -2,7 +2,7 @@ import { Style } from "../../../types";
 
 const style: Style = {
   name: "Danya",
-  category: "mono",
+  category: "solid",
   background: {
     type: "solid",
     data: {

src/board/styles-board/solid/leko.ts

@@ -2,7 +2,7 @@ import { Style } from "../../../types";
 
 const style: Style = {
   name: "Leko",
-  category: "mono",
+  category: "solid",
   background: {
     type: "solid",
     data: {

src/board/styles-board/solid/lichess.ts

@@ -2,7 +2,7 @@ import { Style } from "../../../types";
 
 const style: Style = {
   name: "Lichess",
-  category: "mono",
+  category: "solid",
   background: {
     type: "solid",
     data: {

src/board/styles-board/solid/lila.ts

@@ -2,7 +2,7 @@ import { Style } from "../../../types";
 
 const style: Style = {
   name: "Lila",
-  category: "mono",
+  category: "solid",
   background: {
     type: "solid",
     data: {

src/board/styles-board/solid/mono.ts

@@ -2,7 +2,7 @@ import { Style } from "../../../types";
 
 const style: Style = {
   name: "Mono",
-  category: "mono",
+  category: "solid",
   background: {
     type: "solid",
     data: {

src/board/styles-board/solid/mud.ts

@@ -2,7 +2,7 @@ import { Style } from "../../../types";
 
 const style: Style = {
   name: "Beige",
-  category: "mono",
+  category: "solid",
   background: {
     type: "solid",
     data: {

src/board/styles-board/solid/patina.ts

@@ -2,7 +2,7 @@ import { Style } from "../../../types";
 
 const style: Style = {
   name: "Beige",
-  category: "mono",
+  category: "solid",
   background: {
     type: "solid",
     data: {

src/board/styles-board/solid/peach.ts

@@ -2,7 +2,7 @@ import { Style } from "../../../types";
 
 const style: Style = {
   name: "Peach",
-  category: "mono",
+  category: "solid",
   background: {
     type: "solid",
     data: {

src/board/styles-board/solid/rose.ts

@@ -2,7 +2,7 @@ import { Style } from "../../../types";
 
 const style: Style = {
   name: "Rose",
-  category: "mono",
+  category: "solid",
   background: {
     type: "solid",
     data: {

src/board/styles-board/solid/standard.ts

@@ -2,7 +2,7 @@ import { Style } from "../../../types";
 
 const style: Style = {
   name: "Standard",
-  category: "mono",
+  category: "solid",
   background: {
     type: "solid",
     data: {

src/board/styles-board/solid/violet.ts

@@ -2,7 +2,7 @@ import { Style } from "../../../types";
 
 const style: Style = {
   name: "Violet",
-  category: "mono",
+  category: "solid",
   background: {
     type: "solid",
     data: {

src/board/styles-pieces/_.ts

@@ -1,16 +0,0 @@
-const harlequin = {
-  kw: "/pieces/harlequin/kw.svg",
-  qw: "/pieces/harlequin/qw.svg",
-  rw: "/pieces/harlequin/rw.svg",
-  bw: "/pieces/harlequin/bw.svg",
-  nw: "/pieces/harlequin/nw.svg",
-  pw: "/pieces/harlequin/pw.svg",
-  kb: "/pieces/harlequin/kb.svg",
-  qb: "/pieces/harlequin/qb.svg",
-  rb: "/pieces/harlequin/rb.svg",
-  bb: "/pieces/harlequin/bb.svg",
-  nb: "/pieces/harlequin/nb.svg",
-  pb: "/pieces/harlequin/pb.svg",
-};
-
-export default harlequin;

src/types.ts

@@ -52,13 +52,7 @@ export type MoveIndicator =
   | { type: "hueShift"; data: number }
   | { type: "color"; data: string };
 
-export type StyleCategory =
-  | "mono"
-  | "colorful"
-  | "gradient"
-  | "material"
-  | "pic"
-  | "custom";
+export type StyleCategory = "solid" | "gradient" | "pic" | "custom";
 
 export type Style = {
   name: string;

src/ui/App.css

@@ -180,12 +180,6 @@ a:hover {
   }
 }
 
-@media (orientation: landscape) and (max-width: 1366px) {
-  html {
-    font-size: 8px;
-  }
-}
-
 @media (orientation: landscape) and (max-width: 1365px) {
   .layout {
     grid-template-columns: 2fr 1fr;