WIP

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);
   };
 

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 extractUrlData = () => {
-  const hash = window.location.hash;
+//   const hash = window.location.hash;
 
-  if (!HEADER_REGEX.test(hash)) {
+//   if (!HEADER_REGEX.test(hash)) {
-    return {
+//     return {
-      pgn: "",
+//       pgn: "",
-      fen: "",
+//       fen: "",
-    };
+//     };
-  }
+//   }
 
-  const [format, ...chunks] = hash.slice(1).split("/");
+//   const [format, ...chunks] = hash.slice(1).split("/");
 
-  const data = chunks.join("/");
+//   const data = chunks.join("/");
 
-  return {
+//   return {
-    pgn: format === "pgn" ? decompressPGN(data) : "",
+//     pgn: format === "pgn" ? decompressPGN(data) : "",
-    fen: format === "fen" ? decodeURI(data) : "",
+//     fen: format === "fen" ? decodeURI(data) : "",
-  };
+//   };
-};
+// };
 
-export default extractUrlData;
+// export default extractUrlData;

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;
   },

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<void>;
+  loadPGN: (pgn: string, side?: "w" | "b", ply?: number) => Promise<void>;
   loadFEN: (fen: string) => Promise<void>;
   importPGN: (link: string) => Promise<void>;
   load: (data: string) => Promise<boolean>;

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"
+                : ""}
             </span>
           </div>
         </div>
@@ -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"
+                : ""}
             </span>
           </div>
         </div>