From a02333f85c02a06c35415e66c5fe90ce54b3cb87 Mon Sep 17 00:00:00 2001
From: Luyu Cheng <chengluyu@live.cn>
Date: Sun, 7 Mar 2021 14:55:32 +0800
Subject: [PATCH] fix: use explicit space characters instead of underscores
 (#94)

---
 src/components/Word/Letter/index.tsx | 47 +++++++++++++---------------
 src/components/Word/index.tsx        | 11 +++++--
 src/hooks/usePronunciation.ts        |  2 --
 tailwind.config.js                   |  6 ++++
 4 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/src/components/Word/Letter/index.tsx b/src/components/Word/Letter/index.tsx
index b0e59255..fec02e3e 100644
--- a/src/components/Word/Letter/index.tsx
+++ b/src/components/Word/Letter/index.tsx
@@ -2,34 +2,31 @@ 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
-  }
-
-  return (
-    <span
-      className={`m-0 p-0 text-5xl font-mono font-normal  ${stateClassName}`}
-      style={{ paddingRight: '0.2rem', transitionDuration: '0ms' }}
-    >
-      {visible ? letter : '_'}
-    </span>
-  )
+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',
+  },
 }
 
+const Letter: React.FC<LetterProps> = ({ letter, state = 'normal', visible }) => (
+  <span
+    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)
 
 export type LetterProps = {
diff --git a/src/components/Word/index.tsx b/src/components/Word/index.tsx
index ef4aebba..44a98e99 100644
--- a/src/components/Word/index.tsx
+++ b/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)) {
diff --git a/src/hooks/usePronunciation.ts b/src/hooks/usePronunciation.ts
index 1e4642c1..1c73ef26 100644
--- a/src/hooks/usePronunciation.ts
+++ b/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'))
diff --git a/tailwind.config.js b/tailwind.config.js
index a0a42d72..9eea7b1d 100644
--- a/tailwind.config.js
+++ b/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',