3.8 KiB
3.8 KiB
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],
'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, 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],
'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]
}
async function artseyDraw() {
let keys = $('.keyboard-key');
for (let i = 0; i < keys.length; i++) {
if (currentMapping[i] === 1)
$(keys[i]).css('background-color', 'black');
else
$(keys[i]).css('background-color', 'white');
}
}
async function artseyReset() {
let config = {'': [0, 0, 0, 0, 0, 0, 0, 0]};
await artseyDraw(config);
}
const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))
async function setTypingText(text) {
$('#letterbox').empty();
console.log(text);
for (let i = 0; i < text.length; i++) {
let letter = text.charAt(i);
let div = "
" + letter + "
";
$(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! Here's a demo.");
await sleep(1000);
await setTypingText(currentString);
await sleep(500);
for (let i = 0; i < currentString.length; i++) {
await setNextLetter();
await sleep(1000);
}
});