From 84bb4efd80e6d4bf0bd3fec013bc8963f2f7d8bc Mon Sep 17 00:00:00 2001
From: Maciej Caderek <maciej.caderek@gmail.com>
Date: Wed, 9 Mar 2022 23:56:34 +0100
Subject: [PATCH] WIP

---
 src/board/Board.ts             |  9 ++++++++-
 src/main.tsx                   |  5 +++++
 src/state.ts                   |  1 +
 src/types.ts                   |  2 ++
 src/ui/components/Controls.tsx | 20 +++++++++++++++++++-
 src/ui/components/Share.tsx    | 33 ++++++++++++++-------------------
 6 files changed, 49 insertions(+), 21 deletions(-)

diff --git a/src/board/Board.ts b/src/board/Board.ts
index 2dbd878..868f0d7 100644
--- a/src/board/Board.ts
+++ b/src/board/Board.ts
@@ -205,6 +205,12 @@ class Board {
     return this;
   }
 
+  toggleShadows() {
+    this.cfg.showShadows = !this.cfg.showShadows;
+    this.refresh();
+    return this;
+  }
+
   private getFinalHeader() {
     return this._anonymous
       ? {
@@ -341,7 +347,8 @@ class Board {
       this.borderWidth,
       this.cfg.flipped,
       this.margin,
-      this.cfg.piecesStyle
+      this.cfg.piecesStyle,
+      this.cfg.showShadows
     );
 
     if (this.cfg.showExtraInfo && header) {
diff --git a/src/main.tsx b/src/main.tsx
index 364a4b9..635b335 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -90,6 +90,11 @@ const main = async () => {
       setState("gameConfig", "titleScreen", !state.gameConfig.titleScreen);
       saveConfig("game");
     },
+    toggleShadows() {
+      board.toggleShadows();
+      setState("boardConfig", "showShadows", !state.boardConfig.showShadows);
+      saveConfig("board");
+    },
     flip() {
       console.log("FLIP");
       board.flip();
diff --git a/src/state.ts b/src/state.ts
index fba0d3e..4cb5687 100644
--- a/src/state.ts
+++ b/src/state.ts
@@ -19,6 +19,7 @@ const initialBoardConfig: BoardConfig = {
   showMoveIndicator: true,
   showChecks: true,
   showCoords: true,
+  showShadows: false,
   flipped: false,
 };
 
diff --git a/src/types.ts b/src/types.ts
index 6876ba8..088dafd 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -104,6 +104,7 @@ export type BoardConfig = {
   showMoveIndicator: boolean;
   showChecks: boolean;
   showCoords: boolean;
+  showShadows: boolean;
   flipped: boolean;
 };
 
@@ -174,6 +175,7 @@ export type Handlers = {
   toggleExtraInfo(): void;
   toggleAnonymous(): void;
   toggleTitleScreen(): void;
+  toggleShadows(): void;
   flip(): void;
   togglePlay(): void;
   goto(ply: number): void;
diff --git a/src/ui/components/Controls.tsx b/src/ui/components/Controls.tsx
index f4ec6f0..d98a2c6 100644
--- a/src/ui/components/Controls.tsx
+++ b/src/ui/components/Controls.tsx
@@ -38,12 +38,30 @@ const Controls: Component<{ handlers: Handlers }> = (props) => {
         <i class="las la-angle-right"></i>
       </button>
       <button
-        class="controls__button controls__button--last"
+        class="controls__button"
         onClick={props.handlers.last}
         title="LAST"
       >
         <i class="las la-angle-double-right"></i>
       </button>
+      <button
+        onClick={props.handlers.flip}
+        title="FLIP"
+        classList={{
+          options__button: true,
+          "options__button--last": true,
+          "options__button--active": true,
+        }}
+      >
+        <i
+          classList={{
+            rotated: state.boardConfig.flipped,
+            las: true,
+            "la-sync": true,
+            rotatable: true,
+          }}
+        ></i>
+      </button>
     </div>
   );
 };
diff --git a/src/ui/components/Share.tsx b/src/ui/components/Share.tsx
index a05657b..91c413a 100644
--- a/src/ui/components/Share.tsx
+++ b/src/ui/components/Share.tsx
@@ -19,24 +19,6 @@ const Share: Component<{ handlers: Handlers; class?: string }> = (props) => {
     <Scrollable class={"share" + (props.class ? ` ${props.class}` : "")}>
       <div className="share__view">
         <h2 class="header--first">Board options</h2>
-        <button
-          onClick={props.handlers.flip}
-          title="FLIP"
-          classList={{
-            options__button: true,
-            "options__button--first": true,
-            "options__button--active": true,
-          }}
-        >
-          <i
-            classList={{
-              rotated: state.boardConfig.flipped,
-              las: true,
-              "la-sync": true,
-              rotatable: true,
-            }}
-          ></i>
-        </button>
         <button
           classList={{
             options__button: true,
@@ -78,7 +60,7 @@ const Share: Component<{ handlers: Handlers; class?: string }> = (props) => {
         <button
           classList={{
             options__button: true,
-            "options__button--last": true,
+            "options__button--last": false,
             "options__button--active": state.anonymous,
           }}
           onClick={props.handlers.toggleAnonymous}
@@ -86,6 +68,19 @@ const Share: Component<{ handlers: Handlers; class?: string }> = (props) => {
         >
           <i class="las la-user-secret"></i>
         </button>
+        <button
+          classList={{
+            options__button: true,
+            "options__button--last": true,
+            "options__button--active": state.boardConfig.showShadows,
+          }}
+          onClick={props.handlers.toggleShadows}
+          title={
+            state.boardConfig.showShadows ? "HIDE SHADOWS" : "SHOW SHADOWS"
+          }
+        >
+          <i class="las la-cloud"></i>
+        </button>
       </div>
       <hr />
       <div className="share__fen">