added a button class which can be used by later classes

website/api/api.js

@@ -18,16 +18,16 @@ class API {
      * @param {int} accuracy 
      * @param {int} userId 
      */
-    postTest(testType, testLength, testTime, testSeed, quoteId, wpm, accuracy, userId) {
+    postTest(pTestType, pTestLength, pTestTime, pTestSeed, pQuoteId, pWpm, pAccuracy, pUserId) {
         const data = {
-            'test_type': testType,
-            'test_length': testLength,
-            'test_time': testTime,
-            'test_seed': testSeed,
-            'quote_id': quoteId,
-            'wpm': wpm,
-            'accuracy': accuracy,
-            'user_id': userId
+            'test_type': pTestType,
+            'test_length': pTestLength,
+            'test_time': pTestTime,
+            'test_seed': pTestSeed,
+            'quote_id': pQuoteId,
+            'wpm': pWpm,
+            'accuracy': pAccuracy,
+            'user_id': pUserId
         }
 
         const xhr = new XMLHttpRequest();

website/index.html

@@ -14,6 +14,7 @@
     <script src="./ui_elements/canvas.js"></script>
     <script src="./ui_elements/textbox.js"></script>
     <script src="./ui_elements/timer.js"></script>
+    <script src="./ui_elements/button.js"></script>
 
     <!-- API Script Files -->
     <script src="./api/api.js"></script>

website/index.js

@@ -1,6 +1,6 @@
 let canvas;
 let api;
-let textbox, timer;
+let textbox, timer, button;
 
 function setup() {
     // Creating the canvas
@@ -14,6 +14,7 @@ function setup() {
     timer = new Timer(0, 0, 100, 100, 0, true, '#000', true, '#000','#F3C969', 10, true);
     timer.start();
     api = new API();
+    button = new Button(300, 300, 100, 50, 0, true, '#fff', false, '#000', '#666', 'button');
 }
 
 // this function is called once per frame and draws all other elements
@@ -22,6 +23,8 @@ function draw() {
     textbox.draw();
     timer.tick();
     timer.draw();
+    button.draw(); 
+    button.isPressed();
 }
 
 

website/ui_elements/button.js

@@ -0,0 +1,149 @@
+class Button {
+    // 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 
+    * @param {string} Label
+    */
+     constructor(pX, pY, pWidth, pHeight, pLayer, pVisible, pTextColor, pBorder, pBorderColor, pBackgroundColor, pLabel) {
+        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.label = pLabel;
+    }
+
+    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;
+    }
+
+    getLabel() {
+        return this.label;
+    }
+
+    setLabel(pLabel) {
+        this.label = pLabel;
+    }
+
+    /**
+     * This functions returns more 
+     * @returns 
+     */
+    isPressed() {
+        if (!mouseIsPressed) {
+            // a unique p5.js value that checks if the mouse is clicked
+            return false;
+        }
+
+        // if the mouse is within the bounds of the return that the button has been pressed
+        if (mouseX > this.x && mouseX < this.x + this.width && mouseY > this.y && mouseY < this.y + this.height) {
+            console.log("button has been pressed");
+            return true;
+        }
+        return false;
+    }
+
+    /**
+     * This function draws the button with the label
+     */
+    draw() {
+        fill(this.backgroundColor);
+        rect(this.x, this.y, this.width, this.height);
+
+        fill(this.textColor);
+        text(this.label, this.x, this.y, this.x + this.width, this.y + this.height); 
+        // passing 4 arguments to this function means the text will wrap within this box
+    }
+}