WIP

src/board/Board.ts

@@ -1,5 +1,5 @@
 import { BoardConfig, PiecesStyle, Position } from "./../types";
-import { Style } from "../types";
+import { Style, BoardStyle } from "../types";
 import drawRectangle from "./layers/drawRectangle";
 import drawCoords from "./layers/drawCoords";
 import drawMoveIndicators from "./layers/drawMoveIndicators";
@@ -11,7 +11,7 @@ import boards from "./styles-board";
 const defaultConfig: BoardConfig = {
   size: 720,
   tiles: 8,
-  boardStyle: boards.avocado,
+  boardStyle: "avocado",
   piecesStyle: "gioco",
   showBorder: true,
   showExtraInfo: true,
@@ -135,8 +135,8 @@ class Board {
     return this.size;
   }
 
-  setStyle(style: Style) {
+  setStyle(style: BoardStyle) {
-    this.style = style;
+    this.style = boards[style];
     return this;
   }
 
@@ -195,6 +195,8 @@ class Board {
     canvas.width = this.size;
     canvas.height = this.size + this.margin * 2;
 
+    console.log({ style: this.style });
+
     const { background, dark, light, border, coords } = this.style;
 
     await drawRectangle(ctx, this.width, this.height, 0, 0, border);

src/main.tsx

@@ -1,7 +1,6 @@
 import { BoardConfig, GameConfig } from "./types";
 import Board from "./board/Board";
 import Game from "./game/Game";
-import styles from "./board/styles-board";
 import pgns from "./test-data/pgns";
 import createAnimation from "./encoders/createAnimation";
 // import { decompressPGN } from "./game/PGNHelpers";
@@ -18,7 +17,7 @@ import App from "./ui/App";
 const boardConfig: BoardConfig = {
   size: 1024,
   tiles: 8,
-  boardStyle: styles.calm,
+  boardStyle: "calm",
   piecesStyle: "tatiana",
   showBorder: true,
   showExtraInfo: true,

src/state.ts

@@ -1,11 +1,10 @@
 import { createStore } from "solid-js/store";
-
 import { BoardConfig, GameConfig } from "./types";
-import styles from "./board/styles-board";
 
 const boardConfig: BoardConfig = {
   size: 1024,
-  boardStyle: styles.calm,
+  tiles: 8,
+  boardStyle: "calm",
   piecesStyle: "tatiana",
   showBorder: true,
   showExtraInfo: true,

src/types.ts

@@ -92,6 +92,20 @@ export type Piece =
   | "nb"
   | "pb";
 
+export type BoardStyle =
+  | "chesscom"
+  | "lichess"
+  | "lila"
+  | "peach"
+  | "standard"
+  | "violet"
+  | "avocado"
+  | "calm"
+  | "laguna"
+  | "sunset"
+  | "rainbow"
+  | "rainbowLight";
+
 export type PiecesStyle =
   | "alpha"
   | "cardinal"
@@ -106,7 +120,7 @@ export type PiecesStyle =
 export type BoardConfig = {
   size: number;
   tiles: number;
-  boardStyle: Style;
+  boardStyle: BoardStyle;
   piecesStyle: PiecesStyle;
   showBorder: boolean;
   showExtraInfo: boolean;

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)) {
+  for (const [key, style] of Object.entries(styles) as [BoardStyle, Style][]) {
-    await board.updateConfig({ 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) => {
+const pieces = Object.entries(piecesSets).map(([key, data]) => ({
-  return <Scrollable class="pieces">Pieces</Scrollable>;
+  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 (