summaryrefslogtreecommitdiff
path: root/src/Wordle.vue
diff options
context:
space:
mode:
authorErich Eckner <erich.eckner.ext@bestsecret.com>2023-02-03 12:36:32 +0100
committerErich Eckner <erich.eckner.ext@bestsecret.com>2023-02-03 12:36:32 +0100
commit801547bfa8bc1ae3949027e46045e4693454f65f (patch)
treed2657ff2ceec9add1636e0a42d88d73f629f8d16 /src/Wordle.vue
parent8ce00c5f3acbcde05581c0c60f2e7ed63beed264 (diff)
downloadwordle-frontend-801547bfa8bc1ae3949027e46045e4693454f65f.tar.xz
remove duplicate key from keyboard ^^
Diffstat (limited to 'src/Wordle.vue')
-rw-r--r--src/Wordle.vue60
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>