Display status on keyboard
This commit is contained in:
parent
1c8f5453f6
commit
5127266fce
47
index.js
47
index.js
@ -123,6 +123,32 @@ function gameOver() {
|
||||
}, 0);
|
||||
}
|
||||
|
||||
let keys = {};
|
||||
let characters = [{}, {}, {}, {}];
|
||||
|
||||
function makeGradient(a, b, c, d) {
|
||||
const CORRECT = "rgb(0 204 136)";
|
||||
const POSITION = "rgb(255 204 0)";
|
||||
const OTHER = "rgb(156, 163, 175)";
|
||||
const color = {
|
||||
"correct": CORRECT,
|
||||
"position": POSITION
|
||||
};
|
||||
if (a === "nope" && b === "nope" && c === "nope" && d === "nope") {
|
||||
return "rgb(21 94 117)";
|
||||
}
|
||||
const style = "conic-gradient(" +
|
||||
(color[a] || OTHER) + " 0deg," +
|
||||
(color[a] || OTHER) + " 90deg," +
|
||||
(color[b] || OTHER) + " 90deg," +
|
||||
(color[b] || OTHER) + " 180deg," +
|
||||
(color[c] || OTHER) + " 180deg," +
|
||||
(color[c] || OTHER) + " 270deg," +
|
||||
(color[d] || OTHER) + " 270deg," +
|
||||
(color[d] || OTHER) + " 360deg)";
|
||||
return style;
|
||||
}
|
||||
|
||||
function processKey(e) {
|
||||
if (e.key === "Enter" && guessed.length < MAX_GUESSES) {
|
||||
if (input.length < 5) {
|
||||
@ -145,6 +171,7 @@ function processKey(e) {
|
||||
if (word[i] === input[i]) {
|
||||
hints[i] = "correct";
|
||||
used[i] = true;
|
||||
characters[pos][input[i]] = "correct";
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < WORD_LENGTH; i++) {
|
||||
@ -159,10 +186,18 @@ function processKey(e) {
|
||||
if (input[i] === word[j]) {
|
||||
hints[i] = "position";
|
||||
used[j] = true;
|
||||
if (characters[pos][input[i]] !== "correct") {
|
||||
characters[pos][input[i]] = "position";
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < WORD_LENGTH; i++) {
|
||||
if (!characters[pos][input[i]]) {
|
||||
characters[pos][input[i]] = "nope";
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < WORD_LENGTH; i++) {
|
||||
const el = data[pos * MAX_GUESSES + guessed.length][i];
|
||||
if (hints[i] === "correct") {
|
||||
@ -183,6 +218,17 @@ function processKey(e) {
|
||||
}
|
||||
saveLocalStorage();
|
||||
input = "";
|
||||
for (let char in keys) {
|
||||
const c = char.toUpperCase();
|
||||
if (characters[0][c] || characters[1][c] || characters[2][c] || characters[3][c]) {
|
||||
keys[char].style.background = makeGradient(characters[0][c], characters[1][c], characters[2][c], characters[3][c]);
|
||||
if (characters[0][c] === "nope" && characters[1][c] === "nope" && characters[2][c] === "nope" && characters[3][c] === "nope") {
|
||||
keys[char].style.opacity = "0.5";
|
||||
} else {
|
||||
keys[char].style.color = "#000";
|
||||
}
|
||||
}
|
||||
}
|
||||
if (guessed.length == MAX_GUESSES || done.indexOf(false) === -1) {
|
||||
gameOver();
|
||||
}
|
||||
@ -250,6 +296,7 @@ for (let i = 0; i < 3; i++) {
|
||||
button.className = "key";
|
||||
button.addEventListener("click", e => processKey({ key: c }));
|
||||
row.appendChild(button);
|
||||
keys[c] = button;
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user