move app, add some trials, change keyboard capabilities

1 files changed, 39 insertions, 18 deletions

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>