From be069419ceca7d1bc5a2d602d99ee5d5f1f41714 Mon Sep 17 00:00:00 2001 From: elijah <146715005+schizoposter@users.noreply.github.com> Date: Mon, 4 Nov 2024 15:58:35 +0100 Subject: [PATCH] Fixed the edge case typing animation fail. --- assets/index.js | 136 +++++++++++++++++++++--------------------------- 1 file changed, 60 insertions(+), 76 deletions(-) diff --git a/assets/index.js b/assets/index.js index 288ba58..4b8be67 100644 --- a/assets/index.js +++ b/assets/index.js @@ -1,21 +1,21 @@ -// animation speeds (ms) -const TYPING_SPEED = 180; -const ERASE_SPEED = 100; -const STATUS_UPDATE_INTERVAL = 60000; // 1min -const TIME_UPDATE_INTERVAL = 1; // 1ms (still terrible) +// animation speeds cause why not +const TYPING_SPEED = 60; +const ERASE_SPEED = 80; +const STATUS_UPDATE_INTERVAL = 60000; // 1min updates +const TIME_UPDATE_INTERVAL = 1; // 1ms updates (yeah its bad) -// status thresholds +// status warning stuff const LATENCY_WARNING_THRESHOLD = 500000; -// mapping for group names because i'm lazy +// lazy group name mapping const GROUP_NAMES = { 4: "INFRASTRUCTURE", 5: "SERVICES", 6: "API", }; -// fancy text typing animation for nav labels -// overcomplicated as fuck but whatever +// does the fancy typing animation for nav labels +// its way overcomplicated but whatever function writeoutnavlabel(label) { if (label.getAttribute("data-animating") === "true") return; @@ -44,8 +44,8 @@ function writeoutnavlabel(label) { label.setAttribute("data-animation-interval", animationInterval); } -// erase animation for nav labels -// also terrible but consistent with the above +// erases the nav labels +// just as terrible as the typing but matches function eraselabel(label) { if (label.getAttribute("data-animating") === "true") { const existingInterval = label.getAttribute("data-animation-interval"); @@ -68,8 +68,8 @@ function eraselabel(label) { label.setAttribute("data-animation-interval", eraseInterval); } -// time display updater -// still updates way too frequently but whatever +// updates the time display +// probably updates too much but eh function updateTime() { const now = new Date(); const timeString = now @@ -87,7 +87,7 @@ function updateTime() { document.getElementById("current-time").textContent = timeString; } -// status helper functions +// bunch of status helper functions for formatting and stuff function calculateAverageUptime(services) { if (!services || services.length === 0) return 0; const totalUptime = services.reduce( @@ -115,8 +115,8 @@ function getGroupName(groupId) { return GROUP_NAMES[groupId] || `GROUP ${groupId}`; } -// creates the HTML for the status page -// groups services by their group_id +// builds all the html for status page +// groups everything by group_id cause organization function createStatusHTML(services) { const groups = services.reduce((acc, service) => { const groupId = service.group_id; @@ -128,33 +128,34 @@ function createStatusHTML(services) { return Object.entries(groups) .map( ([groupId, groupServices]) => ` -
-
${getGroupName(parseInt(groupId))}
- ${groupServices - .map( - (service) => ` -
-
- - ${service.name.toUpperCase()} - ${service.online ? "OPERATIONAL" : "OFFLINE"} -
-
-
Latency: ${formatLatency(service.latency)}ms
-
Uptime 24h: ${formatUptime(service.online_24_hours)}%
-
7-day Uptime: ${formatUptime(service.online_7_days)}%
-
+
+
${getGroupName(parseInt(groupId))}
+ ${groupServices + .map( + (service) => ` +
+
+ + ${service.name.toUpperCase()} + ${service.online ? "OPERATIONAL" : "OFFLINE"}
- `, - ) - .join("")} -
- `, +
+
Latency: ${formatLatency(service.latency)}ms
+
Uptime 24h: ${formatUptime(service.online_24_hours)}%
+
7-day Uptime: ${formatUptime(service.online_7_days)}%
+
+
+ `, + ) + .join("")} +
+ `, ) .join(""); } -// main status update function +// main status updater +// fetches and displays all service statuses function updateStatus() { const statusContainer = document.getElementById("status-container"); const averageUptimeElement = document.getElementById("average-uptime"); @@ -176,9 +177,7 @@ function updateStatus() { .catch((error) => { statusContainer.innerHTML = `
- a(42, 90, 90, 0.3), 0 0 40px rgba(42, 90, 90, 0.2); } to { text-shadow: 0 0 40px rgba(42, 90, 90, 0.5), 0 0 80px rgba(42, 90, 90, 0.3); } }" - ); - }); UNABLE TO FETCH STATUS DATA + UNABLE TO FETCH STATUS DATA
${error.message}
@@ -188,13 +187,13 @@ function updateStatus() { }); } -// project expansion handlers +// handles expanding/collapsing project items +// closes others when opening new one document.querySelectorAll(".project-item").forEach((item) => { item.addEventListener("click", function () { const content = this.querySelector(".project-content"); const icon = this.querySelector(".expand-icon"); - // close other expanded items document.querySelectorAll(".project-item").forEach((otherItem) => { if (otherItem !== item) { otherItem @@ -209,7 +208,8 @@ document.querySelectorAll(".project-item").forEach((item) => { }); }); -// smooth scroll navigation +// smooth scrolls to sections when clicking nav +// better than jumping around document.querySelectorAll('a[href^="#"]').forEach((anchor) => { anchor.addEventListener("click", function (e) { e.preventDefault(); @@ -219,7 +219,8 @@ document.querySelectorAll('a[href^="#"]').forEach((anchor) => { }); }); -// active nav icon updater +// handles active nav icon updates on scroll +// shows which section youre looking at window.addEventListener("scroll", () => { let current = ""; document.querySelectorAll("section").forEach((section) => { @@ -234,34 +235,26 @@ window.addEventListener("scroll", () => { const isCurrentSection = icon.getAttribute("href") === `#${current}`; const wasActive = icon.classList.contains("active"); - if (isCurrentSection) { - if (!wasActive) { - icon.classList.add("active"); - if (icon.isAnimating) { - const text = label.getAttribute("data-text") || label.textContent; - label.textContent = text; - label.setAttribute("data-animating", "false"); - clearInterval( - parseInt(label.getAttribute("data-animation-interval")), - ); - } - if (!icon.hoverAnimationDone) { - writeoutnavlabel(label); - } + if (isCurrentSection && !wasActive) { + icon.classList.add("active"); + label.style.opacity = "1"; + if (!icon.isAnimating && !icon.hoverAnimationDone) { + writeoutnavlabel(label); icon.hoverAnimationDone = true; } - } else { - if (wasActive) { + } else if (!isCurrentSection && wasActive) { + icon.classList.remove("active"); + if (!icon.isAnimating) { eraselabel(label); - icon.classList.remove("active"); - icon.hoverAnimationDone = false; icon.isAnimating = false; + icon.hoverAnimationDone = false; } } }); }); -// nav icon hover animations +// nav icon hover stuff +// does the typing animation when hovering document.querySelectorAll(".nav-icon").forEach((icon) => { icon.hoverAnimationDone = false; icon.isAnimating = false; @@ -285,35 +278,26 @@ document.querySelectorAll(".nav-icon").forEach((icon) => { icon.addEventListener("click", () => { const label = icon.querySelector(".nav-label"); - if (icon.isAnimating) { - icon.hoverAnimationDone = true; - } else if (!icon.hoverAnimationDone) { - writeoutnavlabel(label); - icon.isAnimating = true; - icon.hoverAnimationDone = true; - } label.style.opacity = "1"; }); }); -// initialization +// sets everything up when page loads +// starts all the intervals and stuff document.addEventListener("DOMContentLoaded", () => { - // start time updates updateTime(); setInterval(updateTime, TIME_UPDATE_INTERVAL); - // start status updates updateStatus(); setInterval(updateStatus, STATUS_UPDATE_INTERVAL); - // init active nav icon const activeNavIcon = document.querySelector(".nav-icon.active"); if (activeNavIcon) { const label = activeNavIcon.querySelector(".nav-label"); if (label) writeoutnavlabel(label); } - // fancy console log because why not + // fancy console log for style points console.log( "%cELIA.NETWORK", "color: #2a5a5a; font-size: 24px; font-weight: bold; text-shadow: 2px 2px 4px rgba(42, 90, 90, 0.3);",