diff options
author | Erich Eckner <erich.eckner.ext@bestsecret.com> | 2023-02-03 12:36:32 +0100 |
---|---|---|
committer | Erich Eckner <erich.eckner.ext@bestsecret.com> | 2023-02-03 12:36:32 +0100 |
commit | 801547bfa8bc1ae3949027e46045e4693454f65f (patch) | |
tree | d2657ff2ceec9add1636e0a42d88d73f629f8d16 /src/Wordle.vue | |
parent | 8ce00c5f3acbcde05581c0c60f2e7ed63beed264 (diff) | |
download | wordle-frontend-801547bfa8bc1ae3949027e46045e4693454f65f.tar.xz |
remove duplicate key from keyboard ^^
Diffstat (limited to 'src/Wordle.vue')
-rw-r--r-- | src/Wordle.vue | 60 |
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> |