keyboard events are now handled more or less properly

2 files changed, 24 insertions, 11 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>
diff --git a/src/components/KeyboardKey.vue b/src/components/KeyboardKey.vue
index 1deb0ca..6ce8d47 100644
--- a/src/components/KeyboardKey.vue
+++ b/src/components/KeyboardKey.vue
@@ -1,14 +1,11 @@
 <template>
-  <button @click="pressButton()">{{ letter }}</button>
+  <button @click="buttonPressed(letter)">{{ letter }}</button>
 </template>
 
 <script setup lang="ts">
-function pressButton() {
-  console.log("button " + props.letter + " pressed");
-}
-
-let props = defineProps<{
+defineProps<{
   letter: string;
+  buttonPressed: (letter: string) => void;
 }>();
 </script>