keyboard events are now handled more or less properly

1 files changed, 21 insertions, 5 deletions

diff --git a/src/components/Keyboard.vue b/src/components/Keyboard.vue
index 4777a9c..3b428c8 100644
--- a/src/components/Keyboard.vue
+++ b/src/components/Keyboard.vue
@@ -1,11 +1,11 @@
 <template>
   <table>
-    <tr
-      v-for="letters in ['QWERTZUIOPÜ', 'ASDFFGHJKLÖÄ', 'YXCVBNMß']"
-      :key="letters"
-    >
+    <tr v-for="letters in rows" :key="letters">
       <td v-for="letter in letters" :key="letter">
-        <KeyboardKey :letter="letter"></KeyboardKey>
+        <KeyboardKey
+          :letter="letter"
+          :buttonPressed="pressButton"
+        ></KeyboardKey>
       </td>
     </tr>
   </table>
@@ -13,6 +13,22 @@
 
 <script setup lang="ts">
 import KeyboardKey from "@/components/KeyboardKey.vue";
+
+let props = defineProps<{
+  addLetter: (letter: string) => void;
+  removeLetter: () => void;
+  navigate: (direction: "left" | "right" | "first" | "last") => void;
+}>();
+
+const rows = ["QWERTZUIOPÜ", "ASDFFGHJKLÖÄ", "YXCVBNMß"];
+
+function pressButton(letter: string) {
+  if (rows.join("").indexOf(letter) > -1) {
+    props.addLetter(letter);
+  } else {
+    console.log("button " + letter + " pressed");
+  }
+}
 </script>
 
 <style scoped></style>