diff --git a/.yarn/cache/@esbuild-darwin-arm64-npm-0.18.20-00b3504077-10c0.zip b/.yarn/cache/@esbuild-darwin-arm64-npm-0.18.20-00b3504077-10c0.zip new file mode 100644 index 00000000..d600c91c Binary files /dev/null and b/.yarn/cache/@esbuild-darwin-arm64-npm-0.18.20-00b3504077-10c0.zip differ diff --git a/.yarn/cache/@esbuild-darwin-arm64-npm-0.20.2-e287d70c91-10c0.zip b/.yarn/cache/@esbuild-darwin-arm64-npm-0.20.2-e287d70c91-10c0.zip new file mode 100644 index 00000000..a716309f Binary files /dev/null and b/.yarn/cache/@esbuild-darwin-arm64-npm-0.20.2-e287d70c91-10c0.zip differ diff --git a/.yarn/cache/@esbuild-win32-x64-npm-0.18.20-37a9ab2bda-10c0.zip b/.yarn/cache/@esbuild-darwin-x64-npm-0.18.20-767fe27d1b-10c0.zip similarity index 61% rename from .yarn/cache/@esbuild-win32-x64-npm-0.18.20-37a9ab2bda-10c0.zip rename to .yarn/cache/@esbuild-darwin-x64-npm-0.18.20-767fe27d1b-10c0.zip index 91cf0cac..dd2fce52 100644 Binary files a/.yarn/cache/@esbuild-win32-x64-npm-0.18.20-37a9ab2bda-10c0.zip and b/.yarn/cache/@esbuild-darwin-x64-npm-0.18.20-767fe27d1b-10c0.zip differ diff --git a/.yarn/cache/@esbuild-win32-x64-npm-0.20.2-4f45bbb49b-10c0.zip b/.yarn/cache/@esbuild-darwin-x64-npm-0.20.2-f4f3a851d1-10c0.zip similarity index 62% rename from .yarn/cache/@esbuild-win32-x64-npm-0.20.2-4f45bbb49b-10c0.zip rename to .yarn/cache/@esbuild-darwin-x64-npm-0.20.2-f4f3a851d1-10c0.zip index f0d01dba..0c13058f 100644 Binary files a/.yarn/cache/@esbuild-win32-x64-npm-0.20.2-4f45bbb49b-10c0.zip and b/.yarn/cache/@esbuild-darwin-x64-npm-0.20.2-f4f3a851d1-10c0.zip differ diff --git a/.yarn/cache/@esbuild-linux-arm64-npm-0.18.20-7b48b328fe-10c0.zip b/.yarn/cache/@esbuild-linux-arm64-npm-0.18.20-7b48b328fe-10c0.zip new file mode 100644 index 00000000..ca5b3585 Binary files /dev/null and b/.yarn/cache/@esbuild-linux-arm64-npm-0.18.20-7b48b328fe-10c0.zip differ diff --git a/.yarn/cache/@esbuild-linux-arm64-npm-0.20.2-3a02a82580-10c0.zip b/.yarn/cache/@esbuild-linux-arm64-npm-0.20.2-3a02a82580-10c0.zip new file mode 100644 index 00000000..c323e88e Binary files /dev/null and b/.yarn/cache/@esbuild-linux-arm64-npm-0.20.2-3a02a82580-10c0.zip differ diff --git a/.yarn/cache/@rollup-rollup-darwin-arm64-npm-4.13.2-20c5519087-10c0.zip b/.yarn/cache/@rollup-rollup-darwin-arm64-npm-4.13.2-20c5519087-10c0.zip new file mode 100644 index 00000000..fb8a1945 Binary files /dev/null and b/.yarn/cache/@rollup-rollup-darwin-arm64-npm-4.13.2-20c5519087-10c0.zip differ diff --git a/.yarn/cache/@rollup-rollup-darwin-x64-npm-4.13.2-d3f8841c56-10c0.zip b/.yarn/cache/@rollup-rollup-darwin-x64-npm-4.13.2-d3f8841c56-10c0.zip new file mode 100644 index 00000000..3b5983ac Binary files /dev/null and b/.yarn/cache/@rollup-rollup-darwin-x64-npm-4.13.2-d3f8841c56-10c0.zip differ diff --git a/.yarn/cache/@rollup-rollup-linux-arm64-gnu-npm-4.13.2-6e5b44140f-10c0.zip b/.yarn/cache/@rollup-rollup-linux-arm64-gnu-npm-4.13.2-6e5b44140f-10c0.zip new file mode 100644 index 00000000..23bddc3f Binary files /dev/null and b/.yarn/cache/@rollup-rollup-linux-arm64-gnu-npm-4.13.2-6e5b44140f-10c0.zip differ diff --git a/.yarn/cache/@rollup-rollup-linux-arm64-musl-npm-4.13.2-7e6694e030-10c0.zip b/.yarn/cache/@rollup-rollup-linux-arm64-musl-npm-4.13.2-7e6694e030-10c0.zip new file mode 100644 index 00000000..ac4bf776 Binary files /dev/null and b/.yarn/cache/@rollup-rollup-linux-arm64-musl-npm-4.13.2-7e6694e030-10c0.zip differ diff --git a/.yarn/cache/@rollup-rollup-win32-x64-msvc-npm-4.13.2-4638a893f3-10c0.zip b/.yarn/cache/@rollup-rollup-win32-x64-msvc-npm-4.13.2-4638a893f3-10c0.zip deleted file mode 100644 index 8c1a17ba..00000000 Binary files a/.yarn/cache/@rollup-rollup-win32-x64-msvc-npm-4.13.2-4638a893f3-10c0.zip and /dev/null differ diff --git a/.yarn/cache/fsevents-patch-6b67494872-10c0.zip b/.yarn/cache/fsevents-patch-6b67494872-10c0.zip new file mode 100644 index 00000000..996683a7 Binary files /dev/null and b/.yarn/cache/fsevents-patch-6b67494872-10c0.zip differ diff --git a/src/assets/audio/countDown.mp3 b/src/assets/audio/countDown.mp3 new file mode 100644 index 00000000..9ade184b Binary files /dev/null and b/src/assets/audio/countDown.mp3 differ diff --git a/src/assets/audio/soundEffect.mp3 b/src/assets/audio/soundEffect.mp3 new file mode 100644 index 00000000..b769474e Binary files /dev/null and b/src/assets/audio/soundEffect.mp3 differ diff --git a/src/pages/GamePage/GameCode/GameCode.tsx b/src/pages/GamePage/GameCode/GameCode.tsx index ab952d1a..faa309fa 100644 --- a/src/pages/GamePage/GameCode/GameCode.tsx +++ b/src/pages/GamePage/GameCode/GameCode.tsx @@ -1,6 +1,9 @@ import { useCallback, useMemo, useRef } from 'react'; import IngameHeader from '@/common/Ingame/IngameHeader'; import IngameRank from '@/common/Ingame/IngameRank'; +import playSoundEffect, { + SOUND_SCORE, +} from '@/pages/GamePage/common/playSoundEffect'; import useIngameStore from '@/store/useIngameStore'; import CanvasTrack from '../common/CanvasTrack'; import TrackLine from '../common/TrackLine'; @@ -91,6 +94,8 @@ const GameCode = ({ publishIngame, userId }: GameCodeProps) => { const handleUpdateScore = useCallback(() => { const newScore = currentScore + scorePerSubmit; publishIngame('/info', { currentScore: newScore }); + const sound = playSoundEffect(SOUND_SCORE); + sound.then((audio) => audio.play()); }, [currentScore, scorePerSubmit]); return ( diff --git a/src/pages/GamePage/GameSentence/GameSentence.tsx b/src/pages/GamePage/GameSentence/GameSentence.tsx index 037ec9b5..95f2ffcc 100644 --- a/src/pages/GamePage/GameSentence/GameSentence.tsx +++ b/src/pages/GamePage/GameSentence/GameSentence.tsx @@ -3,6 +3,9 @@ import Dashboard from '@/common/Ingame/Dashboard'; import IngameHeader from '@/common/Ingame/IngameHeader'; import IngameRank from '@/common/Ingame/IngameRank'; import { SentenceNext } from '@/common/Ingame/SentenceBlocks'; +import playSoundEffect, { + SOUND_SCORE, +} from '@/pages/GamePage/common/playSoundEffect'; import useIngameStore from '@/store/useIngameStore'; import CanvasTrack from '../common/CanvasTrack'; import TrackLine from '../common/TrackLine'; @@ -26,6 +29,8 @@ export interface I_RankInfoList { } const GameSentence = ({ publishIngame, userId }: GameSentenceProps) => { + const sound = playSoundEffect(SOUND_SCORE); + const { ingameRoomRes, isRoundWaiting } = useIngameStore(); const currentScore = ingameRoomRes.allMembers.find( @@ -40,6 +45,7 @@ const GameSentence = ({ publishIngame, userId }: GameSentenceProps) => { const handleNextRound = useCallback(() => { sentenceList.current = ingameRoomRes.questions!; setSentenceIdx(0); + sound.then((audio) => audio.play()); }, [ingameRoomRes.questions]); const { @@ -87,12 +93,12 @@ const GameSentence = ({ publishIngame, userId }: GameSentenceProps) => { ); const scorePerTrankLength = Math.ceil((1 / TotalSpacedWord) * 100); - const handleUpdateScore: UpdateScoreType = useCallback(() => { const newScore = currentScore + scorePerTrankLength; publishIngame('/info', { currentScore: newScore, }); + sound.then((audio) => audio.play()); }, [currentScore, scorePerTrankLength]); return ( diff --git a/src/pages/GamePage/GameWord/WordGameLayout.tsx b/src/pages/GamePage/GameWord/WordGameLayout.tsx index a9783422..62d433c8 100644 --- a/src/pages/GamePage/GameWord/WordGameLayout.tsx +++ b/src/pages/GamePage/GameWord/WordGameLayout.tsx @@ -5,6 +5,7 @@ import { I_IngameWsResponse, PublishIngameType, } from '../../GamePage/types/websocketType'; +import playSoundEffect, { SOUND_SCORE } from '../common/playSoundEffect'; import useFocusInput from '../hooks/useFocusInput'; import WordCell from './WordCell'; import WordRankContainer from './WordRankContainer'; @@ -65,6 +66,7 @@ const WordGameLayout = ({ useEffect(() => { onInputChange(0, 100, 150); //동기화.. }, [ingameRoomRes]); + const sound = playSoundEffect(SOUND_SCORE); return ( <> @@ -99,6 +101,7 @@ const WordGameLayout = ({ setValue('wordInput', ''); initializeTyping(); submitCount.current += 1; + sound.then((audio) => audio.play()); })}> { }, autoStart: false, }); - + const sound = playSoundEffect(SOUND_COUNTDOWN); useEffect(() => { - isOpen && startTimer(); + if (isOpen) { + startTimer(); + sound.then((audio) => audio.play()); + } }, [isOpen]); return ( diff --git a/src/pages/GamePage/common/playSoundEffect.ts b/src/pages/GamePage/common/playSoundEffect.ts new file mode 100644 index 00000000..f6ca9b3b --- /dev/null +++ b/src/pages/GamePage/common/playSoundEffect.ts @@ -0,0 +1,17 @@ +export const SOUND_SCORE = 'SCORE'; +export const SOUND_COUNTDOWN = 'COUNTDOWN'; +type SoundEffectType = typeof SOUND_SCORE | typeof SOUND_COUNTDOWN; + +const mappedSoundFiles: Record Promise> = { + SCORE: () => + import('@/assets/audio/soundEffect.mp3').then((module) => module.default), + COUNTDOWN: () => + import('@/assets/audio/countDown.mp3').then((module) => module.default), +}; + +const playSoundEffect = async (type: SoundEffectType) => { + const src = await mappedSoundFiles[type](); + const audio = new Audio(src); + return audio; +}; +export default playSoundEffect;