hand through the colors to Trial, properly create new lines when new trial starts

3 files changed, 45 insertions, 11 deletions

diff --git a/src/Wordle.vue b/src/Wordle.vue
index 4f3c32c..c57f0fa 100644
--- a/src/Wordle.vue
+++ b/src/Wordle.vue
@@ -21,7 +21,12 @@ import Trials from "@/components/Trials.vue";
 let riddle: string = "";
 let current = reactive({
   trial: "",
-  backendResponse: {},
+  backendResponse: {
+    trial: "",
+    is_in_dictionary: true,
+    is_solved: false,
+    colors: [],
+  },
 });
 
 let props = defineProps<{ length: number }>();
@@ -53,6 +58,9 @@ function submit() {
   xmlHttp.onreadystatechange = function () {
     if (this.readyState == 4 && this.status == 200) {
       current.backendResponse = JSON.parse(xmlHttp.responseText);
+      if (current.backendResponse.is_in_dictionary) {
+        current.trial = "";
+      }
     }
   };
   xmlHttp.open(
diff --git a/src/components/Trial.vue b/src/components/Trial.vue
index 3192c15..28d7a0e 100644
--- a/src/components/Trial.vue
+++ b/src/components/Trial.vue
@@ -1,15 +1,18 @@
 <template>
   <td v-for="i in length" :key="i">
     <div>
-      {{ trial[i - 1] }}
+      {{ trial[i - 1] ? trial[i - 1] : "&nbsp;" }}
     </div>
   </td>
 </template>
 
+// TODO: colorize according to props.colors
+
 <script setup lang="ts">
 defineProps<{
   length: number;
   trial: string;
+  colors: number[];
   finished: boolean;
 }>();
 </script>
diff --git a/src/components/Trials.vue b/src/components/Trials.vue
index f1b67a0..c048fdc 100644
--- a/src/components/Trials.vue
+++ b/src/components/Trials.vue
@@ -1,28 +1,45 @@
 <template>
-  <table class="trials-table" v-bind:class="{ error: !backendResponse.is_in_dictionary }">
+  <table
+    class="trials-table"
+    v-bind:class="{
+      solved: backendResponse.is_solved,
+      error: !backendResponse.is_in_dictionary,
+    }"
+  >
     <tr v-for="trial in trials" :key="trial">
-      <Trial :length="length" :trial="trial" :finished="true" />
+      <Trial
+        :length="length"
+        :trial="trial.text"
+        :colors="trial.colors"
+        :finished="true"
+      />
     </tr>
     <tr>
-      <Trial :length="length" :trial="currentTrial" :finished="false" />
+      <Trial
+        :length="length"
+        :trial="currentTrial"
+        :colors="[]"
+        :finished="false"
+      />
     </tr>
   </table>
 </template>
 
 <script setup lang="ts">
 import Trial from "@/components/Trial.vue";
-import {watch} from "vue";
+import { watch } from "vue";
 
 let props = defineProps<{
   length: number;
   currentTrial: string;
   backendResponse: {
+    trial: string;
     is_in_dictionary: boolean;
     is_solved: boolean;
     colors: number[];
   };
 }>();
-let trials = [];
+let trials: { text: string; colors: number[] }[] = [];
 
 watch(
   () => props.backendResponse,
@@ -32,13 +49,16 @@ watch(
       return;
     }
     if (response.is_solved) {
-      // TODO: handle solved
       console.log("You won!");
       return;
     }
-    // TODO: handle valid, non-solving response
-    // * add new row
-    // * colorize last trial
+    trials = trials.concat([
+      {
+        text: props.backendResponse.trial.toUpperCase(),
+        colors: props.backendResponse.colors,
+      },
+    ]);
+    console.log(trials);
     console.log(JSON.stringify(response));
   }
 );
@@ -54,4 +74,7 @@ watch(
 .trials-table.error {
   background-color: #800000;
 }
+.trials-table.solved {
+  background-color: #008000;
+}
 </style>