WIP

src/ui/App.tsx

@@ -1,10 +1,9 @@
 import type { Component } from "solid-js";
 import type { DeepReadonly } from "solid-js/store";
-import Moves from "./components/Moves";
 import Controls from "./components/Controls";
-import Load from "./components/Load";
 import { Handlers } from "../types";
 import { State } from "../state";
+import GameTabs from "./components/GameTabs";
 
 import "./app.css";
 
@@ -19,8 +18,10 @@ const App: Component<{ handlers: Handlers; state: DeepReadonly<State> }> = (
         <Controls handlers={props.handlers}></Controls>
       </div>
       <div id="moves" class="moves-box">
-        {/* <Moves moves={props.state.moves} handlers={props.handlers}></Moves> */}
+        <GameTabs
-        <Load></Load>
+          moves={props.state.moves}
+          handlers={props.handlers}
+        ></GameTabs>
       </div>
     </div>
   );

src/ui/app.css

@@ -8,6 +8,7 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  outline: none;
 }
 
 html {
@@ -49,8 +50,8 @@ body {
   display: grid;
   grid-template-columns: 1fr 2fr 1fr;
   grid-template-areas:
-    "setup board controls"
+    "setup board moves"
-    "setup board moves";
+    "setup board controls";
 }
 
 .moves-box {
@@ -87,18 +88,6 @@ body {
   padding: 20px;
 }
 
-.move {
-  display: inline-block;
-  width: 50%;
-  min-width: 150px;
-  text-align: left;
-}
-
-.ply {
-  padding-left: 10px;
-  cursor: pointer;
-}
-
 @media screen and (max-width: 1024px) {
   .layout {
     grid-template-columns: 1fr;
@@ -116,3 +105,7 @@ body {
     height: auto;
   }
 }
+
+::placeholder {
+  color: #677794;
+}

src/ui/components/GameTabs.tsx

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

src/ui/components/Load.tsx

@@ -1,9 +1,7 @@
-import { Component, For } from "solid-js";
+import { Component } from "solid-js";
-import chunk_ from "@arrows/array/chunk_";
-import { Handlers } from "../../types";
 import "./load.css";
 
-const Load: Component<{}> = (props) => {
+const Load: Component = () => {
   return (
     <div class="load">
       <input
@@ -11,12 +9,14 @@ const Load: Component<{}> = (props) => {
         type="text"
         name="load-fen"
         placeholder="PASTE FEN..."
+        spellcheck={false}
       />
       <button class="load__fen-btn">LOAD FEN</button>
       <textarea
         class="load__pgn-input"
         name="load-pgn"
         placeholder="PASTE PGN..."
+        spellcheck={false}
       ></textarea>
       <button class="load__pgn-btn">LOAD PGN</button>
     </div>

src/ui/components/Moves.tsx

@@ -1,6 +1,7 @@
 import { Component, For } from "solid-js";
 import chunk_ from "@arrows/array/chunk_";
 import { Handlers } from "../../types";
+import "./moves.css";
 
 const Moves: Component<{ moves: readonly string[]; handlers: Handlers }> = (
   props
@@ -12,21 +13,21 @@ const Moves: Component<{ moves: readonly string[]; handlers: Handlers }> = (
           const [white, black] = move as [string, string];
 
           return (
-            <p class="move">
+            <div class="move">
-              {i() + 1}.
+              <span class="move__id">{i() + 1}.</span>
               <span
-                class="ply"
+                class="move__ply"
                 onClick={() => props.handlers.goto(i() * 2 + 1)}
               >
                 {white}
               </span>
               <span
-                class="ply"
+                class="move__ply"
                 onClick={() => props.handlers.goto(i() * 2 + 2)}
               >
                 {black}
               </span>
-            </p>
+            </div>
           );
         }}
       </For>

src/ui/components/gameTabs.css

@@ -0,0 +1,23 @@
+.game-tabs {
+  margin: 10px;
+  /* height: 100%; */
+}
+
+.game-tabs__btn {
+  width: 50%;
+  background: #2a2c38;
+  padding: 10px;
+  font-family: Ubuntu;
+  font-size: 1.5rem;
+  color: rgb(0, 207, 162);
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  cursor: pointer;
+}
+
+.game-tabs__btn--active {
+  width: 50%;
+  background: #13141a;
+  color: rgb(0, 173, 136);
+  cursor: default;
+}

src/ui/components/load.css

@@ -1,26 +1,42 @@
 .load {
-  background: black;
+  background: #13141a;
   padding: 20px;
 }
 
-.load__fen-input {
+.load__fen-input,
-  width: 100%;
-  padding: 10px;
-  font-family: "Fira Mono";
-  font-size: 1.4rem;
-}
-
 .load__pgn-input {
   width: 100%;
   padding: 10px;
   font-family: "Fira Mono";
   font-size: 1.4rem;
+  margin-bottom: 10px;
+  background: #20242a;
+  border: solid 1px #2d323a;
+  color: #acbddb;
+  outline: none;
+}
+
+.load__fen-input:focus,
+.load__pgn-input:focus {
+  border-color: rgb(0, 87, 68);
+}
+
+.load__pgn-input {
+  height: 30vh;
+  margin-top: 20px;
 }
 
 .load__fen-btn,
 .load__pgn-btn {
   width: 100%;
   padding: 10px;
-  font-family: "Fira Mono";
+  font-family: "Ubuntu";
-  font-size: 1.4rem;
+  font-size: 1.5rem;
+  background: rgb(0, 173, 136);
+}
+
+.load__fen-btn:hover,
+.load__pgn-btn:hover {
+  background: rgb(0, 207, 162);
+  cursor: pointer;
 }

src/ui/components/moves.css

@@ -0,0 +1,29 @@
+.moves {
+  background: #13141a;
+  font-size: 1.4rem;
+  font-family: "Fira Mono";
+  text-align: left;
+}
+
+.move {
+  display: inline-block;
+  padding: 3px;
+}
+
+.move__id {
+  display: inline-block;
+  width: 40px;
+  text-align: right;
+  margin-right: 10px;
+}
+
+.move__ply {
+  display: inline-block;
+  width: 60px;
+  color: rgb(0, 173, 136);
+}
+
+.move__ply:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}