From f4744db60ac05178fa5ee554526cd9db4c19b671 Mon Sep 17 00:00:00 2001
From: Zach Graham <z@zacg.com>
Date: Fri, 4 Aug 2023 23:01:34 -0500
Subject: [PATCH] Add start button and cleanup

---
 css/artsey-tutor.css |  7 +++++++
 index.html           | 24 ++++++------------------
 js/artsey-tutor.js   | 28 +++++++++++++++++-----------
 3 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/css/artsey-tutor.css b/css/artsey-tutor.css
index befcc4a..64fbd82 100644
--- a/css/artsey-tutor.css
+++ b/css/artsey-tutor.css
@@ -62,6 +62,7 @@ body {
     padding: 12px;
     margin: 0 auto;
     background-color: slategray;
+    visibility: collapse;
 }
 
 .keyboard-key {
@@ -138,4 +139,10 @@ body {
 #typing-text {
     visibility:hidden;
     position: absolute;
+}
+
+#startButton {
+    width: 200px;
+    font-size: 36px;
+    background-color: steelblue;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 3e8eddc..6807769 100644
--- a/index.html
+++ b/index.html
@@ -24,21 +24,9 @@
         <div id="navbar" class="navbar-collapse collapse">
             <ul class="nav navbar-nav">
                 <li class="active"><a href="#">Home</a></li>
-                <li><a href="#about">About</a></li>
-                <li><a href="#contact">Contact</a></li>
-                <li class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
-                       aria-expanded="false">Learn ARTSEY<span class="caret"></span></a>
-                    <ul class="dropdown-menu">
-                        <li><a href="#">Action</a></li>
-                        <li><a href="#">Another action</a></li>
-                        <li><a href="#">Something else here</a></li>
-                        <li role="separator" class="divider"></li>
-                        <li class="dropdown-header">Nav header</li>
-                        <li><a href="#">Separated link</a></li>
-                        <li><a href="#">One more separated link</a></li>
-                    </ul>
-                </li>
+                <li><a href="/about">About</a></li>
+                <li><a href="/contact">Contact</a></li>
+                <li><a href="/learn">Learn</a></li>
             </ul>
             <ul class="nav navbar-nav navbar-right"></ul>
         </div>
@@ -49,8 +37,8 @@
     <div class="flex-items">
         <div id="letterbox">
         </div>
+        <button id="startButton" type="button" class="btn btn-primary">Start!</button>
     </div>
-    <div class="flex-items" id="text-to-type">‎</div>
     <div id="keyboard">
         <div class="keyboard-key"></div>
         <div class="keyboard-key"></div>
@@ -68,8 +56,8 @@
         <input id="typing-text" type="text" value="Hello there">
     </fieldset>
 </form>
-<script src="https://code.jquery.com/jquery-3.7.0.slim.min.js"
-        integrity="sha256-tG5mcZUtJsZvyKAxYLVXrmjKBVLd6VpVccqz/r4ypFE=" crossorigin="anonymous"></script>
+<script src="https://code.jquery.com/jquery-3.7.0.min.js"
+        integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
         integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
         crossorigin="anonymous"></script>
diff --git a/js/artsey-tutor.js b/js/artsey-tutor.js
index 1794a4b..83eb4fe 100644
--- a/js/artsey-tutor.js
+++ b/js/artsey-tutor.js
@@ -67,7 +67,7 @@ async function highlightLetter(letterDiv) {
     $(letterDiv).addClass("letterbox-letter-hl");
 }
 
-async function unhighlightLetter(letterDiv) {
+async function unHighlightLetter(letterDiv) {
     $(letterDiv).removeClass("letterbox-letter-hl");
     $(letterDiv).addClass("letterbox-letter");
 }
@@ -95,7 +95,7 @@ async function setNextLetter() {
         return;
     let prevIndex = currentLetterIndex-1;
     if (prevIndex >= -1)
-        await unhighlightLetter(letterbox.children()[currentLetterIndex]);
+        await unHighlightLetter(letterbox.children()[currentLetterIndex]);
     currentLetterIndex++;
     currentLetter = currentString.charAt(currentLetterIndex).toLowerCase();
     currentMapping = mappings[(await getMappingForLetter(currentLetter)).toString()];
@@ -109,14 +109,20 @@ let currentString = "hello world";
 let currentMapping = [0, 0, 0, 0, 0, 0, 0, 0];
 
 $(document).ready(async function () {
-    $('body').on("keyup", (function(e) {
-        console.log("current letter: " + currentLetter + " typed letter: " + String.fromCharCode(e.which).toLowerCase());
-        if (currentLetter === String.fromCharCode(e.which).toLowerCase())
-            setNextLetter();
-    }));
+    $("#startButton").on("click", async function () {
+        $('#startButton').hide();
+        $('body').on("keyup", (async function(e) {
+            console.log("current letter: " + currentLetter + " typed letter: " + String.fromCharCode(e.which).toLowerCase());
+            if (currentLetter === String.fromCharCode(e.which).toLowerCase())
+                await setNextLetter();
+        }));
 
-    await sleep(1000);
-    await setTypingText(currentString);
-    await sleep(500);
-    await setNextLetter();
+        await sleep(1000);
+        await setTypingText(currentString);
+        await sleep(500);
+        await setNextLetter();
+        $("#keyboard").css({opacity: 0, visibility: "visible"}).animate({opacity: 100}, 200, function () {
+            console.log("keyboard visible!");
+        });
+    })
 });
\ No newline at end of file