Implement nextLetter functionality

css/artsey-tutor.css

@@ -16,6 +16,7 @@
     padding: 20px;
     margin-top: 40px;
     margin-bottom: 40px;
+    background-color: antiquewhite;
 }
 
 .flex-items {
@@ -30,7 +31,6 @@
     align-self: auto;
     order: 0;
     width: 500px;
-    border: 2px black solid;
     font-size: 44px;
     text-align: center;
     margin: 0 auto 20px;
@@ -43,7 +43,6 @@
     flex-basis: auto;
     align-self: auto;
     order: 0;
-    border: 2px black solid;
     margin: 0 auto;
     width: 500px;
 }
@@ -57,6 +56,7 @@
     grid-row-gap: 12px;
     padding: 12px;
     margin: 0 auto;
+    background-color: slategray;
 }
 
 .keyboard-key {
@@ -64,6 +64,7 @@
     height: 100px;
     border: 2px solid black;
     margin: 2px;
+    background-color: white;
 }
 
 #keyboard-key:nth-child(1) {
@@ -96,4 +97,35 @@
 
 #keyboard-key:nth-child(8) {
     grid-area: 2 / 4 / 3 / 5;
+}
+
+#letterbox {
+    min-height: 100px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: normal;
+    align-content: normal;
+}
+
+.letterbox-letter, .letterbox-letter-hl {
+    width: 20px;
+    height: 36px;
+    font-size: 24px;
+    font-weight: bold;
+    color: black;
+    border-bottom: solid black 2px;
+    margin: 4px;
+    display: block;
+    flex-grow: 0;
+    flex-shrink: 1;
+    flex-basis: auto;
+    align-self: auto;
+    order: 0;
+}
+
+.letterbox-letter-hl {
+    border: solid black 2px;
+    background-color: yellow;
 }

index.html

@@ -28,7 +28,7 @@
                 <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">Dropdown <span class="caret"></span></a>
+                       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>
@@ -46,25 +46,27 @@
 </nav>
 
 <div class="flex-container">
-    <div class="flex-items" id="text-to-type">‎</div>
     <div class="flex-items">
-        <div id="keyboard">
+        <div id="letterbox">
-            <div class="keyboard-key"></div>
-            <div class="keyboard-key"></div>
-            <div class="keyboard-key"></div>
-            <div class="keyboard-key"></div>
-            <div class="keyboard-key"></div>
-            <div class="keyboard-key"></div>
-            <div class="keyboard-key"></div>
-            <div class="keyboard-key"></div>
         </div>
     </div>
+    <div class="flex-items" id="text-to-type">‎</div>
+    <div id="keyboard">
+        <div class="keyboard-key"></div>
+        <div class="keyboard-key"></div>
+        <div class="keyboard-key"></div>
+        <div class="keyboard-key"></div>
+        <div class="keyboard-key"></div>
+        <div class="keyboard-key"></div>
+        <div class="keyboard-key"></div>
+        <div class="keyboard-key"></div>
+    </div>
 </div>
+<script src="https://code.jquery.com/jquery-3.7.0.slim.min.js"
+        integrity="sha256-tG5mcZUtJsZvyKAxYLVXrmjKBVLd6VpVccqz/r4ypFE=" 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>
-<script src="https://code.jquery.com/jquery-3.7.0.slim.min.js"
-        integrity="sha256-tG5mcZUtJsZvyKAxYLVXrmjKBVLd6VpVccqz/r4ypFE=" crossorigin="anonymous"></script>
 <script src="js/artsey-tutor.js"></script>
 </body>
 </html>

js/artsey-tutor.js

