From 7d918b099517f1286c0a3ff6fb23193f8c656859 Mon Sep 17 00:00:00 2001 From: Arlo Filley Date: Tue, 29 Nov 2022 12:21:38 +0000 Subject: [PATCH] improvements to profile screen --- website/api/api.js | 13 +++++--- website/screens/profilescreen.js | 57 ++++++++++++++++++++++++++++++-- website/ui_elements/button.js | 9 +++++ website/ui_elements/textbox.js | 18 ++++++++-- 4 files changed, 86 insertions(+), 11 deletions(-) diff --git a/website/api/api.js b/website/api/api.js index 0edb2f1..56c56ad 100644 --- a/website/api/api.js +++ b/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); - text = textArr[i]; + finalText.push(text.substring(0,text.length-1)); + text = `${textArr[i]} `; } } user.nextTest = finalText; diff --git a/website/screens/profilescreen.js b/website/screens/profilescreen.js index 473a7fa..93a9f7e 100644 --- a/website/screens/profilescreen.js +++ b/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++) { - text(`Test ${i+1}: ${user.tests[i].wpm}wpm | Characters Typed: ${user.tests[i].test_length}`, 0, i*30+300, windowWidth, 30); + if (this.testButtons === undefined) { + 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; + } } } \ No newline at end of file diff --git a/website/ui_elements/button.js b/website/ui_elements/button.js index 157f50e..6903226 100644 --- a/website/ui_elements/button.js +++ b/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); } diff --git a/website/ui_elements/textbox.js b/website/ui_elements/textbox.js index bf04f63..4bcc8d1 100644 --- a/website/ui_elements/textbox.js +++ b/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++) {