From 49d541afc57c8a312a6b5686a6ae9482022e148d Mon Sep 17 00:00:00 2001
From: Max Chadwick <mpchadwick@gmail.com>
Date: Thu, 28 Mar 2024 18:19:17 -0400
Subject: [PATCH] Make the key index number viewable

---
 src/components/VirtualKeyboard.vue    | 1 +
 src/components/VirtualKeyboardKey.vue | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/src/components/VirtualKeyboard.vue b/src/components/VirtualKeyboard.vue
index 482c2670..af0d48a4 100644
--- a/src/components/VirtualKeyboard.vue
+++ b/src/components/VirtualKeyboard.vue
@@ -57,6 +57,7 @@ const isMousePressed = ref(false)
           'hidden-sm': key.x > 8,
           held: (heldNotes.get(key.index) || 0) > 0
         }"
+        :index="key.index"
         :color="key.color"
         :isMousePressed="isMousePressed"
         :noteOn="() => noteOn(key.index)"
diff --git a/src/components/VirtualKeyboardKey.vue b/src/components/VirtualKeyboardKey.vue
index be888c3e..a29f723e 100644
--- a/src/components/VirtualKeyboardKey.vue
+++ b/src/components/VirtualKeyboardKey.vue
@@ -6,6 +6,7 @@ type NoteOff = () => void
 type NoteOnCallback = () => NoteOff
 
 const props = defineProps<{
+  index: number
   color: string
   isMousePressed: boolean
   noteOn: NoteOnCallback
@@ -97,6 +98,7 @@ onUnmounted(() => {
 
 <template>
   <td
+    :data-key-number="index"
     :style="'background-color:' + color"
     :class="{ active }"
     @touchstart="onTouchStart"