added a timer

website/index.html

@@ -13,6 +13,7 @@
     <!-- Element Script Files -->
     <script src="./ui_elements/canvas.js"></script>
     <script src="./ui_elements/textbox.js"></script>
+    <script src="./ui_elements/timer.js"></script>
 
     <!-- API Script Files -->
 </head>

website/index.js

@@ -1,5 +1,5 @@
 let canvas;
-let textbox;
+let textbox, timer;
 
 function setup() {
     // Creating the canvas
@@ -7,12 +7,18 @@ function setup() {
     canvas.resize();
     canvas.center();
 
+    frameRate(60);
+
     textbox = new Textbox(400, 200, 700);
+    timer = new Timer(100, 100, 0, 0, 0, 0, 0, 0, 0, 0, 15, false);
+    timer.start();
 }
 
 function draw() {
     background(255,100,100);
     textbox.draw();
+    timer.tick();
+    timer.draw();
 }
 
 

website/ui_elements/timer.js

@@ -0,0 +1,128 @@
+class Timer {
+
+    constructor(pX, pY, pWidth, pHeight, pLayer, pVisible, pTextColor, pBorder, pBorderColor, pBackgroundColor, pTime, pBar) {
+        this.x = pX;
+        this.y = pY;
+        this.width = pWidth;
+        this.height = pHeight;
+        this.layer = pLayer;
+        this.visible = pVisible;
+        this.textColor = pTextColor;
+        this.border = pBorder;
+        this.borderColor = pBorderColor;
+        this.backgroundColor = pBackgroundColor;
+
+        this.bar = pBar;
+        this.startTime;
+        this.time = pTime;
+        this.timeElapsed;
+    }
+
+    getX() {
+        return this.x;
+    }
+
+    setX(pX) {
+        this.x = pX;
+    }
+
+    getY() {
+        return this.y;
+    }
+
+    setY(pY) {
+        this.y = pY;
+    }
+
+    getWidth() {
+        return this.width;
+    }
+
+    setWidth(pWidth) {
+        this.width = pWidth;
+    } 
+
+    getHeight() {
+        return this.height;
+    } 
+
+    setHeight(pHeight) {
+        this.height = pHeight;
+    } 
+
+    getLayer() {
+        return this.layer;
+    } 
+
+    setLayer(pLayer) {
+        this.layer = pLayer;
+    } 
+
+    getVisible() {
+        return this.visible;
+    } 
+
+    setVisible(pVisible) {
+        this.visible = pVisible;
+    } 
+
+    getTextColor() {
+        return this.textColor;
+    } 
+
+    setTextColor(pTextColor) {
+        this.textColor = pTextColor;
+    } 
+
+    getBorder() {
+        return this.border;
+    } 
+
+    setBorder(pBorder) {
+        this.border = pBorder;
+    } 
+
+    getBorderColor() {
+        return this.borderColor;
+    } 
+
+    setBorderColor(pBorderColor) {
+        this.borderColor = pBorderColor;
+    } 
+
+    getBackgroundColor() {
+        return this.backgroundColor;
+    } 
+
+    setBackgroundColor(pBackgroundColor) {
+        this.backgroundColor = pBackgroundColor;
+    }
+
+    // time is the amount of seconds that the test should take
+    getTime() {
+        return this.time;
+    }
+
+    setTime(pTime) {
+        this.time = pTime;
+    }
+
+    // when the timer needs to be started this method is called
+    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
+        // per second
+        this.timeElapsed = 0;
+    }
+
+    // this function should be called once per frame
+    tick() {
+        this.timeElapsed = frameCount - this.startTime;
+    }
+
+    // currently just displays the amount of time left in seconds
+    draw() {
+        text((this.time * 60 - this.timeElapsed) / 60, this.x, this.y)
+    }
+}