CS-Coursework/website/ui_elements/timer.js

212 lines
5.1 KiB
JavaScript
Raw Normal View History

2022-11-28 11:04:49 +00:00
/**
* @file This file provides a time menu class for editing the length of a test
* @author Arlo Filley
*
* TODO:
* - implement visual changes (borders, etc)
* - fix the timer number becoming invisible after a
* it drops below a certain amount of time
* - use getters and setters
* - use the millis() p5.js function for if the framerate becomes
* slowed down by the amount being drawn to the screen
*/
/**
* This class provides the timer, which handles when a test starts and ends as well
* as providing a visual element for the user to see
*/
2022-09-29 19:40:57 +01:00
class Timer {
/**
* @param {int} pX
* @param {int} pY
* @param {int} pWidth
* @param {int} pHeight
* @param {int} pLayer
* @param {bool} pVisible
* @param {hexcode} pTextColor
* @param {bool} pBorder
* @param {hexcode} pBorderColor
* @param {hexcode} pBackgroundColor
* @param {int} pTime
* @param {bool} pBar
*/
2022-09-29 19:40:57 +01:00
constructor(pX, pY, pWidth, pHeight, pLayer, pVisible, pTextColor, pBorder, pBorderColor, pBackgroundColor, pTime, pBar) {
this.x = pX;
this.y = pY;
this.width = pWidth;
this.height = pHeight;
this.layer = pLayer;
this.visible = pVisible;
this.textColor = pTextColor;
this.border = pBorder;
this.borderColor = pBorderColor;
this.backgroundColor = pBackgroundColor;
this.bar = pBar;
this.startTime;
this.time = pTime;
this.timeElapsed;
this.ended;
2022-09-29 19:40:57 +01:00
}
getX() {
return this.x;
}
setX(pX) {
this.x = pX;
}
getY() {
return this.y;
}
setY(pY) {
this.y = pY;
}
getWidth() {
return this.width;
}
setWidth(pWidth) {
this.width = pWidth;
}
getHeight() {
return this.height;
}
setHeight(pHeight) {
this.height = pHeight;
}
getLayer() {
return this.layer;
}
setLayer(pLayer) {
this.layer = pLayer;
}
getVisible() {
return this.visible;
}
setVisible(pVisible) {
this.visible = pVisible;
}
getTextColor() {
return this.textColor;
}
setTextColor(pTextColor) {
this.textColor = pTextColor;
}
getBorder() {
return this.border;
}
setBorder(pBorder) {
this.border = pBorder;
}
getBorderColor() {
return this.borderColor;
}
setBorderColor(pBorderColor) {
this.borderColor = pBorderColor;
}
getBackgroundColor() {
return this.backgroundColor;
}
setBackgroundColor(pBackgroundColor) {
this.backgroundColor = pBackgroundColor;
}
/**
* gets the amount of time the timer will run for
*/
2022-09-29 19:40:57 +01:00
getTime() {
return this.time;
}
/**
* sets the amount of time the timer will run for
* @param {int} pTime
*/
2022-09-29 19:40:57 +01:00
setTime(pTime) {
this.time = pTime;
}
/**
* This method is called to start the timer
*/
2022-09-29 19:40:57 +01:00
start() {
2022-12-01 14:41:14 +00:00
this.startTime = millis();
2022-09-29 19:40:57 +01:00
// framecount is a special p5 value that counts the number of frames that have passed
// I am using the amount of frames passed to calculate the time, assuming that the website is running at 60q frames
2022-09-29 19:40:57 +01:00
// per second
this.timeElapsed = 0;
}
/**
* This method should be called once per frame
* it keeps track of the amount of time passed
*/
2022-09-29 19:40:57 +01:00
tick() {
2022-12-01 14:41:14 +00:00
this.timeElapsed = (millis() - this.startTime) / 1000;
if (this.timeElapsed >= this.time) {
this.end();
};
}
/**
* this function is called at the end of the timer
*/
end() {
this.visible = false;
api.validateTest();
this.timeElapsed = 0;
this.time = 0;
2022-11-18 14:51:05 +00:00
api.getTest();
// Then this function will call all other functions necessary to complete the test
// this will likely including changing the screen and interacting with the api
screenManager.setScreen(new EndScreen());
2022-09-29 19:40:57 +01:00
}
/**
* Draws the timer, uses the attributes of the class as options
*/
2022-09-29 19:40:57 +01:00
draw() {
// if the time shouldn't be rendered it quickly exits out of this method
if (!this.visible) return;
2022-10-11 09:45:40 +01:00
textAlign(LEFT);
// adds a border for the bar if one is needed
if (this.border && this.bar) {
strokeWeight(1);
stroke(this.borderColor);
// this doesn't use the fill function like other drawings
// but this adds the necessary color to the border
} else {
noStroke();
}
// draws a bar that move across the screen to show the time left
if (this.bar) {
2022-12-01 14:41:14 +00:00
fill(user.colorScheme.timerBar);
rect(this.y, this.x, windowWidth - windowWidth * (this.timeElapsed / this.time), this.height);
}
// draws the text in the corner of the screen
noStroke();
2022-12-01 14:41:14 +00:00
fill(user.colorScheme.timerText);
text(Math.ceil(this.time - this.timeElapsed), this.x + this.width / 6, this.y + this.height / 2)
2022-09-29 19:40:57 +01:00
}
}