WIP

src/board/Board.ts

@@ -21,7 +21,6 @@ const defaultConfig: BoardConfig = {
   showChecks: true,
   showCoords: true,
   flipped: false,
-  anonymous: false,
 };
 
 const defaultHeader: Header = {
@@ -41,6 +40,7 @@ const defaultHeader: Header = {
 
 class Board {
   private cfg: BoardConfig = defaultConfig;
+  private _anonymous: boolean = false;
 
   private scale: number = 1;
 
@@ -90,6 +90,11 @@ class Board {
     }
   }
 
+  set anonymous(value: boolean) {
+    this._anonymous = value;
+    this.refresh();
+  }
+
   async refresh() {
     await this.renderBackground();
 
@@ -197,7 +202,7 @@ class Board {
   }
 
   private getFinalHeader() {
-    return this.cfg.anonymous
+    return this._anonymous
       ? {
           ...this.header,
           White: "Anonymous",

src/main.tsx

@@ -1,5 +1,5 @@
 import WebFont from "webfontloader";
-import * as Hammer from "hammerjs";
+// import * as Hammer from "hammerjs";
 import { render } from "solid-js/web";
 
 import { BoardStyle, PiecesStyle } from "./types";
@@ -77,13 +77,11 @@ const main = async () => {
       saveConfig("board");
     },
     toggleAnonymous() {
-      setState("boardConfig", "anonymous", !state.boardConfig.anonymous);
+      setState("anonymous", !state.anonymous);
-      board.updateConfig({ anonymous: state.boardConfig.anonymous });
+      board.anonymous = state.anonymous;
 
       if (state.pgn !== "") {
-        const pgn = state.boardConfig.anonymous
+        const pgn = state.anonymous ? state.game.anonymousPGN : state.game.pgn;
-          ? state.game.anonymousPGN
-          : state.game.pgn;
         window.location.hash = `pgn/${compressPGN(pgn)}`;
       }
     },
@@ -189,7 +187,7 @@ const main = async () => {
         state.gameConfig.titleScreen
       );
 
-      const name = state.game.getFileName(state.boardConfig.anonymous);
+      const name = state.game.getFileName(state.anonymous);
 
       download(data, name, state.gameConfig.format.toLowerCase());
     },

src/state.ts

@@ -20,7 +20,6 @@ const initialBoardConfig: BoardConfig = {
   showChecks: true,
   showCoords: true,
   flipped: false,
-  anonymous: false,
 };
 
 const initialGameConfig: GameConfig = {
@@ -44,13 +43,13 @@ export type State = {
   layout: "single" | "double" | "triple";
   activeTab: TabName;
   playing: boolean;
+  anonymous: boolean;
 };
 
 const initialState: State = {
   boardConfig: {
     ...initialBoardConfig,
     ...saved.boardConfig,
-    anonymous: false,
   },
   gameConfig: { ...initialGameConfig, ...saved.gameConfig },
   game: new Game(),
@@ -62,6 +61,7 @@ const initialState: State = {
   layout: mobile ? "single" : "triple",
   activeTab: "load",
   playing: false,
+  anonymous: false,
 };
 
 const [state, setState] = createStore(initialState);

src/types.ts

@@ -111,7 +111,6 @@ export type BoardConfig = {
   showChecks: boolean;
   showCoords: boolean;
   flipped: boolean;
-  anonymous: boolean;
 };
 
 export type Size = "XS" | "S" | "M" | "L" | "XL";

src/ui/components/Info.tsx

@@ -11,14 +11,14 @@ const Info: Component<{ handlers: Handlers }> = () => {
       <div className="info__players">
         <p>
           <button className="info__color info__color--white"></button>
-          <Show when={!state.boardConfig.anonymous} fallback="Anonymous">
+          <Show when={!state.anonymous} fallback="Anonymous">
             {state.game.header.WhitePretty}{" "}
           </Show>
           <span className="info__rating">{state.game.header.WhiteElo}</span>
         </p>
         <p>
           <button className="info__color info__color--black"></button>
-          <Show when={!state.boardConfig.anonymous} fallback="Anonymous">
+          <Show when={!state.anonymous} fallback="Anonymous">
             {state.game.header.BlackPretty}{" "}
           </Show>
           <span className="info__rating">{state.game.header.BlackElo}</span>
@@ -35,11 +35,7 @@ const Info: Component<{ handlers: Handlers }> = () => {
       <div className="info__site">
         <Show when={state.game.header.Site}>
           <p>
-            <Show
+            <Show when={!state.anonymous || !isLink(state.game.header.Site)}>
-              when={
-                !state.boardConfig.anonymous || !isLink(state.game.header.Site)
-              }
-            >
               <Show
                 when={isSafeLink(state.game.header.Site)}
                 fallback={state.game.header.Site}

src/ui/components/Load.css

@@ -34,7 +34,7 @@
 }
 
 .load__pgn-file-info {
-  font-size: 1.5rem;
+  font-size: 1.3rem;
 }
 
 .load__pgn-file-info p {

src/ui/components/Moves.css

@@ -36,3 +36,18 @@
   text-decoration: underline;
   cursor: pointer;
 }
+
+@media screen and (max-width: 1024px) {
+  .moves {
+    text-align: left;
+  }
+  .move {
+    display: inline-block;
+  }
+  .move__id,
+  .move__ply {
+    display: inline;
+    margin-right: 0.6rem;
+    width: auto;
+  }
+}

src/ui/components/Share.tsx

@@ -79,7 +79,7 @@ const Share: Component<{ handlers: Handlers; class?: string }> = (props) => {
           classList={{
             options__button: true,
             "options__button--last": true,
-            "options__button--active": state.boardConfig.anonymous,
+            "options__button--active": state.anonymous,
           }}
           onClick={props.handlers.toggleAnonymous}
           title="TOGGLE ANONYMOUS"
@@ -191,9 +191,7 @@ const Share: Component<{ handlers: Handlers; class?: string }> = (props) => {
               class="share__btn"
               onClick={() => {
                 navigator.clipboard.writeText(
-                  state.boardConfig.anonymous
+                  state.anonymous ? state.game.anonymousPGN : state.pgn
-                    ? state.game.anonymousPGN
-                    : state.pgn
                 );
                 blinkCopy("pgn");
               }}
@@ -217,9 +215,7 @@ const Share: Component<{ handlers: Handlers; class?: string }> = (props) => {
                 const data = new Blob([state.pgn], {
                   type: "application/vnd.chess-pgn;charset=utf-8",
                 });
-                const name = state.game.getFileName(
+                const name = state.game.getFileName(state.anonymous);
-                  state.boardConfig.anonymous
-                );
                 download(data, name, "pgn");
               }}
             >
@@ -229,7 +225,7 @@ const Share: Component<{ handlers: Handlers; class?: string }> = (props) => {
               class="share__btn"
               onClick={() => {
                 const title = state.game.getTitle({
-                  anonymous: state.boardConfig.anonymous,
+                  anonymous: state.anonymous,
                 });
 
                 const md = `[${title}](${window.location.href})`;