From 7d6085fbf71eadb611a041836e7b0f9fc1305693 Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Tue, 13 Feb 2024 19:17:44 +0100
Subject: [PATCH] introducing sound handling component

---
 src/assets/css/components/Soundcontrol.scss | 18 ++++++++++
 src/components/game/SoundControl.jsx        | 40 +++++++++++++++++++++
 2 files changed, 58 insertions(+)
 create mode 100644 src/assets/css/components/Soundcontrol.scss
 create mode 100644 src/components/game/SoundControl.jsx

diff --git a/src/assets/css/components/Soundcontrol.scss b/src/assets/css/components/Soundcontrol.scss
new file mode 100644
index 0000000..981ed50
--- /dev/null
+++ b/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;
+	}
+}
diff --git a/src/components/game/SoundControl.jsx b/src/components/game/SoundControl.jsx
new file mode 100644
index 0000000..409b427
--- /dev/null
+++ b/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>
+		</>
+	);
+}