From f612639eafea7f46a1e592a581949858f15bce14 Mon Sep 17 00:00:00 2001 From: KittenTM Date: Tue, 24 Feb 2026 08:42:42 +0100 Subject: [PATCH] Add cap to # of stages that can be loaded at a time note: scrolling will load more c: --- stages/stages.js | 168 +++++++++++++++++++++++++++++++---------------- 1 file changed, 110 insertions(+), 58 deletions(-) diff --git a/stages/stages.js b/stages/stages.js index 6a7ff8a..392cf12 100644 --- a/stages/stages.js +++ b/stages/stages.js @@ -1,3 +1,8 @@ +let allRotations = []; +let currentIndex = 0; +const ITEMS_PER_PAGE = 5; +let observer; + window.loadHeader(function(headerContainer) { const stageButton = headerContainer.querySelector('.menu-item.stage'); if (stageButton) { @@ -60,7 +65,7 @@ window.loadHeader(function(headerContainer) { const API_URL = `${CONFIG.API_BASE_URL}/api/v1/boss`; function stageNames(stages, lang = "en-US") { - return stages.map(s => s.translatedNames[lang]); + return stages.map(s => s.translatedNames[lang]); } function getStageClass(stageName) { @@ -114,61 +119,108 @@ async function fetchRotations() { } 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(err); - } finally { - if (loadingOverlay) loadingOverlay.style.display = "none"; - } - if (!rotations.length) { - container.innerHTML = `

Something went wrong! Try reloading the page.

`; - return; - } - let html = ""; - 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)`; - html += ` -
${formattedTime}
-
-
- Regular Battle -
Regular Battle
-
-
- ${rotation.turf.map(name => ` -
-
-
${name}
-
- `).join("")} -
-
-
-
- Ranked Battle -
Ranked Battle
-
-
-
Battle Mode
-
${rotation.ranked_mode}
-
-
- ${rotation.ranked.map(name => ` -
-
-
${name}
-
- `).join("")} -
-
- `; - } - container.innerHTML = html; + const container = document.getElementById("stages-container"); + const loadingOverlay = document.getElementById("loading-overlay"); + + try { + allRotations = await fetchRotations(); + if (!allRotations.length) { + container.innerHTML = `

Something went wrong! Try reloading the page.

`; + if (loadingOverlay) loadingOverlay.style.display = 'none'; + return; + } + + container.innerHTML = ""; + + const trigger = document.createElement('div'); + trigger.id = 'scroll-trigger'; + trigger.style.height = '2px'; + container.after(trigger); + + loadMore(true); + + observer = new IntersectionObserver((entries) => { + if (entries[0].isIntersecting && currentIndex < allRotations.length) { + loadMore(false); + } + }, { rootMargin: '200px' }); + + observer.observe(trigger); + + } catch (err) { + console.error(err); + if (loadingOverlay) loadingOverlay.style.display = 'none'; + } +} + +function loadMore(isInitial) { + const container = document.getElementById("stages-container"); + const loadingOverlay = document.getElementById("loading-overlay"); + + if (loadingOverlay) { + loadingOverlay.style.display = 'flex'; + if (typeof window.animateLoadingCanvas === 'function') { + window.animateLoadingCanvas(); + } + } + + const waitTime = isInitial ? 0 : 800; + + setTimeout(() => { + const nextBatch = allRotations.slice(currentIndex, currentIndex + ITEMS_PER_PAGE); + let html = ""; + + for (const rotation of nextBatch) { + 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)`; + + html += ` +
${formattedTime}
+
+
+ Regular Battle +
Regular Battle
+
+
+ ${rotation.turf.map(name => ` +
+
+
${name}
+
+ `).join("")} +
+
+
+
+ Ranked Battle +
Ranked Battle
+
+
+
Battle Mode
+
${rotation.ranked_mode}
+
+
+ ${rotation.ranked.map(name => ` +
+
+
${name}
+
+ `).join("")} +
+
+ `; + } + + container.insertAdjacentHTML('beforeend', html); + currentIndex += ITEMS_PER_PAGE; + + if (loadingOverlay) loadingOverlay.style.display = 'none'; + if (currentIndex >= allRotations.length) { + if (observer) observer.disconnect(); + const trigger = document.getElementById('scroll-trigger'); + if (trigger) trigger.remove(); + } + }, waitTime); } \ No newline at end of file