From c4e02072bc9d9865668272ed2bc4f3cad8febaf4 Mon Sep 17 00:00:00 2001 From: Maciej Caderek Date: Thu, 17 Feb 2022 22:24:51 +0100 Subject: [PATCH] WIP --- src/board/layers/drawCoords.ts | 2 +- src/board/styles-board/gradient/laguna.ts | 6 +-- .../styles-board/gradient/rainbow-light.ts | 50 ------------------- src/board/styles-board/gradient/rainbow.ts | 50 ------------------- src/board/styles-board/index.ts | 12 ++--- src/board/styles-board/mono/violet.ts | 8 +-- src/main.tsx | 10 +++- src/persistance/loadConfig.ts | 11 ++++ src/persistance/saveConfig.ts | 8 +++ src/state.ts | 14 +++--- src/types.ts | 35 ++----------- 11 files changed, 52 insertions(+), 154 deletions(-) delete mode 100644 src/board/styles-board/gradient/rainbow-light.ts delete mode 100644 src/board/styles-board/gradient/rainbow.ts create mode 100644 src/persistance/loadConfig.ts create mode 100644 src/persistance/saveConfig.ts diff --git a/src/board/layers/drawCoords.ts b/src/board/layers/drawCoords.ts index 6d117ef..9025cf4 100644 --- a/src/board/layers/drawCoords.ts +++ b/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 = ( diff --git a/src/board/styles-board/gradient/laguna.ts b/src/board/styles-board/gradient/laguna.ts index 9a04a8f..374653c 100644 --- a/src/board/styles-board/gradient/laguna.ts +++ b/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: { diff --git a/src/board/styles-board/gradient/rainbow-light.ts b/src/board/styles-board/gradient/rainbow-light.ts deleted file mode 100644 index a7c3a9c..0000000 --- a/src/board/styles-board/gradient/rainbow-light.ts +++ /dev/null @@ -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; diff --git a/src/board/styles-board/gradient/rainbow.ts b/src/board/styles-board/gradient/rainbow.ts deleted file mode 100644 index 3ded935..0000000 --- a/src/board/styles-board/gradient/rainbow.ts +++ /dev/null @@ -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; diff --git a/src/board/styles-board/index.ts b/src/board/styles-board/index.ts index a347dec..2477db2 100644 --- a/src/board/styles-board/index.ts +++ b/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; diff --git a/src/board/styles-board/mono/violet.ts b/src/board/styles-board/mono/violet.ts index 1d3e0b5..2e65a6a 100644 --- a/src/board/styles-board/mono/violet.ts +++ b/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", }, }; diff --git a/src/main.tsx b/src/main.tsx index 875c407..2712c7a 100644 --- a/src/main.tsx +++ b/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"], diff --git a/src/persistance/loadConfig.ts b/src/persistance/loadConfig.ts new file mode 100644 index 0000000..57978e0 --- /dev/null +++ b/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; diff --git a/src/persistance/saveConfig.ts b/src/persistance/saveConfig.ts new file mode 100644 index 0000000..f145580 --- /dev/null +++ b/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; diff --git a/src/state.ts b/src/state.ts index 6c5fcbf..c08611a 100644 --- a/src/state.ts +++ b/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: "", diff --git a/src/types.ts b/src/types.ts index 9fe7052..5dcd289 100644 --- a/src/types.ts +++ b/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;