WIP

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
-              when={
-                !state.boardConfig.anonymous || !isLink(state.game.header.Site)
-              }
-            >
+            <Show when={!state.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.game.anonymousPGN
-                    : state.pgn
+                  state.anonymous ? 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(
-                  state.boardConfig.anonymous
-                );
+                const name = state.game.getFileName(state.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})`;