Skip to content

Commit 39980ec

Browse files
luc4leoneluc4leone
committed
Made sense of save, load, get_level_chars, choose
1 parent d342f40 commit 39980ec

File tree

6 files changed

+12518
-55
lines changed

6 files changed

+12518
-55
lines changed

‎keyzen.js ‎app.js

+154-47
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,58 @@
1+
/*
2+
some references:
3+
https://www.typingtest.com/
4+
https://first20hours.com/typing/
5+
https://code.google.com/archive/p/amphetype/
6+
https://colemak.com/
7+
https://www.keybr.com/profile
8+
https://www.typing.com/student/lesson/328/common-english-words
9+
https://www.speedtypingonline.com/typing-tutor
10+
11+
https://www.computerhope.com/issues/ch001346.htm
12+
https://comp.editors.narkive.com/UFCzZ2RJ/touch-typing-for-programmers
13+
14+
How to Calculate Typing Speed (WPM) and Accuracy
15+
https://www.speedtypingonline.com/typing-equations
16+
17+
keyboard finger position
18+
https://www.computerhope.com/issues/ch001346.htm
19+
*/
20+
21+
/*
22+
PLAN OF ATTACK
23+
Functions to make sense of
24+
[x] start_stats
25+
[x] update_stats
26+
[ ] set_level
27+
[ ] set_layout
28+
[ ] keyHandler
29+
[ ] next_word
30+
[ ] level_up
31+
[x] save
32+
[x] load
33+
[ ] render
34+
[ ] render_layout
35+
[ ] render_level
36+
[ ] render_rigor
37+
[ ] render_stats
38+
[ ] inc_rigor
39+
[ ] render_level_bar
40+
[ ] render_word
41+
[ ] generate_word
42+
[x] get_level_chars
43+
[ ] get_training_chars
44+
[x] choose
45+
46+
47+
48+
49+
50+
*/
151

252
var data = {};
353
data.chars = " jfkdlsahgyturieowpqbnvmcxz6758493021`-=[]\\;',./ABCDEFGHIJKLMNOPQRSTUVWXYZ~!@#$%^&*()_+{}|:\"<>?";
454
data.consecutive = 5;
5-
data.word_length = 7;
55+
data.word_length = 8;
656
data.current_layout = "qwerty";
757

858

@@ -26,20 +76,20 @@ $(document).ready(function() {
2676
$(document).keypress(keyHandler);
2777
});
2878

29-
/* TODO */
79+
3080
var start_time = 0;
3181
/* - viene chiamata in keyHandler, on keypress
3282
- div.stats
3383
*/
3484
function start_stats() {
3585
/*
3686
quando start_time è 0, assegna il tempo in sec
37-
quando start_time è > 0, assegna
87+
quando start_time è > 0, assegna il momento attuale
3888
*/
3989
start_time = start_time || Math.floor(new Date().getTime() / 1000);
4090
}
4191

