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

@ -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;
}

4
index.html
View File

@ -8,7 +8,7 @@
</head>
<body>
<div class="flex-container">
<div class="flex-items">asdf</div>
<div class="flex-items" id="letterbox"></div>
<div class="flex-items">
<div id="keyboard">
<div class="keyboard-key"></div>
@ -22,7 +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="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>

77
js/artsey-tutor.js
View File

@ -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();
});