make trial reactive

1 files changed, 6 insertions, 5 deletions

diff --git a/src/App.vue b/src/App.vue
index 28f621a..3ed7441 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <h1>Wördle</h1>
   <button @click="createPuzzle">new Puzzle</button>
-  <div>{{ trial }}</div>
+  <div>{{ current.trial }}</div>
   <Keyboard
     :add-letter="addLetter"
     :navigate="navigate"
@@ -11,9 +11,10 @@
 
 <script setup lang="ts">
 import Keyboard from "@/components/Keyboard.vue";
+import { reactive } from "vue";
 
 let riddle: string = "";
-let trial: string = "";
+let current = reactive({ trial: "" });
 let cursorPosition: number = 0;
 
 function createPuzzle() {
@@ -21,7 +22,7 @@ function createPuzzle() {
   request.onreadystatechange = function () {
     if (this.readyState == 4 && this.status == 200) {
       riddle = JSON.parse(request.responseText).riddle;
-      trial = "";
+      current.trial = "";
       cursorPosition = 0;
     }
   };
@@ -30,12 +31,12 @@ function createPuzzle() {
 }
 
 function addLetter(letter: string) {
-  trial = trial + letter;
+  current.trial = current.trial + letter;
   console.log("letter " + letter + " added");
 }
 
 function removeLetter() {
-  trial = trial.substring(0, -1);
+  current.trial = current.trial.substring(0, -1);
 }
 
 function navigate(direction: "left" | "right" | "first" | "last") {