WIP

src/ui/components/Boards.css

@@ -1,3 +1,14 @@
 .boards {
-  text-align: left;
+  text-align: center;
+}
+
+.boards__ico {
+  border: solid 5px black;
+  margin: 5px;
+  cursor: pointer;
+}
+
+.boards__ico--active {
+  border-color: white;
+  cursor: default;
 }

src/ui/components/Boards.tsx

@@ -1,11 +1,13 @@
 import { Component, For, createSignal } from "solid-js";
-import { Handlers, StyleCategory } from "../../types";
+import { Handlers, StyleCategory, BoardStyle, Style } from "../../types";
 import Scrollable from "./reusable/Scrollable";
 import "./Boards.css";
 import styles from "../../board/styles-board";
 import Board from "../../board/Board";
+import { state, setState } from "../../state";
 
 type BoardPreview = {
+  key: keyof typeof styles;
   name: string;
   category: StyleCategory;
   img: string;
@@ -21,21 +23,22 @@ const prepareBoards = async () => {
     showExtraInfo: false,
   });
 
-  for (const style of Object.values(styles)) {
-    await board.updateConfig({ boardStyle: style });
+  for (const [key, style] of Object.entries(styles) as [BoardStyle, Style][]) {
+    await board.updateConfig({ boardStyle: key });
     await board.frame(null, {});
     board.render();
     boards.push({
+      key,
       name: style.name,
       category: style.category,
       img: board.toImgUrl(),
-    });
+    } as BoardPreview);
   }
 
   return boards;
 };
 
-const Boards: Component<{ handlers: Handlers }> = (props) => {
+const Boards: Component<{ handlers: Handlers }> = () => {
   const [boards, setBoards] = createSignal<BoardPreview[]>([]);
 
   prepareBoards().then((data) => setBoards(data));
@@ -44,7 +47,20 @@ const Boards: Component<{ handlers: Handlers }> = (props) => {
     <Scrollable class="boards">
       <For each={boards()}>
         {(board) => {
-          return <img src={board.img} title={board.name} />;
+          return (
+            <img
+              class={
+                "boards__ico" +
+                (state.board.boardStyle === board.key
+                  ? " boards__ico--active"
+                  : "")
+              }
+              onClick={() => setState("board", "boardStyle", board.key)}
+              src={board.img}
+              title={board.name}
+              draggable={false}
+            />
+          );
         }}
       </For>
     </Scrollable>

src/ui/components/Pieces.css

@@ -1,2 +1,16 @@
 .pieces {
+  text-align: center;
+}
+
+.pieces__ico {
+  border: solid 5px black;
+  margin: 5px;
+  cursor: pointer;
+  width: 82px;
+  background-color: #ffffff22;
+}
+
+.pieces__ico--active {
+  border-color: white;
+  cursor: default;
 }

src/ui/components/Pieces.tsx

@@ -1,10 +1,108 @@
 import { Component, For } from "solid-js";
-import { Handlers } from "../../types";
+import { Handlers, PiecesStyle } from "../../types";
 import Scrollable from "./reusable/Scrollable";
+import piecesSets from "../../board/styles-pieces";
+import { state, setState } from "../../state";
 import "./Pieces.css";
 
-const Pieces: Component<{ handlers: Handlers }> = (props) => {
-  return <Scrollable class="pieces">Pieces</Scrollable>;
+const pieces = Object.entries(piecesSets).map(([key, data]) => ({
+  key,
+  img: data.nw,
+})) as { key: PiecesStyle; img: string }[];
+
+const Pieces: Component<{ handlers: Handlers }> = () => {
+  return (
+    <Scrollable class="pieces">
+      {
+        <For each={pieces}>
+          {(item) => (
+            <img
+              class={
+                "pieces__ico" +
+                (state.board.piecesStyle === item.key
+                  ? " pieces__ico--active"
+                  : "")
+              }
+              onClick={() => setState("board", "piecesStyle", item.key)}
+              src={item.img}
+              title={item.key}
+              draggable={false}
+            />
+          )}
+        </For>
+      }
+    </Scrollable>
+  );
 };
 
 export default Pieces;
+
+// import { Component, For, createSignal } from "solid-js";
+// import { Handlers, StyleCategory, BoardStyle, Style } from "../../types";
+// import Scrollable from "./reusable/Scrollable";
+// import "./Boards.css";
+// import styles from "../../board/styles-board";
+// import Board from "../../board/Board";
+// import { state, setState } from "../../state";
+
+// type BoardPreview = {
+//   key: keyof typeof styles;
+//   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 [key, style] of Object.entries(styles) as [BoardStyle, Style][]) {
+//     await board.updateConfig({ boardStyle: key });
+//     await board.frame(null, {});
+//     board.render();
+//     boards.push({
+//       key,
+//       name: style.name,
+//       category: style.category,
+//       img: board.toImgUrl(),
+//     } as BoardPreview);
+//   }
+
+//   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
+//               class={
+//                 "boards__ico" +
+//                 (state.board.boardStyle === board.key
+//                   ? " boards__ico--active"
+//                   : "")
+//               }
+//               onClick={() => setState("board", "boardStyle", board.key)}
+//               src={board.img}
+//               title={board.name}
+//             />
+//           );
+//         }}
+//       </For>
+//     </Scrollable>
+//   );
+// };
+
+// export default Boards;

src/ui/components/SetupTabs.tsx

@@ -5,7 +5,9 @@ import Share from "./Share";
 import Boards from "./Boards";
 import Pieces from "./Pieces";
 
-const SetupTabs: Component<{ handlers: Handlers }> = (props) => {
+const SetupTabs: Component<{
+  handlers: Handlers;
+}> = (props) => {
   const [tab, setTab] = createSignal("share");
 
   return (