Implement draw function, add jquery (actually)

.gitignore

@@ -1 +1,3 @@
 ./idea
+.idea
+.idea/*

css/artsey-tutor.css

@@ -34,7 +34,7 @@
     margin-left: 12px;
 }
 
-.keyboard {
+#keyboard {
     width: 450px;
     border: 2px solid black;
     display: grid;
@@ -51,34 +51,34 @@
     margin: 2px;
 }
 
-.keyboard-key:nth-child(1) {
+#keyboard-key:nth-child(1) {
     grid-area: 1 / 1 / 2 / 2;
 }
 
-.keyboard-key:nth-child(2) {
+#keyboard-key:nth-child(2) {
     grid-area: 1 / 2 / 2 / 3;
 }
 
-.keyboard-key:nth-child(3) {
+#keyboard-key:nth-child(3) {
     grid-area: 1 / 3 / 2 / 4;
 }
 
-.keyboard-key:nth-child(4) {
+#keyboard-key:nth-child(4) {
     grid-area: 1 / 4 / 2 / 5;
 }
 
-.keyboard-key:nth-child(5) {
+#keyboard-key:nth-child(5) {
     grid-area: 2 / 1 / 3 / 2;
 }
 
-.keyboard-key:nth-child(6) {
+#keyboard-key:nth-child(6) {
     grid-area: 2 / 2 / 3 / 3;
 }
 
-.keyboard-key:nth-child(7) {
+#keyboard-key:nth-child(7) {
     grid-area: 2 / 3 / 3 / 4;
 }
 
-.keyboard-key:nth-child(8) {
+#keyboard-key:nth-child(8) {
     grid-area: 2 / 4 / 3 / 5;
 }

index.html

@@ -10,7 +10,7 @@
 <div class="flex-container">
     <div class="flex-items">asdf</div>
     <div class="flex-items">
-        <div class="keyboard">
+        <div id="keyboard">
             <div class="keyboard-key"></div>
             <div class="keyboard-key"></div>
             <div class="keyboard-key"></div>
@@ -22,5 +22,7 @@
         </div>
     </div>
 </div>
+<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
+<script src="js/artsey-tutor.js"></script>
 </body>
 </html>

js/artsey-tutor.js

@@ -0,0 +1,161 @@
+let key_q = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0]
+];
+
+let key_w = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0]
+];
+
+let key_e = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0]
+];
+
+let key_r = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0]
+];
+
+let key_t = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0]
+];
+
+let key_y = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0]
+];
+
+let key_u = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0]
+];
+
+let key_i = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0]
+];
+
+let key_o = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0]
+];
+
+let key_p = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0]
+];
+
+let key_a = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0]
+];
+
+let key_s = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0]
+];
+
+let key_d = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0]
+];
+
+let key_f = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0]
+];
+
+let key_g = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0]
+];
+
+let key_h = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0]
+];
+
+let key_j = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0]
+];
+
+let key_k = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0]
+];
+
+let key_l = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0]
+];
+
+let key_z = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0]
+];
+
+let key_x = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0]
+];
+
+let key_c = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0]
+];
+
+let key_v = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0]
+];
+
+let key_b = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0]
+];
+
+let key_n = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0]
+];
+
+let key_m = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0]
+];
+
+let key_comma = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0]
+];
+
+let key_period = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0]
+];
+
+let key_space = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0]
+];
+
+let key_enter = [0, 1, 0, 0, 1, 0, 1, 0, 0];
+
+function draw_artsey(config_array) {
+    let keys = $('.keyboard-key');
+    for (let i = 0; i < keys.length; i++) {
+        if (config_array[i] === 1)
+            $(keys[i]).css('background-color', 'black');
+        else
+            $(keys[i]).css('background-color', 'white');
+    }
+}
+
+$(document).ready(function() {
+    console.log( "ready!" );
+    draw_artsey(key_enter);
+});