account icons fixed for dark mode and leaderboard updates

public/assets/icons/account_circle_white.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+  <path fill="#FFFFFF" d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z"/>
+</svg>

public/components/button.js

@@ -64,6 +64,8 @@ class Button {
         this.hoverBorderColor = pHoverBorderColor;
         this.hoverTextColor = pHoverTextColor;
         this.hoverBackgroundColor = pHoverBackgroundColor;
+
+        this.lastPressed = 0;
     }
 
     getx() {
@@ -162,6 +164,8 @@ class Button {
             return;
         } else if (!mouseIsPressed) {  // a unique p5.js value that checks if the mouse is clicked
             return false;
+        } else if (millis() - this.lastPressed < 40) {
+            return false;
         }
 
         // if the mouse is within the bounds of the return that the button has been pressed
@@ -171,6 +175,19 @@ class Button {
         return false;
     }
 
+    isHovered() {
+        if (!this.visible) {
+            return;
+        }
+
+        // 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) {
+            return true;
+        }
+
+        return false;
+    }
+
     /**
      * This function draws the button with the label
      */

public/components/menu.js

@@ -34,7 +34,7 @@ class Menu {
         } else if (this.buttons[1].isPressed()) {
             screenManager.setScreen(new TestScreen())
         } else if (this.buttons[2].isPressed()) {
-            screenManager.setScreen(new LeaderboardScreen())
+            window.location.href = "/typing/leaderboard/index.html";
         } else if (this.buttons[3].isPressed()) {
             screenManager.setScreen(new SettingsScreen())
         }

public/components/user.js

@@ -1,35 +1,84 @@
 /**
- * @file   This file provides a time menu class for editing the length of a test
+ * @file This file provides a UserShower class, representing a visual element for editing the length of a test.
  * @author Arlo Filley
  */
 
 /**
- *  This class provides the timer, which handles when a test starts and ends as well
+ * Represents a visual element for editing the length of a test.
- *  as providing a visual element for the user to see
+ * @class
  */
 class UserShower {
+    /**
+     * Creates an instance of UserShower.
+     * @constructor
+     * @param {number} x - The x-coordinate of the UserShower.
+     * @param {number} y - The y-coordinate of the UserShower.
+     * @param {number} height - The height of the UserShower.
+     * @param {number} width - The width of the UserShower.
+     */
     constructor(x, y, height, width) {
+        /**
+         * Represents the button associated with the UserShower.
+         * @type {Button}
+         */
         this.button = new Button(x, y, height, width, "");
 
+        /**
+         * The x-coordinate of the UserShower.
+         * @type {number}
+         */
         this.x = x;
+
+        /**
+         * The y-coordinate of the UserShower.
+         * @type {number}
+         */
         this.y = y;
+
+        /**
+         * The height of the UserShower.
+         * @type {number}
+         */
         this.height = height;
+
+        /**
+         * The width of the UserShower.
+         * @type {number}
+         */
         this.width = width;
+
+        /**
+         * The horizontal center of the UserShower.
+         * @type {number}
+         */
+        this.hCenter = this.x + this.height / 2;
+
+        /**
+         * The vertical center of the UserShower.
+         * @type {number}
+         */
+        this.vCenter = this.y + this.width / 2;
     }
 
+    /**
+     * Draws the UserShower and its associated button.
+     */
     draw() {
         textAlign(CENTER, CENTER);
 
+        // Draw the button
         this.button.draw();
 
+        // Set image mode to center
         imageMode(CENTER);
 
-
+        // Check button state and display appropriate icon
-        tint(255, 0, 255, 126);
-        image(accountIcon, this.x + this.height / 2, this.y + this.width / 2);
-
         if (this.button.isPressed()) {
             screenManager.setScreen(new AccountScreen());
+        } else if (this.button.isHovered()) {
+            image(accountIconBlack, this.hCenter, this.vCenter);
+        } else {
+            image(accountIconWhite, this.hCenter, this.vCenter);
         }
     }
 }

public/index.css

@@ -6,8 +6,8 @@ Author: Arlo Filley
 */
 
 :root {
-    --background-color: #dde83d;
+    --background-color: #000000;
-    --text-color: #000000;
+    --text-color: yellow;
     --font: Verdana, Geneva, Tahoma, sans-serif;
 }
 

public/index.js

@@ -14,7 +14,8 @@ let canvas, api, screenManager, user;
 */
 function preload() {
     roboto = loadFont('./assets/fonts/RobotoMono-Medium.ttf');  
-    accountIcon = loadImage('./assets/icons/account_circle.svg');
+    accountIconBlack = loadImage('./assets/icons/account_circle_black.svg');
+    accountIconWhite = loadImage('./assets/icons/account_circle_white.svg');
 } 
 
 /**

public/leaderboard/index.html

@@ -9,6 +9,7 @@
 <body>
     <H1>Leaderboard</H1>
     <button class="refresh-button" onclick="fetchLeaderboard()">⟳</button>
+    <a href="../index.html"><button>Go Back</button></a>
     <table id="leaderboardTable">
         <thead>
             <tr>