Planspiele/PerfectMarketGame
Planspiele/PerfectMarketGame
1
0
Fork 0
Code Actions Packages

Implemented the mute button in the Footer.jsx

Browse Source
This commit is contained in:
Mathias Wagner 2023-11-19 15:11:48 +01:00
parent 8458376a64
commit c8c4bd317f
Signed by: Mathias
GPG Key ID: B8DC354B0A1F5B44
1 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/src/common/components/Footer/Footer.jsx
View File

@ -2,12 +2,17 @@ import "./styles.sass";
import Logo from "@/common/images/bs2ab.png"; import Logo from "@/common/images/bs2ab.png";
import {Link, useLocation} from "react-router-dom"; import {Link, useLocation} from "react-router-dom";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; 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 = () => { export const Footer = () => {
const location = useLocation(); const location = useLocation();
const {musicEnabled, setMusicEnabled} = useContext(MusicContext);
const isLegalPage = location.pathname === "/imprint" || location.pathname === "/privacy" || location.pathname === "/end"; const isLegalPage = location.pathname === "/imprint" || location.pathname === "/privacy" || location.pathname === "/end";
const isIngame = location.pathname === "/game" || location.pathname === "/end" || location.pathname === "/create";
return ( return (
<footer> <footer>
@ -20,6 +25,10 @@ export const Footer = () => {
{isLegalPage && <Link className="glassy footer-home" to="/"> {isLegalPage && <Link className="glassy footer-home" to="/">
<FontAwesomeIcon icon={faHome}/> <FontAwesomeIcon icon={faHome}/>
</Link>} </Link>}
{isIngame && <div className="glassy footer-home" onClick={() => setMusicEnabled(!musicEnabled)}>
<FontAwesomeIcon icon={musicEnabled ? faVolumeHigh : faVolumeMute}/>
</div>}
</div> </div>
<div className="glassy footer-legal"> <div className="glassy footer-legal">