diff options
| author | Erich Eckner <git@eckner.net> | 2022-12-22 19:14:18 +0100 |
|---|---|---|
| committer | Erich Eckner <git@eckner.net> | 2022-12-22 19:14:18 +0100 |
| commit | 42d9ea94c95d2781bec2ffd37432a8a9c26f8dee (patch) | |
| tree | a44c9adda7269cd434cc6f1c20dafea1906f5c4c | |
| parent | a0e1c039ed69987dbed56164696c736d575c2959 (diff) | |
| download | wordle-frontend-42d9ea94c95d2781bec2ffd37432a8a9c26f8dee.tar.xz | |
some progress:
* we can create a riddle
* add lines dynamically
* get a json response from the backend
| -rw-r--r-- | index.html | 63 |
1 files changed, 59 insertions, 4 deletions
@@ -3,13 +3,35 @@ <body> <h1>wordle</h1> <table id="the_table"> -<tr id="row_1"> -</tr> </table> +<p id="debug"></p> <script> let table = document.getElementById("the_table"); + let row_count = 0; + let cursor_column = 1; + let puzzle = ''; + createPuzzle = function() { + var request = new XMLHttpRequest(); + request.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + puzzle = JSON.parse(request.responseText).riddle; + } + } + request.open( "GET", "https://wordle-backend.eckner.net/create", true ); + request.send(); + } + addNewRow = function() { + row_count++; + the_table.innerHTML += "<tr id=\"row_" + row_count + "\"></td>"; + for (let i = 1; i <= 5; i++) { + the_table + .querySelector("#row_" + row_count) + .innerHTML += "<td id=\"column_" + i + "\"></td>"; + } + }; onKeyDown = function(event){ - let to_print = ""; + let to_print = ''; + let cursor_increment = 1; if (event.keyCode >= 65 && event.keyCode < 91) { to_print = String.fromCharCode(event.keyCode); } else if (event.keyCode == 59) { @@ -20,11 +42,44 @@ to_print = 'Ü'; } else if (event.keyCode == 222) { to_print = 'Ä'; + } else if (event.keyCode == 8 ) { + if (cursor_column > 1) { + cursor_column--; + } + to_print = ' '; + cursor_increment = 0; + } else if (event.keyCode == 46 ) { + to_print = ' '; + cursor_increment = 0; + } else if (event.keyCode == 37 ) { + cursor_increment = -1; + } else if (event.keyCode == 39 ) { + cursor_increment = 1; + } else if (event.keyCode == 13 ) { + trial = 'abcdef'; + var xmlHttp = new XMLHttpRequest(); + xmlHttp.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + document.getElementById('debug').innerHTML = xmlHttp.responseText; + } + } + xmlHttp.open( "GET", "https://wordle-backend.eckner.net/try/" + trial + '?riddle=' + puzzle, true ); + xmlHttp.send( null ); + cursor_increment = 0; } else { to_print = event.keyCode; + cursor_increment = 0; }; - table.querySelector("#row_1").innerHTML = "<td>" + to_print + "</td><td>" + to_print + "</td><td>" + to_print + "</td><td>" + to_print + "</td><td>" + to_print + "</td>"; + if (to_print !== '') { + table + .querySelector("#row_" + row_count) + .querySelector("#column_" + cursor_column) + .innerHTML = to_print; + } + cursor_column = Math.min(5,Math.max(0,cursor_column + cursor_increment)); }; + addNewRow(); + createPuzzle(); document.body.addEventListener("keydown", onKeyDown); </script> </body> |