From e71b8198f961c57bdb0cd2c3093ee6f53d2ef169 Mon Sep 17 00:00:00 2001
From: Maciej Caderek <maciej.caderek@gmail.com>
Date: Thu, 24 Mar 2022 03:25:52 +0100
Subject: [PATCH] WIP

---
 src/main.tsx                |  4 ++++
 src/player/Player.ts        |  4 ++--
 src/state.ts                |  1 +
 src/types.ts                |  2 ++
 src/ui/components/Share.tsx | 13 ++++++++++++-
 5 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/main.tsx b/src/main.tsx
index c50889a..c558e40 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -221,6 +221,10 @@ const main = async () => {
 
       download(data, name, state.gameConfig.format.toLowerCase());
     },
+    toggleSound() {
+      setState("boardConfig", "sounds", !state.boardConfig.sounds);
+      saveConfig("board");
+    },
   };
 
   /* Render the page */
diff --git a/src/player/Player.ts b/src/player/Player.ts
index 4069c59..6cb38d5 100644
--- a/src/player/Player.ts
+++ b/src/player/Player.ts
@@ -1,7 +1,7 @@
 import { GameConfig } from "../types";
 import Board from "../board/Board";
 import Game from "../game/Game";
-import { setState } from "../state";
+import { setState, state } from "../state";
 import sfx from "./sfx";
 
 const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
@@ -102,7 +102,7 @@ class Player {
 
     const position = this.getPosition();
 
-    if (this.ply > 0) {
+    if (this.ply > 0 && state.boardConfig.sounds) {
       if (position.mate) {
         sfx.snap.play();
       } else if (/[ce]/.test(position.move?.flags as string)) {
diff --git a/src/state.ts b/src/state.ts
index 4cb5687..ba71fab 100644
--- a/src/state.ts
+++ b/src/state.ts
@@ -20,6 +20,7 @@ const initialBoardConfig: BoardConfig = {
   showChecks: true,
   showCoords: true,
   showShadows: false,
+  sounds: true,
   flipped: false,
 };
 
diff --git a/src/types.ts b/src/types.ts
index 3e9478a..e7d4271 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -89,6 +89,7 @@ export type BoardConfig = {
   showChecks: boolean;
   showCoords: boolean;
   showShadows: boolean;
+  sounds: boolean;
   flipped: boolean;
 };
 
@@ -171,6 +172,7 @@ export type Handlers = {
   load: (data: string) => Promise<boolean>;
   downloadImage: () => Promise<void>;
   downloadAnimation: () => Promise<void>;
+  toggleSound(): void;
 };
 
 export type Header = {
diff --git a/src/ui/components/Share.tsx b/src/ui/components/Share.tsx
index 91c413a..be3cfaa 100644
--- a/src/ui/components/Share.tsx
+++ b/src/ui/components/Share.tsx
@@ -71,7 +71,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.boardConfig.showShadows,
           }}
           onClick={props.handlers.toggleShadows}
@@ -81,6 +81,17 @@ const Share: Component<{ handlers: Handlers; class?: string }> = (props) => {
         >
           <i class="las la-cloud"></i>
         </button>
+        <button
+          classList={{
+            options__button: true,
+            "options__button--last": true,
+            "options__button--active": state.boardConfig.sounds,
+          }}
+          onClick={props.handlers.toggleSound}
+          title={state.boardConfig.sounds ? "MUTE" : "SOUND ON"}
+        >
+          <i class="las la-volume-up"></i>
+        </button>
       </div>
       <hr />
       <div className="share__fen">