/script.js

(function($){

var ok_type;
var miss_type;
var word_index;
var text_index;
var sleep; // sec
var start_time;
var end_time;
var timer;

var texts = [];

var label = {
    'function': 'WordPress Function',
    'action': 'Action Hook',
    'filter': 'Filter Hook',
}

var codex = {
    'function': 'http://codex.wordpress.org/Function_Reference/',
    'action': 'http://codex.wordpress.org/Plugin_API/Action_Reference/',
    'filter': 'http://codex.wordpress.org/Plugin_API/Filter_Reference/',
};

display();

$('#myModal').on('hidden', function(){
    display();
});

function display(){
    ok_type = 0;
    miss_type = 0;
    word_index = 0;
    text_index = 0;
    sleep = 3;
    $('#word').text('');
    $('#cat').text('');

    $.getJSON(
        '/typing/json/',
        function(data){
            texts = data;
            $('#word').html('<a id="btn-start" href="javascript:void(0);" class="btn btn-success btn-large">Press Space to start</a>');
            $(window).unbind('keypress');
            $(window).keypress(init);
            $('#btn-start').click(init);
        }
    );
}

function init(e) {
    if (e.charCode === 32 || ($(this).attr('id') === 'btn-start')) {
        $(window).unbind('keypress', init);
        timer = setInterval(wait, 1000);
    }
}

function wait(){
    if (sleep === 0) {
        start_game();
        clearInterval(timer);
        return;
    }
    $('#word').html('<span style="color:#ff0000;">'+sleep+'</span>');
    sleep = sleep - 1;
}

function start_game(){
    set_text();
    start_time = new Date();

    $(window).keypress(function(e){
        var str = String.fromCharCode(e.charCode);
        if (str === texts[word_index].word.substr(text_index, 1)) {
            ok_type = ok_type + 1;
            $('#word-'+text_index).attr('class', 'text-ok');
            text_index = text_index + 1;
            if (text_index === texts[word_index].word.length) {
                word_index = word_index + 1;
                text_index = 0;
                if (word_index === texts.length) {
                    end_game();
                } else {
                    set_text();
                }
            }
        } else {
            $('#word-'+text_index).css('color', '#ff0000');
            $('#box').animate({backgroundColor: '#ffffcc'}, 100, function(){
                $(this).animate({backgroundColor: '#f5f5f5'});
            });
            miss_type = miss_type + 1;
        }
    });
}

function set_text(){
    var str = texts[word_index].word;
    $('#word').html('');
    $('#cat').text(label[texts[word_index].cat]);
    for (var i=0; i<str.length; i++) {
        $('#word').append('<span id="word-'+i+'">'+str.substr(i, 1)+'</span>');
    }
}

function end_game(){
    end_time = new Date();

    var time = Math.ceil((end_time - start_time) / 1000);
    var wpm = Math.ceil(ok_type / time * 60);
    var acc = Math.ceil((1 - (miss_type / (ok_type + miss_type))) * 100);

    $('#time').text(time + ' sec');
    $('#wpm').text(wpm);
    $('#acc').text(acc + ' %');

    $('#refs').html('');
    for (var i=0; i<texts.length; i++) {
        $('#refs').append('<li><a href="'+codex[texts[i].cat]+texts[i].word+'" target="_blank">'+texts[i].word+'</a></li>');
    }

    var url = 'https://twitter.com/intent/tweet?url=http://firegoby.jp/typing/&text=';
    var text = encodeURIComponent("My score is "+wpm+' and Accuracy is '+acc+'% #wptyping');
    $('#tweet').attr('href', url+text);

    $(window).unbind('keypress');
    $('#myModal').modal();
}

})(jQuery);