Add characters to key presses

juitnow · Nov 15, 2024 · cda9cb4 · cda9cb4
1 parent f95167f
commit cda9cb4
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/src/app.vue b/src/app.vue
@@ -202,6 +202,7 @@ function onKeypress(event: KeyboardEvent): void {
   if (event.shiftKey) keyPress.push({ type: 'modifier', value: 'Shift' })
   if (event.metaKey) keyPress.push({ type: 'modifier', value: 'Meta' })
   keyPress.push({ type: 'key', value: event.code })
+  keyPress.character = event.key
   keyPresses.value.unshift(keyPress)
   keyPresses.value.splice(200)
 }

diff --git a/src/keyboard.vue b/src/keyboard.vue
@@ -4,6 +4,9 @@
       <span v-for="({ type, value }, j) of keyPress" :key="j" :class="`keypress-${type}`">
         {{ value }}
       </span>
+      <span v-if="keyPress.character" class="keypress-character">
+        {{ keyPress.character }}
+      </span>
     </div>
   </div>
 </template>
@@ -12,6 +15,8 @@
 import type { PropType } from 'vue'
 
 export type Keypress = {
+  character?: string | undefined,
+} & {
   type: 'key' | 'modifier' | 'updown',
   value: string,
 }[]
@@ -60,4 +65,12 @@ defineProps({
     padding: 0px 1px;
     margin: 0px 1px;
   }
+
+  .keypress-character {
+    background-color: rgba(128, 128, 128, 0.25);
+    border: 1px solid rgb(128, 128, 128);
+    border-radius: 2px;
+    padding: 0px 1px;
+    margin: 0px 1px 0px 20px;
+  }
 </style>