WIP

src/board/styles-board/gradient/contrast-a.ts

@@ -0,0 +1,43 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Contrast A",
+  category: "gradient",
+  background: {
+    type: "gradient",
+    data: {
+      dir: "vertical",
+      colors: ["#ff9b38", "#389bff"],
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#ffffff66",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#3cff0055",
+  },
+  border: {
+    type: "gradient",
+    data: {
+      dir: "vertical",
+      colors: ["#f27f0d", "#0d7ff2"],
+    },
+  },
+  coords: {
+    onLight: "#00000077",
+    onDark: "#fff",
+    onBorder: "#fff",
+  },
+};
+
+export default style;

src/board/styles-board/gradient/contrast-b.ts

@@ -0,0 +1,43 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Contrast B",
+  category: "gradient",
+  background: {
+    type: "gradient",
+    data: {
+      dir: "vertical",
+      colors: ["#FF4DA6", "#4D74FF"],
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#ffffff66",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#3cff0055",
+  },
+  border: {
+    type: "gradient",
+    data: {
+      dir: "vertical",
+      colors: ["#BB3D7C", "#3653BB"],
+    },
+  },
+  coords: {
+    onLight: "#00000077",
+    onDark: "#fff",
+    onBorder: "#fff",
+  },
+};
+
+export default style;

src/board/styles-board/gradient/contrast-c.ts

@@ -0,0 +1,43 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Contrast C",
+  category: "gradient",
+  background: {
+    type: "gradient",
+    data: {
+      dir: "vertical",
+      colors: ["#FF8D4D", "#914DFF"],
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#ffffff66",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#3cff0055",
+  },
+  border: {
+    type: "gradient",
+    data: {
+      dir: "vertical",
+      colors: ["#E8702C", "#6334B0"],
+    },
+  },
+  coords: {
+    onLight: "#00000077",
+    onDark: "#fff",
+    onBorder: "#fff",
+  },
+};
+
+export default style;

src/board/styles-board/gradient/contrast-d.ts

@@ -0,0 +1,43 @@
+import { Style } from "../../../types";
+
+const style: Style = {
+  name: "Contrast D",
+  category: "gradient",
+  background: {
+    type: "gradient",
+    data: {
+      dir: "vertical",
+      colors: ["#61c43f", "#864DFF"],
+    },
+  },
+  dark: {
+    type: "solid",
+    data: {
+      color: "transparent",
+    },
+  },
+  light: {
+    type: "solid",
+    data: {
+      color: "#ffffff66",
+    },
+  },
+  moveIndicator: {
+    type: "color",
+    data: "#3cff0055",
+  },
+  border: {
+    type: "gradient",
+    data: {
+      dir: "vertical",
+      colors: ["#559a3c", "#6333cc"],
+    },
+  },
+  coords: {
+    onLight: "#00000077",
+    onDark: "#fff",
+    onBorder: "#fff",
+  },
+};
+
+export default style;

src/board/styles-board/index.ts

@@ -29,6 +29,10 @@ 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 wood1 from "./pic/wood1";
 import wood2 from "./pic/wood2";
@@ -71,6 +75,10 @@ const styles = {
   smoothSea,
   smoothViolet,
   smoothMono,
+  contrastA,
+  contrastB,
+  contrastC,
+  contrastD,
   wood1,
   wood2,
   wood3,

src/main.tsx

@@ -83,6 +83,7 @@ const main = async () => {
       if (state.pgn !== "") {
         const pgn = state.anonymous ? state.game.anonymousPGN : state.game.pgn;
         window.location.hash = `pgn/${compressPGN(pgn)}`;
+        setState("refreshHash", false);
       }
     },
     toggleTitleScreen() {
@@ -114,6 +115,7 @@ const main = async () => {
         game,
       });
       window.location.hash = `pgn/${compressPGN(game.pgn)}`;
+      setState("refreshHash", false);
 
       await player.load(game);
       setState("activeTab", "game");
@@ -142,6 +144,7 @@ const main = async () => {
 
       if (hash) {
         window.location.hash = `fen/${state.fen}`;
+        setState("refreshHash", false);
         setState("activeTab", "game");
       }
 
@@ -203,8 +206,9 @@ const main = async () => {
   const $board = document.querySelector<HTMLImageElement>("#board");
   $board?.prepend(board.canvas);
 
-  /* Restore game from the url */
+  /* Load game from the url */
 
+  const loadFromUrl = async () => {
     const { pgn, fen } = extractUrlData();
 
     await (pgn
@@ -215,6 +219,9 @@ const main = async () => {
           "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1",
           false
         ));
+  };
+
+  await loadFromUrl();
 
   /* Register events */
   document.addEventListener("dblclick", function (el) {
@@ -232,6 +239,17 @@ const main = async () => {
     );
   });
 
+  window.addEventListener("hashchange", () => {
+    if (!state.refreshHash) {
+      setState("refreshHash", true);
+      console.log("No refresh");
+      return;
+    }
+
+    console.log("Refresh!");
+    loadFromUrl();
+  });
+
   if (!state.mobile) {
     const keyMapping: { [key: string]: () => void } = {
       ArrowLeft: handlers.prev,

src/state.ts

@@ -44,6 +44,7 @@ export type State = {
   activeTab: TabName;
   playing: boolean;
   anonymous: boolean;
+  refreshHash: boolean;
 };
 
 const initialState: State = {
@@ -67,6 +68,7 @@ const initialState: State = {
   activeTab: "load",
   playing: false,
   anonymous: false,
+  refreshHash: true,
 };
 
 console.log(initialState);