Virtual keyboard with labels

src/components/VirtualKeyInfo.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { formatHertz, formatExponential } from '@/utils'
+import { type VirtualKey } from '@/components/VirtualKeyboard.vue'
+
+const props = defineProps<{ keyInfo: VirtualKey }>()
+</script>
+
+<template>
+    <div class="key-info">
+        <strong>{{ props.keyInfo.label }}</strong>
+        <div>{{ formatExponential(props.keyInfo.cent,0) }}c</div>
+        <div>{{ formatExponential(props.keyInfo.ratio) }}</div>
+        <div>{{ formatHertz(props.keyInfo.frequency) }}</div>
+    </div>
+</template>
+
+<style scoped>
+.key-info {
+    font-size: 1.25em;
+    text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
+}
+
+[data-theme='dark'] .key-info {
+    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
+}
+
+.black-key .key-info{
+    color: white;
+    text-shadow: none;
+}
+
+.white-key .key-info{
+    color: black;
+    text-shadow: none;
+}
+</style>

src/components/VirtualKeyboard.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import VirtualKeyboardKey from '@/components/VirtualKeyboardKey.vue'
+import VirtualKeyInfo from '@/components/VirtualKeyInfo.vue'
 import { mmod } from 'xen-dev-utils'
+import { useScaleStore } from '@/stores/scale'
 
 type NoteOff = () => void
 type NoteOnCallback = (index: number) => NoteOff
@@ -16,27 +18,42 @@ const props = defineProps<{
   heldNotes: Map<number, number>
 }>()
 
-type VirtualKey = {
+export type VirtualKey = {
   x: number
   y: number
   index: number
-  color: string
+  color: string,
+  frequency: number,
+  cent: number,
+  ratio: number,
+  label: string
 }
 
+const scale = useScaleStore();
 const virtualKeys = computed(() => {
   const colors = props.keyColors.length ? props.keyColors : ['white']
   const horizontal = props.isomorphicHorizontal
   const vertical = props.isomorphicVertical
   const result: [number, VirtualKey[]][] = []
+  const inverseBaseFreq = 1 / scale.baseFrequency;
   for (let y = 3; y >= -1; y--) {
     const row = []
     for (let x = 0; x <= 12; ++x) {
       const index = props.baseIndex + x * horizontal + y * vertical
+      const color = colors[mmod(index - props.baseMidiNote - 1, colors.length)]
+      const frequency = scale.frequencies[index]
+      const cent = scale.centss[index]
+      const ratio = frequency * inverseBaseFreq
+      const label = scale.labels[mmod(index - 1, scale.labels.length)]
       row.push({
         x,
         y,
         index,
-        color: colors[mmod(index - props.baseMidiNote - 1, colors.length)]
+        color,
+        frequency,
+        cent,
+        ratio,
+        label
       })
     }
     result.push([y, row])
@@ -63,7 +80,9 @@ const isMousePressed = ref(false)
         :noteOn="() => noteOn(key.index)"
         @press="isMousePressed = true"
         @unpress="isMousePressed = false"
-      ></VirtualKeyboardKey>
+      >
+      <VirtualKeyInfo :keyInfo="key" />
+    </VirtualKeyboardKey>
     </tr>
   </table>
 </template>

src/components/VirtualKeyboardKey.vue

@@ -100,15 +100,15 @@ onUnmounted(() => {
   <td
     :data-key-number="index"
     :style="'background-color:' + color"
-    :class="{ active }"
+    :class="{ active, 'black-key': color === 'black', 'white-key': color === 'white' }"
     @touchstart="onTouchStart"
     @touchend="onTouchEnd"
     @touchcancel="onTouchEnd"
     @mousedown="onMouseDown"
     @mouseup="onMouseUp"
     @mouseenter="onMouseEnter"
     @mouseleave="onMouseLeave"
-  ></td>
+  ><slot></slot></td>
 </template>
 
 <style scoped>