From 732e6b83370d6bc3946d98ad28cf17a4ea4ea80b Mon Sep 17 00:00:00 2001 From: KittenTM Date: Thu, 22 Jan 2026 23:08:26 -0500 Subject: [PATCH] 5am changes but page is complete! --- index.html | 3 ++ stages.js | 94 ++++++++++++++++++++++++++++-------------------------- styles.css | 92 ++++++++++++++++++++++++++++++++++++++++++++++------ 3 files changed, 133 insertions(+), 56 deletions(-) diff --git a/index.html b/index.html index 86b2245..4ff24b8 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,9 @@
Stage Info +
+ Use the stage information to guide your weapon strategy and battle strategy! +
diff --git a/stages.js b/stages.js index a8bda6a..648f5fc 100644 --- a/stages.js +++ b/stages.js @@ -9,7 +9,6 @@ function stageImagePath(stageName) { .split(" ")[0] .toLowerCase() .replace(/['.]/g, ""); - return `/assets/stages/${firstWord}.png`; } @@ -18,30 +17,29 @@ async function fetchRotations() { const res = await fetch(API_URL); if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`); const data = await res.json(); - const rotations = data?.pretendo?.rotations ?? {}; const now = new Date(); + const timestamps = Object.keys(rotations).sort((a, b) => Number(a) - Number(b)); - const timestamps = Object.keys(rotations).sort( - (a, b) => Number(a) - Number(b) - ); + const result = []; for (const ts of timestamps) { const start = new Date(Number(ts)); const end = new Date(start.getTime() + 2 * 60 * 60 * 1000); - if (end < now) continue; const r = rotations[ts]; - return [{ - turf: stageNames(r.turfStages).map(stageImagePath), - ranked: stageNames(r.rankedStages).map(stageImagePath), - ranked_mode: r.rankedMode?.translatedNames?.["en-US"] ?? "Ranked" - }]; + result.push({ + turf: stageNames(r.turfStages), + ranked: stageNames(r.rankedStages), + ranked_mode: r.rankedMode.replace(/([a-z])([A-Z])/g, "$1 $2"), + startTime: start, + endTime: end + }); } - return []; + return result; } catch (error) { console.error("Failed to fetch rotations:", error); return []; @@ -52,48 +50,41 @@ function animateLoadingCanvas() { const canvas = document.getElementById("loading-canvas"); const loadingOverlay = document.getElementById("loading-overlay"); if (!canvas || !loadingOverlay) return; - const ctx = canvas.getContext("2d"); const image = new Image(); image.src = "/assets/loading.png"; - const frameWidth = 100; const frameHeight = 100; const totalFrames = 17; - let currentFrame = 0; let lastUpdateTime = 0; - const frameDuration = 50; - let animationId; - image.onload = () => { function animate(timestamp = 0) { if (loadingOverlay.style.display === "none") { cancelAnimationFrame(animationId); return; } - if (!lastUpdateTime) lastUpdateTime = timestamp; const elapsed = timestamp - lastUpdateTime; - - if (elapsed > frameDuration) { + if (elapsed > 50) { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage( image, - 0, currentFrame * frameHeight, - frameWidth, frameHeight, - 0, 0, - frameWidth, frameHeight + 0, + currentFrame * frameHeight, + frameWidth, + frameHeight, + 0, + 0, + frameWidth, + frameHeight ); - currentFrame = (currentFrame + 1) % totalFrames; lastUpdateTime = timestamp; } - animationId = requestAnimationFrame(animate); } - animationId = requestAnimationFrame(animate); }; } @@ -101,43 +92,54 @@ function animateLoadingCanvas() { async function renderStages() { const loadingOverlay = document.getElementById("loading-overlay"); const container = document.getElementById("stages-container"); - let rotations = []; try { rotations = await fetchRotations(); } catch (err) { console.error("Error in renderStages:", err); } finally { - loadingOverlay.style.display = "none"; // always hide loading + loadingOverlay.style.display = "none"; } - if (!rotations.length) { - container.innerHTML = ` -

- Something went wrong! Try reloading the page. If this problem persists you may be ratelimited. -

- `; - + container.innerHTML = `

Something went wrong! Try reloading the page. If this problem persists you may be ratelimited.

`; return; } - for (const rotation of rotations) { + const optionsDate = { day: "2-digit", month: "2-digit" }; + const optionsTime = { hour: "numeric", minute: "2-digit", hour12: true }; + const timeZone = "Europe/Paris"; + const formattedTime = `${rotation.startTime.toLocaleDateString("en-GB", { ...optionsDate, timeZone })} at ${rotation.startTime.toLocaleTimeString("en-GB", { ...optionsTime, timeZone })} (CEST) ~ ${rotation.endTime.toLocaleDateString("en-GB", { ...optionsDate, timeZone })} at ${rotation.endTime.toLocaleTimeString("en-GB", { ...optionsTime, timeZone })} (CEST)`; + container.innerHTML += ` +
${formattedTime}
+
-

Turf War

+ Regular Battle +
Regular Battle
- ${rotation.turf.map(img => - `Turf Stage` - ).join("")} + ${rotation.turf.map(name => ` +
+ ${name} +
${name}
+
+ `).join("")}
-

Ranked Battle (${rotation.ranked_mode})

+ Ranked Battle +
Ranked Battle
+
+
Battle Mode
+
${rotation.ranked_mode}
+
- ${rotation.ranked.map(img => - `Ranked Stage` - ).join("")} + ${rotation.ranked.map(name => ` +
+ ${name} +
${name}
+
+ `).join("")}
`; diff --git a/styles.css b/styles.css index fac166c..e99d8cb 100644 --- a/styles.css +++ b/styles.css @@ -5,6 +5,13 @@ font-style: normal; } +@font-face { + font-family: "Regular"; + src: url("./regular.otf") format("opentype"); + font-weight: normal; + font-style: normal; +} + html, body { margin: 0; padding: 0; @@ -57,7 +64,7 @@ body { /* STAGES */ .stages-container { width: 100%; - max-width: 600px; + max-width: 400px; display: flex; flex-direction: column; gap: 32px; @@ -71,13 +78,10 @@ body { width: 100%; } -.stages-section h2 { - margin: 0; - color: white; - text-align: center; - font-family: "Splatoon1", sans-serif; - font-size: 28px; - letter-spacing: 1px; +.stages-section { + background-color: rgba(0, 0, 0, 0.7); + border-radius: 14px; + padding: 16px 18px 20px; } .stages { @@ -87,11 +91,59 @@ body { width: 100%; } +.stage-info-text { + margin-top: 6px; + margin-bottom: 24px; + max-width: 600px; + text-align: left; + color: white; + font-family: "Regular", sans-serif; + font-size: 40px; + line-height: 1.4; +} + +.stage-title { + font-family: "regular"; + text-align: center; + margin-top: 6px; + font-size: 28px; + color: white; + margin-top: 6px; +} + .stages img { width: 100%; height: auto; display: block; - border-radius: 8px; + margin-bottom: 20px; + margin-top: 20px; +} + +.ranked-mode-labels { + text-align: center; + margin-bottom: 12px; +} +.battle-mode-text { + font-family: "Splatoon1", sans-serif; + color: white; + font-size: 30px; + letter-spacing: 1px; + margin-bottom: 4px; +} +.ranked-mode-text { + font-family: "Regular", sans-serif; + color: white; + font-size: 25px; + letter-spacing: 0.8px; +} + +.rotation-time { + text-align: center; + color: white; + font-family: "Regular", sans-serif; + font-size: 33px; + margin: 36px 0 12px 0; + letter-spacing: 0.8px; } .error-message { @@ -101,6 +153,26 @@ body { margin-top: 40px; } +.mode-title { + display: block; + margin: 4px auto 4px; + max-width: 166px; + width: 80%; + height: auto; +} + +.mode-text { + margin-top: 0px; + margin-bottom: 28px; + text-align: center; + color: white; + font-family: "Splatoon1", sans-serif; + font-size: 44px; + letter-spacing: 1.2px; + user-select: none; +} + + .loading-overlay { position: fixed; top: 50%; @@ -137,4 +209,4 @@ body { font-size: 20px; letter-spacing: 1.2px; text-align: center; -} +} \ No newline at end of file