Board styles - crated script for chesscom board styles, changed moves indicator type to handle different targets

2022-05-01 00:49:40 +02:00
parent b38edef612
commit 924da0ed8f
140 changed files with 1286 additions and 154 deletions
--- a/src/board/layers/drawMoveIndicators.ts
+++ b/src/board/layers/drawMoveIndicators.ts
@@ -34,12 +34,12 @@ const drawMoveIndicators = async (
  let fromStyle;
  let toStyle;

-  if (moveIndicator.type === "hueShift") {
+  if (moveIndicator.hueShift !== 0) {
    const newLight: Solid = {
      type: "solid",
      data: {
        color: light.data.color
-          ? changeHSL(light.data.color, moveIndicator.data)
+          ? changeHSL(light.data.color, moveIndicator.hueShift)
          : "#00ff0055",
      },
    };
@@ -48,7 +48,7 @@ const drawMoveIndicators = async (
      type: "solid",
      data: {
        color: dark.data.color
-          ? changeHSL(dark.data.color, moveIndicator.data)
+          ? changeHSL(dark.data.color, moveIndicator.hueShift)
          : "#00ff0055",
      },
    };
@@ -58,7 +58,7 @@ const drawMoveIndicators = async (
  } else {
    fromStyle = {
      type: "solid",
-      data: { color: moveIndicator.data },
+      data: { color: moveIndicator.color },
    } as SquareStyle;
    toStyle = fromStyle;
  }
--- a/src/board/styles-board/gradient/contrast_a.ts
+++ b/src/board/styles-board/gradient/contrast_a.ts
@@ -22,8 +22,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#3cff0055",
+    hueShift: 0,
+    color: "#3cff0055",
  },
  border: {
    type: "gradient",
--- a/src/board/styles-board/gradient/contrast_b.ts
+++ b/src/board/styles-board/gradient/contrast_b.ts
@@ -22,8 +22,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#ffaa0055",
+    hueShift: 0,
+    color: "#ffaa0055",
  },
  border: {
    type: "gradient",
--- a/src/board/styles-board/gradient/contrast_c.ts
+++ b/src/board/styles-board/gradient/contrast_c.ts
@@ -22,8 +22,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#00ffff55",
+    hueShift: 0,
+    color: "#00ffff55",
  },
  border: {
    type: "gradient",
--- a/src/board/styles-board/gradient/contrast_d.ts
+++ b/src/board/styles-board/gradient/contrast_d.ts
@@ -22,8 +22,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#ffaa0055",
+    hueShift: 0,
+    color: "#ffaa0055",
  },
  border: {
    type: "gradient",
--- a/src/board/styles-board/gradient/smooth_forest.ts
+++ b/src/board/styles-board/gradient/smooth_forest.ts
@@ -22,8 +22,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#ffff0055",
+    hueShift: 0,
+    color: "#ffff0055",
  },
  border: {
    type: "gradient",
--- a/src/board/styles-board/gradient/smooth_laguna.ts
+++ b/src/board/styles-board/gradient/smooth_laguna.ts
@@ -22,8 +22,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#3cff0055",
+    hueShift: 0,
+    color: "#3cff0055",
  },
  border: {
    type: "gradient",
--- a/src/board/styles-board/gradient/smooth_mono.ts
+++ b/src/board/styles-board/gradient/smooth_mono.ts
@@ -22,8 +22,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#3cff0055",
+    hueShift: 0,
+    color: "#3cff0055",
  },
  border: {
    type: "gradient",
--- a/src/board/styles-board/gradient/smooth_sea.ts
+++ b/src/board/styles-board/gradient/smooth_sea.ts
@@ -22,8 +22,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#ff00ff55",
+    hueShift: 0,
+    color: "#ff00ff55",
  },
  border: {
    type: "gradient",
--- a/src/board/styles-board/gradient/smooth_spring.ts
+++ b/src/board/styles-board/gradient/smooth_spring.ts
@@ -22,8 +22,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#00ffff55",
+    hueShift: 0,
+    color: "#00ffff55",
  },
  border: {
    type: "gradient",
--- a/src/board/styles-board/gradient/smooth_summer.ts
+++ b/src/board/styles-board/gradient/smooth_summer.ts
@@ -22,8 +22,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#00ffee55",
+    hueShift: 0,
+    color: "#00ffee55",
  },
  border: {
    type: "gradient",
--- a/src/board/styles-board/gradient/smooth_sunset.ts
+++ b/src/board/styles-board/gradient/smooth_sunset.ts
@@ -22,8 +22,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#00ffee55",
+    hueShift: 0,
+    color: "#00ffee55",
  },
  border: {
    type: "gradient",
--- a/src/board/styles-board/gradient/smooth_violet.ts
+++ b/src/board/styles-board/gradient/smooth_violet.ts
@@ -22,8 +22,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#ffaa0055",
+    hueShift: 0,
+    color: "#ffaa0055",
  },
  border: {
    type: "gradient",
--- a/src/board/styles-board/pic/lines_alabaster.ts
+++ b/src/board/styles-board/pic/lines_alabaster.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#55ff0022",
+    hueShift: 0,
+    color: "#55ff0022",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/pic/lines_cardboard.ts
+++ b/src/board/styles-board/pic/lines_cardboard.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#55ff0022",
+    hueShift: 0,
+    color: "#55ff0022",
  },
  border: {
    type: "image",
--- a/src/board/styles-board/pic/lines_paper.ts
+++ b/src/board/styles-board/pic/lines_paper.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#55ff0022",
+    hueShift: 0,
+    color: "#55ff0022",
  },
  border: {
    type: "image",
--- a/src/board/styles-board/pic/lines_parchment.ts
+++ b/src/board/styles-board/pic/lines_parchment.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#55ff0022",
+    hueShift: 0,
+    color: "#55ff0022",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/pic/wood1.ts
+++ b/src/board/styles-board/pic/wood1.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#55ff0022",
+    hueShift: 0,
+    color: "#55ff0022",
  },
  border: {
    type: "image",
--- a/src/board/styles-board/pic/wood2.ts
+++ b/src/board/styles-board/pic/wood2.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#55ff0022",
+    hueShift: 0,
+    color: "#55ff0022",
  },
  border: {
    type: "image",
--- a/src/board/styles-board/pic/wood3.ts
+++ b/src/board/styles-board/pic/wood3.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#ff007733",
+    hueShift: 0,
+    color: "#ff007733",
  },
  border: {
    type: "image",
--- a/src/board/styles-board/pic/wood4.ts
+++ b/src/board/styles-board/pic/wood4.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#ff007733",
+    hueShift: 0,
+    color: "#ff007733",
  },
  border: {
    type: "image",
--- a/src/board/styles-board/pic/wood5.ts
+++ b/src/board/styles-board/pic/wood5.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#55ff0022",
+    hueShift: 0,
+    color: "#55ff0022",
  },
  border: {
    type: "image",
--- a/src/board/styles-board/pic/wood6.ts
+++ b/src/board/styles-board/pic/wood6.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#55ff0022",
+    hueShift: 0,
+    color: "#55ff0022",
  },
  border: {
    type: "image",
--- a/src/board/styles-board/pic/wood7.ts
+++ b/src/board/styles-board/pic/wood7.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#55ff0022",
+    hueShift: 0,
+    color: "#55ff0022",
  },
  border: {
    type: "image",
--- a/src/board/styles-board/pic/wood8.ts
+++ b/src/board/styles-board/pic/wood8.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#55ff0022",
+    hueShift: 0,
+    color: "#55ff0022",
  },
  border: {
    type: "image",
--- a/src/board/styles-board/solid/avocado.ts
+++ b/src/board/styles-board/solid/avocado.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "hueShift",
-    data: 70,
+    hueShift: 70,
+    color: "#",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/azure.ts
+++ b/src/board/styles-board/solid/azure.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#ff000044",
+    hueShift: 0,
+    color: "#ff000044",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/botez.ts
+++ b/src/board/styles-board/solid/botez.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#7dacc97f",
+    hueShift: 0,
+    color: "#7dacc97f",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/clay.ts
+++ b/src/board/styles-board/solid/clay.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#ffff0055",
+    hueShift: 0,
+    color: "#ffff0055",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/danny.ts
+++ b/src/board/styles-board/solid/danny.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#ffff007f",
+    hueShift: 0,
+    color: "#ffff007f",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/danny_blue.ts
+++ b/src/board/styles-board/solid/danny_blue.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#00bfff7f",
+    hueShift: 0,
+    color: "#00bfff7f",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/danny_cyan.ts
+++ b/src/board/styles-board/solid/danny_cyan.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#00ff807f",
+    hueShift: 0,
+    color: "#00ff807f",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/danny_green.ts
+++ b/src/board/styles-board/solid/danny_green.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#40ff007f",
+    hueShift: 0,
+    color: "#40ff007f",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/danny_pink.ts
+++ b/src/board/styles-board/solid/danny_pink.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#ff38637f",
+    hueShift: 0,
+    color: "#ff38637f",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/danny_purple.ts
+++ b/src/board/styles-board/solid/danny_purple.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#ff38af7f",
+    hueShift: 0,
+    color: "#ff38af7f",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/danny_red.ts
+++ b/src/board/styles-board/solid/danny_red.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#ffaf387f",
+    hueShift: 0,
+    color: "#ffaf387f",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/danny_yellow.ts
+++ b/src/board/styles-board/solid/danny_yellow.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#ffff007f",
+    hueShift: 0,
+    color: "#ffff007f",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/danya.ts
+++ b/src/board/styles-board/solid/danya.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#00a5ff7f",
+    hueShift: 0,
+    color: "#00a5ff7f",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/leko.ts
+++ b/src/board/styles-board/solid/leko.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "hueShift",
-    data: -90,
+    hueShift: -90,
+    color: "#",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/lichess.ts
+++ b/src/board/styles-board/solid/lichess.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "hueShift",
-    data: -40,
+    hueShift: 0,
+    color: "#9bc70069",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/lila.ts
+++ b/src/board/styles-board/solid/lila.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "hueShift",
-    data: -120,
+    hueShift: -120,
+    color: "#",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/mono.ts
+++ b/src/board/styles-board/solid/mono.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#0088ff66",
+    hueShift: 0,
+    color: "#0088ff66",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/mono_blue.ts
+++ b/src/board/styles-board/solid/mono_blue.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "hueShift",
-    data: -30,
+    hueShift: -30,
+    color: "#",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/mono_chico.ts
+++ b/src/board/styles-board/solid/mono_chico.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "hueShift",
-    data: -30,
+    hueShift: -30,
+    color: "#",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/mono_contessa.ts
+++ b/src/board/styles-board/solid/mono_contessa.ts
@@ -27,8 +27,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#00ff0033",
+    hueShift: 0,
+    color: "#00ff0033",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/mono_coper.ts
+++ b/src/board/styles-board/solid/mono_coper.ts
@@ -27,8 +27,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#00ff0033",
+    hueShift: 0,
+    color: "#00ff0033",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/mono_coral.ts
+++ b/src/board/styles-board/solid/mono_coral.ts
@@ -27,8 +27,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#00ffaa55",
+    hueShift: 0,
+    color: "#00ffaa55",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/mono_cornflower.ts
+++ b/src/board/styles-board/solid/mono_cornflower.ts
@@ -27,8 +27,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#ff770055",
+    hueShift: 0,
+    color: "#ff770055",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/mono_dodger.ts
+++ b/src/board/styles-board/solid/mono_dodger.ts
@@ -27,8 +27,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#55ff0055",
+    hueShift: 0,
+    color: "#55ff0055",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/mono_flamingo.ts
+++ b/src/board/styles-board/solid/mono_flamingo.ts
@@ -27,8 +27,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#ffff0033",
+    hueShift: 0,
+    color: "#ffff0033",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/mono_goblin.ts
+++ b/src/board/styles-board/solid/mono_goblin.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "hueShift",
-    data: 40,
+    hueShift: 40,
+    color: "#",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/mono_harvest.ts
+++ b/src/board/styles-board/solid/mono_harvest.ts
@@ -27,8 +27,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#00ff0033",
+    hueShift: 0,
+    color: "#00ff0033",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/mono_heliotrope.ts
+++ b/src/board/styles-board/solid/mono_heliotrope.ts
@@ -27,8 +27,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "hueShift",
-    data: 30,
+    hueShift: 30,
+    color: "#",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/mono_mahogany.ts
+++ b/src/board/styles-board/solid/mono_mahogany.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "hueShift",
-    data: 30,
+    hueShift: 30,
+    color: "#",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/mono_mantis.ts
+++ b/src/board/styles-board/solid/mono_mantis.ts
@@ -27,8 +27,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#ffff0055",
+    hueShift: 0,
+    color: "#ffff0055",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/mono_meadow.ts
+++ b/src/board/styles-board/solid/mono_meadow.ts
@@ -27,8 +27,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#ffff0055",
+    hueShift: 0,
+    color: "#ffff0055",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/mono_mojo.ts
+++ b/src/board/styles-board/solid/mono_mojo.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "hueShift",
-    data: 30,
+    hueShift: 30,
+    color: "#",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/mono_mulberry.ts
+++ b/src/board/styles-board/solid/mono_mulberry.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "hueShift",
-    data: -30,
+    hueShift: -30,
+    color: "#",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/mono_rose.ts
+++ b/src/board/styles-board/solid/mono_rose.ts
@@ -27,8 +27,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#ffff0033",
+    hueShift: 0,
+    color: "#ffff0033",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/mono_sycamore.ts
+++ b/src/board/styles-board/solid/mono_sycamore.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "hueShift",
-    data: 60,
+    hueShift: 60,
+    color: "#",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/mono_teal.ts
+++ b/src/board/styles-board/solid/mono_teal.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "hueShift",
-    data: -30,
+    hueShift: -30,
+    color: "#",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/mono_terracotta.ts
+++ b/src/board/styles-board/solid/mono_terracotta.ts
@@ -27,8 +27,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#00ff0033",
+    hueShift: 0,
+    color: "#00ff0033",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/mud.ts
+++ b/src/board/styles-board/solid/mud.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "hueShift",
-    data: 60,
+    hueShift: 60,
+    color: "#",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/patina.ts
+++ b/src/board/styles-board/solid/patina.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "hueShift",
-    data: 90,
+    hueShift: 90,
+    color: "#",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/peach.ts
+++ b/src/board/styles-board/solid/peach.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "hueShift",
-    data: 30,
+    hueShift: 30,
+    color: "#",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/rock.ts
+++ b/src/board/styles-board/solid/rock.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#ffff0055",
+    hueShift: 0,
+    color: "#ffff0055",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/rose.ts
+++ b/src/board/styles-board/solid/rose.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "hueShift",
-    data: -30,
+    hueShift: -30,
+    color: "#",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/spring.ts
+++ b/src/board/styles-board/solid/spring.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#00ffff55",
+    hueShift: 0,
+    color: "#00ffff55",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/standard.ts
+++ b/src/board/styles-board/solid/standard.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "color",
-    data: "#ffff0055",
+    hueShift: 0,
+    color: "#ffff0055",
  },
  border: {
    type: "solid",
--- a/src/board/styles-board/solid/violet.ts
+++ b/src/board/styles-board/solid/violet.ts
@@ -21,8 +21,8 @@ const style: Style = {
    },
  },
  moveIndicator: {
-    type: "hueShift",
-    data: -60,
+    hueShift: -60,
+    color: "#",
  },
  border: {
    type: "solid",
--- a/src/types.ts
+++ b/src/types.ts
@@ -48,9 +48,10 @@ export type Coords = {

 export type SquareStyle = Gradient | Solid | Image;

-export type MoveIndicator =
-  | { type: "hueShift"; data: number }
-  | { type: "color"; data: string };
+export type MoveIndicator = {
+  hueShift: number;
+  color: string;
+};

 export type StyleCategory = "solid" | "gradient" | "pic" | "custom";