feat: add german beta support (#379)

src/hooks/usePronunciation.ts

@@ -21,6 +21,8 @@ function generateWordSoundSrc(word: string, pronunciation: Exclude<Pronunciation
       return `${pronunciationApi}${word}&le=zh`
     case 'ja':
       return `${pronunciationApi}${word}&le=jap`
+    case 'de':
+      return `${pronunciationApi}${word}&le=de`
   }
 }
 

src/pages/Typing/components/CurrentWord/components/InputHandler/index.tsx

@@ -3,6 +3,7 @@ import { FormEvent, useMemo } from 'react'
 import { currentDictInfoAtom } from '@/store'
 import KeyEventHandler from '../KeyEventHandler'
 import TextAreaHandler from '../TextAreaHandler'
+import KeyEventHandlerDE from '../KeyEventHandlerDE'
 
 export default function InputHandler({ updateInput }: { updateInput: (updateObj: WordUpdateAction) => void }) {
   const dictInfo = useAtomValue(currentDictInfoAtom)
@@ -11,6 +12,8 @@ export default function InputHandler({ updateInput }: { updateInput: (updateObj:
     switch (dictInfo.language) {
       case 'en':
         return <KeyEventHandler updateInput={updateInput} />
+      case 'de':
+        return <KeyEventHandlerDE updateInput={updateInput} />
       case 'romaji':
         return <KeyEventHandler updateInput={updateInput} />
       case 'code':

src/pages/Typing/components/CurrentWord/components/KeyEventHandlerDE/index.tsx

@@ -0,0 +1,36 @@
+import { TypingContext } from '@/pages/Typing/store'
+import { isChineseSymbol, isLegalDE } from '@/utils'
+import { useCallback, useContext, useEffect } from 'react'
+import { WordUpdateAction } from '../InputHandler'
+
+export default function KeyEventHandlerDE({ updateInput }: { updateInput: (updateObj: WordUpdateAction) => void }) {
+  // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+  const { state } = useContext(TypingContext)!
+
+  const onKeydown = useCallback(
+    (e: KeyboardEvent) => {
+      const char = e.key
+
+      if (isChineseSymbol(char)) {
+        alert('您正在使用输入法，请关闭输入法。')
+        return
+      }
+
+      if (isLegalDE(char) && !e.altKey && !e.ctrlKey && !e.metaKey) {
+        updateInput({ type: 'add', value: char, event: e })
+      }
+    },
+    [updateInput],
+  )
+
+  useEffect(() => {
+    if (!state.isTyping) return
+
+    window.addEventListener('keydown', onKeydown)
+    return () => {
+      window.removeEventListener('keydown', onKeydown)
+    }
+  }, [onKeydown, state.isTyping])
+
+  return <></>
+}

src/resources/dictionary.ts

@@ -158,6 +158,24 @@ export const dictionaries: DictionaryResource[] = [
     length: 1942,
     language: 'en',
   },
+  {
+    id: 'german2en',
+    name: '德语 英译',
+    description: '德语词汇, 英语翻译',
+    category: '德语学习 beta',
+    url: '/dicts/german2en.json',
+    length: 5892,
+    language: 'de',
+  },
+  {
+    id: 'en2german',
+    name: '英语 德译',
+    description: '英语词汇，德语翻译',
+    category: '德语学习 beta',
+    url: '/dicts/en2german.json',
+    length: 5025,
+    language: 'en',
+  },
   {
     id: 'PTE_junior',
     name: 'PTE 基础词汇',

src/resources/soundResource.ts

@@ -36,6 +36,15 @@ export const LANG_PRON_MAP: LanguagePronunciationMap = {
       },
     ],
   },
+  de: {
+    defaultPronIndex: 0,
+    pronunciation: [
+      {
+        name: '德语',
+        pron: 'de',
+      },
+    ],
+  },
   romaji: {
     defaultPronIndex: 0,
     pronunciation: [

src/typings/index.ts

@@ -1,9 +1,9 @@
 export * from './statInfo'
 export * from './resource'
 
-export type PronunciationType = 'us' | 'uk' | 'romaji' | 'zh' | 'ja'
-export type PhoneticType = 'us' | 'uk' | 'romaji' | 'zh' | 'ja'
-export type LanguageType = 'en' | 'romaji' | 'zh' | 'ja' | 'code'
+export type PronunciationType = 'us' | 'uk' | 'romaji' | 'zh' | 'ja' | 'de'
+export type PhoneticType = 'us' | 'uk' | 'romaji' | 'zh' | 'ja' | 'de'
+export type LanguageType = 'en' | 'romaji' | 'zh' | 'ja' | 'code' | 'de'
 
 type Pronunciation2PhoneticMap = Record<PronunciationType, PhoneticType>
 
@@ -13,6 +13,7 @@ export const PRONUNCIATION_PHONETIC_MAP: Pronunciation2PhoneticMap = {
   romaji: 'romaji',
   zh: 'zh',
   ja: 'ja',
+  de: 'de',
 }
 
 export type Word = {

src/utils/index.ts

@@ -1,70 +1,13 @@
-import { LanguageType, PronunciationType } from '@/typings'
 import { Howl } from 'howler'
 export * from './mixpanel'
 
 export const isLegal = (val: string): boolean => /^[a-z_A-Z_._(_)_{_}_<_>_+_0-9'"!,='@#$%`:~^&*?\-;[\]\\/\s]$/.test(val)
+export const isLegalDE = (val: string): boolean => /^[a-z_A-ZÄÖÜäöüß_._(_)_{_}_<_>_+_0-9'"!,='@#$%`:~^&*?\-;[\]\\/\s]$/.test(val)
 export const isChineseSymbol = (val: string): boolean =>
   /[\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u300c|\u300d|\ufe43|\ufe44|\u3014|\u3015|\u2026|\u2014|\uff5e|\ufe4f|\uffe5]/.test(
     val,
   )
 
-export type PronunciationConfig = {
-  name: string
-  pron: Exclude<PronunciationType, false>
-}
-
-export type LanguagePronunciationMapConfig = {
-  defaultPronIndex: number
-  pronunciation: PronunciationConfig[]
-}
-
-export type LanguagePronunciationMap = {
-  [key in LanguageType]: LanguagePronunciationMapConfig
-}
-
-export const LANG_PRON_MAP: LanguagePronunciationMap = {
-  en: {
-    defaultPronIndex: 0,
-    pronunciation: [
-      {
-        name: '美音',
-        pron: 'us',
-      },
-      {
-        name: '英音',
-        pron: 'uk',
-      },
-    ],
-  },
-  romaji: {
-    defaultPronIndex: 0,
-    pronunciation: [
-      {
-        name: '罗马音',
-        pron: 'romaji',
-      },
-    ],
-  },
-  zh: {
-    defaultPronIndex: 0,
-    pronunciation: [
-      {
-        name: '普通话',
-        pron: 'zh',
-      },
-    ],
-  },
-  ja: {
-    defaultPronIndex: 0,
-    pronunciation: [
-      {
-        name: '日语',
-        pron: 'ja',
-      },
-    ],
-  },
-}
-
 export const IsDesktop = () => {
   const userAgentInfo = navigator.userAgent
   const Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']