ADD: Key press preview

src/renderer/src/components/device/DeviceKeys.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="flex">
     <button
-      v-for="(color, key) in keys"
+      v-for="(keyObject, key) in keys"
       :key="key"
       :class="{
         'outline outline-white ': key === selected,
-        'outline-zinc-400 hover:outline': key !== selected
+        'outline-zinc-400 hover:outline': key !== selected,
+        'bg-black/20': keyObject.pressed
       }"
       class="flex aspect-square flex-1 items-center justify-center rounded-[2px] outline-2 transition-all"
-      :style="`box-shadow: 0 3px 20px -2px ${color.hex()}`"
+      :style="`box-shadow: 0 3px 20px -2px ${keyObject.color.hex()}`"
       @click="$emit('select', key)"
     >
       <span
@@ -27,10 +28,22 @@ defineProps({
   keys: {
     type: Object,
     default: () => ({
-      a: Color.hsl(265, 100, 50),
-      b: Color.hsl(280, 100, 50),
-      c: Color.hsl(300, 100, 50),
-      d: Color.hsl(330, 100, 50)
+      a: {
+        color: Color.hsl(265, 100, 50),
+        pressed: false
+      },
+      b: {
+        color: Color.hsl(0, 100, 50),
+        pressed: false
+      },
+      c: {
+        color: Color.hsl(120, 100, 50),
+        pressed: false
+      },
+      d: {
+        color: Color.hsl(60, 100, 50),
+        pressed: false
+      }
     })
   },
   selected: {

src/renderer/src/components/device/DevicePreview.vue

@@ -126,10 +126,22 @@ const { keyColor } = storeToRefs(deviceStore)
 
 const keyColors = computed(() => {
   return {
-    a: Color(keyColor.value('a', deviceStore.keyStates.a)),
-    b: Color(keyColor.value('b', deviceStore.keyStates.b)),
-    c: Color(keyColor.value('c', deviceStore.keyStates.c)),
-    d: Color(keyColor.value('d', deviceStore.keyStates.d))
+    a: {
+      color: Color(keyColor.value('a', deviceStore.keyStates.a)),
+      pressed: deviceStore.keyStates.a
+    },
+    b: {
+      color: Color(keyColor.value('b', deviceStore.keyStates.b)),
+      pressed: deviceStore.keyStates.b
+    },
+    c: {
+      color: Color(keyColor.value('c', deviceStore.keyStates.c)),
+      pressed: deviceStore.keyStates.c
+    },
+    d: {
+      color: Color(keyColor.value('d', deviceStore.keyStates.d)),
+      pressed: deviceStore.keyStates.d
+    }
   }
 })