From 6f0fe9afad268774f7c1c500e5b34a703ddf478a Mon Sep 17 00:00:00 2001
From: Zach Graham <z@zacg.com>
Date: Tue, 15 Aug 2023 23:12:21 -0500
Subject: [PATCH] UI tweaks

---
 css/artsey-tutor.css |  2 --
 js/artsey-tutor.js   | 11 ++++++++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/css/artsey-tutor.css b/css/artsey-tutor.css
index 06f8fef..4e71f1e 100644
--- a/css/artsey-tutor.css
+++ b/css/artsey-tutor.css
@@ -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 {
diff --git a/js/artsey-tutor.js b/js/artsey-tutor.js
index 47419b6..cb886ab 100644
--- a/js/artsey-tutor.js
+++ b/js/artsey-tutor.js
@@ -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);