From a003ab6089cb672fc719a6b238928d3bc3985716 Mon Sep 17 00:00:00 2001 From: Maciej Caderek Date: Thu, 31 Mar 2022 22:38:35 +0200 Subject: [PATCH] WIP --- src/main.tsx | 21 ++++++++++++------ src/persistance/extractUrlData.ts | 36 +++++++++++++++---------------- src/persistance/link.ts | 33 ++++++++++++++++++++++++++-- src/types.ts | 2 +- src/ui/components/Info.tsx | 8 +++++-- 5 files changed, 71 insertions(+), 29 deletions(-) diff --git a/src/main.tsx b/src/main.tsx index f5f420a..99ba28d 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -17,12 +17,13 @@ import createAnimation from "./encoders/createAnimation"; import readFile from "./utils/readFile"; import download from "./utils/download"; import { compressPGN } from "./game/PGNHelpers"; -import extractUrlData from "./persistance/extractUrlData"; +// import extractUrlData from "./persistance/extractUrlData"; import importFromLink from "./imports/importFromLink"; import isFEN from "./utils/isFEN"; import isPGN from "./utils/isPGN"; import isSafeLink from "./utils/isSafeLink"; import { PiecesStyle } from "./board/styles-pieces/piecesStyles"; +import link from "./persistance/link"; const main = async () => { const board = new Board(state.boardConfig); @@ -30,6 +31,8 @@ const main = async () => { player.watch((playing) => setState("playing", playing)); + link.read(); + /* Register handlers */ const handlers = { @@ -103,6 +106,8 @@ const main = async () => { console.log("FLIP"); board.flip(); setState("boardConfig", "flipped", !state.boardConfig.flipped); + setState("refreshHash", false); + link.set({ side: state.boardConfig.flipped ? "b" : "w" }); }, changeBoardStyle(style: BoardStyle) { board.setStyle(style); @@ -114,7 +119,7 @@ const main = async () => { setState("boardConfig", "piecesStyle", style); saveConfig("board"); }, - async loadPGN(pgn: string, side: "w" | "b" = "w") { + async loadPGN(pgn: string, side: "w" | "b" = "w", ply: number = 0) { const game = new Game().loadPGN(pgn); setState({ pgn: game.pgn, @@ -123,7 +128,7 @@ const main = async () => { ply: 0, game, }); - window.location.hash = `pgn/${compressPGN(game.pgn)}`; + link.set({ pgn: game.pgn, side, ply }); await player.load(game); setState("activeTab", "game"); @@ -151,7 +156,7 @@ const main = async () => { await player.load(game); if (hash) { - window.location.hash = `fen/${state.fen}`; + link.set({ fen: state.fen }); setState("activeTab", "game"); } @@ -241,10 +246,10 @@ const main = async () => { const loadFromUrl = async (refreshHash: boolean = true) => { setState("refreshHash", refreshHash); - const { pgn, fen } = extractUrlData(); + const { pgn, fen, side, ply } = link.read(); await (pgn - ? handlers.loadPGN(pgn) + ? handlers.loadPGN(pgn, side, ply) : fen ? handlers.loadFEN(fen) : handlers.loadFEN( @@ -252,6 +257,10 @@ const main = async () => { false )); + if (ply !== 0) { + handlers.goto(ply); + } + setState("refreshHash", true); }; diff --git a/src/persistance/extractUrlData.ts b/src/persistance/extractUrlData.ts index 1b23dac..6f3b5cb 100644 --- a/src/persistance/extractUrlData.ts +++ b/src/persistance/extractUrlData.ts @@ -1,25 +1,25 @@ -import { decompressPGN } from "../game/PGNHelpers"; +// import { decompressPGN } from "../game/PGNHelpers"; -const HEADER_REGEX = /^#(pgn|fen)\//; +// const HEADER_REGEX = /^#(pgn|fen)\//; -const extractUrlData = () => { - const hash = window.location.hash; +// const extractUrlData = () => { +// const hash = window.location.hash; - if (!HEADER_REGEX.test(hash)) { - return { - pgn: "", - fen: "", - }; - } +// if (!HEADER_REGEX.test(hash)) { +// return { +// pgn: "", +// fen: "", +// }; +// } - const [format, ...chunks] = hash.slice(1).split("/"); +// const [format, ...chunks] = hash.slice(1).split("/"); - const data = chunks.join("/"); +// const data = chunks.join("/"); - return { - pgn: format === "pgn" ? decompressPGN(data) : "", - fen: format === "fen" ? decodeURI(data) : "", - }; -}; +// return { +// pgn: format === "pgn" ? decompressPGN(data) : "", +// fen: format === "fen" ? decodeURI(data) : "", +// }; +// }; -export default extractUrlData; +// export default extractUrlData; diff --git a/src/persistance/link.ts b/src/persistance/link.ts index 4449be8..6894a22 100644 --- a/src/persistance/link.ts +++ b/src/persistance/link.ts @@ -1,6 +1,13 @@ -import { compressPGN } from "../game/PGNHelpers"; +import { compressPGN, decompressPGN } from "../game/PGNHelpers"; type LinkData = { + pgn: string; + fen: string; + side: "b" | "w"; + ply: number; +}; + +type LinkConfig = { pgn?: string; fen?: string; side?: "b" | "w"; @@ -17,7 +24,7 @@ const defaultLinkData = { let linkData: LinkData = { ...defaultLinkData } as LinkData; const link = { - set(data: LinkData) { + set(data: LinkConfig) { if (data.fen) { linkData = { ...defaultLinkData } as LinkData; linkData.fen = data.fen; @@ -46,6 +53,28 @@ const link = { return location.href; }, + read() { + const [type, ...rest] = location.hash.split("/"); + + if (/fen/.test(type)) { + linkData = { ...defaultLinkData } as LinkData; + linkData.fen = decodeURI(rest.join("/")); + } else if (/pgn/.test(type)) { + const [side, ply, ...pgn] = rest; + linkData.side = side as "w" | "b"; + linkData.ply = Number(ply); + linkData.pgn = pgn.join("/"); + linkData.fen = ""; + } + + return { + pgn: linkData.pgn ? decompressPGN(linkData.pgn) : "", + fen: linkData.fen, + side: linkData.side, + ply: linkData.ply, + }; + }, + entries() { return { ...linkData } as LinkData; }, diff --git a/src/types.ts b/src/types.ts index e7d4271..7eafd5e 100644 --- a/src/types.ts +++ b/src/types.ts @@ -166,7 +166,7 @@ export type Handlers = { goto(ply: number): void; changeBoardStyle: (style: BoardStyle) => void; changePiecesStyle: (style: PiecesStyle) => void; - loadPGN: (pgn: string) => Promise; + loadPGN: (pgn: string, side?: "w" | "b", ply?: number) => Promise; loadFEN: (fen: string) => Promise; importPGN: (link: string) => Promise; load: (data: string) => Promise; diff --git a/src/ui/components/Info.tsx b/src/ui/components/Info.tsx index 6c33807..373de4e 100644 --- a/src/ui/components/Info.tsx +++ b/src/ui/components/Info.tsx @@ -28,7 +28,9 @@ const Info: Component<{ handlers: Handlers }> = () => { ? "1" : state.game.header.Result === "0-1" ? "0" - : "1/2"} + : state.game.header.Result === "1/2-1/2" + ? "1/2" + : ""} @@ -51,7 +53,9 @@ const Info: Component<{ handlers: Handlers }> = () => { ? "0" : state.game.header.Result === "0-1" ? "1" - : "1/2"} + : state.game.header.Result === "1/2-1/2" + ? "1/2" + : ""}