WIP

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 */

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

src/state.ts

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

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

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