From c8c4bd317f93139b92a0cfcf4e597bfdc141a22e Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Sun, 19 Nov 2023 15:11:48 +0100
Subject: [PATCH] Implemented the mute button in the Footer.jsx

---
 client/src/common/components/Footer/Footer.jsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/client/src/common/components/Footer/Footer.jsx b/client/src/common/components/Footer/Footer.jsx
index adeb045..53d6df3 100644
--- a/client/src/common/components/Footer/Footer.jsx
+++ b/client/src/common/components/Footer/Footer.jsx
@@ -2,12 +2,17 @@ import "./styles.sass";
 import Logo from "@/common/images/bs2ab.png";
 import {Link, useLocation} from "react-router-dom";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faHome} from "@fortawesome/free-solid-svg-icons";
+import {faHome, faVolumeHigh, faVolumeMute} from "@fortawesome/free-solid-svg-icons";
+import {MusicContext} from "@/common/contexts/MusicContext.jsx";
+import {useContext} from "react";
 
 export const Footer = () => {
     const location = useLocation();
 
+    const {musicEnabled, setMusicEnabled} = useContext(MusicContext);
+
     const isLegalPage = location.pathname === "/imprint" || location.pathname === "/privacy" || location.pathname === "/end";
+    const isIngame = location.pathname === "/game" || location.pathname === "/end" || location.pathname === "/create";
 
     return (
         <footer>
@@ -20,6 +25,10 @@ export const Footer = () => {
                 {isLegalPage && <Link className="glassy footer-home" to="/">
                         <FontAwesomeIcon icon={faHome}/>
                     </Link>}
+
+                {isIngame && <div className="glassy footer-home"  onClick={() => setMusicEnabled(!musicEnabled)}>
+                    <FontAwesomeIcon icon={musicEnabled ? faVolumeHigh : faVolumeMute}/>
+                </div>}
             </div>
 
             <div className="glassy footer-legal">