WIP

src/ui/components/GameTabs.tsx

@@ -1,44 +1,43 @@
-import { Component, createSignal, Switch, Match } from "solid-js";
+import { Component, Switch, Match } from "solid-js";
 import Moves from "./Moves";
 import Controls from "./Controls";
 import Load from "./Load";
 import { Handlers } from "../../types";
 import "./GameTabs.css";
+import { setState, state } from "../../state";
 
 const GameTabs: Component<{ moves: readonly string[]; handlers: Handlers }> = (
   props
 ) => {
-  const [tab, setTab] = createSignal("load");
-
   return (
     <div class="game-tabs">
       <div class="tabs">
         <button
           class={
             "game-tabs__btn" +
-            (tab() === "moves" ? " game-tabs__btn--active" : "")
+            (state.activeTab === "game" ? " game-tabs__btn--active" : "")
           }
-          onClick={() => setTab("moves")}
+          onClick={() => setState("activeTab", "game")}
         >
           GAME
         </button>
         <button
           class={
             "game-tabs__btn" +
-            (tab() === "load" ? " game-tabs__btn--active" : "")
+            (state.activeTab === "load" ? " game-tabs__btn--active" : "")
           }
-          onClick={() => setTab("load")}
+          onClick={() => setState("activeTab", "load")}
         >
           LOAD
         </button>
       </div>
       <Switch>
-        <Match when={tab() === "moves"}>
+        <Match when={state.activeTab === "game"}>
           <Moves moves={props.moves} handlers={props.handlers} />
           <Controls handlers={props.handlers} />
         </Match>
-        <Match when={tab() === "load"}>
-          <Load handlers={props.handlers} showMoves={() => setTab("moves")} />
+        <Match when={state.activeTab === "load"}>
+          <Load handlers={props.handlers} />
         </Match>
       </Switch>
     </div>

src/ui/components/Load.css

@@ -41,3 +41,7 @@
   margin-top: 10px;
   color: #677794;
 }
+
+.load__link-input {
+  margin-top: 20px;
+}

src/ui/components/Load.tsx

@@ -3,11 +3,10 @@ import { Handlers } from "../../types";
 import readFile from "../../utils/readFile";
 import "./Load.css";
 
-const Load: Component<{ handlers: Handlers; showMoves: () => void }> = (
-  props
-) => {
+const Load: Component<{ handlers: Handlers }> = (props) => {
   const [fen, setFEN] = createSignal("");
   const [pgn, setPGN] = createSignal("");
+  const [link, setLink] = createSignal("");
 
   return (
     <div class="load">
@@ -15,7 +14,7 @@ const Load: Component<{ handlers: Handlers; showMoves: () => void }> = (
         class="load__fen-input"
         type="text"
         name="load-fen"
-        placeholder="PASTE FEN..."
+        placeholder="Paste FEN..."
         spellcheck={false}
         value={fen()}
         onInput={(e) => setFEN(e.currentTarget.value)}
@@ -32,10 +31,31 @@ const Load: Component<{ handlers: Handlers; showMoves: () => void }> = (
         LOAD FEN
       </button>
       <hr />
+      <input
+        class="load__link-input"
+        type="text"
+        name="load-link"
+        placeholder="Paste lichess link..."
+        spellcheck={false}
+        value={link()}
+        onInput={(e) => setLink(e.currentTarget.value)}
+      />
+      <button
+        class="load__link-btn"
+        onClick={() => {
+          if (link()) {
+            props.handlers.importPGN(link());
+            setLink("");
+          }
+        }}
+      >
+        IMPORT GAME
+      </button>
+      <hr />
       <textarea
         class="load__pgn-input"
         name="load-pgn"
-        placeholder="PASTE PGN..."
+        placeholder="Paste PGN..."
         spellcheck={false}
         value={pgn()}
         onInput={(e) => setPGN(e.currentTarget.value)}
@@ -46,7 +66,6 @@ const Load: Component<{ handlers: Handlers; showMoves: () => void }> = (
           if (pgn()) {
             props.handlers.loadPGN(pgn());
             setPGN("");
-            props.showMoves();
           }
         }}
       >
@@ -62,7 +81,6 @@ const Load: Component<{ handlers: Handlers; showMoves: () => void }> = (
           if (target?.files && target.files.length > 0) {
             const content = await readFile(target.files[0]);
             props.handlers.loadPGN(content);
-            props.showMoves();
           }
         }}
       ></input>