112 lines
4.0 KiB
JavaScript
Executable File
112 lines
4.0 KiB
JavaScript
Executable File
/**
|
|
* @file This file provides the user with their profilescreen, where they can see their own tests
|
|
* @author Arlo Filley
|
|
*
|
|
* TODO:
|
|
* - change button name
|
|
* - provide filters for tests
|
|
* - implement a way to scroll through tests
|
|
* - create a way to have personal bests and track them
|
|
* - store tests in localstorage.
|
|
* - show user tests even if they are not logged in
|
|
*/
|
|
|
|
/**
|
|
* This class displays all of the test data for a given user
|
|
*/
|
|
class ProfileScreen {
|
|
constructor() {
|
|
this.menu = new Menu();
|
|
api.getUserTests();
|
|
this.testButtons;
|
|
// this.buttons = [
|
|
// new Button(950, 270, 240, 120, "up"),
|
|
// new Button(950, 390, 240, 120, "down"),
|
|
// ]
|
|
this.offset = 0;
|
|
this.scroll_bar_button = new Button(1200, 200, 20, 20, "")
|
|
}
|
|
|
|
draw() {
|
|
textSize(100);
|
|
textAlign(CENTER, CENTER);
|
|
fill(user.colorScheme.text);
|
|
text("Profile", 0, 100, windowWidth, 120);
|
|
|
|
this.menu.draw();
|
|
|
|
textSize(20);
|
|
fill(user.colorScheme.text);
|
|
if (user.tests != undefined) {
|
|
if (this.testButtons === undefined) {
|
|
this.createTestButtons();
|
|
}
|
|
}
|
|
|
|
if (this.testButtons !== undefined && this.testButtons.length > 1) {
|
|
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()
|
|
}
|
|
} else {
|
|
fill(user.colorScheme.text);
|
|
text("Looks Like You Don't have any tests :(", windowWidth / 2, 300);
|
|
}
|
|
|
|
fill(user.colorScheme.text);
|
|
text(`Logged in as ${user.username}`, windowWidth-150, 15);
|
|
|
|
if (user.tests === undefined) {
|
|
return;
|
|
}
|
|
|
|
fill(user.colorScheme.testBad);
|
|
rect(1200, 270, 20, 420);
|
|
|
|
fill(user.colorScheme.testGood);
|
|
rect(1200, 270, 20, 420 / user.tests.length * (this.offset + 1));
|
|
this.scroll_bar_button.height = (user.tests.length)
|
|
|
|
if (this.scroll_bar_button.isPressed()) {
|
|
this.scroll_bar_button.y = mouseY - this.scroll_bar_button.height / 2;
|
|
}
|
|
|
|
|
|
// the furthest up the scrollbar can go is the top
|
|
if (this.scroll_bar_button.y < 270) {
|
|
this.scroll_bar_button.y = 270;
|
|
}
|
|
|
|
if (this.scroll_bar_button.y > 690 - this.scroll_bar_button.height) {
|
|
this.scroll_bar_button.y = 690 - this.scroll_bar_button.height;
|
|
}
|
|
this.scroll_bar_button.draw();
|
|
|
|
this.offset = Number((
|
|
// number of pixels from top of screen / total range of options, put to a whole integer to produce the correct offset
|
|
(this.scroll_bar_button.y - 270) / ((420 - this.scroll_bar_button.height) / (user.tests.length - 13))
|
|
).toFixed(0));
|
|
this.createTestButtons(this.offset);
|
|
}
|
|
|
|
createTestButtons(offset = 0) {
|
|
this.testButtons = [[
|
|
new Button(600, 270, 100, 30, "test #"), // test # button
|
|
new Button(700, 270, 100, 30, "wpm"), // wpm button
|
|
new Button(800, 270, 100, 30, "accuracy"), // accuracy button
|
|
new Button(900, 270, 240, 30, "characters typed")
|
|
]];
|
|
let j = 300;
|
|
for (let i = user.tests.length-1-offset; i >= user.tests.length-13-offset && i >= 0; i--) {
|
|
this.testButtons.push([
|
|
new Button(600, j, 100, 30, `${i+1}`, true, true , "#000", "#000", "#fff"), // test # button
|
|
new Button(700, j, 100, 30, `${user.tests[i].wpm}`, true, true , "#000", "#000", "#fff"), // accuracy button
|
|
new Button(800, j, 100, 30, `${user.tests[i].accuracy}`, true, true , "#000", "#000", "#fff"), // wpm button
|
|
new Button(900, j, 240, 30, `${user.tests[i].test_length}`, true, true , "#000", "#000", "#fff")
|
|
])
|
|
j+=30;
|
|
}
|
|
}
|
|
} |