@@ -1,4 +1,12 @@
 let mappings = {
+    'key_a': [1, 0, 0, 0, 0, 0, 0, 0],
+    'key_r': [0, 1, 0, 0, 0, 0, 0, 0],
+    'key_t': [0, 0, 1, 0, 0, 0, 0, 0],
+    'key_s': [0, 0, 0, 1, 0, 0, 0, 0],
+    'key_e': [0, 0, 0, 0, 1, 0, 0, 0],
+    'key_y': [0, 0, 0, 0, 0, 1, 0, 0],
+    'key_i': [0, 0, 0, 0, 0, 0, 1, 0],
+    'key_o': [0, 0, 0, 0, 0, 0, 0, 1],
     'key_q': [1, 0, 1, 1, 0, 0, 0, 0],
     'key_w': [1, 0, 0, 1, 0, 0, 0, 0],
     'key_u': [0, 0, 0, 0, 0, 1, 1, 0],
@@ -12,7 +20,7 @@ let mappings = {
     'key_l': [0, 0, 0, 0, 1, 1, 1, 0],
     'key_z': [1, 1, 1, 1, 0, 0, 0, 0],
     'key_x': [0, 1, 1, 1, 0, 0, 0, 0],
-    'key_c': [0, 0, 0, 1, 1, 0, 0, 0],
+    'key_c': [0, 0, 0, 0, 1, 1, 0, 0],
     'key_v': [0, 1, 0, 1, 0, 0, 0, 0],
     'key_b': [0, 0, 0, 0, 1, 0, 0, 1],
     'key_n': [0, 0, 0, 0, 0, 0, 1, 1],
@@ -26,33 +34,87 @@ let mappings = {
     'key_exclamation': [0, 0, 1, 0, 0, 0, 1, 0]
 }
 
-function artsey_draw(key_config) {
+async function artseyDraw() {
     let keys = $('.keyboard-key');
     for (let i = 0; i < keys.length; i++) {
-        if (key_config[i] === 1)
+        if (currentMapping[i] === 1)
             $(keys[i]).css('background-color', 'black');
         else
             $(keys[i]).css('background-color', 'white');
     }
 }
 
-function artsey_reset() {
+async function artseyReset() {
     let config = {'': [0, 0, 0, 0, 0, 0, 0, 0]};
-    artsey_draw(config);
+    await artseyDraw(config);
-    $('#letterbox').text('');
 }
 
 const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))
 
-let current_letter = '';
+async function setTypingText(text) {
+    $('#letterbox').empty();
+    console.log(text);
+    for (let i = 0; i < text.length; i++) {
+        let letter = text.charAt(i);
+        let div = "<div class='letterbox-letter'>" + letter + "</div>";
+        $(div).appendTo('#letterbox');
+        await sleep(80);
+    }
+}
+
+async function highlightLetter(letterDiv) {
+    $(letterDiv).removeClass("letterbox-letter");
+    $(letterDiv).addClass("letterbox-letter-hl");
+}
+
+async function unhighlightLetter(letterDiv) {
+    $(letterDiv).removeClass("letterbox-letter-hl");
+    $(letterDiv).addClass("letterbox-letter");
+}
+
+async function getMappingForLetter(letter) {
+    switch(letter) {
+        case ' ':
+            return "key_space";
+        case ',':
+            return "key_comma";
+        case 'enter':
+            return "key_enter";
+        case 'backspace':
+            return "key_backspace";
+        default:
+            return "key_" + letter.toLowerCase();
+    }
+}
+
+async function setNextLetter() {
+    if (currentletterIndex > currentString.length-1) {
+        return;
+    }
+    let prevIndex = currentletterIndex-1;
+    if (prevIndex >= -1) {
+        await unhighlightLetter($("#letterbox").children()[currentletterIndex]);
+    }
+    currentletterIndex++;
+    currentLetter = currentString.charAt(currentletterIndex).toLowerCase();
+    currentMapping = mappings[(await getMappingForLetter(currentLetter)).toString()];
+    await highlightLetter($("#letterbox").children()[currentletterIndex]);
+    await artseyDraw();
+}
+
+let currentletterIndex = -1;
+let currentLetter = '';
+let currentString = "hello world";
+let currentMapping = [0, 0, 0, 0, 0, 0, 0, 0];
 
 $(document).ready(async function () {
-    console.log("ready!");
+    console.log("ready! Here's a demo.");
-    for (let key in mappings) {
+    await sleep(1000);
+    await setTypingText(currentString);
+    await sleep(500);
+
+    for (let i = 0; i < currentString.length; i++) {
+        await setNextLetter();
         await sleep(1000);
-        console.log(key);
-        $('#text-to-type').text(key.split('_')[1].toLowerCase())
-        artsey_draw(mappings[key]);
     }
-    //artsey_reset();
 });