accept keyboard inputs as well

TeemuKoivisto · Jan 19, 2024 · b3b21ff · b3b21ff
1 parent efb4a5b
commit b3b21ff
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 8 deletions.
diff --git a/packages/client/src/components/MidiInfo.svelte b/packages/client/src/components/MidiInfo.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { midiActions, midiInput, midiRange } from '$stores/midi'
+  import { useKeyboard, midiActions, midiInput, midiRange } from '$stores/midi'
   import { getNote, parseNote } from '$utils/midi'
 
   let rangeMin = getNote($midiRange[0]).absolute
@@ -34,6 +34,13 @@
       }
     }
   }
+  function handleToggleKeyboard(
+    e: Event & {
+      currentTarget: EventTarget & HTMLInputElement
+    }
+  ) {
+    midiActions.setUseKeyboard(e.currentTarget.checked)
+  }
 </script>
 
 <div class={`${$$props.class || ''}`}>
@@ -77,6 +84,18 @@
           <input class="h-[20px]" id="sound" type="checkbox" checked={false} />
         </div>
       </div>
+      <div class="flex flex-col h-full">
+        <label class="font-bold" for="keyboard">Keyboard</label>
+        <div class="my-1 flex">
+          <input
+            class="h-[20px]"
+            id="keyboard"
+            type="checkbox"
+            checked={$useKeyboard}
+            on:change={handleToggleKeyboard}
+          />
+        </div>
+      </div>
     </div>
   </fieldset>
 </div>
@@ -85,7 +104,7 @@
   .midi-body {
     display: grid;
     gap: 0.5rem;
-    grid-template-columns: 25% 25% 25%;
+    grid-template-columns: 25% 25% 25% 25%;
     grid-template-rows: auto;
     align-items: center;
     @media (width <= 475px) {

diff --git a/packages/client/src/components/Score.svelte b/packages/client/src/components/Score.svelte
@@ -115,7 +115,7 @@
     }
     .g-clef {
       font-size: 3.6rem;
-      bottom: 4.2rem;
+      bottom: 4.12rem;
       left: 1rem;
       pointer-events: none;
       position: absolute;

diff --git a/packages/client/src/routes/(site)/+page.svelte b/packages/client/src/routes/(site)/+page.svelte
@@ -5,8 +5,8 @@
   import Score from '$components/Score.svelte'
 
   import { currentGame, gameActions } from '$stores/game'
-  import { midiActions, midiInput } from '$stores/midi'
-  import { getNote } from '$utils/midi'
+  import { useKeyboard, midiActions, midiInput } from '$stores/midi'
+  import { getNote, parseNote } from '$utils/midi'
 
   import type { NoteMessageEvent } from 'webmidi'
   import type { Note } from '@/types'
@@ -18,6 +18,10 @@
   let timeout: ReturnType<typeof setTimeout> | undefined
   let guessState: 'waiting' | 'correct' | 'wrong' | 'ended'
 
+  const regexNote = /^[A-G]$/
+  const regexPosInt = /^[0-9]$/
+  let keyboardInput = ''
+
   onMount(() => {
     handlePromptMIDI()
   })
@@ -33,8 +37,9 @@
     console.log('noteon', e)
     // @ts-ignore
     const data = e.rawData as [number, number, number]
-    const value = data[1]
-
+    handlePlayedNote(data[1])
+  }
+  function handlePlayedNote(value: number) {
     if (!$currentGame) {
       played = { ...getNote(value), value, correct: false }
     } else {
@@ -55,7 +60,31 @@
       }, 2000)
     }
   }
-
+  function handleKeyDown(e: KeyboardEvent) {
+    if ($useKeyboard) {
+      const pressed = e.key.toUpperCase()
+      const zeroPressed = keyboardInput.length === 0
+      const onePressed = keyboardInput.length === 1
+      const twoPressed = keyboardInput.length === 2
+      if (zeroPressed && regexNote.test(pressed)) {
+        keyboardInput += pressed
+      } else if (onePressed && pressed === 'B') {
+        keyboardInput += '♭'
+      } else if (onePressed && pressed === 'S') {
+        keyboardInput += '♯'
+      } else if (
+        (onePressed && regexPosInt.test(pressed)) ||
+        (twoPressed && regexPosInt.test(pressed))
+      ) {
+        // Octave pressed
+        const note = parseNote(keyboardInput + pressed)
+        if ('data' in note) {
+          handlePlayedNote(note.data)
+        }
+        keyboardInput = ''
+      }
+    }
+  }
   async function handlePromptMIDI() {
     status = 'Finding device...'
     const res = await midiActions.openMidi()
@@ -77,6 +106,8 @@
   }
 </script>
 
+<svelte:window on:keydown={handleKeyDown} />
+
 <h1 class="my-8 md:text-5xl mt-12 px-4 md:px-0 text-3xl font-cursive tracking-tight">
   Practise Music Reading
 </h1>
@@ -115,6 +146,9 @@
       {/if}
     </div>
   {/if}
+  {#if $useKeyboard && keyboardInput}
+    <div>Input: {keyboardInput}</div>
+  {/if}
 </section>
 
 <style lang="scss">

diff --git a/packages/client/src/stores/midi.ts b/packages/client/src/stores/midi.ts
@@ -11,6 +11,7 @@ export const midiRange = persist(writable<[number, number]>([60, 84]), {
   key: 'midi-range',
   storage: 'session'
 })
+export const useKeyboard = writable<boolean>(false)
 
 export const midiActions = {
   async openMidi(): Promise<Result<Input>> {
@@ -27,5 +28,8 @@ export const midiActions = {
   },
   setMidiRange(range: [number, number]) {
     midiRange.set(range)
+  },
+  setUseKeyboard(val: boolean) {
+    useKeyboard.set(val)
   }
 }