initial

ithake · Feb 25, 2012 · faaeab2 · faaeab2
commit faaeab2
Show file tree

Hide file tree

Showing 12 changed files with 593 additions and 0 deletions.
diff --git a/README b/README
diff --git a/brushed_alu.png b/brushed_alu.png
diff --git a/clack.wav b/clack.wav
diff --git a/click.wav b/click.wav
diff --git a/ding.wav b/ding.wav
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -0,0 +1,105 @@
+<!doctype html5>
+
+<html manifest="keyzen.manifest">
+<html>
+
+    <head>
+        <title>keyzen</title>
+        <script src="jquery.js"></script>
+        <script src="keyzen.js"></script>
+
+        <style>
+
+            @font-face {
+              font-family: 'Ubuntu Mono';
+              font-style: normal;
+              font-weight: normal;
+              src: local('Ubuntu Mono'), local('UbuntuMono-Regular'), url('ubuntu-mono.woff') format('woff');
+            }
+
+            body {
+                background-image: url('brushed_alu.png');
+                padding: 0; 
+                margin: 0;
+            }
+
+            #container {
+                position: relative;
+                width:100%;
+                height:100%;
+            }
+
+            #word {
+                color: #AAA;
+                position: absolute;
+                top: 50%;
+                margin-top: -64px;
+                height:128px;
+                font-family: 'Ubuntu Mono', sans-serif;
+                font-size: 128px;
+                width:100%;
+                padding: 0px;
+                text-align: center;
+                margin-left: auto;
+                margin-right:auto;
+                word-wrap: break-word;
+            	text-shadow: 0px 2px 3px #000;
+            }
+
+            #next-level {
+                height: 2px;
+                background-color: #f78d1d;
+                margin-left: auto;
+                margin-right:auto;
+            }
+
+            #level-chars {
+                font-family: 'Ubuntu Mono', sans-serif;
+                font-size: 16px;
+                width:95%;
+                text-align: center;
+                padding: 16px;
+                margin-left: auto;
+                margin-right:auto;
+                word-wrap: break-word;
+                font-weight: bold;
+                cursor: hand;
+                color: #AAAAAA;
+            }
+
+            .currentChar {
+                border-bottom: 4px solid #f78d1d;
+            }
+
+            .errorChar {
+                color: #FF0000;
+            }
+
+            .goodChar {
+                color: #AAAAAA;
+            	text-shadow: 0px 1px 1px #FFF, 0px 2px 2px #FFF;
+            }
+
+        </style>
+
+    </head>
+
+    <body>
+
+        <div id='container'>
+
+            <div id='level-chars'>
+            </div>
+
+            <div id='next-level'>
+            </div>
+
+            <div id='word'>
+            </div>
+
+        </div>        
+
+    </body>
+
+</html>
+
diff --git a/jquery.js b/jquery.js
diff --git a/keyzen.js b/keyzen.js
@@ -0,0 +1,234 @@
+
+
+var data = {};
+data.chars = " jfkdlsahgyturieowpqbnvmcxz6758493021`-=[]\\;',./ABCDEFGHIJKLMNOPQRSTUVWXYZ~!@#$%^&*()_+{}|:\"<>?";
+data.consecutive = 10;
+data.word_length = 7;
+
+
+$(document).ready(function() {
+    if (localStorage.data != undefined) {
+        load();
+        render();
+    }
+    else {
+        set_level(1);
+    }
+    $(document).keypress(keyHandler);
+});
+
+
+function set_level(l) {
+    data.in_a_row = {};
+    for(var i = 0; i < data.chars.length; i++) {
+        data.in_a_row[data.chars[i]] = data.consecutive;
+    }
+    data.in_a_row[data.chars[l]] = 0;
+    data.level = l;
+    data.word_index = 0;
+    data.word_errors = {};
+    data.word = generate_word();
+    save();
+    render();
+}
+
+
+function keyHandler(e) {
+    var key = String.fromCharCode(e.which);
+    if(key == data.word[data.word_index]) {
+        data.in_a_row[key] += 1;
+        (new Audio("click.wav")).play();
+    }
+    else {
+        data.in_a_row[data.word[data.word_index]] = 0;
+        data.in_a_row[key] = 0;
+        (new Audio("clack.wav")).play();
+        data.word_errors[data.word_index] = true;
+    }
+    data.word_index += 1;
+    if (data.word_index >= data.word.length) {
+        if(get_training_chars().length == 0) {
+            level_up();
+        }
+        data.word = generate_word();
+        data.word_index = 0;
+        data.word_errors = {};
+    }
+    render();
+    save();
+}
+
+
+function level_up() {
+    if (data.level + 1 <= data.chars.length - 1) {
+        (new Audio('ding.wav')).play();
+    }
+    l = Math.min(data.level + 1, data.chars.length);
+    set_level(l);
+}
+
+
+function save() {
+    localStorage.data = JSON.stringify(data);
+}
+
+
+function load() {
+    data = JSON.parse(localStorage.data);
+}
+
+
+function render() {
+    render_level();
+    render_word();
+    render_level_bar();
+}
+
+
+function render_level() {
+    var chars = "<span id='level-chars-wrap'>";
+    var level_chars = get_level_chars();
+    var training_chars = get_training_chars();
+    for (var c in data.chars) {
+        if(training_chars.indexOf(data.chars[c]) != -1) {
+            chars += "<span style='color: #F00' onclick='set_level(" + c + ");'>"
+        }
+        else if (level_chars.indexOf(data.chars[c]) != -1) {
+            chars += "<span style='color: #000' onclick='set_level(" + c + ");'>"
+        }
+        else {
+            chars += "<span style='color: #AAA' onclick='set_level(" + c + ");'>"
+        }
+        if (data.chars[c] == ' ') {
+            chars += " space ";
+        }
+        else {
+            chars += data.chars[c];
+        }
+        chars += "</span>";
+    }
+    chars += "</span>";
+    $("#level-chars").html(chars);
+}
+
+
+function render_level_bar() {
+    training_chars = get_training_chars();
+    if(training_chars.length == 0) {
+        m = data.consecutive;
+    }
+    else {
+        m = 1e100;
+        for(c in training_chars) {
+            m = Math.min(data.in_a_row[training_chars[c]], m);
+        }
+    }
+    m = Math.floor($('#level-chars-wrap').innerWidth() * Math.min(1.0, m / data.consecutive));
+    $('#next-level').css({'width': '' + m + 'px'});
+
+}   
+
+function render_word() {
+    var word = "";
+    for (var i = 0; i < data.word.length; i++) {
+        sclass = "normalChar";
+        if (i > data.word_index) {
+            sclass = "normalChar";
+        }
+        else if (i == data.word_index) {
+            sclass = "currentChar";
+        }
+        else if(data.word_errors[i]) {
+            sclass = "errorChar";
+        }
+        else {
+            sclass = "goodChar";
+        }
+        word += "<span class='" + sclass + "'>";
+        if(data.word[i] == " ") {
+            word += "&nbsp;"
+        }
+        else {
+            word += data.word[i];
+        }
+        word += "</span>";
+    }
+    $("#word").html("&nbsp;" + word);
+}
+
+
+function generate_word() {
+    word = '';
+    for(var i = 0; i < data.word_length; i++) {
+        c = choose(get_training_chars());
+        if(c != undefined && c != word[word.length-1]) {
+            word += c;
+        }
+        else {
+            word += choose(get_level_chars());
+        }
+    }
+    word += ' ';
+    return word;
+}
+
+
+function get_level_chars() {
+    return data.chars.slice(0, data.level + 1).split('');
+}
+
+function get_training_chars() {
+    var training_chars = [];
+    var level_chars = get_level_chars();
+    for(var x in level_chars) {
+        if (data.in_a_row[level_chars[x]] < data.consecutive) {
+            training_chars.push(level_chars[x]);
+        }
+    }
+    return training_chars;
+}
+
+function choose(a) {
+    return a[Math.floor(Math.random() * a.length)];
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/keyzen.manifest b/keyzen.manifest
@@ -0,0 +1,9 @@
+CACHE MANIFEST
+brushed_alu.png
+clack.wav
+click.wav
+ding.wav
+index.html
+jquery.js
+keyzen.js
+ubuntu-mono.woff