4.6 KiB
4.6 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 '!':
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 || currentLetterIndex === 0)
await unHighlightLetter(letterbox.children()[currentLetterIndex]);
currentLetterIndex++;
currentLetter = currentString.charAt(currentLetterIndex).toLowerCase();
currentMapping = mappings[(await getMappingForLetter(currentLetter)).toString()];
await highlightLetter(letterbox.children()[currentLetterIndex]);
await artseyDraw();
}
async function showWrongInput() {
let letter = $("#letterbox").children()[currentLetterIndex];
$(letter).css("background-color", "red").animate(1000).delay(500).queue(function () {
$(letter).css("background-color", "yellow").animate(1000);
})
}
let currentLetterIndex = -1;
let currentLetter = '';
let currentString = "hello world";
let currentMapping = [0, 0, 0, 0, 0, 0, 0, 0];
$(document).ready(async function () {
$("#startButton").on("click", async function () {
$('#startButton').hide();
$('body').on("keyup", (async function(e) {
console.log("current letter: " + currentLetter + " typed letter: " + String.fromCharCode(e.which).toLowerCase());
if (currentLetter === String.fromCharCode(e.which).toLowerCase())
await setNextLetter();
else
await showWrongInput();
}));
await sleep(1000);
await setTypingText(currentString);
await sleep(500);
await setNextLetter();
$("#keyboard").animate({opacity: 1.0}, 1000, function () {
console.log("keyboard visible!");
});
})
});