added sound to buttons yipee

shafiqihtsham · Apr 15, 2024 · e06d503 · e06d503
1 parent e521de7
commit e06d503
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en" class="">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/minecraft.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Sorting Visualiser 3000</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/click.mp4 b/public/click.mp4
diff --git a/public/minecraft.svg b/public/minecraft.svg
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
@@ -1,8 +1,14 @@
+import sound from "/click.mp4"
+
 interface SliderProps {
   handleSpeedChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   speed: number;
 }
 
+function play(){
+  new Audio(sound).play();
+}
+
 const Slider = (props: SliderProps) => {
   return (
     <div className="flex sm:flex-row justify-center sm:min-w-[250px] min-w-[155px]">
@@ -12,6 +18,7 @@ const Slider = (props: SliderProps) => {
         min={0}
         max={100}
         onChange={props.handleSpeedChange}
+        onMouseUp={play}
         className="absolute h-[40px] sm:min-w-64 w-[12rem] disabled:cursor-not-allowed disabled:text-gray-400"
       />
       <div className="relative bottom-[-8px] select-none">

diff --git a/src/components/SortingVisualizer/SortingVisualizer.tsx b/src/components/SortingVisualizer/SortingVisualizer.tsx
@@ -7,6 +7,7 @@ import { heapSort } from "../../SortingAlgorithms/HeapSort";
 import { clearMemoized } from "../../utils/displayAlgorithm";
 import Slider from "../Slider";
 import Controls from "../Controls";
+import sound from "/click.mp4";
 
 const ARRAY_LIMIT = {
   min: 10,
@@ -24,14 +25,19 @@ const SortingVisualizer = () => {
   const [sortDisabled, setSortDisabled] = useState<boolean>(false);
   const [bars, setBars] = useState<number>(50);
 
+  function play() {
+    new Audio(sound).play();
+  }
+
   const handleAlgorithmChange = (
     event: React.ChangeEvent<HTMLSelectElement>
   ) => {
+    play();
     setSelectedAlgorithm(event.target.value);
   };
 
   const handleSort = async () => {
-    // need to run this function when sort is true and i need to disable shuffle and set it to false;
+    play();
     const copy = [...numberArray];
 
     setShuffleDisabled(true);
@@ -60,6 +66,7 @@ const SortingVisualizer = () => {
   };
 
   const newArray = () => {
+    play();
     const arrayDiv = document.getElementById("container");
     if (!arrayDiv) return;
 
@@ -68,7 +75,6 @@ const SortingVisualizer = () => {
     for (let i = 0; i < arrayBars.length; i++) {
       arrayBars[i].style.backgroundColor = "";
       arrayBars[i].style.backgroundImage = "";
-
     }
 
     const newArray = randomIntArray(ARRAY_LIMIT.min, ARRAY_LIMIT.max, bars);
@@ -82,6 +88,7 @@ const SortingVisualizer = () => {
   };
 
   const handleBarsChange = () => {
+    play();
     let newBars;
 
     if (bars >= 150) {