Add click sound effects

mikumino · Dec 18, 2023 · b196210 · b196210
1 parent 9ff681f
commit b196210
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/src/components/FlowtimeBreak.tsx b/src/components/FlowtimeBreak.tsx
@@ -1,6 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import TimeDisplay from './TimeDisplay';
 import Controls from './Controls';
+import tick from '../assets/Tick.mp3';
+
 
 interface FlowtimeBreakProps {
     breakTime: number;
@@ -29,15 +31,18 @@ const FlowtimeBreak = ({ breakTime, handleEndBreak }: FlowtimeBreakProps) => {
     }, [isRunning, timeRemaining]);
 
     const handleStart = () => {
+        new Audio(tick).play();
         if (!isRunning) {
             setEndTime(Date.now() + timeRemaining);
         }
         setIsRunning(!isRunning);
     };
     const handleStop = () => {
+        new Audio(tick).play();
         handleEndBreak();
     }
     const handleReset = () => {
+        new Audio(tick).play();
         setTimeRemaining(breakTime);
     };
 

diff --git a/src/components/FlowtimeFocus.tsx b/src/components/FlowtimeFocus.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import TimeDisplay from './TimeDisplay';
 import Controls from './Controls';
+import tick from '../assets/Tick.mp3';
 
 interface FlowTimeFocusProps {
     handleEndFocus: (focusTime: number) => void;
@@ -26,17 +27,20 @@ const FlowtimeFocus = ({ handleEndFocus }: FlowTimeFocusProps) => {
     }, [isRunning, time, startTime]);
 
     const handleStart = () => {
+        new Audio(tick).play();
         if (!isRunning) {
             setStartTime(Date.now() - time);
         }
         setIsRunning(!isRunning);
     };
 
     const handleStop = () => {
+        new Audio(tick).play();
         handleEndFocus(time);
     };
 
     const handleReset = () => {
+        new Audio(tick).play();
         setStartTime(0);
         setTime(0);
     };