WIP

src/main.tsx

@@ -1,4 +1,4 @@
-import { BoardConfig, GameConfig } from "./types";
+import { BoardConfig, BoardStyle, GameConfig, PiecesStyle } from "./types";
 import Board from "./board/Board";
 import Game from "./game/Game";
 import pgns from "./test-data/pgns";
@@ -33,6 +33,8 @@ const gameConfig: GameConfig = {
   fromPly: null,
   toPly: null,
   loop: true,
+  format: "GIF",
+  size: "M",
 };
 
 const createDownloadLink = async (pgn: string, boardConfig: BoardConfig) => {
@@ -104,6 +106,12 @@ const main = async () => {
       player.pause();
       player.goto(ply);
     },
+    changeBoardStyle(style: BoardStyle) {
+      board.updateConfig({ boardStyle: style });
+    },
+    changePiecesStyle(style: PiecesStyle) {
+      board.updateConfig({ piecesStyle: style });
+    },
   };
 
   /**
@@ -130,6 +138,9 @@ const main = async () => {
     // controls.load();
   };
 
+  // @ts-ignore
+  window.board = board;
+
   document.addEventListener(
     "contextmenu",
     (e) => {

src/types.ts

@@ -199,4 +199,6 @@ export type Handlers = {
   flip(): void;
   togglePlay(): void;
   goto(ply: number): void;
+  changeBoardStyle: (style: BoardStyle) => void;
+  changePiecesStyle: (style: PiecesStyle) => void;
 };

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}