From e06d5031d51b85d45f86a2f46995d9f87c2225b2 Mon Sep 17 00:00:00 2001 From: Ihtsham Shafiq Date: Mon, 15 Apr 2024 21:06:37 +1000 Subject: [PATCH] added sound to buttons yipee --- index.html | 4 ++-- public/click.mp4 | Bin 0 -> 16331 bytes public/minecraft.svg | 1 + public/vite.svg | 1 - src/components/Slider/Slider.tsx | 7 +++++++ .../SortingVisualizer/SortingVisualizer.tsx | 11 +++++++++-- 6 files changed, 19 insertions(+), 5 deletions(-) create mode 100644 public/click.mp4 create mode 100644 public/minecraft.svg delete mode 100644 public/vite.svg diff --git a/index.html b/index.html index 9efef17..107c35e 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,9 @@ - + - Vite + React + TS + Sorting Visualiser 3000
diff --git a/public/click.mp4 b/public/click.mp4 new file mode 100644 index 0000000000000000000000000000000000000000..c3db858df8be74e06f0ef6428a0995c70c6df583 GIT binary patch literal 16331 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 MbA>rM!<@MO2MQH( \ No newline at end of file diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx index 00b2fb6..94b14ad 100644 --- 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) => void; speed: number; } +function play(){ + new Audio(sound).play(); +} + const Slider = (props: SliderProps) => { return (
@@ -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" />
diff --git a/src/components/SortingVisualizer/SortingVisualizer.tsx b/src/components/SortingVisualizer/SortingVisualizer.tsx index 7905c20..8178c87 100644 --- 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(false); const [bars, setBars] = useState(50); + function play() { + new Audio(sound).play(); + } + const handleAlgorithmChange = ( event: React.ChangeEvent ) => { + 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) {