WIP

src/ui/components/Boards.tsx

@@ -38,7 +38,7 @@ const prepareBoards = async () => {
   return boards;
 };
 
-const Boards: Component<{ handlers: Handlers }> = () => {
+const Boards: Component<{ handlers: Handlers }> = (props) => {
   const [boards, setBoards] = createSignal<BoardPreview[]>([]);
 
   prepareBoards().then((data) => setBoards(data));
@@ -55,7 +55,10 @@ const Boards: Component<{ handlers: Handlers }> = () => {
                   ? " boards__ico--active"
                   : "")
               }
-              onClick={() => setState("board", "boardStyle", board.key)}
+              onClick={() => {
+                setState("board", "boardStyle", board.key);
+                props.handlers.changeBoardStyle(board.key);
+              }}
               src={board.img}
               title={board.name}
               draggable={false}

src/ui/components/Pieces.tsx

@@ -10,7 +10,7 @@ const pieces = Object.entries(piecesSets).map(([key, data]) => ({
   img: data.nw,
 })) as { key: PiecesStyle; img: string }[];
 
-const Pieces: Component<{ handlers: Handlers }> = () => {
+const Pieces: Component<{ handlers: Handlers }> = (props) => {
   return (
     <Scrollable class="pieces">
       {
@@ -23,7 +23,10 @@ const Pieces: Component<{ handlers: Handlers }> = () => {
                   ? " pieces__ico--active"
                   : "")
               }
-              onClick={() => setState("board", "piecesStyle", item.key)}
+              onClick={() => {
+                setState("board", "piecesStyle", item.key);
+                props.handlers.changePiecesStyle(item.key);
+              }}
               src={item.img}
               title={item.key}
               draggable={false}