From 3d10d6654ffb55bb8bf71fe30bc87292b8073a3b Mon Sep 17 00:00:00 2001 From: ArloFilley Date: Sat, 23 Mar 2024 15:56:37 +0000 Subject: [PATCH] account icons fixed for dark mode and leaderboard updates --- ...nt_circle.svg => account_circle_black.svg} | 0 public/assets/icons/account_circle_white.svg | 3 + public/components/button.js | 17 +++++ public/components/menu.js | 2 +- public/components/user.js | 65 ++++++++++++++++--- public/index.css | 4 +- public/index.js | 3 +- public/leaderboard/index.html | 1 + 8 files changed, 83 insertions(+), 12 deletions(-) rename public/assets/icons/{account_circle.svg => account_circle_black.svg} (100%) create mode 100644 public/assets/icons/account_circle_white.svg diff --git a/public/assets/icons/account_circle.svg b/public/assets/icons/account_circle_black.svg similarity index 100% rename from public/assets/icons/account_circle.svg rename to public/assets/icons/account_circle_black.svg diff --git a/public/assets/icons/account_circle_white.svg b/public/assets/icons/account_circle_white.svg new file mode 100644 index 0000000..efde180 --- /dev/null +++ b/public/assets/icons/account_circle_white.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/components/button.js b/public/components/button.js index 2a1e752..72151ce 100755 --- a/public/components/button.js +++ b/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 */ diff --git a/public/components/menu.js b/public/components/menu.js index b9a74c9..2b7fe76 100755 --- a/public/components/menu.js +++ b/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()) } diff --git a/public/components/user.js b/public/components/user.js index a816a4d..e70cb4c 100644 --- a/public/components/user.js +++ b/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 - * as providing a visual element for the user to see + * Represents a visual element for editing the length of a test. + * @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); - - tint(255, 0, 255, 126); - image(accountIcon, this.x + this.height / 2, this.y + this.width / 2); - + // Check button state and display appropriate icon 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); } } -} \ No newline at end of file +} diff --git a/public/index.css b/public/index.css index b7e9549..b7ac9cf 100755 --- a/public/index.css +++ b/public/index.css @@ -6,8 +6,8 @@ Author: Arlo Filley */ :root { - --background-color: #dde83d; - --text-color: #000000; + --background-color: #000000; + --text-color: yellow; --font: Verdana, Geneva, Tahoma, sans-serif; } diff --git a/public/index.js b/public/index.js index 5dc26ee..af54c6b 100644 --- a/public/index.js +++ b/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'); } /** diff --git a/public/leaderboard/index.html b/public/leaderboard/index.html index 14e6cb3..78ff213 100644 --- a/public/leaderboard/index.html +++ b/public/leaderboard/index.html @@ -9,6 +9,7 @@

Leaderboard

+