diff options
-rw-r--r-- | index.html | 43 |
1 files changed, 42 insertions, 1 deletions
@@ -137,6 +137,7 @@ td.black {background-color: #000000;} .querySelector("#column_" + i) .className = colors[response.colors[i-1]]; } + colorizeKeyboard(); addNewRow(); } } @@ -153,6 +154,46 @@ td.black {background-color: #000000;} cursor_column = Math.min(5,Math.max(0,cursor_column + cursor_increment)); updateCursorDisplay(); }; + colorizeKeyboard = function(){ + for (let i=1; i<=5; i++) { + const char = + table + .querySelector("#row_" + row_count) + .querySelector("#column_" + i) + .innerHTML; + const oldColor = + document + .getElementById("key_" + char) + .className; + const recentColor = + table + .querySelector("#row_" + row_count) + .querySelector("#column_" + i) + .className; + var newColor = oldColor; + switch (oldColor) { + case "green": + break; + case "yellow": + if (recentColor == "green") { + newColor = recentColor; + } + break; + case "white": + newColor = recentColor; + break; + default: + newColor = recentColor; + break; + }; + if (newColor == "white") { + newColor = "black"; + } + document + .getElementById("key_" + char) + .className = newColor; + }; + }; addNewRow(); createPuzzle(); for (i=1; i<=3; i++) { @@ -177,7 +218,7 @@ td.black {background-color: #000000;} .getElementById('keyboard') .getElementsByTagName("tbody")[0] .querySelector("#row_" + row) - .innerHTML += "<td id=\"key_" + c + "\" style=\"" + cell_style + "\"><button onclick=\"pressButton('" + pbc + "')\">" + c + "</button></td>"; + .innerHTML += "<td class=\"white\" 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); } |