fix(ui): deprecate keyboard input form

wolimst · May 11, 2024 · 925c861 · 925c861
1 parent 6aac30b
commit 925c861
Show file tree

Hide file tree

Showing 5 changed files with 1 addition and 20 deletions.
diff --git a/src/components/nav/Config.svelte b/src/components/nav/Config.svelte
@@ -78,7 +78,6 @@
     <Toggle checked={$config.darkTheme} on:toggle={config.toggleTheme}>
       다크 모드
     </Toggle>
-    <Toggle bind:checked={$config.showInputForm}>키보드 입력 상자 표시</Toggle>
     <Toggle bind:checked={$config.switchEnterAndBackspacePosition}>
       <Badge>입력</Badge> 과 <Badge>삭제</Badge> 키 위치 바꾸기
     </Toggle>

diff --git a/src/components/wordle/keyboard/InputForm.svelte b/src/components/wordle/keyboard/InputForm.svelte
@@ -1,3 +1,4 @@
+<!-- TODO: TO BE REMOVED - keyboard input form is deprecated -->
 <script lang="ts">
   import { getKeyboardErrorMessage } from '../message'
   import { game, keyboard } from '../store'

diff --git a/src/components/wordle/keyboard/Keyboard.svelte b/src/components/wordle/keyboard/Keyboard.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { getKeyboardErrorMessage } from '../message'
   import { game, keyboard } from '../store'
-  import InputForm from './InputForm.svelte'
   import Key from './Key.svelte'
   import BackspaceIcon from '@/components/ui/icons/Backspace.svelte'
   import * as Hangul from '@/lib/hangul'
@@ -19,8 +18,6 @@
   const ENTER_KEY = 'Enter'
   const BACKSPACE_KEY = 'Backspace'
 
-  let isFormFocused = false
-
   function isJamoKey(key: string): key is Hangul.DubeolsikJamo {
     return Hangul.getCodePointLength(key) === 1 && Hangul.isHangulJamo(key)
   }
@@ -47,10 +44,6 @@
   }
 
   function handleKeyboardInputOutsideForm(event: KeyboardEvent) {
-    if (isFormFocused) {
-      return
-    }
-
     const key: string =
       Hangul.ALPHABET_JAMO_MAP_DUBEOLSIK[event.key] || event.key
     onClick(key)
@@ -65,16 +58,6 @@
   })
 </script>
 
-{#if $config.showInputForm}
-  <div class="tw-flex tw-flex-nowrap tw-justify-center tw-my-1.5 md:tw-my-3">
-    <InputForm
-      on:submit
-      on:focus={() => (isFormFocused = true)}
-      on:blur={() => (isFormFocused = false)}
-    />
-  </div>
-{/if}
-
 <div
   class="tw-flex tw-flex-nowrap tw-justify-center tw-gap-1.5 tw-my-1.5 md:tw-mt-3"
 >

diff --git a/src/stores/app/config.ts b/src/stores/app/config.ts
@@ -6,7 +6,6 @@ import { get } from 'svelte/store'
 const defaultConfig: Config = {
   showHelpOnLaunch: true,
   darkTheme: window.matchMedia('(prefers-color-scheme: dark)').matches,
-  showInputForm: false,
   switchEnterAndBackspacePosition: false,
   isBeingUpdated: false,
   useShorterBox: false,

diff --git a/src/stores/app/types.ts b/src/stores/app/types.ts
@@ -5,7 +5,6 @@ export interface Data {
 export interface Config {
   showHelpOnLaunch: boolean
   darkTheme: boolean
-  showInputForm: boolean
   switchEnterAndBackspacePosition: boolean
   isBeingUpdated: boolean
   useShorterBox: boolean