diff options
| -rw-r--r-- | src/components/Keyboard.vue | 57 |
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> |