Skip to content

Commit faaeab2

Browse files
author
Rye Terrell
committed
initial
0 parents  commit faaeab2

12 files changed

+593
-0
lines changed

‎README

Whitespace-only changes.

‎brushed_alu.png

10.8 KB
Loading

‎clack.wav

64 KB
Binary file not shown.

‎click.wav

5.39 KB
Binary file not shown.

‎ding.wav

290 KB
Binary file not shown.

‎favicon.ico

360 Bytes
Binary file not shown.

‎index.html

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!doctype html5>
2+
3+
<html manifest="keyzen.manifest">
4+
<html>
5+
6+
<head>
7+
<title>keyzen</title>
8+
<script src="jquery.js"></script>
9+
<script src="keyzen.js"></script>
10+
11+
<style>
12+
13+
@font-face {
14+
font-family: 'Ubuntu Mono';
15+
font-style: normal;
16+
font-weight: normal;
17+
src: local('Ubuntu Mono'), local('UbuntuMono-Regular'), url('ubuntu-mono.woff') format('woff');
18+
}
19+
20+
body {
21+
background-image: url('brushed_alu.png');
22+
padding: 0;
23+
margin: 0;
24+
}
25+
26+
#container {
27+
position: relative;
28+
width:100%;
29+
height:100%;
30+
}
31+
32+
#word {
33+
color: #AAA;
34+
position: absolute;
35+
top: 50%;
36+
margin-top: -64px;
37+
height:128px;
38+
font-family: 'Ubuntu Mono', sans-serif;
39+
font-size: 128px;
40+
width:100%;
41+
padding: 0px;
42+
text-align: center;
43+
margin-left: auto;
44+
margin-right:auto;
45+
word-wrap: break-word;
46+
text-shadow: 0px 2px 3px #000;
47+
}
48+
49+
#next-level {
50+
height: 2px;
51+
background-color: #f78d1d;
52+
margin-left: auto;
53+
margin-right:auto;
54+
}
55+
56+
#level-chars {
57+
font-family: 'Ubuntu Mono', sans-serif;
58+
font-size: 16px;
59+
width:95%;
60+
text-align: center;
61+
padding: 16px;
62+
margin-left: auto;
63+
margin-right:auto;
64+
word-wrap: break-word;
65+
font-weight: bold;
66+
cursor: hand;
67+
color: #AAAAAA;
68+
}
69+
70+
.currentChar {
71+
border-bottom: 4px solid #f78d1d;
72+
}
73+
74+
.errorChar {
75+
color: #FF0000;
76+
}
77+
78+
.goodChar {
79+
color: #AAAAAA;
80+
text-shadow: 0px 1px 1px #FFF, 0px 2px 2px #FFF;
81+
}
82+
83+
</style>
84+
85+
</head>
86+
87+
<body>
88+
89+
<div id='container'>
90+
91+
<div id='level-chars'>
92+
</div>
93+
94+
<div id='next-level'>
95+
</div>
96+
97+
<div id='word'>
98+
</div>
99+
100+
</div>
101+
102+
</body>
103+
104+
</html>
105+

‎jquery.js

+167
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎keyzen.js

