From 98034f48ef386ef23c661882af28826fcb5f2457 Mon Sep 17 00:00:00 2001
From: ArloFilley <ArloFilley@gmail.com>
Date: Mon, 3 Oct 2022 10:02:55 +0100
Subject: [PATCH] added more functionality to timer and more comments in all
 files

---
 website/index.js               |  6 ++--
 website/ui_elements/textbox.js |  2 +-
 website/ui_elements/timer.js   | 50 +++++++++++++++++++++++++++++++---
 3 files changed, 51 insertions(+), 7 deletions(-)

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