alvierahman90/words
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

show available letters on keyboard

Browse Source
This commit is contained in:
Akbar Rahman 2022-01-28 02:23:55 +00:00
parent 73701c54ec
commit 30965c20ba
Signed by: alvierahman90
GPG Key ID: 20609519444A1269
2 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
game.js
View File

@ -23,6 +23,7 @@ const kbBackspace = document.getElementById("kb_backspace")
const gridItemId = (row, column) => "grid_item_" + row + "_" + column const gridItemId = (row, column) => "grid_item_" + row + "_" + column
const getGridRow = (row) => gridItems[row] const getGridRow = (row) => gridItems[row]
const getGridItem = (row, column) => gridItems[row].items[column] const getGridItem = (row, column) => gridItems[row].items[column]
const getkbLetter = letter => kbLetters.filter(kbl => kbl.innerHTML.toLowerCase() === letter.toLowerCase())[0]
const isLetter = string => /^[a-zA-Z]$/.test(string) const isLetter = string => /^[a-zA-Z]$/.test(string)
@ -57,11 +58,14 @@ function checkGridRow() {
if (gridItem.letter === word[column]) { if (gridItem.letter === word[column]) {
gridItem.HTMLItem.classList.add('grid_correct') gridItem.HTMLItem.classList.add('grid_correct')
getkbLetter(gridItem.letter).classList.add('kb_letter_correct_discovered')
correct_letters += 1 correct_letters += 1
} else if (dedupword.includes(gridItem.letter)) { } else if (dedupword.includes(gridItem.letter)) {
gridItem.HTMLItem.classList.add('grid_present') gridItem.HTMLItem.classList.add('grid_present')
getkbLetter(gridItem.letter).classList.add('kb_letter_present_discovered')
} else { } else {
gridItem.HTMLItem.classList.add('grid_wrong') gridItem.HTMLItem.classList.add('grid_wrong')
getkbLetter(gridItem.letter).classList.add('kb_letter_incorrect_discovered')
} }
dedupword = dedupword.replace(gridItem.letter, '') dedupword = dedupword.replace(gridItem.letter, '')

18
styles.css
View File

@ -13,6 +13,8 @@
--blue: #7cafc2; --blue: #7cafc2;
--purple: #ba8baf; --purple: #ba8baf;
--brown: #a16946; --brown: #a16946;
--kb-key-width: min(9vw, 3em);
--kb-filler-width: min(4.5vw, 3em);
} }
body { body {
@ -60,7 +62,7 @@ body {
.grid_correct { background-color: var(--green)} .grid_correct { background-color: var(--green)}
.grid_present { background-color: var(--yellow)} .grid_present { background-color: var(--yellow)}
.grid_wrong { background-color: var(--default-bg)} .grid_wrong { background-color: var(--dark-bg)}
.correct { .correct {
animation: correct 0.5s; animation: correct 0.5s;
@ -144,16 +146,20 @@ body {
} }
.kb_row * { .kb_row * {
width: min(10vw, 3em); width: var(--kb-key-width);
height: min(10vw, 3em); height: var(--kb-key-width);
margin: min(0.5vw, 0.15em);
text-align: center; text-align: center;
margin: 0;
} }
.kb_filler { .kb_filler {
width: min(5vw, 1.5em); width: var(--kb-filler-width);
} }
.kb_letter { .kb_letter {
line-height: min(10vw, 3em) line-height: var(--kb-key-width);
} }
.kb_letter_incorrect_discovered { background: var(--dark-bg) }
.kb_letter_correct_discovered { background: var(--green) !important }
.kb_letter_present_discovered { background: var(--yellow) }