From 24358c1fdd96d615d87445a9cd5630402c865667 Mon Sep 17 00:00:00 2001 From: Maciej Caderek Date: Wed, 2 Mar 2022 23:50:34 +0100 Subject: [PATCH] WIP --- src/board/styles-board/gradient/contrast-a.ts | 43 +++++++++++++++++++ src/board/styles-board/gradient/contrast-b.ts | 43 +++++++++++++++++++ src/board/styles-board/gradient/contrast-c.ts | 43 +++++++++++++++++++ src/board/styles-board/gradient/contrast-d.ts | 43 +++++++++++++++++++ src/board/styles-board/index.ts | 8 ++++ src/main.tsx | 38 +++++++++++----- src/state.ts | 2 + 7 files changed, 210 insertions(+), 10 deletions(-) create mode 100644 src/board/styles-board/gradient/contrast-a.ts create mode 100644 src/board/styles-board/gradient/contrast-b.ts create mode 100644 src/board/styles-board/gradient/contrast-c.ts create mode 100644 src/board/styles-board/gradient/contrast-d.ts diff --git a/src/board/styles-board/gradient/contrast-a.ts b/src/board/styles-board/gradient/contrast-a.ts new file mode 100644 index 0000000..12228c0 --- /dev/null +++ b/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; diff --git a/src/board/styles-board/gradient/contrast-b.ts b/src/board/styles-board/gradient/contrast-b.ts new file mode 100644 index 0000000..a8c76ea --- /dev/null +++ b/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; diff --git a/src/board/styles-board/gradient/contrast-c.ts b/src/board/styles-board/gradient/contrast-c.ts new file mode 100644 index 0000000..5c91bf2 --- /dev/null +++ b/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; diff --git a/src/board/styles-board/gradient/contrast-d.ts b/src/board/styles-board/gradient/contrast-d.ts new file mode 100644 index 0000000..6c1df96 --- /dev/null +++ b/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; diff --git a/src/board/styles-board/index.ts b/src/board/styles-board/index.ts index e710eb1..c742f24 100644 --- a/src/board/styles-board/index.ts +++ b/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, diff --git a/src/main.tsx b/src/main.tsx index 69a2d42..364a4b9 100644 --- a/src/main.tsx +++ b/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,18 +206,22 @@ const main = async () => { const $board = document.querySelector("#board"); $board?.prepend(board.canvas); - /* Restore game from the url */ + /* Load game from the url */ - const { pgn, fen } = extractUrlData(); + const loadFromUrl = async () => { + const { pgn, fen } = extractUrlData(); - await (pgn - ? handlers.loadPGN(pgn) - : fen - ? handlers.loadFEN(fen) - : handlers.loadFEN( - "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1", - false - )); + await (pgn + ? handlers.loadPGN(pgn) + : fen + ? handlers.loadFEN(fen) + : handlers.loadFEN( + "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, diff --git a/src/state.ts b/src/state.ts index 82cca84..fba0d3e 100644 --- a/src/state.ts +++ b/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);