WIP

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

@@ -12,7 +12,7 @@ const style: Style = {
   dark: {
     type: "solid",
     data: {
-      color: "#72b339",
+      color: "#72a843",
     },
   },
   light: {

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

@@ -24,7 +24,7 @@ const style: Style = {
   },
   moveIndicator: {
     type: "color",
-    data: "#ee59ff55",
+    data: "#0055ff33",
   },
   border: {
     type: "gradient",

src/board/styles-board/index.ts

@@ -1,11 +1,15 @@
+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 standard from "./mono/standard";
 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";
 
@@ -21,6 +25,9 @@ import wood4 from "./pic/wood4";
 const styles = {
   standard,
   lila,
+  leko,
+  patina,
+  mud,
   peach,
   violet,
   chesscom,
@@ -28,6 +35,7 @@ const styles = {
   danya,
   botez,
   avocado,
+  rose,
   calm,
   laguna,
   sunset,

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

@@ -0,0 +1,41 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Leko",
+  category: "mono",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "#919caf",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#c0c2d0",
+    },
+  },
+  moveIndicator: {
+    type: "hueShift",
+    data: -90,
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: "#58606e",
+    },
+  },
+  coords: {
+    onLight: "#58606e",
+    onDark: "#dbe8ff",
+    onBorder: "#dbe8ff",
+  },
+};
+
+export default style;

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

@@ -0,0 +1,41 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Beige",
+  category: "mono",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "#b0a392",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#cfc8be",
+    },
+  },
+  moveIndicator: {
+    type: "hueShift",
+    data: 60,
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: "#6e6559",
+    },
+  },
+  coords: {
+    onLight: "#6e6559",
+    onDark: "#f5eee5",
+    onBorder: "#f5eee5",
+  },
+};
+
+export default style;

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

@@ -0,0 +1,41 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Beige",
+  category: "mono",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "#93b092",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#becfc2",
+    },
+  },
+  moveIndicator: {
+    type: "hueShift",
+    data: 90,
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: "#596e59",
+    },
+  },
+  coords: {
+    onLight: "#596e59",
+    onDark: "#e4f5e4",
+    onBorder: "#e4f5e4",
+  },
+};
+
+export default style;

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

@@ -0,0 +1,41 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Rose",
+  category: "mono",
+  background: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "#f04a73",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#ffb8c9",
+    },
+  },
+  moveIndicator: {
+    type: "hueShift",
+    data: -30,
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: "#a62444",
+    },
+  },
+  coords: {
+    onLight: "#f04a73",
+    onDark: "#ffb8c9",
+    onBorder: "#ffb8c9",
+  },
+};
+
+export default style;

src/board/styles-pieces/color.ts

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

src/board/styles-pieces/index.ts

@@ -2,13 +2,14 @@ import alpha from "./alpha";
 import cardinal from "./cardinal";
 import cases from "./cases";
 import cburnett from "./cburnett";
-import color from "./color";
 import companion from "./companion";
 import fantasy from "./fantasy";
 import gioco from "./gioco";
 import governor from "./governor";
 import horsey from "./horsey";
 import maestro from "./maestro";
+import magnetic from "./magnetic";
+import maya from "./maya";
 import merida from "./merida";
 import simple from "./simple";
 import staunty from "./staunty";
@@ -19,13 +20,14 @@ const piecesSets = {
   cardinal,
   cases,
   cburnett,
-  color,
   companion,
   fantasy,
   gioco,
   governor,
   horsey,
   maestro,
+  magnetic,
+  maya,
   merida,
   simple,
   staunty,

src/board/styles-pieces/magnetic.ts

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

src/board/styles-pieces/maya.ts

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

src/encoders/createAnimation.ts

@@ -44,8 +44,16 @@ const createAnimation = async (
     const position = game.getPosition(ply);
     await board.frame(position, header);
     board.render();
+
+    const frames =
+      position.end === 0
+        ? 5
+        : position.ply === 0 && !includeTitleScreen
+        ? 2
+        : 1;
+
     // @ts-ignore
-    await encoder.add(getData(board, encoder), position.end === 0 ? 5 : 1);
+    await encoder.add(getData(board, encoder), frames);
   }
 
   return await encoder.render();

src/ui/components/Info.css

@@ -6,7 +6,7 @@
 .info {
   background: var(--color-bg-block);
   padding: 30px 20px;
-  font-size: 1.5rem;
+  font-size: 1.4rem;
   text-align: left;
 }