diff options
| author | Erich Eckner <git@eckner.net> | 2022-12-23 22:10:37 +0100 |
|---|---|---|
| committer | Erich Eckner <git@eckner.net> | 2022-12-23 22:10:37 +0100 |
| commit | b036d575259e8a801645426b51a70349bc39217d (patch) | |
| tree | c07c3c09e5089808c073e7c58f7ef2bb4966137a | |
| parent | e01d03ff45650c636460f10154c0d9a6ac61a629 (diff) | |
| download | wordle-frontend-b036d575259e8a801645426b51a70349bc39217d.tar.xz | |
some keyboard at all
| -rw-r--r-- | index.html | 77 |
1 files changed, 62 insertions, 15 deletions
@@ -3,6 +3,7 @@ <body> <h1>wordle</h1> <table id="the_table"><tbody></tbody></table> +<table id="keyboard"><tbody></tbody></table> <p id="debug"></p> <script> let table = document.getElementById("the_table").getElementsByTagName("tbody")[0]; @@ -49,33 +50,49 @@ 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); + pressButton(String.fromCharCode(event.keyCode)); } else if (event.keyCode == 59) { - to_print = 'Ö'; + pressButton('Ö'); } else if (event.keyCode == 63) { - to_print = 'ß'; + pressButton('ß'); } else if (event.keyCode == 219) { - to_print = 'Ü'; + pressButton('Ü'); } else if (event.keyCode == 222) { - to_print = 'Ä'; + pressButton('Ä'); } else if (event.keyCode == 8 ) { + pressButton('#backspace'); + } else if (event.keyCode == 46 ) { + pressButton('#delete'); + } else if (event.keyCode == 37 ) { + pressButton('#left'); + } else if (event.keyCode == 39 ) { + pressButton('#right'); + } else if (event.keyCode == 13 ) { + pressButton('#enter'); + } + } + pressButton = function(key){ + let to_print = key; + let cursor_increment = 1; + table.removeAttribute('bgcolor'); + if (key == '#backspace') { if (cursor_column > 1) { cursor_column--; } to_print = ' '; cursor_increment = 0; - } else if (event.keyCode == 46 ) { + } else if (key == '#delete' ) { to_print = ' '; cursor_increment = 0; - } else if (event.keyCode == 37 ) { + } else if (key == '#left' ) { + to_print = ''; cursor_increment = -1; - } else if (event.keyCode == 39 ) { + } else if (key == '#right' ) { + to_print = ''; cursor_increment = 1; - } else if (event.keyCode == 13 ) { + } else if (key == '#enter' ) { + to_print = ''; trial = ''; for (i=1; i<=5; i++) { char = table @@ -126,9 +143,6 @@ 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; }; if (to_print !== '') { table @@ -141,6 +155,39 @@ }; addNewRow(); createPuzzle(); + for (i=1; i<=3; i++) { + document + .getElementById('keyboard') + .getElementsByTagName("tbody")[0] + .innerHTML += "<tr id=\"row_" + i + "\" style=\"height:2em\"></tr>"; + } + addCharToKeyboard = function(c, row) { + switch (c) { + case '<': + pbc = '#backspace'; + break; + case 'Ok': + pbc = '#enter'; + break; + default: + pbc = c; + break; + } + document + .getElementById('keyboard') + .getElementsByTagName("tbody")[0] + .querySelector("#row_" + row) + .innerHTML += "<td id=\"key_" + c + "\" style=\"" + cell_style + "\"><button onclick=\"pressButton('" + pbc + "')\">" + c + "</button></td>"; + } + addCharToKeyboardOne = function(c, index, array) { addCharToKeyboard(c,1); } + addCharToKeyboardTwo = function(c, index, array) { addCharToKeyboard(c,2); } + addCharToKeyboardThree = function(c, index, array) { addCharToKeyboard(c,3); } + const rowOne = ['Q','W','E','R','T','Z','U','I','O','P','Ü']; + const rowTwo = ['A','S','D','F','G','H','J','K','L','Ö','Ä']; + const rowThree = ['<','Y','X','C','V','B','N','M','ß','Ok']; + rowOne.forEach(addCharToKeyboardOne); + rowTwo.forEach(addCharToKeyboardTwo); + rowThree.forEach(addCharToKeyboardThree); document.body.addEventListener("keydown", onKeyDown); </script> </body> |