+234
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
2+
3+
var data = {};
4+
data.chars = " jfkdlsahgyturieowpqbnvmcxz6758493021`-=[]\\;',./ABCDEFGHIJKLMNOPQRSTUVWXYZ~!@#$%^&*()_+{}|:\"<>?";
5+
data.consecutive = 10;
6+
data.word_length = 7;
7+
8+
9+
$(document).ready(function() {
10+
if (localStorage.data != undefined) {
11+
load();
12+
render();
13+
}
14+
else {
15+
set_level(1);
16+
}
17+
$(document).keypress(keyHandler);
18+
});
19+
20+
21+
function set_level(l) {
22+
data.in_a_row = {};
23+
for(var i = 0; i < data.chars.length; i++) {
24+
data.in_a_row[data.chars[i]] = data.consecutive;
25+
}
26+
data.in_a_row[data.chars[l]] = 0;
27+
data.level = l;
28+
data.word_index = 0;
29+
data.word_errors = {};
30+
data.word = generate_word();
31+
save();
32+
render();
33+
}
34+
35+
36+
function keyHandler(e) {
37+
var key = String.fromCharCode(e.which);
38+
if(key == data.word[data.word_index]) {
39+
data.in_a_row[key] += 1;
40+
(new Audio("click.wav")).play();
41+
}
42+
else {
43+
data.in_a_row[data.word[data.word_index]] = 0;
44+
data.in_a_row[key] = 0;
45+
(new Audio("clack.wav")).play();
46+
data.word_errors[data.word_index] = true;
47+
}
48+
data.word_index += 1;
49+
if (data.word_index >= data.word.length) {
50+
if(get_training_chars().length == 0) {
51+
level_up();
52+
}
53+
data.word = generate_word();
54+
data.word_index = 0;
55+
data.word_errors = {};
56+
}
57+
render();
58+
save();
59+
}
60+
61+
62+
function level_up() {
63+
if (data.level + 1 <= data.chars.length - 1) {
64+
(new Audio('ding.wav')).play();
65+
}
66+
l = Math.min(data.level + 1, data.chars.length);
67+
set_level(l);
68+
}
69+
70+
71+
function save() {
72+
localStorage.data = JSON.stringify(data);
73+
}
74+
75+
76+
function load() {
77+
data = JSON.parse(localStorage.data);
78+
}
79+
80+
81+
function render() {
82+
render_level();
83+
render_word();
84+
render_level_bar();
85+
}
86+
87+
88+
function render_level() {
89+
var chars = "<span id='level-chars-wrap'>";
90+
var level_chars = get_level_chars();
91+
var training_chars = get_training_chars();
92+
for (var c in data.chars) {
93+
if(training_chars.indexOf(data.chars[c]) != -1) {
94+
chars += "<span style='color: #F00' onclick='set_level(" + c + ");'>"
95+
}
96+
else if (level_chars.indexOf(data.chars[c]) != -1) {
97+
chars += "<span style='color: #000' onclick='set_level(" + c + ");'>"
98+
}
99+
else {
100+
chars += "<span style='color: #AAA' onclick='set_level(" + c + ");'>"
101+
}
102+
if (data.chars[c] == ' ') {
103+
chars += " space ";
104+
}
105+
else {
106+
chars += data.chars[c];
107+
}
108+
chars += "</span>";
109+
}
110+
chars += "</span>";
111+
$("#level-chars").html(chars);
112+
}
113+
114+
115+
function render_level_bar() {
116+
training_chars = get_training_chars();
117+
if(training_chars.length == 0) {
118+
m = data.consecutive;
119+
}
120+
else {
121+
m = 1e100;
122+
for(c in training_chars) {
123+
m = Math.min(data.in_a_row[training_chars[c]], m);
124+
}
125+
}
126+
m = Math.floor($('#level-chars-wrap').innerWidth() * Math.min(1.0, m / data.consecutive));
127+
$('#next-level').css({'width': '' + m + 'px'});
128+
129+
}
130+
131+
function render_word() {
132+
var word = "";
133+
for (var i = 0; i < data.word.length; i++) {
134+
sclass = "normalChar";
135+
if (i > data.word_index) {
136+
sclass = "normalChar";
137+
}
138+
else if (i == data.word_index) {
139+
sclass = "currentChar";
140+
}
141+
else if(data.word_errors[i]) {
142+
sclass = "errorChar";
143+
}
144+
else {
145+
sclass = "goodChar";
146+
}
147+
word += "<span class='" + sclass + "'>";
148+
if(data.word[i] == " ") {
149+
word += "&nbsp;"
150+
}
151+
else {
152+
word += data.word[i];
153+
}
154+
word += "</span>";
155+
}
156+
$("#word").html("&nbsp;" + word);
157+
}
158+
159+
160+
function generate_word() {
161+
word = '';
162+
for(var i = 0; i < data.word_length; i++) {
163+
c = choose(get_training_chars());
164+
if(c != undefined && c != word[word.length-1]) {
165+
word += c;
166+
}
167+
else {
168+
word += choose(get_level_chars());
169+
}
170+
}
171+
word += ' ';
172+
return word;
173+
}
174+
175+
176+
function get_level_chars() {
177+
return data.chars.slice(0, data.level + 1).split('');
178+
}
179+
180+
function get_training_chars() {
181+
var training_chars = [];
182+
var level_chars = get_level_chars();
183+
for(var x in level_chars) {
184+
if (data.in_a_row[level_chars[x]] < data.consecutive) {
185+
training_chars.push(level_chars[x]);
186+
}
187+
}
188+
return training_chars;
189+
}
190+
191+
function choose(a) {
192+
return a[Math.floor(Math.random() * a.length)];
193+
}
194+
195+
196+
197+
198+
199+
200+
201+
202+
203+
204+
205+
206+
207+
208+
209+
210+
211+
212+
213+
214+
215+
216+
217+
218+
219+
220+
221+
222+
223+
224+
225+
226+
227+
228+
229+
230+
231+
232+
233+
234+

‎keyzen.manifest

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
CACHE MANIFEST
2+
brushed_alu.png
3+
clack.wav
4+
click.wav
5+
ding.wav
6+
index.html
7+
jquery.js
8+
keyzen.js
9+
ubuntu-mono.woff

0 commit comments

Comments
 (0)