diff --git a/website/index.js b/website/index.js index 2da21be..9200206 100644 --- a/website/index.js +++ b/website/index.js @@ -10,13 +10,13 @@ function setup() { frameRate(60); textbox = new Textbox(400, 200, 700); - timer = new Timer(100,100,100,100,0,true,0,false,0,0,30,true); + timer = new Timer(0, 0, 100, 100, 0, true, '#000', true, '#000','#F3C969', 30, true); timer.start(); } // this function is called once per frame and draws all other elements function draw() { - background(255,100,100); + background(200); textbox.draw(); timer.tick(); timer.draw(); diff --git a/website/ui_elements/textbox.js b/website/ui_elements/textbox.js index 3cf7ec8..46920f9 100644 --- a/website/ui_elements/textbox.js +++ b/website/ui_elements/textbox.js @@ -16,7 +16,7 @@ class Textbox { this.allowedLetters = [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm','n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', - 'x', 'y', 'z', 'enter', '\'', '"', ',', '.', ' ' + 'x', 'y', 'z', '\'', '"', ',', '.', ' ' ] } diff --git a/website/ui_elements/timer.js b/website/ui_elements/timer.js index 31df02b..316d31f 100644 --- a/website/ui_elements/timer.js +++ b/website/ui_elements/timer.js @@ -113,16 +113,24 @@ class Timer { this.backgroundColor = pBackgroundColor; } - // time is the amount of seconds that the test should take + /** + * gets the amount of time the timer will run for + */ getTime() { return this.time; } + /** + * sets the amount of time the timer will run for + * @param {int} pTime + */ setTime(pTime) { this.time = pTime; } - // when the timer needs to be started this method is called + /** + * This method is called to start the timer + */ start() { this.startTime = frameCount; // framecount is a special p5 value that counts the number of frames that have passed @@ -131,7 +139,10 @@ class Timer { this.timeElapsed = 0; } - // this function should be called once per frame + /** + * This method should be called once per frame + * it keeps track of the amount of time passed + */ tick() { this.timeElapsed = frameCount - this.startTime; if (this.timeElapsed == this.time * 60) this.end(); @@ -139,8 +150,7 @@ class Timer { /** * this function is called at the end of the timer - * @returns - */ + */ end() { this.timeElapsed = 0; this.time = 0; @@ -149,22 +159,33 @@ class Timer { // this will likely including changing the screen and interacting with the api } - // currently just displays the amount of time left in seconds, also draws the bar if option - // been enabled /** * Draws the timer, uses the attributes of the class as options - * @returns */ draw() { + // if the time shouldn't be rendered it quickly exits out of this method if (!this.visible) return; - if (this.bar) { - fill(100); - rect(0, 0, windowWidth, this.height); + // 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(); } - fill(0); + // draws a bar that move across the screen to show the time left + if (this.bar) { + fill(this.backgroundColor); + rect(this.y, this.x, windowWidth - windowWidth / (this.time * 60) * this.timeElapsed , this.height); + } + + // draws the text in the corner of the screen + noStroke(); + fill(this.textColor); let time = (this.time * 60 - this.timeElapsed) / 60 - text(Math.round(time), this.x, this.y) + text(Math.ceil(time), this.x + this.width / 6, this.y + this.height / 2) } } \ No newline at end of file