feat() add options to enable/disable music

src/main.tsx

@@ -5,7 +5,7 @@ import { RouterProvider, createHashRouter, redirect } from 'react-router-dom';
 
 import App from './App';
 import { Game, JoinGame } from './modules/game';
-import { About, Home, Rules } from './modules/home';
+import { About, Home, Options, Rules } from './modules/home';
 
 import './index.css';
 
@@ -18,6 +18,14 @@ const router = createHashRouter([
       </React.StrictMode>
     ),
   },
+  {
+    path: 'options',
+    element: (
+      <React.StrictMode>
+        <App music>{() => <Options />}</App>
+      </React.StrictMode>
+    ),
+  },
   {
     path: 'rules',
     element: (

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

@@ -39,6 +39,9 @@ export const Home = ({ account, provider }: HomeProps) => {
         <div className={classNames('Home__link Home__link', { 'Home__link--disabled': createLoading })}>
           <Link to="/join">Join a room</Link>
         </div>
+        <div className={classNames('Home__link Home__link', { 'Home__link--disabled': createLoading })}>
+          <Link to="/options">Options</Link>
+        </div>
         <div className={classNames('Home__link Home__link', { 'Home__link--disabled': createLoading })}>
           <Link to="/rules">Rules</Link>
         </div>

src/modules/home/components/Options/Options.css

@@ -0,0 +1,44 @@
+.Options__account {
+  text-overflow: ellipsis;
+  max-width: 80%;
+  overflow: hidden;
+}
+
+.Options__menu {
+  margin: 15px 0;
+}
+
+.Options__link {
+  display: flex;
+  align-items: center;
+}
+
+.Options__link a,
+.Options__link span {
+  font-family: Bungee;
+  font-size: 32px;
+  color: #fff;
+  text-shadow: -5px 5px 0 #000;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.Options__link a:hover,
+.Options__link span:hover {
+  color: var(--primary-color);
+}
+
+.Options__link--disabled a,
+.Options__link--disabled span {
+  color: #444 !important;
+  pointer-events: none;
+}
+
+.Options__link--small {
+  margin-top: 30px;
+}
+
+.Options__link--small a {
+  color: var(--fifth-color);
+  font-size: 1.4em;
+}

src/modules/home/components/Options/Options.tsx

@@ -0,0 +1,37 @@
+import classNames from 'classnames';
+import { useEffect, useState } from 'react';
+
+import { demuteMusic, isMuted, muteMusic } from '../../../../utils/music';
+import { Back, Title } from '../../../common-ui';
+
+import './Options.css';
+
+export const Options = () => {
+  const [muted, setMuted] = useState(isMuted());
+
+  useEffect(() => {
+    setMuted(isMuted());
+  }, []);
+
+  const onMute = () => {
+    if (!muted) {
+      console.log('muted');
+      muteMusic();
+    } else {
+      demuteMusic();
+    }
+    setMuted(!muted);
+  };
+
+  return (
+    <div className="Options">
+      <Back />
+      <Title>Options</Title>
+      <div className="Options__menu">
+        <div className={classNames('Options__link Options__link')}>
+          <span onClick={onMute}>Music: {muted ? 'OFF' : 'ON'}</span>
+        </div>
+      </div>
+    </div>
+  );
+};

src/modules/home/components/Options/index.ts

@@ -0,0 +1 @@
+export * from './Options';

src/modules/home/index.ts

@@ -1,3 +1,4 @@
 export * from './components/Home';
+export * from './components/Options';
 export * from './components/Rules';
 export * from './components/About';

src/utils/music.ts

@@ -1,13 +1,35 @@
 import music from '../assets/music.mp3';
 
+const MUSIC_MUTED = 'musicMuted';
+
 let enabled = false;
 let waitToPlay = false;
+const storedMuted = window.localStorage.getItem(MUSIC_MUTED);
+let muted = (storedMuted && storedMuted === '1') || false;
 
 const musicAudio = new Audio(music);
 musicAudio.loop = true;
-musicAudio.volume = 0.5;
+musicAudio.volume = 0.3;
+
+export const isMuted = () => {
+  return muted;
+};
+
+export const muteMusic = () => {
+  muted = true;
+  window.localStorage.setItem(MUSIC_MUTED, '1');
+  pauseMusic();
+};
+
+export const demuteMusic = () => {
+  muted = false;
+  window.localStorage.setItem(MUSIC_MUTED, '0');
+  playMusic();
+};
 
 export const playMusic = () => {
+  console.log(muted);
+  if (muted) return;
   if (enabled) {
     void musicAudio.play();
   } else {
@@ -16,6 +38,7 @@ export const playMusic = () => {
 };
 
 export const pauseMusic = () => {
+  console.log('pause', enabled);
   if (enabled) {
     void musicAudio.pause();
   } else {
@@ -25,7 +48,9 @@ export const pauseMusic = () => {
 
 const enableMusic = () => {
   enabled = true;
-  if (waitToPlay) void musicAudio.play();
+  if (waitToPlay) playMusic();
+  document.removeEventListener('click', enableMusic);
+  document.removeEventListener('tap', enableMusic);
 };
 
 document.addEventListener('click', enableMusic);