UI tweaks
This commit is contained in:
parent
f4f9921f45
commit
6f0fe9afad
|
|
@ -35,7 +35,6 @@ body {
|
|||
flex-basis: auto;
|
||||
align-self: auto;
|
||||
order: 0;
|
||||
width: 400px;
|
||||
font-size: 28px;
|
||||
text-align: center;
|
||||
margin: 0 auto 20px;
|
||||
|
|
@ -49,7 +48,6 @@ body {
|
|||
align-self: auto;
|
||||
order: 0;
|
||||
margin: 0 auto;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
#keyboard {
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@ async function setNextLetter() {
|
|||
if (currentLetterIndex > currentString.length-1)
|
||||
return;
|
||||
let prevIndex = currentLetterIndex-1;
|
||||
if (prevIndex >= -1)
|
||||
if (prevIndex >= -1 || currentLetterIndex === 0)
|
||||
await unHighlightLetter(letterbox.children()[currentLetterIndex]);
|
||||
currentLetterIndex++;
|
||||
currentLetter = currentString.charAt(currentLetterIndex).toLowerCase();
|
||||
|
|
@ -103,6 +103,13 @@ async function setNextLetter() {
|
|||
await artseyDraw();
|
||||
}
|
||||
|
||||
async function showWrongInput() {
|
||||
let letter = $("#letterbox").children()[currentLetterIndex];
|
||||
$(letter).css("background-color", "red").animate(1000).delay(500).queue(function () {
|
||||
$(letter).css("background-color", "yellow").animate(1000);
|
||||
})
|
||||
}
|
||||
|
||||
let currentLetterIndex = -1;
|
||||
let currentLetter = '';
|
||||
let currentString = "hello world";
|
||||
|
|
@ -115,6 +122,8 @@ $(document).ready(async function () {
|
|||
console.log("current letter: " + currentLetter + " typed letter: " + String.fromCharCode(e.which).toLowerCase());
|
||||
if (currentLetter === String.fromCharCode(e.which).toLowerCase())
|
||||
await setNextLetter();
|
||||
else
|
||||
await showWrongInput();
|
||||
}));
|
||||
|
||||
await sleep(1000);
|
||||
|
|
|
|||
Loading…
Reference in New Issue