Add web-vanilla

2019-05-26 15:49:01 +03:00
parent b31c99da4f
commit 661a5984a3
11 changed files with 425 additions and 0 deletions
--- a/web-vanilla/trill/trill.js
+++ b/web-vanilla/trill/trill.js
@@ -0,0 +1,102 @@
+
+const states = {
+    GETKEYS: 'getkeys',
+    TRILLING: 'trilling',
+    READY: 'ready',
+    RESULT: 'result'
+}
+
+const colors = {
+    GETKEYS: 'gray',
+    TRILLING: 'crimson',
+    READY: 'darkgray',
+    RESULT: 'dodgerblue'
+}
+
+var state = states.GETKEYS;
+var times = []
+
+const max_count = 20;
+
+var key1, key2;
+var time_start;
+var counter = 0;
+
+function handle_press(e) {
+    switch (state) {
+        case states.GETKEYS: {
+            if (!key1) {
+                key1 = e.code;
+
+                area.style["background-color"] = colors.GETKEYS;
+                area.innerText = "Press 2nd key!";
+            } else {
+                key2 = e.code;
+                state = states.READY;
+
+                area.style["background-color"] = colors.READY;
+                area.innerText = "Test will start on first keypress.";
+            }
+        } break;
+
+        case states.READY: {
+            if (e.code == key1 || e.code == key2) {
+                state = states.TRILLING;
+
+                time_start = Date.now();
+
+                area.style["background-color"] = colors.TRILLING;
+                handle_press(e); // update couter/text for first keypress
+            }
+        } break;
+
+        case states.TRILLING: {
+            if (e.code == key1 || e.code == key2) {
+                counter++;
+            } 
+
+            area.innerText = counter + "/" + max_count;
+
+            if (counter == max_count) {
+                state = states.RESULT;
+
+                counter = 0;
+
+                let time = parseInt((max_count / ((Date.now() - time_start) / 1000) * 60 / 4));
+                times.push(time);
+
+                let average = times.reduce((a, b) => a + b) / times.length;
+
+                document.getElementById("average").innerText = "Average: " + average + "bpm";
+
+                var li = document.createElement("li");
+                li.appendChild(document.createTextNode(time + "bpm"));
+                document.getElementById("times").appendChild(li);
+
+                area.style["background-color"] = colors.RESULT;
+                area.innerText = time + "bpm" + '\n(press space to try again)';
+            }
+        } break;
+
+        case states.RESULT: {
+            if (e.code == "Space") {
+                state = states.READY;
+
+                area.style["background-color"] = colors.READY;
+                area.innerText = "Test will start on first keypress.";
+            }
+        } break;
+
+        default:
+            break
+    }
+}
+
+window.onload = function () {
+    create_prologue();
+
+    area = document.getElementById("area");
+    area.innerText = "Press 1st key!";
+
+    document.addEventListener('keydown', handle_press);
+}