diff --git a/index.html b/index.html
index 86b2245..4ff24b8 100644
--- a/index.html
+++ b/index.html
@@ -17,6 +17,9 @@

+
+ 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 = `
-