Init

assets/index.js

@@ -0,0 +1,162 @@
+
+class vars {
+    static backgroundColor = `rgb(48,44,44)`;
+    static textColor = 'rgb(120, 236, 220)';
+    static testCompleteTexts = ["Test complete!", "Time Taken: ", "WPM: "];
+}
+
+function themePage() {
+    document.body.style.backgroundColor = vars.backgroundColor;
+}
+
+function pageSetup() {
+    themePage();
+    var params = {
+        fullscreen: false,
+        fitted: true
+    };
+    elem = document.getElementById(`typing-game`);
+    two = new Two(params).appendTo(elem);
+
+    centerx = window.innerWidth / 2;
+    centery = (window.innerHeight / 2) - window.innerHeight * .025;
+    width = window.innerWidth * 0.90;
+    height = window.innerHeight * .80;
+    window.addEventListener('keydown', keydown, false);
+    two.bind('resize', draw);
+    getPrompt();
+    displayResults = false;
+    typing = false;
+    showCursor = true;
+    input = "";
+
+    cursorCounter = 0;
+
+    styles = {
+        family: 'proxima-nova, sans-serif',
+        size: 50,
+        leading: 50,
+        weight: 900
+    };
+}
+
+function getPrompt() {
+    // this will be handled by the server
+    prompts = ["Hello world", "The quick brown fox jumps over the lazy dog", "lorem ipsum"];
+    prompt = prompts[Math.floor(Math.random()*prompts.length)];
+}
+
+
+function updateVars() {
+    centerx = window.innerWidth / 2;
+    centery = (window.innerHeight / 2) - window.innerHeight * .025;
+    width = window.innerWidth * 0.90;
+    height = window.innerHeight * .80;
+}
+
+function curse() {
+    if (!typing) {
+        if (showCursor) {
+            var cursorHeight = height * 0.1;
+            var cursorWidth = cursorHeight * 0.1;
+            var cursor = two.makeRoundedRectangle(centerx, centery, cursorWidth, cursorHeight, 5); 
+            // Instead of white, make it themed
+            cursor.fill = 'rgb(255,255,255)';
+            cursor.opacity = 1;
+            cursor.noStroke();
+            showCursor = !showCursor;
+        } else {
+            draw();
+            showCursor = !showCursor;
+        }
+    }
+
+    two.update();
+    setTimeout(curse, 500);
+}
+
+function draw() {
+    updateVars();
+
+    var rect = two.makeRoundedRectangle(centerx, centery, width, height, 5); 
+
+    rect.fill = vars.backgroundColor;
+    rect.opacity = 1;
+    rect.noStroke();
+
+    var promptText = two.makeText(prompt, centerx, centery, styles);
+    promptText.fill = vars.textColor;
+    promptText.noStroke();
+
+    var userText = two.makeText(input, centerx, centery * 1.1, styles);
+    userText.fill = vars.textColor;
+    userText.noStroke();   
+
+    if (displayResults) {
+        texts = calculateTestStats();
+        var resultsBackground = two.makeRoundedRectangle(centerx, centery, width / 2, height / 2, 5); 
+        resultsBackground.fill = 'rgb(120, 236, 220)';
+        resultsBackground.opacity = 1;
+        resultsBackground.noStroke();
+        var x = centerx;
+        var y = centery;
+        for (ele in texts) {
+            var promptText = two.makeText(texts[ele], x, y, 'normal');
+            y += 30;
+        }
+    }
+
+    two.update();
+}
+
+function resetVars() {
+    displayResults = false;
+    typing = false;
+    input = "";
+    getPrompt();
+}
+
+function startTimer() {
+    startTime = new Date();
+}
+
+function stopTimer() {
+    endTime = new Date();
+}
+
+function calculateTestStats() {
+    var toReturn = [];
+    var elapsedTime = (endTime - startTime);
+    var WPM = ((prompt.length / 5)/(elapsedTime / 1000)) * 100;
+    toReturn.push(vars.testCompleteTexts[0]);
+    toReturn.push(vars.testCompleteTexts[1] + (elapsedTime) / 1000 + "s");
+    toReturn.push(vars.testCompleteTexts[2] + WPM);
+    return toReturn;
+}
+
+function keydown(e) {
+    if (e.keyCode === 8) { // Backspace
+        if (input.length > 0) {
+            input = input.substring(0,input.length - 1)
+        }
+        event.preventDefault();
+    } else if (e.keyCode === 9) { // Tab
+        resetVars();
+        event.preventDefault();
+    } else if (e.key.length === 1) {
+        if (input.length <= prompt.length) {
+            if (!typing) {
+                typing = !typing;
+                startTimer();
+            }
+            input += e.key;
+            if (input.length == prompt.length && input.charAt(input.length - 1) === prompt.charAt(input.length - 1)) {
+                // Finish test
+                displayResults = true;
+                stopTimer();
+            }
+        }
+    }
+    draw();
+}
+

assets/style.css

@@ -0,0 +1,41 @@
+.top-row {
+    color: rgb(120, 236, 220);
+    font-size: 2rem;
+    text-decoration: none;
+    padding: 0 1rem;
+}
+
+.aux-row {
+    color: rgba(120, 236, 220, .8);
+    font-size: 1rem;
+    padding: 0 0.75rem;
+}
+
+.select-row {
+    color: rgba(120, 236, 220, .7);
+    font-size: 0.75rem;
+    padding: 0 0.5rem;
+}
+
+#hud {
+    height: 5vh;
+}
+
+#top-bar, #aux-bar, #selection-bar {
+    justify-content: center; 
+    display: flex;
+    font-family: proxima-nova, sans-serif;
+}
+
+td:hover {
+    cursor: pointer;
+}
+
+#typing-game {
+    height: 90vh;
+}
+
+.centered-text {
+    justify-content: center;
+    display: flex;
+}