diff --git a/css/artsey-tutor.css b/css/artsey-tutor.css index 018df18..ba07d25 100644 --- a/css/artsey-tutor.css +++ b/css/artsey-tutor.css @@ -81,4 +81,9 @@ #keyboard-key:nth-child(8) { grid-area: 2 / 4 / 3 / 5; +} + +.flex-items:nth-child(1) { + margin: 0 auto; + font-size: 44px; } \ No newline at end of file diff --git a/index.html b/index.html index 1f21883..0e5964a 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@
-
asdf
+
@@ -22,7 +22,7 @@
- + \ No newline at end of file diff --git a/js/artsey-tutor.js b/js/artsey-tutor.js index a9dfce9..681bc2e 100644 --- a/js/artsey-tutor.js +++ b/js/artsey-tutor.js @@ -1,39 +1,32 @@ let mappings = { - 'key_q' : [1, 0, 1, 1, 0, 0, 0, 0, 0], - 'key_w' : [0, 0, 0, 0, 0, 0, 0, 0, 0], - 'key_e' : [0, 0, 0, 0, 0, 0, 0, 0, 0], - 'key_r' : [0, 0, 0, 0, 0, 0, 0, 0, 0], - 'key_t' : [0, 0, 0, 0, 0, 0, 0, 0, 0], - 'key_y' : [0, 0, 0, 0, 0, 0, 0, 0, 0], - 'key_u' : [0, 0, 0, 0, 0, 0, 0, 0, 0], - 'key_i' : [0, 0, 0, 0, 0, 0, 0, 0, 0], - 'key_o' : [0, 0, 0, 0, 0, 0, 0, 0, 0], - 'key_p' : [0, 0, 0, 0, 0, 0, 0, 0, 0], - 'key_a' : [0, 0, 0, 0, 0, 0, 0, 0, 0], - 'key_s' : [0, 0, 0, 0, 0, 0, 0, 0, 0], - 'key_d' : [0, 0, 0, 0, 0, 0, 0, 0, 0], - 'key_f' : [0, 0, 0, 0, 0, 0, 0, 0, 0], - 'key_g' : [0, 0, 0, 0, 0, 0, 0, 0, 0], - 'key_h' : [0, 0, 0, 0, 0, 0, 0, 0, 0], - 'key_j' : [0, 0, 0, 0, 0, 0, 0, 0, 0], - 'key_k' : [0, 0, 0, 0, 0, 0, 0, 0, 0], - 'key_l' : [0, 0, 0, 0, 0, 0, 0, 0, 0], - 'key_z' : [0, 0, 0, 0, 0, 0, 0, 0, 0], - 'key_x' : [0, 0, 0, 0, 0, 0, 0, 0, 0], - 'key_c' : [0, 0, 0, 0, 0, 0, 0, 0, 0], - 'key_v' : [0, 0, 0, 0, 0, 0, 0, 0, 0], - 'key_b' : [0, 0, 0, 0, 0, 0, 0, 0, 0], - 'key_n' : [0, 0, 0, 0, 0, 0, 0, 0, 0], - 'key_m' : [0, 0, 0, 0, 0, 0, 0, 0, 0], - 'key_space' : [0, 0, 0, 0, 0, 0, 0, 0, 0], - 'key_enter' : [0, 0, 0, 0, 0, 0, 0, 0, 0], - 'key_comma' : [0, 0, 0, 0, 0, 0, 0, 0, 0], - 'key_period' : [0, 0, 0, 0, 0, 0, 0, 0, 0], - 'key_semicolon' : [0, 0, 0, 0, 0, 0, 0, 0, 0], - 'key_apostrophe' : [0, 0, 0, 0, 0, 0, 0, 0, 0], + '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], + 'key_p' : [0, 0, 0, 0, 1, 0, 1, 1], + 'key_d' : [1, 1, 1, 0, 0, 0, 0, 0], + 'key_f' : [1, 1, 0, 0, 0, 0, 0, 0], + 'key_g' : [0, 1, 1, 0, 0, 0, 0, 0], + 'key_h' : [0, 0, 0, 0, 1, 0, 1, 0], + 'key_j' : [0, 0, 1, 1, 0, 0, 0, 0], + 'key_k' : [0, 0, 0, 0, 0, 1, 0, 1], + '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_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], + 'key_m' : [0, 0, 0, 0, 0, 1, 1, 1], + 'key_space' : [0, 0, 0, 0, 1, 1, 1, 1], + 'key_enter' : [1, 0, 0, 0, 1, 0, 0, 0], + 'key_comma' : [1, 0, 0, 0, 0, 0, 1, 0], + 'key_period' : [1, 0, 0, 0, 0, 1, 0, 0], + 'key_backspace' : [0, 1, 0, 0, 1, 0, 0, 0], + 'key_apostrophe' : [1, 0, 0, 0, 0, 1, 1, 0], + 'key_exclamation' : [0, 0, 1, 0, 0, 0, 1, 0] } -function draw_artsey(key_config) { +function artsey_draw(key_config) { let keys = $('.keyboard-key'); for (let i = 0; i < keys.length; i++) { if (key_config[i] === 1) @@ -43,7 +36,21 @@ function draw_artsey(key_config) { } } -$(document).ready(function() { +function artsey_reset() { + let config = {'' : [0, 0, 0, 0, 0, 0, 0, 0]}; + artsey_draw(config); + $('#letterbox').text(''); +} + +const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay)) + +$(document).ready(async function() { console.log("ready!"); - draw_artsey(mappings['key_q']); + for (let key in mappings) { + await sleep(1000); + console.log(key); + $('#letterbox').text(key.split('_')[1].toUpperCase()) + artsey_draw(mappings[key]); + } + artsey_reset(); }); \ No newline at end of file