diff --git a/website/index.js b/website/index.js index f729a5f..2da21be 100644 --- a/website/index.js +++ b/website/index.js @@ -10,10 +10,11 @@ function setup() { frameRate(60); textbox = new Textbox(400, 200, 700); - timer = new Timer(100, 100, 0, 0, 0, 0, 0, 0, 0, 0, 15, false); + timer = new Timer(100,100,100,100,0,true,0,false,0,0,30,true); timer.start(); } +// this function is called once per frame and draws all other elements function draw() { background(255,100,100); textbox.draw(); @@ -27,7 +28,8 @@ function keyPressed() { textbox.letterTyped(key); } - +// This ensures that the canvas is always the correct size and at the center +// of the screen, p5 calls windowResized whenever the browser size is changed. function windowResized() { canvas.resize(); canvas.center(); diff --git a/website/ui_elements/textbox.js b/website/ui_elements/textbox.js index d96351b..3cf7ec8 100644 --- a/website/ui_elements/textbox.js +++ b/website/ui_elements/textbox.js @@ -15,7 +15,7 @@ class Textbox { this.words = ""; this.allowedLetters = [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', - 'l', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', + 'l', 'm','n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'enter', '\'', '"', ',', '.', ' ' ] } diff --git a/website/ui_elements/timer.js b/website/ui_elements/timer.js index 8c8b559..31df02b 100644 --- a/website/ui_elements/timer.js +++ b/website/ui_elements/timer.js @@ -1,5 +1,19 @@ class Timer { - + // this is the doc comment for the Timer class + /** + * @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 + */ constructor(pX, pY, pWidth, pHeight, pLayer, pVisible, pTextColor, pBorder, pBorderColor, pBackgroundColor, pTime, pBar) { this.x = pX; this.y = pY; @@ -16,6 +30,7 @@ class Timer { this.startTime; this.time = pTime; this.timeElapsed; + this.ended; } getX() { @@ -111,7 +126,7 @@ class Timer { start() { this.startTime = frameCount; // 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 240 frames + // I am using the amount of frames passed to calculate the time, assuming that the website is running at 60q frames // per second this.timeElapsed = 0; } @@ -119,10 +134,37 @@ class Timer { // this function should be called once per frame tick() { this.timeElapsed = frameCount - this.startTime; + if (this.timeElapsed == this.time * 60) this.end(); } - // currently just displays the amount of time left in seconds + /** + * this function is called at the end of the timer + * @returns + */ + end() { + this.timeElapsed = 0; + this.time = 0; + this.visible = false; + // 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 + } + + // 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() { - text((this.time * 60 - this.timeElapsed) / 60, this.x, this.y) + if (!this.visible) return; + + if (this.bar) { + fill(100); + rect(0, 0, windowWidth, this.height); + } + + fill(0); + let time = (this.time * 60 - this.timeElapsed) / 60 + text(Math.round(time), this.x, this.y) } } \ No newline at end of file