move app, add some trials, change keyboard capabilities

5 files changed, 81 insertions, 21 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>
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");