diff --git a/website/api/api.js b/website/api/api.js
index b1c797e..7c67b70 100644
--- a/website/api/api.js
+++ b/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();
diff --git a/website/index.html b/website/index.html
index b080f33..92e96f8 100644
--- a/website/index.html
+++ b/website/index.html
@@ -14,6 +14,7 @@
+
diff --git a/website/index.js b/website/index.js
index 84e0790..61caf6d 100644
--- a/website/index.js
+++ b/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();
}
diff --git a/website/ui_elements/button.js b/website/ui_elements/button.js
new file mode 100644
index 0000000..217adcb
--- /dev/null
+++ b/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
+ }
+}
\ No newline at end of file