142 lines
3.1 KiB
JavaScript
142 lines
3.1 KiB
JavaScript
|
|
function changeClass(node, command) {
|
|
var operator = command.charAt(0),
|
|
newClass = command.slice(1),
|
|
oldClass = (node.className || '').split(' ');
|
|
|
|
if (operator == '+') {
|
|
oldClass.push(newClass);
|
|
node.className = oldClass.join(' ');
|
|
}
|
|
else if (operator == '-') {
|
|
do oldClass.splice( oldClass.indexOf(newClass), 1 );
|
|
while (oldClass.indexOf(newClass) != -1)
|
|
node.className = oldClass.join(' ');
|
|
}
|
|
else node.className = command;
|
|
}
|
|
|
|
var keyboard = (function (){
|
|
var keyboard = document.getElementById('keyboardMap');
|
|
|
|
var key = {};
|
|
|
|
var mapper = { ' ': ' ' };
|
|
|
|
for (var i=0; i<3; i++) {
|
|
var row = keyboard.children[i].children;
|
|
|
|
for (var j=0, l=row.length; j<l; j++) {
|
|
var alphabet = row[j].title;
|
|
key[alphabet] = row[j];
|
|
mapper[alphabet] = row[j].textContent;
|
|
}
|
|
}
|
|
|
|
function press(keyName) {
|
|
setTimeout(
|
|
function(){ changeClass(key[keyName], "-press"); },
|
|
150
|
|
);
|
|
|
|
changeClass(key[keyName], "+press");
|
|
}
|
|
|
|
function hint(keyName) {
|
|
key.hint && changeClass(key[key.hint], "-hint");
|
|
changeClass(key[keyName], "+hint");
|
|
key.hint = keyName;
|
|
}
|
|
|
|
return {
|
|
'press': press,
|
|
'hint': hint,
|
|
'mapper': mapper,
|
|
'key': key
|
|
};
|
|
})();
|
|
|
|
var questCheck = (function() {
|
|
var characterTable = document.getElementById("character");
|
|
var characterArray = characterTable.textContent.split('\n');
|
|
var questBar = document.getElementById('questAlphabet').children,
|
|
nowCharacter;
|
|
|
|
function compare(string) {
|
|
for (var i=0, l=nowCharacter.length; i<l; i++) {
|
|
if (string.charAt(i) !== nowCharacter.charAt(i)) break;
|
|
}
|
|
return i;
|
|
}
|
|
|
|
function indicate(index, wrong) {
|
|
var l = nowCharacter.length;
|
|
for (var i=0; i<index; i++) {
|
|
changeClass(questBar[i+1], "right");
|
|
}
|
|
|
|
var hintCharIndex = i;
|
|
for (; i<wrong; i++) changeClass(questBar[i+1], "wrong");
|
|
changeClass(questBar[++i], "cursor");
|
|
|
|
for (; i<l; i++) changeClass(questBar[i+1], "");
|
|
return hintCharIndex;
|
|
}
|
|
|
|
function setNewCharacter(characterString) {
|
|
nowCharacter = characterString.slice(1);
|
|
questBar[0].textContent = characterString.charAt(0);
|
|
for (var i=1, l=questBar.length; i<l; i++) {
|
|
questBar[i].textContent = keyboard.mapper[
|
|
characterString.charAt(i) || ' '
|
|
];
|
|
|
|
changeClass(questBar[i], "");
|
|
}
|
|
}
|
|
|
|
setNewCharacter( characterArray[
|
|
Math.floor( Math.random() * (characterArray.length-2) ) + 1
|
|
]);
|
|
|
|
function check(string) {
|
|
var index = compare(string);
|
|
|
|
if (index >= nowCharacter.length){
|
|
setNewCharacter( characterArray[Math.floor(
|
|
Math.random() * (characterArray.length-2)
|
|
) + 1]);
|
|
index = -1;
|
|
string = '';
|
|
}
|
|
|
|
keyboard.hint( nowCharacter.charAt(
|
|
indicate(index, string.length)
|
|
));
|
|
|
|
return index == -1;
|
|
}
|
|
|
|
return check;
|
|
})();
|
|
|
|
document.getElementById('inputBar').oninput = function(){
|
|
|
|
var string = this.value;
|
|
if (/[^a-y]/.test(string)) {
|
|
this.value = '';
|
|
string = '';
|
|
}
|
|
|
|
string && keyboard.press(string.slice(-1));
|
|
|
|
if (questCheck(string)) this.value = '';
|
|
};
|
|
|
|
document.getElementById('fontPx').children[1].onchange = function(){
|
|
document.body.style.fontSize = this.value + 'px';
|
|
};
|
|
|
|
document.getElementById('inputBar').focus();
|
|
document.getElementById('inputBar').select();
|