improvements to profile screen

website/api/api.js

@@ -71,7 +71,7 @@ class API {
      * Validates all the parameters used for the postTest function which it then calls
      */
     validateTest() {
-        const test = screenManager.screen.textbox.getLetters();
+        const test = screenManager.screen.textbox.getWords();
         const testType = "words";
         let testLength = test.length;
         let testTime = screenManager.screen.timer.getTime();
@@ -79,7 +79,10 @@ class API {
         const quoteId = 0;
         let wpm;
         const userId = Number(user.userId);
-        let test_content = screenManager.screen.textbox.testContent;
+        let test_content = screenManager.screen.textbox.getTestContent();
+
+        console.log(test);
+        console.log(test_content);
 
         let string = "";
         let inaccurateLetters = 0;
@@ -91,7 +94,7 @@ class API {
             }
         }
 
-        const accuracy = (test.length - inaccurateLetters) / test.length * 100;
+        const accuracy = Math.round(((test.length - inaccurateLetters) / test.length) * 100);
 
         // this is the wpm calculation factoring in the time of test
         // it assumes that all words are 5 characters long because on average
@@ -286,8 +289,8 @@ class API {
                 if (text.length + textArr[i].length < effectiveWidth) {
                     text += `${textArr[i]} `
                 } else {
-                    finalText.push(text);
+                    finalText.push(text.substring(0,text.length-1));
-                    text = textArr[i];
+                    text = `${textArr[i]} `;
                 }
             }
             user.nextTest = finalText;

website/screens/profilescreen.js

@@ -18,6 +18,12 @@ class ProfileScreen {
     constructor() {
         this.menu = new Menu();
         api.getUserTests();
+        this.testButtons;
+        this.buttons = [
+            new Button(950, 270, 240, 120, 0, true, "#fff", true, "#000", "#000", "up"),
+            new Button(950, 390, 240, 120, 0, true, "#fff", true, "#000", "#000", "down"),
+        ]
+        this.offset = 0;
     }
 
     draw() {
@@ -32,11 +38,56 @@ class ProfileScreen {
         textSize(20);
         fill("#000");
         if (user.tests != undefined) {
-            for (let i = 0; i < user.tests.length; i++) {
+            if (this.testButtons === undefined) {
-                text(`Test ${i+1}: ${user.tests[i].wpm}wpm | Characters Typed: ${user.tests[i].test_length}`, 0, i*30+300, windowWidth, 30);
+                this.createTestButtons();
             }
         }
+
+        for (let i = 0; i < this.buttons.length; i++) {
+            this.buttons[i].draw();
+        }
+
+        if (this.testButtons !== undefined) {
+            for (let i = 0; i < this.testButtons.length; i++) {
+                this.testButtons[i][0].draw()
+                this.testButtons[i][1].draw()
+                this.testButtons[i][2].draw()
+                this.testButtons[i][3].draw()
+            }
+        }
+
+        if (this.buttons[0].isPressed()) {
+            if (user.tests.length < 13 + this.offset) {
+                this.offset--;
+            }
+            this.createTestButtons(this.offset);
+        } else if (this.buttons[1].isPressed()) {
+            if (user.tests.length - 13 - this.offset > 0) {
+                this.offset++;
+            }
+            this.createTestButtons(this.offset);
+        }
+        
         fill("#000");
-        text(`Logged in as ${user.username}`, windowWidth-400, 15);
+        text(`Logged in as ${user.username}`, windowWidth-150, 15);
+    }
+
+    createTestButtons(offset = 0) {
+        this.testButtons = [[
+            new Button(400, 270, 100, 30, 0, true, "#fff", true, "#000", "#000", "test #"), // test # button
+            new Button(500, 270, 100, 30, 0, true, "#fff", true, "#000", "#000", "wpm"), // wpm button
+            new Button(600, 270, 100, 30, 0, true, "#fff", true, "#000", "#000", "accuracy"), // accuracy button
+            new Button(700, 270, 240, 30, 0, true, "#fff", true, "#000", "#000", "characters typed")
+        ]];
+        let j = 300;
+        for (let i = user.tests.length-1-offset; i >= user.tests.length-13-offset; i--) {
+            this.testButtons.push([
+                new Button(400, j, 100, 30, 0, true, "#000", true, "#000", "#fff", `${i}`), // test # button
+                new Button(600, j, 100, 30, 0, true, "#000", true, "#000", "#fff", `${user.tests[i].accuracy}`), // accuracy button
+                new Button(500, j, 100, 30, 0, true, "#000", true, "#000", "#fff", `${user.tests[i].wpm}`), // wpm button
+                new Button(700, j, 240, 30, 0, true, "#000", true, "#000", "#fff", `${user.tests[i].test_length}`)
+            ])
+            j+=30;
+        }
     }
 }

website/ui_elements/button.js

@@ -188,8 +188,17 @@ class Button {
             fill(this.hoverTextColor);
             text(this.label, this.x, this.y, this.width, this.height); 
         } else {
+            if (this.border) {
+                strokeWeight(2);
+                stroke(this.borderColor)
+            } else {
+                noStroke();
+            }
+
             fill(this.backgroundColor);
             rect(this.x, this.y, this.width, this.height);
+
+            noStroke();
             fill(this.textColor);
             text(this.label, this.x, this.y, this.width, this.height); 
         }

website/ui_elements/textbox.js

@@ -186,7 +186,11 @@ class Textbox {
     }
 
     getWords() {
-        return this.words;
+        let text = "";
+        for (let i = 0; i < this.words.length; i++) {
+            text += this.words[i];
+        }
+        return text;
     }
 
     setWords(pWords) {
@@ -201,6 +205,14 @@ class Textbox {
         this.allowedLetters = pAllowedLetters;
     }
 
+    getTestContent() {
+        let text = "";
+        for (let i = 0; i < this.testContent.length; i++) {
+            text += this.testContent[i];
+        }
+        return text;
+    }
+
     /**
      * draws a Textbox
      * @returns 
@@ -235,7 +247,7 @@ class Textbox {
             let i = this.x;
             let j = this.y;
 
-            if (this.words[this.currentLine].length > this.testContent[this.currentLine].length) {
+            if (this.words[this.currentLine].length >= this.testContent[this.currentLine].length) {
                 this.currentLine++;
                 this.words.push("");
             }
@@ -274,7 +286,7 @@ class Textbox {
             }
 
             i = this.x;
-            j+=30;
+            j += 30;
 
             fill("#000");
             for (let x = this.currentLine + 1; x < this.testContent.length; x++) {