PESST

by Preston Badeer

HTML

<div id="pattern">
    <div id="Q">q</div>
    <div id="W">w</div>
    <div id="E">e</div>
    <div id="R">r</div>
    
    <div id="A">a</div>
    <div id="S">s</div>
    <div id="D">d</div>
    <div id="F">f</div>
</div>

<div id="timer"></div>

CSS

body{background:black;}
#pattern{width:400px;margin:0 auto;}
#pattern div{width:100px; height:100px; float:left;}

#timer{position:absolute; bottom:0; right:0; font-size:20px; color:red;}

JavaScript

var entry = '';
//button selector
var buttons = '#pattern div';
//arrow colors
var colors = new Array('lightgray','gray','lightblue','red');
//current colour
var colour = colors[0];
//countdown seconds
var seconds = 6000;
//fade in/out time (in milliseconds)
var fadetime = 100;
// up = 38, down = 40, left = 37, right = 39, space = 32, enter = 13

// MODIFIABLE OVERUSED FUNCTIONS
function changeColor(color) {
    $(buttons).css({
        'background-color': color
    });
    colour = color;
}

function outtaTime() {
    alert('FAIL');
}

function blinker(ikey) {
    $('#' + ikey).fadeOut(fadetime).fadeIn(fadetime);
}

function clearEntry(){
    entry = '';
    changeColor('red');
    changeColor(colors[0]);
}

function submitEntry(ientry){
    alert(ientry);
}

// INPUT HANDLING
$(document).keydown(function(e) {
    var code = e.keyCode ? e.keyCode : e.charCode;
    var key = String.fromCharCode(code);
    var codes = new Array(38, 40, 37, 39, 32, 13);
    if (codes.indexOf(code) != -1) {
        switch (code) {
        case 38:
            changeColor(colors[0]);
            entry = entry + 'U';
            break;
        case 40:
            changeColor(colors[1]);
            entry = entry + 'D';
            break;
        case 37:
            changeColor(colors[2]);
            entry = entry + 'L';
            break;
        case 39:
            changeColor(colors[3]);
            entry = entry + 'R';
            break;
        case 32:
            clearEntry(); //space
            break;
        case 13:
            submitEntry(entry); //enter
            break;
        default:
        }
    }
    else {
        entry = entry + key;
    }

    blinker(key);
});

// SECURITY TIMER
function timer() {
    if (seconds < 1) {
        clearTimeout(t);
        outtaTime();
    }
    else {
        seconds = seconds - 1;
        $('#timer').html(seconds);
        t = setTimeout('timer()', 1000);
    }
}

// INIT
$(document).ready(function() {
   ...