diff options
| author | Erich Eckner <erich.eckner.ext@bestsecret.com> | 2023-02-03 12:41:04 +0100 |
|---|---|---|
| committer | Erich Eckner <erich.eckner.ext@bestsecret.com> | 2023-02-03 12:41:15 +0100 |
| commit | 6041694cd7265cfd3f31b873c340cc6d24fd459e (patch) | |
| tree | 4d3e5b7640e892799b313bba0edac38e9d8de6d2 | |
| parent | 801547bfa8bc1ae3949027e46045e4693454f65f (diff) | |
| download | wordle-frontend-6041694cd7265cfd3f31b873c340cc6d24fd459e.tar.xz | |
move app, add some trials, change keyboard capabilities
| -rw-r--r-- | index.html | 2 | ||||
| -rw-r--r-- | src/Wordle.vue | 57 | ||||
| -rw-r--r-- | src/components/Keyboard.vue | 2 | ||||
| -rw-r--r-- | src/components/Trial.vue | 17 | ||||
| -rw-r--r-- | src/components/Trials.vue | 22 | ||||
| -rw-r--r-- | src/main.ts | 4 |
6 files changed, 82 insertions, 22 deletions
@@ -7,7 +7,7 @@ <title>Vite App</title> </head> <body> - <div id="app"></div> + <div id="wordle"></div> <script type="module" src="/src/main.ts"></script> </body> </html> diff --git a/src/Wordle.vue b/src/Wordle.vue index 3ed7441..302f965 100644 --- a/src/Wordle.vue +++ b/src/Wordle.vue @@ -1,22 +1,25 @@ <template> <h1>Wördle</h1> <button @click="createPuzzle">new Puzzle</button> - <div>{{ current.trial }}</div> + <Trials :length="length" :currentTrial="current.trial" /> <Keyboard :add-letter="addLetter" - :navigate="navigate" :remove-letter="removeLetter" + :submit="submit" /> </template> <script setup lang="ts"> import Keyboard from "@/components/Keyboard.vue"; import { reactive } from "vue"; +import Trials from "@/components/Trials.vue"; let riddle: string = ""; let current = reactive({ trial: "" }); let cursorPosition: number = 0; +let props = defineProps<{ length: number }>(); + function createPuzzle() { const request = new XMLHttpRequest(); request.onreadystatechange = function () { @@ -31,28 +34,46 @@ function createPuzzle() { } function addLetter(letter: string) { - current.trial = current.trial + letter; - console.log("letter " + letter + " added"); + if (current.trial.length < props.length) { + current.trial = current.trial + letter; + } } 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; +function submit() { + if (current.trial.length === props.length) { + /* var xmlHttp = new XMLHttpRequest(); + xmlHttp.onreadystatechange = function () { + if (this.readyState == 4 && this.status == 200) { + response = JSON.parse(xmlHttp.responseText); +// document.getElementById('debug').innerHTML = xmlHttp.responseText; + if (!response.is_in_dictionary) { + table.setAttribute('bgcolor', '#ff8080'); + cursor_column = 1; + updateCursorDisplay(); + return; + } + if (response.is_solved) { + document.body.setAttribute('bgcolor', '#40ff40'); + cursor_column = 1; + updateCursorDisplay(); + return; + } + for (i = 1; i <= 5; i++) { + table + .querySelector("#row_" + row_count) + .querySelector("#column_" + i) + .className = colors[response.colors[i - 1]]; + } + colorizeKeyboard(); + addNewRow(); + } + } + xmlHttp.open("GET", "https://wordle-backend.eckner.net/try/" + trial + '?riddle=' + puzzle, true); + xmlHttp.send(null); */ } } </script> diff --git a/src/components/Keyboard.vue b/src/components/Keyboard.vue index 7d76dbd..8b4f707 100644 --- a/src/components/Keyboard.vue +++ b/src/components/Keyboard.vue @@ -17,7 +17,7 @@ import KeyboardKey from "@/components/KeyboardKey.vue"; let props = defineProps<{ addLetter: (letter: string) => void; removeLetter: () => void; - navigate: (direction: "left" | "right" | "first" | "last") => void; + submit: () => void; }>(); const rows = ["QWERTZUIOPÜ", "ASDFGHJKLÖÄ", "YXCVBNMß"]; diff --git a/src/components/Trial.vue b/src/components/Trial.vue new file mode 100644 index 0000000..00511f3 --- /dev/null +++ b/src/components/Trial.vue @@ -0,0 +1,17 @@ +<template> + <td v-for="i in length" :key="i"> + <div> + {{ trial[i-1] }} + </div> + </td> +</template> + +<script setup lang="ts"> +let props = defineProps<{ + length: number; + trial: string; + finished: boolean; +}>(); +</script> + +<style scoped></style> diff --git a/src/components/Trials.vue b/src/components/Trials.vue new file mode 100644 index 0000000..5b9c6fa --- /dev/null +++ b/src/components/Trials.vue @@ -0,0 +1,22 @@ +<template> + <table> + <tr v-for="trial in trials" :key="trial"> + <Trial :length="length" :trial="trial" :finished=true /> + </tr> + <tr> + <Trial :length="length" :trial="currentTrial" :finished=false /> + </tr> + </table> +</template> + +<script setup lang="ts"> +import Trial from "@/components/Trial.vue"; + +defineProps<{ + length: number; + currentTrial: string; +}>(); +let trials = []; +</script> + +<style scoped></style> diff --git a/src/main.ts b/src/main.ts index 53919d0..c841dca 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,6 +1,6 @@ import { createApp } from "vue"; -import App from "./App.vue"; +import App from "./Wordle.vue"; import "./assets/main.css"; -createApp(App).mount("#app"); +createApp(App, { length: 5 }).mount("#wordle"); |