added more functionality to timer and more comments in all files

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

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

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