WIP

src/ui/components/Controls.css

@@ -0,0 +1,36 @@
+.controls-box {
+  grid-area: controls;
+  padding: 0 20px 20px 20px;
+}
+
+.controls {
+  background: #0e0e13;
+  height: 100%;
+  padding: 20px;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+.controls__button {
+  margin: 3px;
+  padding: 5px;
+  font-size: 3rem;
+  background: rgb(0, 173, 136);
+  text-align: center;
+  border-radius: 5px;
+  width: 44px;
+  height: 44px;
+}
+
+.controls__button:hover {
+  background: rgb(0, 207, 162);
+  cursor: pointer;
+}
+
+.controls__button:nth-child(5) {
+  margin-right: 0px;
+}
+
+.controls__button:nth-child(1) {
+  margin-left: 0px;
+}

src/ui/components/Controls.tsx

@@ -1,33 +1,66 @@
 import { Component } from "solid-js";
 import { Handlers } from "../../types";
+import "./Controls.css";
 
 const Controls: Component<{ handlers: Handlers }> = (props) => {
   return (
     <div class="controls">
-      <button class="controls__button" onClick={props.handlers.first}>
-        FIRST
+      <button
+        class="controls__button"
+        onClick={props.handlers.first}
+        title="FIRST"
+      >
+        <i class="las la-angle-double-left"></i>
       </button>
-      <button class="controls__button" onClick={props.handlers.prev}>
-        PREV
+      <button
+        class="controls__button"
+        onClick={props.handlers.prev}
+        title="PREV"
+      >
+        <i class="las la-angle-left"></i>
       </button>
-      <button class="controls__button" onClick={props.handlers.togglePlay}>
-        PLAY/PAUSE
+      <button
+        class="controls__button"
+        onClick={props.handlers.togglePlay}
+        title="PLAY"
+      >
+        <i class="las la-play"></i>
       </button>
-      <button class="controls__button" onClick={props.handlers.next}>
-        NEXT
+      <button
+        class="controls__button"
+        onClick={props.handlers.next}
+        title="NEXT"
+      >
+        <i class="las la-angle-right"></i>
       </button>
-      <button class="controls__button" onClick={props.handlers.last}>
-        LAST
+      <button
+        class="controls__button"
+        onClick={props.handlers.last}
+        title="LAST"
+      >
+        <i class="las la-angle-double-right"></i>
       </button>
-      <button class="controls__button" onClick={props.handlers.flip}>
-        FLIP
+      {/* <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}>
-        TOGGLE BORDER
-      </button>
-      <button class="controls__button" onClick={props.handlers.toggleExtraInfo}>
-        TOGGLE EXTRA INFO
+      <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,6 +1,14 @@
+.game-box {
+  grid-area: moves;
+  padding: 20px;
+  min-width: 325px;
+  height: 100vh;
+}
+
 .game-tabs {
-  margin: 20px;
-  /* height: 100%; */
+  height: 100%;
+  display: grid;
+  grid-template-rows: 38px 1fr;
 }
 
 .game-tabs__btn {
@@ -13,6 +21,7 @@
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   cursor: pointer;
+  height: 38px;
 }
 
 .game-tabs__btn:hover {

src/ui/components/GameTabs.tsx

@@ -1,8 +1,9 @@
 import { Component, createSignal, 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 "./GameTabs.css";
 
 const GameTabs: Component<{ moves: readonly string[]; handlers: Handlers }> = (
   props
@@ -11,26 +12,30 @@ const GameTabs: Component<{ moves: readonly string[]; handlers: Handlers }> = (
 
   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>
+      <div class="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>
+      </div>
       <Switch>
         <Match when={tab() === "moves"}>
           <Moves moves={props.moves} handlers={props.handlers} />
+          <Controls handlers={props.handlers} />
         </Match>
         <Match when={tab() === "load"}>
           <Load />

src/ui/components/Load.css

@@ -1,7 +1,8 @@
 .load {
   background: #0e0e13;
-  /* background: #13141a; */
   padding: 20px;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
 }
 
 .load__fen-input,

src/ui/components/Load.tsx

@@ -1,5 +1,5 @@
 import { Component } from "solid-js";
-import "./load.css";
+import "./Load.css";
 
 const Load: Component = () => {
   return (

src/ui/components/Moves.css

@@ -1,8 +1,8 @@
 .moves {
-  background: #0e0e13;
   font-size: 1.4rem;
   font-family: "Fira Mono";
   text-align: left;
+  /* height: 85vh; */
 }
 
 .move {

src/ui/components/Moves.tsx

@@ -1,13 +1,14 @@
 import { Component, For } from "solid-js";
 import chunk_ from "@arrows/array/chunk_";
 import { Handlers } from "../../types";
-import "./moves.css";
+import Scrollable from "./reusable/Scrollable";
+import "./Moves.css";
 
 const Moves: Component<{ moves: readonly string[]; handlers: Handlers }> = (
   props
 ) => {
   return (
-    <div class="moves">
+    <Scrollable class="moves">
       <For each={chunk_(2, props.moves as string[])}>
         {(move, i) => {
           const [white, black] = move as [string, string];
@@ -31,7 +32,7 @@ const Moves: Component<{ moves: readonly string[]; handlers: Handlers }> = (
           );
         }}
       </For>
-    </div>
+    </Scrollable>
   );
 };
 

src/ui/components/SetupTabs.css

@@ -0,0 +1,35 @@
+.setup {
+  font-size: 1.6rem;
+  /* background: #0e0e13; */
+}
+
+.setup-tabs__btn {
+  width: 32%;
+  background: rgb(0, 173, 136);
+  color: #0e0e13;
+  padding: 10px;
+  font-family: Ubuntu;
+  font-size: 1.5rem;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  cursor: pointer;
+}
+
+.setup-tabs__btn:hover {
+  background: rgb(0, 207, 162);
+}
+
+.setup-tabs__btn--active {
+  background: #0e0e13;
+  color: #aaa;
+  cursor: default;
+}
+
+.setup-tabs__btn--active:hover {
+  background: #0e0e13;
+}
+
+.setup-tabs__btn:nth-child(1),
+.setup-tabs__btn:nth-child(2) {
+  margin-right: 2%;
+}

src/ui/components/SetupTabs.tsx

@@ -0,0 +1,52 @@
+import { Component, createSignal, Switch, Match } from "solid-js";
+import { Handlers } from "../../types";
+import "./SetupTabs.css";
+
+const SetupTabs: Component<{ handlers: Handlers }> = (props) => {
+  const [tab, setTab] = createSignal("share");
+
+  return (
+    <div class="setup">
+      <button
+        class={
+          "setup-tabs__btn" +
+          (tab() === "share" ? " setup-tabs__btn--active" : "")
+        }
+        onClick={() => setTab("share")}
+      >
+        <i class="las la-share"></i> SHARE
+      </button>
+      <button
+        class={
+          "setup-tabs__btn" +
+          (tab() === "boards" ? " setup-tabs__btn--active" : "")
+        }
+        onClick={() => setTab("boards")}
+      >
+        <i class="las la-chess-board"></i> BOARDS
+      </button>
+      <button
+        class={
+          "setup-tabs__btn" +
+          (tab() === "pieces" ? " setup-tabs__btn--active" : "")
+        }
+        onClick={() => setTab("pieces")}
+      >
+        <i class="las la-chess"></i> PIECES
+      </button>
+      <Switch>
+        <Match when={tab() === "share"}>
+          <div class="temp">SHARE</div>
+        </Match>
+        <Match when={tab() === "boards"}>
+          <div class="temp">BOARDS</div>
+        </Match>
+        <Match when={tab() === "pieces"}>
+          <div class="temp">PIECES</div>
+        </Match>
+      </Switch>
+    </div>
+  );
+};
+
+export default SetupTabs;

src/ui/components/reusable/Scrollable.css

@@ -0,0 +1,28 @@
+.scrollable {
+  background: #0e0e13;
+  height: auto;
+  padding: 40px 20px;
+  height: 100%;
+  display: flex;
+  overflow: auto;
+}
+
+.scrollable__content {
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0;
+}
+
+.scrollable__content::-webkit-scrollbar {
+  width: 0.7rem;
+  cursor: pointer;
+}
+
+.scrollable__content::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
+}
+
+.scrollable__content::-webkit-scrollbar-thumb {
+  background-color: rgb(0, 59, 47);
+  outline: 1px solid rgb(0, 59, 47);
+}

src/ui/components/reusable/Scrollable.tsx

@@ -0,0 +1,12 @@
+import { Component } from "solid-js";
+import "./Scrollable.css";
+
+const Scrollable: Component<{ class: string }> = (props) => {
+  return (
+    <div class={`scrollable ${props.class}`}>
+      <div class="scrollable__content">{props.children}</div>
+    </div>
+  );
+};
+
+export default Scrollable;