WIP

src/ui/App.css

@@ -59,7 +59,7 @@ h2 {
   color: #aaa;
   text-align: left;
   font-size: 1.8rem;
-  margin: 30px 0 10px 0;
+  margin: 25px 0 10px 0;
 }
 
 .dark {
@@ -81,6 +81,12 @@ h2 {
   max-height: 95vh;
 }
 
+.double {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 10px;
+}
+
 .layout {
   display: grid;
   grid-template-columns: 1fr 2fr 1fr;

src/ui/components/Controls.css

@@ -27,10 +27,10 @@
   cursor: pointer;
 }
 
-.controls__button:nth-child(5) {
+.controls__button--last {
   margin-right: 0px;
 }
 
-.controls__button:nth-child(1) {
+.controls__button--first {
   margin-left: 0px;
 }

src/ui/components/Controls.tsx

@@ -6,7 +6,7 @@ const Controls: Component<{ handlers: Handlers }> = (props) => {
   return (
     <div class="controls">
       <button
-        class="controls__button"
+        class="controls__button controls__button--first"
         onClick={props.handlers.first}
         title="FIRST"
       >
@@ -34,33 +34,12 @@ const Controls: Component<{ handlers: Handlers }> = (props) => {
         <i class="las la-angle-right"></i>
       </button>
       <button
-        class="controls__button"
+        class="controls__button controls__button--last"
         onClick={props.handlers.last}
         title="LAST"
       >
         <i class="las la-angle-double-right"></i>
       </button>
-      {/* <button
-        class="controls__button"
-        onClick={props.handlers.flip}
-        title="FLIP"
-      >
-        <i class="las la-sync"></i>
-      </button>
-      <button
-        class="controls__button"
-        onClick={props.handlers.toggleBorder}
-        title="BORDER"
-      >
-        <i class="las la-expand"></i>
-      </button>
-      <button
-        class="controls__button"
-        onClick={props.handlers.toggleExtraInfo}
-        title="EXTRA INFO"
-      >
-        <i class="las la-info"></i>
-      </button> */}
     </div>
   );
 };

src/ui/components/GameTabs.css

@@ -1,7 +1,7 @@
 .game-box {
   grid-area: moves;
   padding: 20px;
-  min-width: 325px;
+  min-width: 360px;
   height: 100vh;
 }
 

src/ui/components/GameTabs.tsx

@@ -38,7 +38,7 @@ const GameTabs: Component<{ moves: readonly string[]; handlers: Handlers }> = (
           <Controls handlers={props.handlers} />
         </Match>
         <Match when={tab() === "load"}>
-          <Load />
+          <Load handlers={props.handlers} showMoves={() => setTab("moves")} />
         </Match>
       </Switch>
     </div>

src/ui/components/Load.css

@@ -10,6 +10,20 @@
   margin-top: 20px;
 }
 
+.load__pgn-input::-webkit-scrollbar {
+  width: 0.7rem;
+  cursor: pointer;
+}
+
+.load__pgn-input::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
+}
+
+.load__pgn-input::-webkit-scrollbar-thumb {
+  background-color: rgb(0, 59, 47);
+  outline: 1px solid rgb(0, 59, 47);
+}
+
 .load__fen-btn,
 .load__pgn-btn {
   width: 100%;

src/ui/components/Load.tsx

@@ -2,7 +2,9 @@ import { Component, createSignal } from "solid-js";
 import { Handlers } from "../../types";
 import "./Load.css";
 
-const Load: Component<{ handlers: Handlers }> = (props) => {
+const Load: Component<{ handlers: Handlers; showMoves: () => void }> = (
+  props
+) => {
   const [fen, setFEN] = createSignal("");
   const [pgn, setPGN] = createSignal("");
 
@@ -19,7 +21,10 @@ const Load: Component<{ handlers: Handlers }> = (props) => {
       />
       <button
         class="load__fen-btn"
-        onClick={() => props.handlers.loadFEN(fen())}
+        onClick={() => {
+          props.handlers.loadFEN(fen());
+          setFEN("");
+        }}
       >
         LOAD FEN
       </button>
@@ -28,8 +33,19 @@ const Load: Component<{ handlers: Handlers }> = (props) => {
         name="load-pgn"
         placeholder="PASTE PGN..."
         spellcheck={false}
+        value={pgn()}
+        onInput={(e) => setPGN(e.currentTarget.value)}
       ></textarea>
-      <button class="load__pgn-btn">LOAD PGN</button>
+      <button
+        class="load__pgn-btn"
+        onClick={() => {
+          props.handlers.loadPGN(pgn());
+          setPGN("");
+          props.showMoves();
+        }}
+      >
+        LOAD PGN
+      </button>
     </div>
   );
 };

src/ui/components/SetupTabs.css

@@ -3,6 +3,7 @@
   height: 100vh;
   grid-area: setup;
   padding: 20px;
+  min-width: 360px;
 }
 
 .setup {

src/ui/components/Share.tsx

@@ -8,8 +8,9 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
   return (
     <Scrollable class="share">
       <div className="share__view">
+        <h2>View options</h2>
         <button
-          class="controls__button"
+          class="controls__button controls__button--first"
           onClick={props.handlers.flip}
           title="FLIP"
         >
@@ -27,7 +28,8 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
           onClick={props.handlers.toggleExtraInfo}
           title="EXTRA INFO"
         >
-          <i class="las la-info"></i>
+          {/* <i class="las la-info"></i> */}
+          <i class="las la-info-circle"></i>
         </button>
         <button
           class="controls__button"
@@ -36,6 +38,13 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
         >
           <i class="las la-heading"></i>
         </button>
+        <button
+          class="controls__button controls__button--last"
+          onClick={props.handlers.toggleExtraInfo}
+          title="ANONYMOUS"
+        >
+          <i class="las la-user-secret"></i>
+        </button>
       </div>
       <div className="share__fen">
         <h2>Current position</h2>
@@ -46,16 +55,23 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
           placeholder="Current FEN..."
         />
 
-        <button class="share__btn">Copy FEN</button>
+        <div class="double">
+          <button class="share__btn share__btn--left">Copy FEN</button>
+          <button class="share__btn share__btn--right">Copy link</button>
+        </div>
         <button class="share__btn">Save as image</button>
-        <button class="share__btn">Copy link</button>
       </div>
       <div class="share__pgn">
         <h2>Game</h2>
+        <div class="double">
           <button class="share__btn">Copy PGN</button>
-        <button class="share__btn">Export PGN</button>
           <button class="share__btn">Copy link</button>
         </div>
+        <div class="double">
+          <button class="share__btn">Export PGN</button>
+          <button class="share__btn">Copy markdown</button>
+        </div>
+      </div>
       <div class="share__animation">
         <h2>Animation</h2>
         <button