feat: add error audio

src/pages/about/about.tsx

@@ -1,7 +1,7 @@
 export default function About() {
-  return (
-    <div>
-      <h1>contributors</h1>
-    </div>
-  )
+	return (
+		<div>
+			<h1>contributors</h1>
+		</div>
+	)
 }

src/pages/latin-type/latin-type.tsx

@@ -1,61 +1,64 @@
 import { useEffect, useRef } from 'react'
+import { filter, fromEvent, map } from 'rxjs'
 import PureTypeChar, { type RefMethodsType } from '../../components/pure-type-char'
-import { elementAt, filter, fromEvent, map } from 'rxjs'
 import { CHAR_STATUS, DELETE_KEYS_SET, LATIN_ALLOWED_INPUT_KEYS_SET } from '../../shared/constants'
-import { playTypeWriterSound } from '../../shared/sound'
+import { playErrorSound, playTypeWriterSound } from '../../shared/sound'
 
 export default function LatinType() {
-  const pureTypeCharRef = useRef<RefMethodsType | null>(null)
+	const pureTypeCharRef = useRef<RefMethodsType | null>(null)
 
-  useEffect(() => {
-    if (!pureTypeCharRef.current) return
-    const $allowedKeyDownEvent = fromEvent<KeyboardEvent>(document, 'keydown').pipe(
-      map((e) => {
-        return {
-          repeat: e.repeat,
-          // better to use 'Space' than ' '
-          key: e.code === 'Space' ? ' ' : e.key,
-        }
-      }),
-      filter((e) => !e.repeat && LATIN_ALLOWED_INPUT_KEYS_SET.has(e.key))
-    )
-    const $forwardKeyDownEvent = $allowedKeyDownEvent.pipe(filter((e) => !DELETE_KEYS_SET.has(e.key)))
-    const $backwardKeyDownEvent = $allowedKeyDownEvent.pipe(filter((e) => DELETE_KEYS_SET.has(e.key)))
+	useEffect(() => {
+		if (!pureTypeCharRef.current) return
+		const $allowedKeyDownEvent = fromEvent<KeyboardEvent>(document, 'keydown').pipe(
+			map((e) => {
+				return {
+					repeat: e.repeat,
+					// better to use 'Space' than ' '
+					key: e.code === 'Space' ? ' ' : e.key,
+				}
+			}),
+			filter((e) => !e.repeat && LATIN_ALLOWED_INPUT_KEYS_SET.has(e.key))
+		)
+		const $forwardKeyDownEvent = $allowedKeyDownEvent.pipe(filter((e) => !DELETE_KEYS_SET.has(e.key)))
+		const $backwardKeyDownEvent = $allowedKeyDownEvent.pipe(filter((e) => DELETE_KEYS_SET.has(e.key)))
 
-    let currentElement = pureTypeCharRef.current.start()
-    let lastElement: HTMLElement | null = null
-    const forwardKeySubscription = $forwardKeyDownEvent.subscribe((e) => {
-      if (e.key === currentElement?.innerText) {
-        ;[currentElement, lastElement] = pureTypeCharRef.current!.next(CHAR_STATUS.correct)
-      } else {
-        ;[currentElement, lastElement] = pureTypeCharRef.current!.next(CHAR_STATUS.error, e.key)
-      }
-      playTypeWriterSound()
-      if (!currentElement) {
-        console.log('over')
-        return
-      }
-    })
+		let currentElement = pureTypeCharRef.current.start()
+		let lastElement: HTMLElement | null = null
+		const forwardKeySubscription = $forwardKeyDownEvent.subscribe((e) => {
+			if (e.key === currentElement?.innerText) {
+				;[currentElement, lastElement] = pureTypeCharRef.current!.next(CHAR_STATUS.correct)
+				playTypeWriterSound()
+			} else {
+				;[currentElement, lastElement] = pureTypeCharRef.current!.next(CHAR_STATUS.error, e.key)
+				playErrorSound()
+			}
 
-    const backwardKeySubscription = $backwardKeyDownEvent.subscribe((e) => {
-      if (!lastElement) {
-        return
-      }
-      playTypeWriterSound()
-      ;[currentElement, lastElement] = pureTypeCharRef.current!.prev()
-    })
+			if (!currentElement) {
+				console.log('over')
+				return
+			}
+		})
 
-    return () => {
-      forwardKeySubscription.unsubscribe()
-      backwardKeySubscription.unsubscribe()
-    }
-  }, [])
+		const backwardKeySubscription = $backwardKeyDownEvent.subscribe((e) => {
+			if (!lastElement) {
+				return
+			}
+			playTypeWriterSound()
+			;[currentElement, lastElement] = pureTypeCharRef.current!.prev()
+		})
 
-  return (
-    <div>
-      <PureTypeChar
-        data="It's tempting to want to live in the past. It's familiar. It's comfortable. But it's where fossils come from."
-        ref={pureTypeCharRef}></PureTypeChar>
-    </div>
-  )
+		return () => {
+			forwardKeySubscription.unsubscribe()
+			backwardKeySubscription.unsubscribe()
+		}
+	}, [])
+
+	return (
+		<div>
+			<PureTypeChar
+				data="It's tempting to want to live in the past. It's familiar. It's comfortable. But it's where fossils come from."
+				ref={pureTypeCharRef}
+			></PureTypeChar>
+		</div>
+	)
 }

src/shared/sound.ts

@@ -1,7 +1,14 @@
+import errorInputAudio from '../assets/error_input.wav'
 import typeWriterAudio from '../assets/typewriter.mp3'
 
 const sound = new Audio(typeWriterAudio)
 export const playTypeWriterSound = () => {
-  sound.currentTime = 0
-  sound.play()
+	sound.currentTime = 0
+	sound.play()
+}
+
+const errorSound = new Audio(errorInputAudio)
+export const playErrorSound = () => {
+	errorSound.currentTime = 0
+	errorSound.play()
 }