Funktionstasten auf dem Keyboard

1 files changed, 47 insertions, 10 deletions

diff --git a/src/components/Keyboard.vue b/src/components/Keyboard.vue
index 8b4f707..3433f14 100644
--- a/src/components/Keyboard.vue
+++ b/src/components/Keyboard.vue
@@ -1,12 +1,22 @@
 <template>
   <table>
-    <tr v-for="letters in rows" :key="letters">
-      <td v-for="letter in letters" :key="letter">
-        <KeyboardKey
-          :letter="letter"
-          :buttonPressed="pressButton"
-        ></KeyboardKey>
-      </td>
+    <tr v-for="parts in rows" :key="parts">
+      <template v-for="part in parts">
+        <template v-for="key in part.controlKeys" :key="key">
+          <td :colspan="key.colspan ? key.colspan : 1">
+            <KeyboardKey
+              :letter="key.label"
+              :buttonPressed="pressButton"
+            ></KeyboardKey>
+          </td>
+        </template>
+        <td v-for="letter in part.letters" :key="letter">
+          <KeyboardKey
+            :letter="letter"
+            :buttonPressed="pressButton"
+          ></KeyboardKey>
+        </td>
+      </template>
     </tr>
   </table>
 </template>
@@ -20,13 +30,40 @@ let props = defineProps<{
   submit: () => void;
 }>();
 
-const rows = ["QWERTZUIOPÜ", "ASDFGHJKLÖÄ", "YXCVBNMß"];
+const rows = [
+  [{ letters: "QWERTZUIOPÜ" }],
+  [{ letters: "ASDFGHJKLÖÄ" }],
+  [
+    { controlKeys: [{ label: "<" }] },
+    { letters: "YXCVBNMß" },
+    { controlKeys: [{ label: "Ok", colspan: 2 }] },
+  ],
+];
 
 function pressButton(letter: string) {
-  if (rows.join("").indexOf(letter) > -1) {
+  if (
+    rows.find((row) => {
+      return row.find((parts) => {
+        if (parts.letters) {
+          return parts.letters.indexOf(letter) > -1;
+        } else {
+          return false;
+        }
+      });
+    })
+  ) {
     props.addLetter(letter);
   } else {
-    console.log("button " + letter + " pressed");
+    switch (letter) {
+      case '<':
+        props.removeLetter();
+        break;
+      case 'Ok':
+        props.submit();
+        break;
+      default:
+        console.error("unknown button " + letter + " pressed");
+    }
   }
 }
 </script>