From c240e8845eda015b5db45a2bbe2fb72b45361959 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20=27birdy=27=20Danjou?= <clement@danjou.io>
Date: Thu, 30 Nov 2023 01:52:54 +0100
Subject: [PATCH] feat() add options to enable/disable music

---
 src/main.tsx                                  | 10 ++++-
 src/modules/home/components/Home/Home.tsx     |  3 ++
 .../home/components/Options/Options.css       | 44 +++++++++++++++++++
 .../home/components/Options/Options.tsx       | 37 ++++++++++++++++
 src/modules/home/components/Options/index.ts  |  1 +
 src/modules/home/index.ts                     |  1 +
 src/utils/music.ts                            | 29 +++++++++++-
 7 files changed, 122 insertions(+), 3 deletions(-)
 create mode 100644 src/modules/home/components/Options/Options.css
 create mode 100644 src/modules/home/components/Options/Options.tsx
 create mode 100644 src/modules/home/components/Options/index.ts

diff --git a/src/main.tsx b/src/main.tsx
index 72f1de4..3f36e15 100644
--- a/src/main.tsx
+++ b/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: (
diff --git a/src/modules/home/components/Home/Home.tsx b/src/modules/home/components/Home/Home.tsx
index 608c88f..d0b273c 100644
--- a/src/modules/home/components/Home/Home.tsx
+++ b/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>
diff --git a/src/modules/home/components/Options/Options.css b/src/modules/home/components/Options/Options.css
new file mode 100644
index 0000000..316adf1
--- /dev/null
+++ b/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;
+}
diff --git a/src/modules/home/components/Options/Options.tsx b/src/modules/home/components/Options/Options.tsx
new file mode 100644
index 0000000..6c3a9fa
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/modules/home/components/Options/index.ts b/src/modules/home/components/Options/index.ts
new file mode 100644
index 0000000..6e8a171
--- /dev/null
+++ b/src/modules/home/components/Options/index.ts
@@ -0,0 +1 @@
+export * from './Options';
diff --git a/src/modules/home/index.ts b/src/modules/home/index.ts
index 8579aa3..e0fba21 100644
--- a/src/modules/home/index.ts
+++ b/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';
diff --git a/src/utils/music.ts b/src/utils/music.ts
index aa3f4fb..016d6fa 100644
--- a/src/utils/music.ts
+++ b/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);