From 56abf27629caa0a2e573a73f16869f21b3fdb16e Mon Sep 17 00:00:00 2001
From: Maciej Caderek <maciej.caderek@gmail.com>
Date: Fri, 11 Feb 2022 16:20:40 +0100
Subject: [PATCH] WIP

---
 src/main.tsx                 | 13 ++++++++++++-
 src/types.ts                 |  2 ++
 src/ui/components/Boards.tsx |  7 +++++--
 src/ui/components/Pieces.tsx |  7 +++++--
 4 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/main.tsx b/src/main.tsx
index 7b16c91..507dc4c 100644
--- a/src/main.tsx
+++ b/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) => {
diff --git a/src/types.ts b/src/types.ts
index 5e30d97..2379352 100644
--- a/src/types.ts
+++ b/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;
 };
diff --git a/src/ui/components/Boards.tsx b/src/ui/components/Boards.tsx
index 0ba0aa9..d11c837 100644
--- a/src/ui/components/Boards.tsx
+++ b/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}
diff --git a/src/ui/components/Pieces.tsx b/src/ui/components/Pieces.tsx
index 9e48347..1a6490c 100644
--- a/src/ui/components/Pieces.tsx
+++ b/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}