introducing sound handling component

src/assets/css/components/Soundcontrol.scss

@@ -0,0 +1,18 @@
+.sound-control-pannel {
+	@apply absolute bottom-0 right-0 z-10  py-2 px-4 flex items-center gap-x-2 border-none bg-transparent;
+	transform: translate(10px, 10px);
+
+	&__icon {
+		@apply w-10 h-10 object-contain object-center;
+	}
+	&__audio-toggle {
+		@apply bg-transparent border-none flex items-center gap-2 text-zuume text-xl;
+	}
+	&:after {
+		@apply block bg-white w-full h-full absolute top-0 left-0 z-0;
+		content: "";
+		// translate: -50%;
+		transform: perspective(150px) rotateY(7deg);
+		z-index: -1;
+	}
+}

src/components/game/SoundControl.jsx

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from "react";
+import useSound from "use-sound";
+import chantierAtmopshere from "../../assets/sounds/chantier_1.mp3";
+import soundControlIcon from "../../assets/img/icons/sound-control-icon.svg";
+export default function SoundControl() {
+	const [atmosphereSound, setAtmosphereSound] = useState(null);
+	const [isPlaying, setIsPlaying] = useState(false);
+
+	function playSound() {
+		const chantierSound = new Audio(chantierAtmopshere);
+		chantierSound.play();
+		setAtmosphereSound(chantierSound);
+		setIsPlaying(true);
+	}
+
+	function clearSound() {
+		if (atmosphereSound) {
+			atmosphereSound.pause();
+			atmosphereSound.removeAttribute("src");
+			atmosphereSound.load();
+		}
+		setIsPlaying(false);
+	}
+	return (
+		<>
+			<div className='sound-control-pannel'>
+				<button className='sound-control-pannel__audio-toggle'>
+					<img className='sound-control-pannel__icon' src={soundControlIcon} alt='' />
+					Audio
+				</button>
+				<button hidden={isPlaying} onClick={playSound}>
+					Play Sound
+				</button>
+				<button hidden={!isPlaying} onClick={clearSound}>
+					Stop Sound
+				</button>
+			</div>
+		</>
+	);
+}