fix ScoreOptions height in Safari, set default wait to 1.5 secs

TeemuKoivisto · Apr 4, 2024 · 6753c61 · 6753c61
1 parent 9d30fcf
commit 6753c61
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 25 deletions.
diff --git a/packages/client/src/components/play/GameOptions.svelte b/packages/client/src/components/play/GameOptions.svelte
@@ -3,40 +3,38 @@
 
   import { gameActions, gameOptions } from '$stores/game'
 
-  let count = $gameOptions.count || ''
-  let waitSeconds = $gameOptions.waitSeconds || ''
+  let count = $gameOptions.count.toString()
+  let waitSeconds = $gameOptions.waitSeconds.toString()
 
   gameOptions.subscribe(v => {
-    count = v.count || ''
-    waitSeconds = v.waitSeconds || ''
+    count = v.count.toString()
+    waitSeconds = v.waitSeconds.toString()
   })
 
-  function handleCountChanged({
-    currentTarget: { value }
-  }: Event & { currentTarget: EventTarget & HTMLInputElement }) {
+  function handleCountChanged(e: Event & { currentTarget: EventTarget & HTMLInputElement }) {
     let int
     try {
-      int = parseInt(value)
-      if (int <= 0) {
+      int = parseInt(e.currentTarget.value)
+      if (int <= 0 || isNaN(int)) {
         int = 1
       }
       gameActions.setOptionValue('count', int)
+      e.currentTarget.blur()
     } catch (err) {
-      count = $gameOptions.count
+      count = $gameOptions.count.toString()
     }
   }
-  function handleWaitChanged({
-    currentTarget: { value }
-  }: Event & { currentTarget: EventTarget & HTMLInputElement }) {
-    let int
+  function handleWaitChanged(e: Event & { currentTarget: EventTarget & HTMLInputElement }) {
+    let n
     try {
-      int = parseInt(value)
-      if (int < 0) {
-        int = 0
+      n = parseFloat(e.currentTarget.value)
+      if (n < 0 || isNaN(n)) {
+        n = 0
       }
-      gameActions.setOptionValue('waitSeconds', int)
+      gameActions.setOptionValue('waitSeconds', n)
+      e.currentTarget.blur()
     } catch (err) {
-      waitSeconds = $gameOptions.waitSeconds
+      waitSeconds = $gameOptions.waitSeconds.toString()
     }
   }
 </script>
@@ -49,7 +47,7 @@
       id="guess-count"
       type="number"
       bind:value={count}
-      on:input={handleCountChanged}
+      on:change={handleCountChanged}
     />
   </li>
   <li class="flex items-center justify-between items-center mr-6">
@@ -75,7 +73,7 @@
       id="wait-ms"
       type="number"
       bind:value={waitSeconds}
-      on:input={handleWaitChanged}
+      on:change={handleWaitChanged}
     />
   </li>
 </ul>

diff --git a/packages/client/src/components/play/ScoreOptions.svelte b/packages/client/src/components/play/ScoreOptions.svelte
@@ -100,7 +100,7 @@
     <Icon icon={restore} width={16} />
   </button>
   <div class="options" class:hidden={$hidden}>
-    <div class="range flex flex-col h-full">
+    <div class="range flex flex-col">
       <label class="font-bold" for="range_min">Range</label>
       <div class="my-1 flex w-full">
         <input
@@ -125,7 +125,7 @@
         {/if}
       </div>
     </div>
-    <div class="flex flex-col h-full">
+    <div class="flex flex-col">
       <label class="font-bold" for="score-scale">Scale</label>
       <div class="scale-dropdown my-1 w-full">
         <SearchDropdown
@@ -144,7 +144,7 @@
         </div>
       {/if}
     </div>
-    <div class="flex flex-col h-full">
+    <div class="flex flex-col">
       <label class="font-bold" for="key">Key</label>
       <div class="my-1 flex">
         <input class="h-[28px]" id="key" bind:value={selectedKey} on:input={handleKeyChange} />

diff --git a/packages/client/src/stores/game.ts b/packages/client/src/stores/game.ts
@@ -26,7 +26,7 @@ const DEFAULT_OPTIONS = {
   count: 10,
   duplicates: true,
   autoplay: true,
-  waitSeconds: 3
+  waitSeconds: 1.5
 }
 
 export const guessState = writable<GuessState>('waiting')