WIP

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) {

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();

src/state.ts

@@ -19,6 +19,7 @@ const initialBoardConfig: BoardConfig = {
   showMoveIndicator: true,
   showChecks: true,
   showCoords: true,
+  showShadows: false,
   flipped: false,
 };
 

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;

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>
   );
 };

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">