keyboard events are now handled more or less properly

3 files changed, 74 insertions, 18 deletions

diff --git a/src/App.vue b/src/App.vue
index 2b5bdc2..28f621a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,16 +1,59 @@
 <template>
   <h1>Wördle</h1>
-  <Keyboard />
+  <button @click="createPuzzle">new Puzzle</button>
+  <div>{{ trial }}</div>
+  <Keyboard
+    :add-letter="addLetter"
+    :navigate="navigate"
+    :remove-letter="removeLetter"
+  />
 </template>
 
 <script setup lang="ts">
 import Keyboard from "@/components/Keyboard.vue";
 
-let props = defineProps<{
-  riddle: string;
-  trial: string;
-}>();
+let riddle: string = "";
+let trial: string = "";
+let cursorPosition: number = 0;
+
+function createPuzzle() {
+  const request = new XMLHttpRequest();
+  request.onreadystatechange = function () {
+    if (this.readyState == 4 && this.status == 200) {
+      riddle = JSON.parse(request.responseText).riddle;
+      trial = "";
+      cursorPosition = 0;
+    }
+  };
+  request.open("GET", "http://127.0.0.1:8889/create", true);
+  request.send();
+}
+
+function addLetter(letter: string) {
+  trial = trial + letter;
+  console.log("letter " + letter + " added");
+}
+
+function removeLetter() {
+  trial = trial.substring(0, -1);
+}
+
+function navigate(direction: "left" | "right" | "first" | "last") {
+  switch (direction) {
+    case "left":
+      cursorPosition -= 1;
+      break;
+    case "right":
+      cursorPosition += 1;
+      break;
+    case "first":
+      cursorPosition = 0;
+      break;
+    case "last":
+      cursorPosition = 4;
+      break;
+  }
+}
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>
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>