1 files changed, 60 insertions, 0 deletions
diff --git a/src/Wordle.vue b/src/Wordle.vue
new file mode 100644
index 0000000..3ed7441
--- /dev/null
+++ b/src/Wordle.vue
@@ -0,0 +1,60 @@
+<template>
+  <h1>Wördle</h1>
+  <button @click="createPuzzle">new Puzzle</button>
+  <div>{{ current.trial }}</div>
+  <Keyboard
+    :add-letter="addLetter"
+    :navigate="navigate"
+    :remove-letter="removeLetter"
+  />
+</template>
+
+<script setup lang="ts">
+import Keyboard from "@/components/Keyboard.vue";
+import { reactive } from "vue";
+
+let riddle: string = "";
+let current = reactive({ trial: "" });
+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;
+      current.trial = "";
+      cursorPosition = 0;
+    }
+  };
+  request.open("GET", "http://127.0.0.1:8889/create", true);
+  request.send();
+}
+
+function addLetter(letter: string) {
+  current.trial = current.trial + letter;
+  console.log("letter " + letter + " added");
+}
+
+function removeLetter() {
+  current.trial = current.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>