122 lines
4.0 KiB
JavaScript
122 lines
4.0 KiB
JavaScript
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 = "<div class='letterbox-letter'>" + letter + "</div>";
|
|
$(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 '!':
|
|
return "key_exclamation";
|
|
case 'enter':
|
|
return "key_enter";
|
|
case 'backspace':
|
|
return "key_backspace";
|
|
default:
|
|
return "key_" + letter.toLowerCase();
|
|
}
|
|
}
|
|
|
|
async function setNextLetter() {
|
|
let letterbox = $("#letterbox");
|
|
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 () {
|
|
$('body').on("keyup", (function(e) {
|
|
console.log("current letter: " + currentLetter + " typed letter: " + String.fromCharCode(e.which).toLowerCase());
|
|
if (currentLetter === String.fromCharCode(e.which).toLowerCase())
|
|
setNextLetter();
|
|
}));
|
|
|
|
await sleep(1000);
|
|
await setTypingText(currentString);
|
|
await sleep(500);
|
|
await setNextLetter();
|
|
}); |