WIP

src/board/Board.ts

@@ -45,6 +45,7 @@ class Board {
   private _anonymous: boolean = false;
 
   private scale: number = 1;
+  private borderScale: number = 1;
 
   private size: number = 0;
   private squareSize: number = 0;
@@ -131,7 +132,9 @@ class Board {
       this.tempCanvas.height = height;
     }
 
-    const tempBorderWidth = this.cfg.showBorder ? this.size / 32 : 0;
+    const tempBorderWidth = this.cfg.showBorder
+      ? (this.size / 32) * this.borderScale
+      : 0;
     const tempInnerSize = this.size - tempBorderWidth * 2;
     this.squareSize = Math.floor(tempInnerSize / this.cfg.tiles);
     this.innerSize = this.squareSize * this.cfg.tiles;
@@ -144,6 +147,10 @@ class Board {
     return this.size;
   }
 
+  setBorderScale(scale: number) {
+    this.borderScale = scale;
+  }
+
   setStyle(style: BoardStyle) {
     this.style = boards[style];
     this.cfg.boardStyle = style;

src/board/styles-board/_.ts

@@ -1,44 +0,0 @@
-import { Style } from "../../types";
-
-const style: Style = {
-  name: "Temp",
-  category: "custom",
-  background: {
-    type: "gradient",
-    data: {
-      dir: "radial",
-      colors: ["#ff00ff", "#00ffff"],
-    },
-  },
-  dark: {
-    type: "image",
-    data: {
-      src: "https://placekitten.com/1024/1024",
-    },
-  },
-  light: {
-    type: "gradient",
-    data: {
-      dir: "radial",
-      colors: ["#ffffff11", "#ffff0099", "#ffff0099"],
-    },
-  },
-  moveIndicator: {
-    type: "hueShift",
-    data: 70,
-  },
-  border: {
-    type: "gradient",
-    data: {
-      dir: "radial",
-      colors: ["#009999", "#000099", "#990000"],
-    },
-  },
-  coords: {
-    onLight: "#4d7a26",
-    onDark: "#ffffc4",
-    onBorder: "#ececa4",
-  },
-};
-
-export default style;

src/board/styles-board/boardStyles.ts

@@ -4,13 +4,13 @@ import azure from "./solid/azure";
 import clay from "./solid/clay";
 import rock from "./solid/rock";
 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 danny_green from "./solid/danny_green";
+import danny_cyan from "./solid/danny_cyan";
+import danny_blue from "./solid/danny_blue";
+import danny_purple from "./solid/danny_purple";
+import danny_pink from "./solid/danny_pink";
+import danny_red from "./solid/danny_red";
+import danny_yellow from "./solid/danny_yellow";
 import lichess from "./solid/lichess";
 import leko from "./solid/leko";
 import patina from "./solid/patina";
@@ -22,27 +22,40 @@ import botez from "./solid/botez";
 import mud from "./solid/mud";
 import rose from "./solid/rose";
 import avocado from "./solid/avocado";
-import monoTeal from "./solid/mono-teal";
-import monoChico from "./solid/mono-chico";
-import monoGoblin from "./solid/mono-goblin";
-import monoMahogany from "./solid/mono-mahogany";
-import monoMojo from "./solid/mono-mojo";
-import monoMulberry from "./solid/mono-mulberry";
-import monoSycamore from "./solid/mono-sycamore";
-import monoBlue from "./solid/mono-blue";
 
-import smoothSunset from "./gradient/smooth-sunset";
-import smoothSummer from "./gradient/smooth-summer";
-import smoothSpring from "./gradient/smooth-spring";
-import smoothForest from "./gradient/smooth-forest";
-import smoothLaguna from "./gradient/smooth-laguna";
-import smoothSea from "./gradient/smooth-sea";
-import smoothViolet from "./gradient/smooth-violet";
-import smoothMono from "./gradient/smooth-mono";
-import contrastA from "./gradient/contrast-a";
-import contrastB from "./gradient/contrast-b";
-import contrastC from "./gradient/contrast-c";
-import contrastD from "./gradient/contrast-d";
+import mono_teal from "./solid/mono_teal";
+import mono_chico from "./solid/mono_chico";
+import mono_goblin from "./solid/mono_goblin";
+import mono_mahogany from "./solid/mono_mahogany";
+import mono_mojo from "./solid/mono_mojo";
+import mono_mulberry from "./solid/mono_mulberry";
+import mono_sycamore from "./solid/mono_sycamore";
+import mono_blue from "./solid/mono_blue";
+import mono_coral from "./solid/mono_coral";
+import mono_flamingo from "./solid/mono_flamingo";
+import mono_rose from "./solid/mono_rose";
+import mono_heliotrope from "./solid/mono_heliotrope";
+import mono_cornflower from "./solid/mono_cornflower";
+import mono_dodger from "./solid/mono_dodger";
+import mono_meadow from "./solid/mono_meadow";
+import mono_mantis from "./solid/mono_mantis";
+import mono_coper from "./solid/mono_coper";
+import mono_contessa from "./solid/mono_contessa";
+import mono_terracotta from "./solid/mono_terracotta";
+import mono_harvest from "./solid/mono_harvest";
+
+import smooth_sunset from "./gradient/smooth_sunset";
+import smooth_summer from "./gradient/smooth_summer";
+import smooth_spring from "./gradient/smooth_spring";
+import smooth_forest from "./gradient/smooth_forest";
+import smooth_laguna from "./gradient/smooth_laguna";
+import smooth_sea from "./gradient/smooth_sea";
+import smooth_violet from "./gradient/smooth_violet";
+import smooth_mono from "./gradient/smooth_mono";
+import contrast_a from "./gradient/contrast_a";
+import contrast_b from "./gradient/contrast_b";
+import contrast_c from "./gradient/contrast_c";
+import contrast_d from "./gradient/contrast_d";
 
 import wood1 from "./pic/wood1";
 import wood2 from "./pic/wood2";
@@ -53,7 +66,7 @@ import wood6 from "./pic/wood6";
 import wood7 from "./pic/wood7";
 import wood8 from "./pic/wood8";
 
-const styles = {
+const boardStyles = {
   standard,
   spring,
   azure,
@@ -67,38 +80,51 @@ const styles = {
   patina,
   mud,
   danny,
-  dannyGreen,
-  dannyCyan,
-  dannyBlue,
-  dannyPurple,
-  dannyPink,
-  dannyRed,
-  dannyYellow,
+  danny_green,
+  danny_cyan,
+  danny_blue,
+  danny_purple,
+  danny_pink,
+  danny_red,
+  danny_yellow,
   lichess,
   danya,
   botez,
   avocado,
-  monoChico,
-  monoMojo,
-  monoMahogany,
-  monoMulberry,
-  monoBlue,
-  monoTeal,
-  monoGoblin,
-  monoSycamore,
 
-  smoothSunset,
-  smoothSummer,
-  smoothSpring,
-  smoothForest,
-  smoothLaguna,
-  smoothSea,
-  smoothViolet,
-  smoothMono,
-  contrastA,
-  contrastB,
-  contrastC,
-  contrastD,
+  mono_chico,
+  mono_mojo,
+  mono_mahogany,
+  mono_mulberry,
+  mono_blue,
+  mono_teal,
+  mono_goblin,
+  mono_sycamore,
+  mono_coral,
+  mono_flamingo,
+  mono_rose,
+  mono_heliotrope,
+  mono_cornflower,
+  mono_dodger,
+  mono_meadow,
+  mono_mantis,
+  mono_coper,
+  mono_contessa,
+  mono_terracotta,
+  mono_harvest,
+
+  smooth_sunset,
+  smooth_summer,
+  smooth_spring,
+  smooth_forest,
+  smooth_laguna,
+  smooth_sea,
+  smooth_violet,
+  smooth_mono,
+  contrast_a,
+  contrast_b,
+  contrast_c,
+  contrast_d,
   wood1,
   wood2,
   wood3,
@@ -109,4 +135,7 @@ const styles = {
   wood8,
 };
 
-export default styles;
+const boardNames = Object.keys(boardStyles);
+
+export { boardNames };
+export default boardStyles;

src/board/styles-board/gradient/contrast_a.ts

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Contrast A",
   category: "gradient",
   background: {
     type: "gradient",

src/board/styles-board/gradient/contrast_b.ts

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Contrast B",
   category: "gradient",
   background: {
     type: "gradient",

src/board/styles-board/gradient/contrast_c.ts

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Contrast C",
   category: "gradient",
   background: {
     type: "gradient",

src/board/styles-board/gradient/contrast_d.ts

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Contrast D",
   category: "gradient",
   background: {
     type: "gradient",

src/board/styles-board/gradient/smooth_forest.ts

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Smooth Forest",
   category: "gradient",
   background: {
     type: "gradient",

src/board/styles-board/gradient/smooth_laguna.ts

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Smooth Laguna",
   category: "gradient",
   background: {
     type: "gradient",

src/board/styles-board/gradient/smooth_mono.ts

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Smooth Mono",
   category: "gradient",
   background: {
     type: "gradient",

src/board/styles-board/gradient/smooth_sea.ts

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Smooth Sea",
   category: "gradient",
   background: {
     type: "gradient",

src/board/styles-board/gradient/smooth_spring.ts

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Smooth Spring",
   category: "gradient",
   background: {
     type: "gradient",

src/board/styles-board/gradient/smooth_summer.ts

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Smooth Summer",
   category: "gradient",
   background: {
     type: "gradient",

src/board/styles-board/gradient/smooth_sunset.ts

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Smooth Sunset",
   category: "gradient",
   background: {
     type: "gradient",

src/board/styles-board/gradient/smooth_violet.ts

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Smooth Violet",
   category: "gradient",
   background: {
     type: "gradient",

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

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Wood 1",
   category: "pic",
   background: {
     type: "image",

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

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Wood 2",
   category: "pic",
   background: {
     type: "image",

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

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Wood 3",
   category: "pic",
   background: {
     type: "image",

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

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Wood 4",
   category: "pic",
   background: {
     type: "image",

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

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Wood 5",
   category: "pic",
   background: {
     type: "image",

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

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Wood 6",
   category: "pic",
   background: {
     type: "image",

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

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Wood 7",
   category: "pic",
   background: {
     type: "image",

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

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Wood 8",
   category: "pic",
   background: {
     type: "image",

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

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

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

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Azure",
   category: "solid",
   background: {
     type: "solid",

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

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

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

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Clay",
   category: "solid",
   background: {
     type: "solid",

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

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Danny",
   category: "solid",
   background: {
     type: "solid",

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

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Danny Blue",
   category: "solid",
   background: {
     type: "solid",

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

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Danny Cyan",
   category: "solid",
   background: {
     type: "solid",

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

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Danny Green",
   category: "solid",
   background: {
     type: "solid",

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

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Danny Pink",
   category: "solid",
   background: {
     type: "solid",

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

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Danny Purple",
   category: "solid",
   background: {
     type: "solid",

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

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Danny Red",
   category: "solid",
   background: {
     type: "solid",

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

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Danny Yellow",
   category: "solid",
   background: {
     type: "solid",

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,46 @@
+import { Style } from "../../../types";
+
+const bgColor = "#D47669";
+const fgColor = "#E9BAB4";
+const darkFontColor = "#95493F";
+const lightFontColor = "#ffffff";
+const borderFontColor = "#00000099";
+
+const style: Style = {
+  category: "solid",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: bgColor,
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: fgColor,
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#00ff0033",
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: bgColor,
+    },
+  },
+  coords: {
+    onLight: darkFontColor,
+    onDark: lightFontColor,
+    onBorder: borderFontColor,
+  },
+};
+
+export default style;

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

@@ -0,0 +1,46 @@
+import { Style } from "../../../types";
+
+const bgColor = "#AC746D";
+const fgColor = "#D5B9B6";
+const darkFontColor = "#704944";
+const lightFontColor = "#ffffff";
+const borderFontColor = "#00000099";
+
+const style: Style = {
+  category: "solid",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: bgColor,
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: fgColor,
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#00ff0033",
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: bgColor,
+    },
+  },
+  coords: {
+    onLight: darkFontColor,
+    onDark: lightFontColor,
+    onBorder: borderFontColor,
+  },
+};
+
+export default style;

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

@@ -0,0 +1,46 @@
+import { Style } from "../../../types";
+
+const bgColor = "#FF7C44";
+const fgColor = "#FFBDA1";
+const darkFontColor = "#DC4200";
+const lightFontColor = "#ffffff";
+const borderFontColor = "#00000099";
+
+const style: Style = {
+  category: "solid",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: bgColor,
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: fgColor,
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#00ffaa55",
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: bgColor,
+    },
+  },
+  coords: {
+    onLight: darkFontColor,
+    onDark: lightFontColor,
+    onBorder: borderFontColor,
+  },
+};
+
+export default style;

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

@@ -0,0 +1,46 @@
+import { Style } from "../../../types";
+
+const bgColor = "#7673FF";
+const fgColor = "#BAB9FF";
+const darkFontColor = "#3734B0";
+const lightFontColor = "#ffffff";
+const borderFontColor = "#00000099";
+
+const style: Style = {
+  category: "solid",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: bgColor,
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: fgColor,
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#ff770055",
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: bgColor,
+    },
+  },
+  coords: {
+    onLight: darkFontColor,
+    onDark: lightFontColor,
+    onBorder: borderFontColor,
+  },
+};
+
+export default style;

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

@@ -0,0 +1,46 @@
+import { Style } from "../../../types";
+
+const bgColor = "#3C85F4";
+const fgColor = "#9DC2F9";
+const darkFontColor = "#1451AE";
+const lightFontColor = "#ffffff";
+const borderFontColor = "#00000099";
+
+const style: Style = {
+  category: "solid",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: bgColor,
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: fgColor,
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#55ff0055",
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: bgColor,
+    },
+  },
+  coords: {
+    onLight: darkFontColor,
+    onDark: lightFontColor,
+    onBorder: borderFontColor,
+  },
+};
+
+export default style;

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

@@ -0,0 +1,46 @@
+import { Style } from "../../../types";
+
+const bgColor = "#F65656";
+const fgColor = "#FAAAAA";
+const darkFontColor = "#BC2D2D";
+const lightFontColor = "#ffffff";
+const borderFontColor = "#00000099";
+
+const style: Style = {
+  category: "solid",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: bgColor,
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: fgColor,
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#ffff0033",
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: bgColor,
+    },
+  },
+  coords: {
+    onLight: darkFontColor,
+    onDark: lightFontColor,
+    onBorder: borderFontColor,
+  },
+};
+
+export default style;

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

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

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

@@ -0,0 +1,46 @@
+import { Style } from "../../../types";
+
+const bgColor = "#EAA464";
+const fgColor = "#F4D1B1";
+const darkFontColor = "#BD8551";
+const lightFontColor = "#ffffff";
+const borderFontColor = "#00000099";
+
+const style: Style = {
+  category: "solid",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: bgColor,
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: fgColor,
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#00ff0033",
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: bgColor,
+    },
+  },
+  coords: {
+    onLight: darkFontColor,
+    onDark: lightFontColor,
+    onBorder: borderFontColor,
+  },
+};
+
+export default style;

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

@@ -0,0 +1,46 @@
+import { Style } from "../../../types";
+
+const bgColor = "#C84CF3";
+const fgColor = "#E3A5F9";
+const darkFontColor = "#881EAC";
+const lightFontColor = "#ffffff";
+const borderFontColor = "#00000099";
+
+const style: Style = {
+  category: "solid",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: bgColor,
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: fgColor,
+    },
+  },
+  moveIndicator: {
+    type: "hueShift",
+    data: 30,
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: bgColor,
+    },
+  },
+  coords: {
+    onLight: darkFontColor,
+    onDark: lightFontColor,
+    onBorder: borderFontColor,
+  },
+};
+
+export default style;

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

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

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

@@ -0,0 +1,46 @@
+import { Style } from "../../../types";
+
+const bgColor = "#69C549";
+const fgColor = "#B4E2A4";
+const darkFontColor = "#4C9433";
+const lightFontColor = "#ffffff";
+const borderFontColor = "#00000099";
+
+const style: Style = {
+  category: "solid",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: bgColor,
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: fgColor,
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#ffff0055",
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: bgColor,
+    },
+  },
+  coords: {
+    onLight: darkFontColor,
+    onDark: lightFontColor,
+    onBorder: borderFontColor,
+  },
+};
+
+export default style;

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

@@ -0,0 +1,46 @@
+import { Style } from "../../../types";
+
+const bgColor = "#07C575";
+const fgColor = "#83E2BA";
+const darkFontColor = "#07834F";
+const lightFontColor = "#ffffff";
+const borderFontColor = "#00000099";
+
+const style: Style = {
+  category: "solid",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: bgColor,
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: fgColor,
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#ffff0055",
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: bgColor,
+    },
+  },
+  coords: {
+    onLight: darkFontColor,
+    onDark: lightFontColor,
+    onBorder: borderFontColor,
+  },
+};
+
+export default style;

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

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

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

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

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

@@ -0,0 +1,46 @@
+import { Style } from "../../../types";
+
+const bgColor = "#FB6299";
+const fgColor = "#FDB0CC";
+const darkFontColor = "#C8215D";
+const lightFontColor = "#ffffff";
+const borderFontColor = "#00000099";
+
+const style: Style = {
+  category: "solid",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: bgColor,
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: fgColor,
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#ffff0033",
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: bgColor,
+    },
+  },
+  coords: {
+    onLight: darkFontColor,
+    onDark: lightFontColor,
+    onBorder: borderFontColor,
+  },
+};
+
+export default style;

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

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

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

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

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

@@ -0,0 +1,46 @@
+import { Style } from "../../../types";
+
+const bgColor = "#DF8F6C";
+const fgColor = "#EFC7B5";
+const darkFontColor = "#A56A51";
+const lightFontColor = "#ffffff";
+const borderFontColor = "#00000099";
+
+const style: Style = {
+  category: "solid",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: bgColor,
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: fgColor,
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#00ff0033",
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: bgColor,
+    },
+  },
+  coords: {
+    onLight: darkFontColor,
+    onDark: lightFontColor,
+    onBorder: borderFontColor,
+  },
+};
+
+export default style;

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

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

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

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

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

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

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

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Rock",
   category: "solid",
   background: {
     type: "solid",

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

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

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

@@ -1,7 +1,6 @@
 import { Style } from "../../../types";
 
 const style: Style = {
-  name: "Spring",
   category: "solid",
   background: {
     type: "solid",

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

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

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

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

src/boot/registerEvents.ts

@@ -2,8 +2,9 @@ import { Handlers } from "./../types";
 import { state, setState } from "../state";
 import loadFromUrl from "./loadFromUrl";
 import readFile from "../utils/readFile";
+import Board from "../board/Board";
 
-const registerEvents = (handlers: Handlers) => {
+const registerEvents = (handlers: Handlers, board: Board) => {
   document.addEventListener("dblclick", function (el) {
     el.preventDefault();
   });
@@ -25,7 +26,7 @@ const registerEvents = (handlers: Handlers) => {
       return;
     }
 
-    loadFromUrl(true, handlers);
+    loadFromUrl(true, handlers, board);
   });
 
   if (!state.mobile) {

src/main.tsx

@@ -41,7 +41,7 @@ const main = async () => {
 
   /* Register events */
 
-  registerEvents(handlers);
+  registerEvents(handlers, board);
 };
 
 /* Initialize */

src/persistance/loadConfig.ts

@@ -1,12 +1,31 @@
+import { PiecesStyle } from "./../board/styles-pieces/piecesStyles";
+import { boardNames } from "../board/styles-board/boardStyles";
+import piecesStyles from "../board/styles-pieces/piecesStyles";
+
+const fixBoardConfig = (boardConfig: { [key: string]: string }) => {
+  if (!boardNames.includes(boardConfig.boardStyle)) {
+    delete boardConfig.boardStyle;
+  }
+
+  if (!piecesStyles.includes(boardConfig.piecesStyle as PiecesStyle)) {
+    delete boardConfig.piecesStyle;
+  }
+
+  return boardConfig;
+};
+
 const loadConfig = () => {
   const boardConfig = localStorage.getItem("boardConfig");
   const gameConfig = localStorage.getItem("gameConfig");
   const siteConfig = localStorage.getItem("siteConfig");
+  const recent = localStorage.getItem("recent");
 
   return {
-    boardConfig: boardConfig === null ? {} : JSON.parse(boardConfig),
+    boardConfig:
+      boardConfig === null ? {} : fixBoardConfig(JSON.parse(boardConfig)),
     gameConfig: gameConfig === null ? {} : JSON.parse(gameConfig),
     siteConfig: siteConfig === null ? {} : JSON.parse(siteConfig),
+    recent: recent === null ? [] : JSON.parse(recent),
   };
 };
 

src/persistance/saveConfig.ts

@@ -1,6 +1,6 @@
 import { state } from "../state";
 
-const saveConfig = (type: "board" | "game" | "site") => {
+const saveConfig = (type: "board" | "game" | "site" | "recent") => {
   switch (type) {
     case "board":
       localStorage.setItem("boardConfig", JSON.stringify(state.boardConfig));
@@ -11,6 +11,9 @@ const saveConfig = (type: "board" | "game" | "site") => {
     case "site":
       localStorage.setItem("siteConfig", JSON.stringify(state.siteConfig));
       break;
+    case "recent":
+      localStorage.setItem("recent", JSON.stringify(state.recent));
+      break;
   }
 };
 

src/state.ts

@@ -2,7 +2,7 @@ import isMobile from "is-mobile";
 import { createStore } from "solid-js/store";
 import Game from "./game/Game";
 import loadConfig from "./persistance/loadConfig";
-import { BoardConfig, GameConfig, SiteConfig } from "./types";
+import { BoardConfig, GameConfig, SiteConfig, Recent } from "./types";
 import UAParser from "ua-parser-js";
 
 const userAgent = UAParser();
@@ -60,6 +60,7 @@ export type State = {
   browser?: string;
   os?: string;
   about: boolean;
+  recent: Recent;
 };
 
 const initialState: State = {
@@ -88,8 +89,11 @@ const initialState: State = {
   browser: userAgent.browser.name,
   os: userAgent.os.name,
   about: false,
+  recent: saved.recent,
 };
 
 const [state, setState] = createStore(initialState);
 
+console.log(state);
+
 export { state, setState };

src/types.ts

@@ -55,7 +55,6 @@ export type MoveIndicator =
 export type StyleCategory = "solid" | "gradient" | "pic" | "custom";
 
 export type Style = {
-  name: string;
   category: StyleCategory;
   background: SquareStyle;
   light: SquareStyle;
@@ -110,6 +109,11 @@ export type SiteConfig = {
   iOSAppPopup: boolean;
 };
 
+export type Recent = {
+  title: string;
+  hash: string;
+}[];
+
 export type MaterialCount = {
   w: {
     p: number;

src/ui/components/Boards.tsx

@@ -2,12 +2,12 @@ import { Component, For, createSignal } from "solid-js";
 import { Handlers, StyleCategory, BoardStyle, Style } from "../../types";
 import Scrollable from "./reusable/Scrollable";
 import "./Boards.css";
-import styles from "../../board/styles-board/boardStyles";
+import boardStyles from "../../board/styles-board/boardStyles";
 import Board from "../../board/Board";
 import { state, setState } from "../../state";
 
 type BoardPreview = {
-  key: keyof typeof styles;
+  key: keyof typeof boardStyles;
   name: string;
   category: StyleCategory;
   img: string;
@@ -23,7 +23,12 @@ const prepareBoards = async () => {
     showExtraInfo: false,
   });
 
-  for (const [key, style] of Object.entries(styles) as [BoardStyle, Style][]) {
+  board.setBorderScale(3);
+
+  for (const [key, style] of Object.entries(boardStyles) as [
+    BoardStyle,
+    Style
+  ][]) {
     let img: string;
 
     if (style.ico) {
@@ -37,8 +42,6 @@ const prepareBoards = async () => {
 
     boards.push({
       key,
-      name: style.name,
-      category: style.category,
       img,
     } as BoardPreview);
   }
@@ -68,7 +71,7 @@ const Boards: Component<{ handlers: Handlers; class?: string }> = (props) => {
                 props.handlers.changeBoardStyle(board.key);
               }}
               style={{ "background-image": `url(${board.img})` }}
-              title={board.name}
+              title={board.key}
               draggable={false}
             />
           );