WIP

src/board/layers/drawCoords.ts

@@ -1,6 +1,6 @@
 import { Coords } from "../../types";
 
-const BASE_FONT_SIZE = 24;
+const BASE_FONT_SIZE = 22;
 const FONT_FAMILY = "Fira Mono";
 
 const drawCoords = (

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

@@ -7,7 +7,7 @@ const style: Style = {
     type: "gradient",
     data: {
       dir: "diagonal-top",
-      colors: ["#3df5a7", "#096fe0"],
+      colors: ["#00c4a0", "#096fe0"],
     },
   },
   dark: {
@@ -19,7 +19,7 @@ const style: Style = {
   light: {
     type: "solid",
     data: {
-      color: "#ffffff55",
+      color: "#ffffff77",
     },
   },
   moveIndicator: {
@@ -30,7 +30,7 @@ const style: Style = {
     type: "gradient",
     data: {
       dir: "diagonal-top",
-      colors: ["#00b568", "#0052ad"],
+      colors: ["#009c7f", "#0052ad"],
     },
   },
   coords: {

src/board/styles-board/gradient/rainbow-light.ts

@@ -1,50 +0,0 @@
-import { Style } from "../../../types";
-
-const style: Style = {
-  name: "Rainbow Light",
-  category: "gradient",
-  background: {
-    type: "gradient",
-    data: {
-      dir: "vertical",
-      colors: [
-        "hsl(350, 100%, 60%)",
-        "hsl(35, 100%, 60%)",
-        "hsl(80, 100%, 60%)",
-        "hsl(125, 100%, 60%)",
-        "hsl(215, 100%, 60%)",
-        "hsl(260, 100%, 60%)",
-        "hsl(305, 100%, 60%)",
-      ],
-    },
-  },
-  dark: {
-    type: "solid",
-    data: {
-      color: "#ffffff22",
-    },
-  },
-  light: {
-    type: "solid",
-    data: {
-      color: "#ffffff88",
-    },
-  },
-  moveIndicator: {
-    type: "color",
-    data: "#00ffff66",
-  },
-  border: {
-    type: "solid",
-    data: {
-      color: "#bd2f47",
-    },
-  },
-  coords: {
-    onLight: "#bd2f47",
-    onDark: "#000000bb",
-    onBorder: "#ffffffcc",
-  },
-};
-
-export default style;

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

@@ -1,50 +0,0 @@
-import { Style } from "../../../types";
-
-const style: Style = {
-  name: "Rainbow",
-  category: "gradient",
-  background: {
-    type: "gradient",
-    data: {
-      dir: "vertical",
-      colors: [
-        "hsl(350, 70%, 50%)",
-        "hsl(35, 70%, 50%)",
-        "hsl(80, 70%, 50%)",
-        "hsl(125, 70%, 50%)",
-        "hsl(215, 70%, 50%)",
-        "hsl(260, 70%, 50%)",
-        "hsl(305, 70%, 50%)",
-      ],
-    },
-  },
-  dark: {
-    type: "solid",
-    data: {
-      color: "#ffffff22",
-    },
-  },
-  light: {
-    type: "solid",
-    data: {
-      color: "#ffffff99",
-    },
-  },
-  moveIndicator: {
-    type: "color",
-    data: "#00ffff66",
-  },
-  border: {
-    type: "solid",
-    data: {
-      color: "#271936",
-    },
-  },
-  coords: {
-    onLight: "#271936",
-    onDark: "#271936",
-    onBorder: "#ffffffbb",
-  },
-};
-
-export default style;

src/board/styles-board/index.ts

@@ -12,25 +12,23 @@ import avocado from "./colorful/avocado";
 import calm from "./gradient/calm";
 import laguna from "./gradient/laguna";
 import sunset from "./gradient/sunset";
-import rainbow from "./gradient/rainbow";
-import rainbowLight from "./gradient/rainbow-light";
 
 // import kittens from "./pic/kittens";
 
-export default {
+const styles = {
   standard,
-  chesscom,
-  lichess,
   lila,
   peach,
   violet,
+  chesscom,
+  lichess,
   danya,
   botez,
   avocado,
   calm,
   laguna,
   sunset,
-  rainbow,
-  rainbowLight,
   // kittens,
 };
+
+export default styles;

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

@@ -28,13 +28,13 @@ const style: Style = {
   border: {
     type: "solid",
     data: {
-      color: "#271936",
+      color: "#50346e",
     },
   },
   coords: {
-    onLight: "#271936",
-    onDark: "#271936",
-    onBorder: "#cea9f5",
+    onLight: "#50346e",
+    onDark: "#eedeff",
+    onBorder: "#e2c7ff",
   },
 };
 

src/main.tsx

@@ -10,6 +10,7 @@ import Player from "./player/Player";
 import App from "./ui/App";
 
 import { state, setState } from "./state";
+import saveConfig from "./persistance/saveConfig";
 
 import createImage from "./encoders/createImage";
 import createAnimation from "./encoders/createAnimation";
@@ -45,15 +46,18 @@ const main = async () => {
     toggleBorder() {
       board.toggleBorder();
       setState("boardConfig", "showBorder", !state.boardConfig.showBorder);
+      saveConfig("board");
     },
 
     showBorder() {
       board.showBorder();
       setState("boardConfig", "showBorder", true);
+      saveConfig("board");
     },
     hideBorder() {
       board.hideBorder();
       setState("boardConfig", "showBorder", false);
+      saveConfig("board");
     },
     toggleExtraInfo() {
       board.toggleExtraInfo();
@@ -62,6 +66,7 @@ const main = async () => {
         "showExtraInfo",
         !state.boardConfig.showExtraInfo
       );
+      saveConfig("board");
     },
     toggleAnonymous() {
       setState("boardConfig", "anonymous", !state.boardConfig.anonymous);
@@ -69,6 +74,7 @@ const main = async () => {
     },
     toggleTitleScreen() {
       setState("gameConfig", "titleScreen", !state.gameConfig.titleScreen);
+      saveConfig("game");
     },
     flip() {
       console.log("FLIP");
@@ -85,10 +91,12 @@ const main = async () => {
     changeBoardStyle(style: BoardStyle) {
       board.setStyle(style);
       setState("boardConfig", "boardStyle", style);
+      saveConfig("board");
     },
     changePiecesStyle(style: PiecesStyle) {
       board.setPiecesStyle(style);
       setState("boardConfig", "piecesStyle", style);
+      saveConfig("board");
     },
     async loadPGN(pgn: string) {
       const game = new Game().loadPGN(pgn);
@@ -240,7 +248,7 @@ const main = async () => {
 
 WebFont.load({
   google: {
-    families: ["Ubuntu:500,700", "Fira Mono"],
+    families: ["Ubuntu:500,700", "Fira Mono:500"],
   },
   custom: {
     families: ["Chess"],

src/persistance/loadConfig.ts

@@ -0,0 +1,11 @@
+const loadConfig = () => {
+  const boardConfig = localStorage.getItem("boardConfig");
+  const gameConfig = localStorage.getItem("gameConfig");
+
+  return {
+    boardConfig: boardConfig === null ? {} : JSON.parse(boardConfig),
+    gameConfig: gameConfig === null ? {} : JSON.parse(gameConfig),
+  };
+};
+
+export default loadConfig;

src/persistance/saveConfig.ts

@@ -0,0 +1,8 @@
+import { state } from "../state";
+
+const saveConfig = (type: "board" | "game") =>
+  type === "board"
+    ? localStorage.setItem("boardConfig", JSON.stringify(state.boardConfig))
+    : localStorage.setItem("gameConfig", JSON.stringify(state.gameConfig));
+
+export default saveConfig;

src/state.ts

@@ -1,11 +1,14 @@
 import isMobile from "is-mobile";
 import { createStore } from "solid-js/store";
 import Game from "./game/Game";
+import loadConfig from "./persistance/loadConfig";
 import { BoardConfig, GameConfig } from "./types";
 
 const mobile = isMobile();
 
-const boardConfig: BoardConfig = {
+const saved = loadConfig();
+
+const initialBoardConfig: BoardConfig = {
   size: 1024,
   tiles: 8,
   boardStyle: "standard",
@@ -20,11 +23,8 @@ const boardConfig: BoardConfig = {
   anonymous: false,
 };
 
-const gameConfig: GameConfig = {
+const initialGameConfig: GameConfig = {
   titleScreen: true,
-  fromPly: null,
-  toPly: null,
-  loop: true,
   format: "GIF",
   picSize: "M",
   animationSize: "M",
@@ -43,8 +43,8 @@ export type State = {
 };
 
 const initialState: State = {
-  boardConfig,
-  gameConfig,
+  boardConfig: { ...initialBoardConfig, ...saved.boardConfig },
+  gameConfig: { ...initialGameConfig, ...saved.gameConfig },
   game: new Game(),
   pgn: "",
   fen: "",

src/types.ts

@@ -1,4 +1,6 @@
 import { Move } from "chess.js";
+import stylesBoard from "./board/styles-board";
+import stylesPieces from "./board/styles-pieces";
 
 export type GradientDir =
   | "horizontal"
@@ -92,35 +94,9 @@ export type Piece =
   | "nb"
   | "pb";
 
-export type BoardStyle =
-  | "standard"
-  | "chesscom"
-  | "lichess"
-  | "lila"
-  | "peach"
-  | "violet"
-  | "danya"
-  | "botez"
-  | "avocado"
-  | "calm"
-  | "laguna"
-  | "sunset"
-  | "rainbow"
-  | "rainbowLight";
+export type BoardStyle = keyof typeof stylesBoard;
 
-export type PiecesStyle =
-  | "alpha"
-  | "cardinal"
-  | "cburnett"
-  | "companion"
-  | "fantasy"
-  | "gioco"
-  | "governor"
-  | "horsey"
-  | "maestro"
-  | "merida"
-  | "staunty"
-  | "tatiana";
+export type PiecesStyle = keyof typeof stylesPieces;
 
 export type BoardConfig = {
   size: number;
@@ -141,9 +117,6 @@ export type Size = "XS" | "S" | "M" | "L" | "XL";
 
 export type GameConfig = {
   titleScreen: boolean;
-  fromPly: number | null;
-  toPly: number | null;
-  loop: boolean;
   format: "GIF" | "MP4" | "WebM";
   picSize: Size;
   animationSize: Size;