feat() add music

src/App.tsx

@@ -3,16 +3,26 @@ import { ReactNode, useEffect, useState } from 'react';
 
 import { init } from './fhevmjs';
 import { Connect, Layout } from './modules/common-ui';
+import { pauseMusic, playMusic } from './utils/music';
 
 import './App.css';
 
 type AppProps = {
+  music?: boolean;
   children: (account: string, provider: BrowserProvider) => ReactNode;
 };
 
-const App = ({ children }: AppProps) => {
+const App = ({ music = false, children }: AppProps) => {
   const [isInitialized, setIsInitialized] = useState(false);
 
+  useEffect(() => {
+    if (music) {
+      playMusic();
+    } else {
+      pauseMusic();
+    }
+  }, [music]);
+
   useEffect(() => {
     init()
       .then(() => {

src/main.tsx

@@ -14,23 +14,23 @@ const router = createHashRouter([
     path: '/',
     element: (
       <React.StrictMode>
-        <App>{(account, provider) => <Home account={account} provider={provider} />}</App>
+        <App music>{(account, provider) => <Home account={account} provider={provider} />}</App>
       </React.StrictMode>
     ),
   },
   {
     path: 'rules',
     element: (
       <React.StrictMode>
-        <App>{(account, provider) => <Rules account={account} provider={provider} />}</App>
+        <App music>{(account, provider) => <Rules account={account} provider={provider} />}</App>
       </React.StrictMode>
     ),
   },
   {
     path: 'join',
     element: (
       <React.StrictMode>
-        <App>{(account, provider) => <JoinGame account={account} provider={provider} />}</App>
+        <App music>{(account, provider) => <JoinGame account={account} provider={provider} />}</App>
       </React.StrictMode>
     ),
   },

src/modules/common-ui/components/Back/Back.tsx

@@ -1,9 +1,11 @@
+import { Link } from 'react-router-dom';
+
 import './Back.css';
 
 export const Back = () => {
   return (
-    <a href="/" className="Back">
+    <Link to="/" className="Back">
       ⬅ Back to the main menu
-    </a>
+    </Link>
   );
 };

src/modules/game/components/Game/Game.tsx

@@ -5,8 +5,9 @@ import { useParams } from 'react-router-dom';
 import { abi } from '../../../../abi/cipherbomb.json';
 import { getEventContract, getReadContract, onNextBlock } from '../../../../utils/rpc';
 import { Splash } from '../../../common-ui/components/Splash';
+import badGuysWin from '../../assets/badguyswin.mp3';
 import begin from '../../assets/begin.mp3';
-import goodGuysWin from '../../assets/good_guys_win.mp3';
+import goodGuysWin from '../../assets/goodguyswin.mp3';
 import { Table } from '../Table';
 import { WaitingRoom } from '../WaitingRoom';
 
@@ -111,6 +112,7 @@ export const Game = ({ account, provider }: GameProps) => {
     };
 
     const onBadGuysWin = (reason: string) => {
+      void new Audio(badGuysWin).play();
       setEndGame(reason === 'bomb' ? 'bomb' : 'bad');
       onNextBlock(refreshInformations);
       onNextBlock(refreshPlayers);

src/modules/game/components/Table/Table.tsx

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { getInstance, getTokenSignature } from '../../../../fhevmjs';
 import { getEventContract, getReadContract, onNextBlock } from '../../../../utils/rpc';
 import { Button, Loader, Subtitle, Title } from '../../../common-ui';
+import card from '../../assets/card.mp3';
 import { CardDisplay } from '../CardDisplay';
 import { TablePlayers } from '../TablePlayers';
 
@@ -57,7 +58,7 @@ export const Table = ({ contract, account, players }: TableProps) => {
 
   useEffect(() => {
     const onCardPicked = (cp: number) => {
-      console.log('picked', cp);
+      void new Audio(card).play();
       setCardPicked(Number(cp));
       setCardOpen(true);
       onNextBlock(refresh);
@@ -81,6 +82,7 @@ export const Table = ({ contract, account, players }: TableProps) => {
   const instance = getInstance(account);
 
   const onRole = async () => {
+    void new Audio(card).play();
     if (role == null) {
       const contractAddress = await contract.getAddress();
       const token = await getTokenSignature(contractAddress, account);

src/modules/home/components/Home/Home.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { BrowserProvider, ContractFactory } from 'ethers';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 
 import cipherbomb from '../../../../abi/cipherbomb.json';
@@ -16,6 +16,7 @@ type HomeProps = {
 export const Home = ({ account, provider }: HomeProps) => {
   const [createLoading, setCreateLoading] = useState(false);
   const navigate = useNavigate();
+
   const createARoom = async () => {
     if (createLoading) return;
     const contractFactory = new ContractFactory(cipherbomb.abi, cipherbomb.bytecode, await provider.getSigner());

src/utils/music.ts

@@ -0,0 +1,13 @@
+import music from '../assets/music.mp3';
+
+const musicAudio = new Audio(music);
+musicAudio.loop = true;
+musicAudio.volume = 0.5;
+
+export const playMusic = () => {
+  void musicAudio.play();
+};
+
+export const pauseMusic = () => {
+  void musicAudio.pause();
+};