From adadff06b92b177c1ad219ef1934367904c8225e Mon Sep 17 00:00:00 2001
From: Teemu Koivisto <tkoivisto456@gmail.com>
Date: Fri, 5 Apr 2024 15:31:57 +0300
Subject: [PATCH] add two piano rows

---
 .../components/virtual-piano/VirtualPiano.svelte   | 14 ++++++++++++++
 .../virtual-piano/VirtualPianoKey.svelte           |  8 +++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/virtual-piano/VirtualPiano.svelte b/packages/client/src/components/virtual-piano/VirtualPiano.svelte
index 0f49d55..f735613 100644
--- 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
index a5bd3d5..9b58385 100644
--- 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;
       }