add two piano rows

TeemuKoivisto · Apr 5, 2024 · adadff0 · adadff0
1 parent 653fbbc
commit adadff0
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/packages/client/src/components/virtual-piano/VirtualPiano.svelte b/packages/client/src/components/virtual-piano/VirtualPiano.svelte
@@ -24,6 +24,20 @@
   {#each keys as key, idx}
     <VirtualKey
       {key}
+      row={1}
+      keyCount={keys.length}
+      isFirst={idx === 0}
+      isLast={idx === keys.length - 1}
+      width={windowWidth}
+      on:pressed
+    />
+  {/each}
+</ul>
+<ul class={`${$$props.class || ''} flex flex-row relative overflow-x-scroll`}>
+  {#each keys as key, idx}
+    <VirtualKey
+      {key}
+      row={0}
       keyCount={keys.length}
       isFirst={idx === 0}
       isLast={idx === keys.length - 1}

diff --git a/packages/client/src/components/virtual-piano/VirtualPianoKey.svelte b/packages/client/src/components/virtual-piano/VirtualPianoKey.svelte
@@ -2,6 +2,7 @@
   import { createEventDispatcher } from 'svelte'
 
   export let key: { idx: number; isWhite: boolean; whiteKeyCount: number },
+    row: number,
     keyCount: number,
     isFirst: boolean,
     isLast: boolean,
@@ -29,7 +30,7 @@
 
   function handlePointerDown(e: any) {
     if (!keyHeld && !timeout) {
-      dispatch('pressed', key.idx)
+      dispatch('pressed', key.idx + row * 12)
       keyHeld = true
     }
   }
@@ -64,6 +65,11 @@
   li {
     button {
       @apply relative shadow outline-none rounded-b top-0;
+      // -webkit-tap-highlight-color: rgba(0,0,0,0);
+      &::selection {
+        color: none;
+        background: none;
+      }
       &.is-first {
         @apply rounded-tl;
       }