From 7b1e348317ee9c088b4f9415e87b778fb2f42f70 Mon Sep 17 00:00:00 2001
From: ArloFilley <ArloFilley@gmail.com>
Date: Thu, 29 Sep 2022 19:40:57 +0100
Subject: [PATCH] added a timer

---
 website/index.html           |   1 +
 website/index.js             |   8 ++-
 website/ui_elements/timer.js | 128 +++++++++++++++++++++++++++++++++++
 3 files changed, 136 insertions(+), 1 deletion(-)
 create mode 100644 website/ui_elements/timer.js

diff --git a/website/index.html b/website/index.html
index 5b599c8..60a71a8 100644
--- a/website/index.html
+++ b/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>
diff --git a/website/index.js b/website/index.js
index d654c64..f729a5f 100644
--- a/website/index.js
+++ b/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();
 }
 
 
diff --git a/website/ui_elements/timer.js b/website/ui_elements/timer.js
new file mode 100644
index 0000000..8c8b559
--- /dev/null
+++ b/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)
+    }
+}
\ No newline at end of file