feat: bgm pause

src/pages/game/_components/BgmSwitch.tsx

@@ -0,0 +1,34 @@
+import { useDispatchStore, useStateStore } from "@/store";
+import IconBgm from "@/assets/music.svg?react";
+import IconMuted from "@/assets/muted.svg?react";
+import { useState } from "react";
+
+export const BgmSwitch = () => {
+  const { bgm } = useStateStore();
+  const dispatch = useDispatchStore();
+  const [bgmValue, setBgm] = useState<boolean>(bgm);
+
+  const handleChange = () => {
+    dispatch && dispatch({ type: "bgm", param: !bgmValue });
+    setBgm(!bgmValue);
+  };
+
+  return (
+    <div className="absolute right-4 top-4">
+      <label
+        className={`btn btn-sm btn-circle swap swap-rotate ${
+          bgmValue ? " btn-primary" : ""
+        }`}
+      >
+        {/* this hidden checkbox controls the state */}
+        <input type="checkbox" checked={bgmValue} onChange={handleChange} />
+
+        {/* volume on icon */}
+        <IconBgm className="swap-on w-5 h-5" />
+
+        {/* volume off icon */}
+        <IconMuted className="swap-off w-5 h-5" />
+      </label>
+    </div>
+  );
+};

src/pages/game/_components/Game.tsx

@@ -32,6 +32,7 @@ import { Tip } from "./Tip";
 import { Description } from "./Description";
 import { getMap } from "@/api/zkp";
 import { toast } from "react-toastify";
+import { BgmSwitch } from "./BgmSwitch";
 
 export const Game = () => {
   const wrapRef = useRef<HTMLDivElement>(null);
@@ -278,6 +279,7 @@ export const Game = () => {
           ref={wrapRef}
           className="flex relative flex-col items-center justify-center w-[640px] h-[640px] m-auto rounded-2xl bg-neutral overflow-hidden"
         >
+          <BgmSwitch />
           {gameIsOver && (
             <GameOver
               onRefresh={() => headerRef && headerRef.current?.refetch?.()}

src/pages/game/page.tsx

@@ -1,7 +1,7 @@
 import { Hero } from "./_components/Hero";
 import { Game } from "./_components/Game";
 import { useAccountEffect } from "wagmi";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useWallet } from "@solana/wallet-adapter-react";
 import { useDispatchStore, useStateStore } from "@/store";
 import { Howl } from "howler";
@@ -10,7 +10,7 @@ export default function GamePage() {
   const [isConnected, setIsconnected] = useState(false);
   const dispatch = useDispatchStore();
   const { connected } = useWallet();
-  const { network } = useStateStore();
+  const { network, bgm } = useStateStore();
 
   useAccountEffect({
     onConnect() {
@@ -31,20 +31,29 @@ export default function GamePage() {
     }
   }, [connected, dispatch, network]);
 
-  const sound = new Howl({
-    src: ["/bgm.mp3"],
-    volume: 0.7,
-    loop: true,
-  });
+  const [soundLoaded, setSoundLoaded] = useState(false);
+  const sound = useRef(
+    new Howl({
+      src: ["/bgm.mp3"],
+      volume: 0.7,
+      loop: true,
+      onload: () => {
+        console.log("music onload");
+        setSoundLoaded(true);
+      },
+    })
+  );
 
   useEffect(() => {
-    console.log("isConnected", isConnected);
-    if (isConnected) {
-      sound.play();
-    } else {
-      sound.stop();
+    console.log("isConnected", isConnected, "bgm", bgm, "state", soundLoaded);
+    if (soundLoaded) {
+      if (isConnected && bgm) {
+        sound.current.play();
+      } else {
+        sound.current.pause();
+      }
     }
-  }, [isConnected]);
+  }, [isConnected, bgm, soundLoaded]);
 
   return isConnected ? <Game /> : <Hero />;
 }

src/store.tsx

@@ -15,6 +15,7 @@ export type StoreType = {
   gameResult: number;
   network: SupportNetwork | null;
   gameStart: boolean;
+  bgm: boolean;
 };
 
 export type StoreDispatch = {
@@ -27,6 +28,7 @@ const initialState: StoreType = {
   gameResult: 0,
   network: null,
   gameStart: true,
+  bgm: true,
 };
 
 function reducer(state: StoreType, action: StoreDispatch) {
@@ -46,6 +48,9 @@ function reducer(state: StoreType, action: StoreDispatch) {
     case "start":
       result.gameStart = action.param as boolean;
       break;
+    case "bgm":
+      result.bgm = action.param as boolean;
+      break;
     default:
       throw new Error();
   }