42-
/* TODO */
92+
4393
var hpm = 0; /* hits per minute */
4494
var ratio = 0;
4595
var hits_correct = 0;
@@ -53,6 +103,7 @@ function update_stats() {
53103
hpm = Math.floor((hits_correct + hits_wrong) / (current_time - start_time) * 60);
54104
/*
55105
built-in function that "returns false if the argument is positive or negative Infinity or NaN or undefined; otherwise, true."
106+
if total hits per minute is not a finite number, then set it to 0
56107
*/
57108
if (!isFinite(hpm)) {
58109
hpm = 0;
@@ -75,19 +126,45 @@ function set_level(l) {
75126
render();
76127
}
77128

129+
/*
130+
var data = {};
131+
data.chars = " jfkdlsahgyturieowpqbnvmcxz6758493021`-=[]\\;',./ABCDEFGHIJKLMNOPQRSTUVWXYZ~!@#$%^&*()_+{}|:\"<>?";
132+
data.consecutive = 5;
133+
data.word_length = 7;
134+
data.current_layout = "qwerty";
135+
136+
var layouts = {};
137+
layouts["qwerty"] = ...
138+
139+
- takes l, layout
140+
-
141+
142+
*/
78143
function set_layout(l) {
79-
data.current_layout = l
80-
data.chars = layouts[l]
81-
data.in_a_row = {};
82-
for(var i = 0; i < data.chars.length; i++) {
83-
data.in_a_row[data.chars[i]] = data.consecutive;
84-
}
85-
data.word_index = 0;
86-
data.word_errors = {};
87-
data.word = generate_word();
88-
data.keys_hit = "";
89-
save();
90-
render();
144+
/* sovrascrivo il default "qwerty" con l */
145+
data.current_layout = l
146+
/* set data.chars alla string a cui punta layouts[l]
147+
quindi, se layouts[l] è "colemak", data.chars corrisponderà a " ntesiroahdjglpufywqbkvmcxz1234567890'\",.!?:;/@$%&#*()_ABCDEFGHIJKLMNOPQRSTUVWXYZ~+-={}|^<>`[]\\"
148+
*/
149+
data.chars = layouts[l];
150+
data.in_a_row = {};
151+
/*
152+
{
153+
" ": 5,
154+
"n": 5,
155+
"t": 5,
156+
...
157+
}
158+
*/
159+
for(var i = 0; i < data.chars.length; i++) {
160+
data.in_a_row[data.chars[i]] = data.consecutive;
161+
}
162+
data.word_index = 0;
163+
data.word_errors = {};
164+
data.word = generate_word();
165+
data.keys_hit = "";
166+
save();
167+
render();
91168
}
92169

93170
function keyHandler(e) {
@@ -125,14 +202,14 @@ function keyHandler(e) {
125202
}
126203

127204
function next_word(){
128-
if(get_training_chars().length == 0) {
129-
level_up();
130-
}
131-
data.word = generate_word();
132-
data.word_index = 0;
133-
data.keys_hit = "";
134-
data.word_errors = {};
135-
update_stats();
205+
if(get_training_chars().length == 0) {
206+
level_up();
207+
}
208+
data.word = generate_word();
209+
data.word_index = 0;
210+
data.keys_hit = "";
211+
data.word_errors = {};
212+
update_stats();
136213

137214
render();
138215
save();
@@ -146,12 +223,18 @@ function level_up() {
146223
set_level(l);
147224
}
148225

149-
/* TODO */
226+
/*
227+
- helper to save data into localStorage.
228+
- viene usato 4 volte
229+
*/
150230
function save() {
151231
localStorage.data = JSON.stringify(data);
152232
}
153233

154-
/* TODO */
234+
/*
235+
- retrieve data from localStorage
236+
- usata 1 volta!
237+
*/
155238
function load() {
156239
data = JSON.parse(localStorage.data);
157240
}
@@ -290,37 +373,61 @@ function render_word() {
290373
$("#word").html(word + "<br>" + keys_hit);
291374
}
292375

376+
/*
377+
- take nothing
378+
- return word
379+
*/
293380
function generate_word() {
294-
word = '';
295-
for(var i = 0; i < data.word_length; i++) {
296-
c = choose(get_training_chars());
297-
if(c != undefined && c != word[word.length-1]) {
298-
word += c;
299-
}
300-
else {
301-
word += choose(get_level_chars());
302-
}
381+
/* manca var, quindi word diventa global */
382+
word = '';
383+
for(var i = 0; i < data.word_length; i++) {
384+
/*
385+
*/
386+
c = choose(get_training_chars());
387+
if(c != undefined && c != word[word.length - 1]) {
388+
word += c;
303389
}
304-
return word;
390+
else {
391+
word += choose(get_level_chars());
392+
}
393+
}
394+
return word;
305395
}
306396

307-
/* TODO */
397+
/*
398+
if
399+
chars = " jfkdlsahgyturieowpqbnvmcxz6758493021`-=[]\\;',./ABCDEFGHIJKLMNOPQRSTUVWXYZ~!@#$%^&*()_+{}|:\"<>?";
400+
level = "s"
401+
then
402+
return ["j", "f", "k", "d", "l", "s"]
403+
404+
return the list of chars to train, according to choosen level
405+
*/
308406
function get_level_chars() {
309-
return data.chars.slice(0, data.level + 1).split('');
407+
return data.chars.slice(0, data.level + 1).split('');
310408
}
311409

410+
/* TODO
411+
-
412+
*/
312413
function get_training_chars() {
313-
var training_chars = [];
314-
var level_chars = get_level_chars();
315-
for(var x in level_chars) {
316-
if (data.in_a_row[level_chars[x]] < data.consecutive) {
317-
training_chars.push(level_chars[x]);
318-
}
414+
var training_chars = [];
415+
var level_chars = get_level_chars();
416+
for (var x in level_chars) {
417+
if (data.in_a_row[level_chars[x]] < data.consecutive) {
418+
training_chars.push(level_chars[x]);
319419
}
320-
return training_chars;
420+
}
421+
return training_chars;
321422
}
322423

323-
/* TODO */
424+
/*
425+
- guess: a is for array
426+
- Math.random() mi da un numero random tra 0 e 1
427+
- Math.random() * a.length mi da un numero random tra 0 e a.length
428+
- Math.floor(Math.random() * a.length) mi da un numero intero random tra 0 e a.length
429+
- return a random element of array a
430+
*/
324431
function choose(a) {
325-
return a[Math.floor(Math.random() * a.length)];
432+
return a[Math.floor(Math.random() * a.length)];
326433
}

‎colors.html

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
</head>
6+
<body>
7+
8+
9+
<!-- <?xml version="1.0" encoding="UTF-8"?> -->
10+
<p>
11+
<svg width="100px" height="132px" viewBox="0 0 100 132" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
12+
<title>colors</title>
13+
<g id="colors" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
14+
<rect id="Rectangle-Copy-129" fill="#406F76" x="0" y="25" width="100" height="100"></rect>
15+
<polyline id="Path-Copy-33" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" points="12 128 12 116.58209 23.25 116.58209 23.25 104.402985 36 104.402985 36 89.9402985 48 89.9402985 48 77"></polyline>
16+
<polyline id="Path-Copy-32" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" points="12 92 12 80.5820896 23.25 80.5820896 23.25 68.4029851 36 68.4029851 36 53.9402985 48 53.9402985 48 41"></polyline>
17+
<polyline id="Path-Copy-31" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" points="12 55 12 43.5820896 23.25 43.5820896 23.25 31.4029851 36 31.4029851 36 16.9402985 48 16.9402985 48 4"></polyline>
18+
</g>
19+
</svg>
20+
</p>
21+
<p>
22+
23+
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
24+
<title>colors</title>
25+
<g id="colors" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
26+
<rect id="Rectangle-Copy-126" fill="#406F76" x="0" y="0" width="100" height="100"></rect>
27+
<polyline id="Path-Copy-24" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" points="12 16 39 16 39 39.5 12 39.5"></polyline>
28+
<polyline id="Path-Copy-23" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" points="12 59 39 59 39 82.5 12 82.5"></polyline>
29+
</g>
30+
</svg>
31+
</p>
32+
</body>
33+
</html>

‎index.html

+8-8
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,23 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7-
<title>keyzen</title>
7+
<title>Touch typing training</title>
88
<link rel="stylesheet" href="style.css">
99
<script src="jquery.js"></script>
10-
<script src="keyzen.js"></script>
10+
<script src="app.js"></script>
1111
</head>
1212

1313
<body>
14-
<div id='container'>
15-
<div id='layout'></div>
14+
<div id="container">
15+
<div id="layout"></div>
1616

17-
<div id='level-chars'></div>
17+
<div id="level-chars"></div>
1818

19-
<div id='next-level'></div>
19+
<div id="next-level"></div>
2020

21-
<div id='word'></div>
21+
<div id="word"></div>
2222

23-
<div id='rigor'></div>
23+
<div id="rigor"></div>
2424

2525
<div id="stats"></div>
2626
</div>

0 commit comments

Comments
 (0)