frontend soweit funktional (aber hässlich)

1 files changed, 67 insertions, 5 deletions

diff --git a/index.html b/index.html
index d3de991..0023cbc 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,7 @@
   let row_count = 0;
   let cursor_column = 1;
   let puzzle = '';
+  const cell_style = 'text-align: center; vertical-align: middle; width:2em; border: 1px';
   createPuzzle = function() {
     var request = new XMLHttpRequest();
     request.onreadystatechange = function() {
@@ -20,18 +21,38 @@
     request.open( "GET", "https://wordle-backend.eckner.net/create", true );
     request.send();
   }
+  updateCursorDisplay = function() {
+    for (let z = 1; z <= row_count; z++) {
+      for (let s = 1; s <= 5; s++) {
+        if (z == row_count && s == cursor_column) {
+          table
+            .querySelector("#row_" + z)
+            .querySelector("#column_" + s)
+            .setAttribute('style', cell_style + ' solid black');
+        } else {
+          table
+            .querySelector("#row_" + z)
+            .querySelector("#column_" + s)
+            .setAttribute('style', cell_style);
+        }
+      }
+    }
+  }
   addNewRow = function() {
     row_count++;
-    the_table.innerHTML += "<tr id=\"row_" + row_count + "\"></td>";
+    the_table.innerHTML += "<tr id=\"row_" + row_count + "\" style=\"height:2em\"></td>";
     for (let i = 1; i <= 5; i++) {
       the_table
         .querySelector("#row_" + row_count)
-        .innerHTML += "<td id=\"column_" + i + "\"></td>";
+        .innerHTML += "<td id=\"column_" + i + "\" style=\"" + cell_style + "\"></td>";
     }
+    cursor_column = 1;
+    updateCursorDisplay();
   };
   onKeyDown = function(event){
     let to_print = '';
     let cursor_increment = 1;
+    table.removeAttribute('bgcolor');
     if (event.keyCode >= 65 && event.keyCode < 91) {
       to_print = String.fromCharCode(event.keyCode);
     } else if (event.keyCode == 59) {
@@ -56,18 +77,58 @@
     } else if (event.keyCode == 39 ) {
       cursor_increment = 1;
     } else if (event.keyCode == 13 ) {
-      trial = 'abcdef';
+      trial = '';
+      for (i=1; i<=5; i++) {
+        char = table
+          .querySelector("#row_" + row_count)
+          .querySelector("#column_" + i)
+          .innerHTML;
+        trial += char;
+      }
       var xmlHttp = new XMLHttpRequest();
       xmlHttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {
-          document.getElementById('debug').innerHTML = xmlHttp.responseText;
+          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++) {
+            switch (response.colors[i-1]) {
+              case 0:
+                color = '#ffffff';
+                break;
+              case 1:
+                color = '#ffff80';
+                break;
+              case 2:
+                color = '#80ff80';
+                break;
+              default:
+                color = '#ff80ff';
+            }
+            table
+              .querySelector("#row_" + row_count)
+              .querySelector("#column_" + i)
+              .setAttribute('bgcolor', color);
+          }
+          addNewRow();
         }
       }
       xmlHttp.open( "GET", "https://wordle-backend.eckner.net/try/" + trial + '?riddle=' + puzzle, true );
       xmlHttp.send( null );
       cursor_increment = 0;
     } else {
-      to_print = event.keyCode;
+//      to_print = event.keyCode;
       cursor_increment = 0;
     };
     if (to_print !== '') {
@@ -77,6 +138,7 @@
         .innerHTML = to_print;
     }
     cursor_column = Math.min(5,Math.max(0,cursor_column + cursor_increment));
+    updateCursorDisplay();
   };
   addNewRow();
   createPuzzle();