WIP

src/ui/components/Boards.css

@@ -0,0 +1,3 @@
+.boards {
+  text-align: left;
+}

src/ui/components/Boards.tsx

@@ -0,0 +1,54 @@
+import { Component, For, createSignal } from "solid-js";
+import { Handlers, StyleCategory } from "../../types";
+import Scrollable from "./reusable/Scrollable";
+import "./Boards.css";
+import styles from "../../board/styles-board";
+import Board from "../../board/Board";
+
+type BoardPreview = {
+  name: string;
+  category: StyleCategory;
+  img: string;
+};
+
+const prepareBoards = async () => {
+  const boards = [];
+
+  const board = new Board({
+    size: 72,
+    tiles: 2,
+    showBorder: true,
+    showExtraInfo: false,
+  });
+
+  for (const style of Object.values(styles)) {
+    await board.updateConfig({ boardStyle: style });
+    await board.frame(null, {});
+    board.render();
+    boards.push({
+      name: style.name,
+      category: style.category,
+      img: board.toImgUrl(),
+    });
+  }
+
+  return boards;
+};
+
+const Boards: Component<{ handlers: Handlers }> = (props) => {
+  const [boards, setBoards] = createSignal<BoardPreview[]>([]);
+
+  prepareBoards().then((data) => setBoards(data));
+
+  return (
+    <Scrollable class="boards">
+      <For each={boards()}>
+        {(board) => {
+          return <img src={board.img} title={board.name} />;
+        }}
+      </For>
+    </Scrollable>
+  );
+};
+
+export default Boards;

src/ui/components/Moves.css

@@ -2,11 +2,10 @@
   font-size: 1.4rem;
   font-family: "Fira Mono";
   text-align: left;
-  /* height: 85vh; */
 }
 
 .move {
-  display: inline-block;
+  /* display: inline-block; */
   padding: 3px;
 }
 
@@ -14,13 +13,13 @@
   display: inline-block;
   width: 40px;
   text-align: right;
-  margin-right: 10px;
+  margin-right: 20px;
   color: #aaa;
 }
 
 .move__ply {
   display: inline-block;
-  width: 60px;
+  width: 70px;
   color: rgb(0, 173, 136);
 }
 

src/ui/components/Pieces.css

@@ -0,0 +1,2 @@
+.pieces {
+}

src/ui/components/Pieces.tsx

@@ -0,0 +1,10 @@
+import { Component, For } from "solid-js";
+import { Handlers } from "../../types";
+import Scrollable from "./reusable/Scrollable";
+import "./Pieces.css";
+
+const Pieces: Component<{ handlers: Handlers }> = (props) => {
+  return <Scrollable class="pieces">Pieces</Scrollable>;
+};
+
+export default Pieces;

src/ui/components/SetupTabs.css

@@ -1,6 +1,15 @@
+.setup-box {
+  /* background: rgba(135, 207, 235, 0.1); */
+  height: 100vh;
+  grid-area: setup;
+  padding: 20px;
+}
+
 .setup {
   font-size: 1.6rem;
-  /* background: #0e0e13; */
+  height: 100%;
+  display: grid;
+  grid-template-rows: 38px 1fr;
 }
 
 .setup-tabs__btn {
@@ -13,6 +22,7 @@
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   cursor: pointer;
+  height: 38px;
 }
 
 .setup-tabs__btn:hover {

src/ui/components/SetupTabs.tsx

@@ -1,48 +1,53 @@
 import { Component, createSignal, Switch, Match } from "solid-js";
 import { Handlers } from "../../types";
 import "./SetupTabs.css";
+import Share from "./Share";
+import Boards from "./Boards";
+import Pieces from "./Pieces";
 
 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>
+      <div class="tabs">
+        <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>
+      </div>
       <Switch>
         <Match when={tab() === "share"}>
-          <div class="temp">SHARE</div>
+          <Share handlers={props.handlers}></Share>
         </Match>
         <Match when={tab() === "boards"}>
-          <div class="temp">BOARDS</div>
+          <Boards handlers={props.handlers}></Boards>
         </Match>
         <Match when={tab() === "pieces"}>
-          <div class="temp">PIECES</div>
+          <Pieces handlers={props.handlers}></Pieces>
         </Match>
       </Switch>
     </div>

src/ui/components/Share.tsx

@@ -0,0 +1,10 @@
+import { Component, For } from "solid-js";
+import { Handlers } from "../../types";
+import Scrollable from "./reusable/Scrollable";
+import "./Share.css";
+
+const Share: Component<{ handlers: Handlers }> = (props) => {
+  return <Scrollable class="share">Share</Scrollable>;
+};
+
+export default Share;

src/ui/components/reusable/Scrollable.css

@@ -11,6 +11,7 @@
   overflow-y: auto;
   overflow-x: hidden;
   padding: 0;
+  width: 100%;
 }
 
 .scrollable__content::-webkit-scrollbar {