diff --git a/web/src/components/feedback/CorrectBanner.tsx b/web/src/components/feedback/CorrectBanner.tsx index 436eba3..6a10d7b 100644 --- a/web/src/components/feedback/CorrectBanner.tsx +++ b/web/src/components/feedback/CorrectBanner.tsx @@ -1,8 +1,9 @@ -import { useMemo } from 'react'; +import { useEffect, useMemo } from 'react'; import { keyframes } from '@emotion/react'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import { Rambi } from '../mascot/Rambi'; +import { playCorrectSound } from '../../utils/sounds'; const slideUp = keyframes` from { transform: translateY(100%); opacity: 0; } @@ -24,6 +25,10 @@ export function CorrectBanner() { [], ); + useEffect(() => { + playCorrectSound(); + }, []); + return ( { + playIncorrectSound(); + }, []); + return (