zach
/
artseyio-typing-tutor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement mappings and demo on load

This commit is contained in:
Zach Graham 2023-08-02 23:05:54 -05:00
parent b1bf1ee050
commit d3d51176ca
3 changed files with 49 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
css/artsey-tutor.css
View File

@ -82,3 +82,8 @@
#keyboard-key:nth-child(8) { #keyboard-key:nth-child(8) {
grid-area: 2 / 4 / 3 / 5; grid-area: 2 / 4 / 3 / 5;
} }
.flex-items:nth-child(1) {
margin: 0 auto;
font-size: 44px;
}

4
index.html
View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<div class="flex-container"> <div class="flex-container">
<div class="flex-items">asdf</div> <div class="flex-items" id="letterbox"></div>
<div class="flex-items"> <div class="flex-items">
<div id="keyboard"> <div id="keyboard">
<div class="keyboard-key"></div> <div class="keyboard-key"></div>
@ -22,7 +22,7 @@
</div> </div>
</div> </div>
</div> </div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 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> <script src="js/artsey-tutor.js"></script>
</body> </body>
</html> </html>

77
js/artsey-tutor.js
View File

@ -1,39 +1,32 @@
let mappings = { let mappings = {
'key_q' : [1, 0, 1, 1, 0, 0, 0, 0, 0], 'key_q' : [1, 0, 1, 1, 0, 0, 0, 0],
'key_w' : [0, 0, 0, 0, 0, 0, 0, 0, 0], 'key_w' : [1, 0, 0, 1, 0, 0, 0, 0],
'key_e' : [0, 0, 0, 0, 0, 0, 0, 0, 0], 'key_u' : [0, 0, 0, 0, 0, 1, 1, 0],
'key_r' : [0, 0, 0, 0, 0, 0, 0, 0, 0], 'key_p' : [0, 0, 0, 0, 1, 0, 1, 1],
'key_t' : [0, 0, 0, 0, 0, 0, 0, 0, 0], 'key_d' : [1, 1, 1, 0, 0, 0, 0, 0],
'key_y' : [0, 0, 0, 0, 0, 0, 0, 0, 0], 'key_f' : [1, 1, 0, 0, 0, 0, 0, 0],
'key_u' : [0, 0, 0, 0, 0, 0, 0, 0, 0], 'key_g' : [0, 1, 1, 0, 0, 0, 0, 0],
'key_i' : [0, 0, 0, 0, 0, 0, 0, 0, 0], 'key_h' : [0, 0, 0, 0, 1, 0, 1, 0],
'key_o' : [0, 0, 0, 0, 0, 0, 0, 0, 0], 'key_j' : [0, 0, 1, 1, 0, 0, 0, 0],
'key_p' : [0, 0, 0, 0, 0, 0, 0, 0, 0], 'key_k' : [0, 0, 0, 0, 0, 1, 0, 1],
'key_a' : [0, 0, 0, 0, 0, 0, 0, 0, 0], 'key_l' : [0, 0, 0, 0, 1, 1, 1, 0],
'key_s' : [0, 0, 0, 0, 0, 0, 0, 0, 0], 'key_z' : [1, 1, 1, 1, 0, 0, 0, 0],
'key_d' : [0, 0, 0, 0, 0, 0, 0, 0, 0], 'key_x' : [0, 1, 1, 1, 0, 0, 0, 0],
'key_f' : [0, 0, 0, 0, 0, 0, 0, 0, 0], 'key_c' : [0, 0, 0, 1, 1, 0, 0, 0],
'key_g' : [0, 0, 0, 0, 0, 0, 0, 0, 0], 'key_v' : [0, 1, 0, 1, 0, 0, 0, 0],
'key_h' : [0, 0, 0, 0, 0, 0, 0, 0, 0], 'key_b' : [0, 0, 0, 0, 1, 0, 0, 1],
'key_j' : [0, 0, 0, 0, 0, 0, 0, 0, 0], 'key_n' : [0, 0, 0, 0, 0, 0, 1, 1],
'key_k' : [0, 0, 0, 0, 0, 0, 0, 0, 0], 'key_m' : [0, 0, 0, 0, 0, 1, 1, 1],
'key_l' : [0, 0, 0, 0, 0, 0, 0, 0, 0], 'key_space' : [0, 0, 0, 0, 1, 1, 1, 1],
'key_z' : [0, 0, 0, 0, 0, 0, 0, 0, 0], 'key_enter' : [1, 0, 0, 0, 1, 0, 0, 0],
'key_x' : [0, 0, 0, 0, 0, 0, 0, 0, 0], 'key_comma' : [1, 0, 0, 0, 0, 0, 1, 0],
'key_c' : [0, 0, 0, 0, 0, 0, 0, 0, 0], 'key_period' : [1, 0, 0, 0, 0, 1, 0, 0],
'key_v' : [0, 0, 0, 0, 0, 0, 0, 0, 0], 'key_backspace' : [0, 1, 0, 0, 1, 0, 0, 0],
'key_b' : [0, 0, 0, 0, 0, 0, 0, 0, 0], 'key_apostrophe' : [1, 0, 0, 0, 0, 1, 1, 0],
'key_n' : [0, 0, 0, 0, 0, 0, 0, 0, 0], 'key_exclamation' : [0, 0, 1, 0, 0, 0, 1, 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],
} }
function draw_artsey(key_config) { function artsey_draw(key_config) {
let keys = $('.keyboard-key'); let keys = $('.keyboard-key');
for (let i = 0; i < keys.length; i++) { for (let i = 0; i < keys.length; i++) {
if (key_config[i] === 1) 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!"); 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();
}); });