added topbar to timer and lots of comments

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();

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', '\'', '"', ',', '.', ' '
         ]
     }
 

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)
     }
 }