fix: use explicit space characters instead of underscores (#94)

src/components/Word/Letter/index.tsx

@@ -2,33 +2,30 @@ import React from 'react'
 
 export type LetterState = 'normal' | 'correct' | 'wrong'
 
-const Letter: React.FC<LetterProps> = ({ letter, state, visible }) => {
-  let stateClassName = ''
+const EXPLICIT_SPACE = '␣'
 
-  const defaultClassName = 'text-gray-600 dark:text-white dark:text-opacity-80'
-  switch (state) {
-    case 'normal':
-      stateClassName = defaultClassName
-      break
-    case 'correct':
-      stateClassName = 'text-green-600 dark:text-green-400'
-      break
-    case 'wrong':
-      stateClassName = 'text-red-600 dark:text-red-400'
-      break
-    default:
-      stateClassName = defaultClassName
-  }
+const stateClassNameMap: Record<string, Record<LetterState, string>> = {
+  true: {
+    normal: 'text-gray-400',
+    correct: 'text-green-400 dark:text-green-700',
+    wrong: 'text-red-400 dark:text-red-600',
+  },
+  false: {
+    normal: 'text-gray-600 dark:text-gray-50',
+    correct: 'text-green-600 dark:text-green-400',
+    wrong: 'text-red-600 dark:text-red-400',
+  },
+}
 
-  return (
+const Letter: React.FC<LetterProps> = ({ letter, state = 'normal', visible }) => (
   <span
-      className={`m-0 p-0 text-5xl font-mono font-normal  ${stateClassName}`}
-      style={{ paddingRight: '0.2rem', transitionDuration: '0ms' }}
+    className={`m-0 p-0 text-5xl font-mono font-normal ${
+      stateClassNameMap[((letter === EXPLICIT_SPACE) as unknown) as string][state]
+    } pr-0.8 duration-0 dark:text-opacity-80`}
   >
     {visible ? letter : '_'}
   </span>
-  )
-}
+)
 
 export default React.memo(Letter)
 

src/components/Word/index.tsx

@@ -5,8 +5,13 @@ import useSounds from 'hooks/useSounds'
 import style from './index.module.css'
 import usePronunciationSound from 'hooks/usePronunciation'
 
+const EXPLICIT_SPACE = '␣'
+
 const Word: React.FC<WordProps> = ({ word = 'defaultWord', onFinish, isStart, wordVisible = true }) => {
-  word = word.replace(new RegExp(' ', 'g'), '_')
+  // Used in `usePronunciationSound`.
+  const originalWord = word
+
+  word = word.replace(new RegExp(' ', 'g'), EXPLICIT_SPACE)
   word = word.replace(new RegExp('…', 'g'), '..')
 
   const [inputWord, setInputWord] = useState('')
@@ -14,7 +19,7 @@ const Word: React.FC<WordProps> = ({ word = 'defaultWord', onFinish, isStart, wo
   const [isFinish, setIsFinish] = useState(false)
   const [hasWrong, setHasWrong] = useState(false)
   const [playKeySound, playBeepSound, playHintSound] = useSounds()
-  const playPronounce = usePronunciationSound(word)
+  const playPronounce = usePronunciationSound(originalWord)
 
   const onKeydown = useCallback(
     (e) => {
@@ -22,7 +27,7 @@ const Word: React.FC<WordProps> = ({ word = 'defaultWord', onFinish, isStart, wo
       if (char === ' ') {
         // 防止用户惯性按空格导致页面跳动
         e.preventDefault()
-        setInputWord((value) => (value += '_'))
+        setInputWord((value) => (value += EXPLICIT_SPACE))
         playKeySound()
       }
       if (isChineseSymbol(char)) {

src/hooks/usePronunciation.ts

@@ -7,8 +7,6 @@ declare type PronounceFunction = () => void
 const pronunciationApi = 'https://dict.youdao.com/dictvoice?audio='
 
 export default function usePronunciationSound(word: string): PronounceFunction {
-  word = word.replace(new RegExp('_', 'g'), ' ')
-
   const [audio, setAudio] = useState<HTMLAudioElement | null>(null)
   const { pronunciation } = useAppState()
   const ukPronounceFunction = () => setAudio(new Audio(pronunciationApi + word + '&type=1'))

tailwind.config.js

@@ -8,6 +8,12 @@ module.exports = {
       colors: {
         'blue-gray': colors.blueGray,
       },
+      transitionDuration: {
+        0: '0ms',
+      },
+      padding: {
+        0.8: '0.2rem',
+      },
     },
     borderRadius: {
       large: '0.75rem',