forked from spacebar/SplatNet
feat: display splatfest stages instead of normal rotation when a splatfest is occuring
This commit is contained in:
parent
e726f9d2fe
commit
adbd516e00
5 changed files with 143 additions and 65 deletions
164
stages/stages.js
164
stages/stages.js
|
|
@ -105,7 +105,7 @@ window.loadHeader(async function(headerContainer) {
|
|||
|
||||
if (nameEl) {
|
||||
const parsedName = miiBlob ? extractMiiName(miiBlob) : null;
|
||||
nameEl.textContent = parsedName || (data.mii && data.mii.name) || data.nickname || data.user_id || data.username || "User";
|
||||
nameEl.textContent = parsedName || (data.mii && data.mii.name) || data.nickname || data.user_id || data.username || "Loading...";
|
||||
}
|
||||
|
||||
if (imgEl && miiBlob) {
|
||||
|
|
@ -189,13 +189,39 @@ 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();
|
||||
let allData = Object.keys(rotations).map(ts => {
|
||||
|
||||
const fest = data?.splatfestivalSplatfest;
|
||||
let currentFest = null;
|
||||
|
||||
if (fest && fest.stages && fest.stages.length > 0) {
|
||||
const festStart = new Date(fest.time.start * 1000);
|
||||
const festEnd = new Date(fest.time.end * 1000);
|
||||
|
||||
if (now >= festStart && now <= festEnd) {
|
||||
currentFest = {
|
||||
isFest: true,
|
||||
turf: stageNames(fest.stages),
|
||||
startTime: festStart,
|
||||
endTime: festEnd,
|
||||
isExpired: false
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if (currentFest) {
|
||||
return [currentFest];
|
||||
}
|
||||
|
||||
const rotations = data?.pretendo?.rotations ?? {};
|
||||
|
||||
let standardRotations = Object.keys(rotations).map(ts => {
|
||||
const start = new Date(Number(ts));
|
||||
const end = new Date(start.getTime() + 2 * 60 * 60 * 1000);
|
||||
const r = rotations[ts];
|
||||
const end = new Date(start.getTime() + (r.duration * 60 * 60 * 1000));
|
||||
|
||||
return {
|
||||
isFest: false,
|
||||
turf: stageNames(r.turfStages),
|
||||
ranked: stageNames(r.rankedStages),
|
||||
ranked_mode: r.rankedMode.replace(/([a-z])([A-Z])/g, "$1 $2"),
|
||||
|
|
@ -204,8 +230,10 @@ async function fetchRotations() {
|
|||
isExpired: end < now
|
||||
};
|
||||
});
|
||||
const active = allData.filter(r => !r.isExpired).sort((a, b) => a.startTime - b.startTime);
|
||||
const past = allData.filter(r => r.isExpired).sort((a, b) => b.startTime - a.startTime);
|
||||
|
||||
const active = standardRotations.filter(r => !r.isExpired).sort((a, b) => a.startTime - b.startTime);
|
||||
const past = standardRotations.filter(r => r.isExpired).sort((a, b) => b.startTime - a.startTime);
|
||||
|
||||
return [...active, ...past];
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
|
|
@ -215,32 +243,25 @@ async function fetchRotations() {
|
|||
|
||||
async function renderStages() {
|
||||
const container = document.getElementById("stages-container");
|
||||
|
||||
try {
|
||||
allRotations = await fetchRotations();
|
||||
if (!allRotations.length) {
|
||||
container.innerHTML = `<h2 class="error-message">Something went wrong! Try reloading the page.</h2>`;
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = "";
|
||||
|
||||
const trigger = document.createElement('div');
|
||||
trigger.id = 'scroll-trigger';
|
||||
trigger.style.height = '10px';
|
||||
trigger.style.display = 'none';
|
||||
container.after(trigger);
|
||||
|
||||
loadMore(true);
|
||||
|
||||
observer = new IntersectionObserver((entries) => {
|
||||
if (entries.isIntersecting && currentIndex > 0 && currentIndex < allRotations.length) {
|
||||
loadMore(false);
|
||||
}
|
||||
}, { rootMargin: '0px 0px 100px 0px' });
|
||||
|
||||
observer.observe(trigger);
|
||||
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
|
|
@ -253,9 +274,7 @@ function loadMore(isInitial) {
|
|||
|
||||
if (!isInitial && loadingOverlay) {
|
||||
loadingOverlay.style.display = 'flex';
|
||||
if (typeof window.animateLoadingCanvas === 'function') {
|
||||
window.animateLoadingCanvas();
|
||||
}
|
||||
if (typeof window.animateLoadingCanvas === 'function') window.animateLoadingCanvas();
|
||||
}
|
||||
|
||||
const waitTime = isInitial ? 0 : 800;
|
||||
|
|
@ -267,8 +286,6 @@ function loadMore(isInitial) {
|
|||
|
||||
nextBatch.forEach((rotation, index) => {
|
||||
const isFirstItem = isInitial && index === 0;
|
||||
const isAboutToExpire = !rotation.isExpired && (rotation.endTime - now) < (15 * 60 * 1000);
|
||||
|
||||
const optionsDate = { day: "2-digit", month: "2-digit", year: "numeric" };
|
||||
const optionsTime = { hour: "numeric", minute: "2-digit", hour12: true };
|
||||
const timeZone = "Europe/Paris";
|
||||
|
|
@ -280,60 +297,79 @@ function loadMore(isInitial) {
|
|||
|
||||
const formattedTime = `${startDay} at ${startTime} (CEST) ~ ${endDay} at ${endTime} (CEST)`;
|
||||
|
||||
if (isFirstItem) {
|
||||
if (isAboutToExpire) {
|
||||
html += `<div class="expiring-warning" style="background: #ffcc00; color: #000; padding: 12px; text-align: center; font-weight: bold; border-radius: 8px; margin-bottom: 20px;">NOTICE: This rotation is about to expire!</div>`;
|
||||
} else if (rotation.isExpired) {
|
||||
html += `<div class="expiring-warning" style="background: #ff4444; color: #fff; padding: 12px; text-align: center; font-weight: bold; border-radius: 8px; margin-bottom: 20px;">NOTICE: This rotation has expired!</div>`;
|
||||
if (rotation.isFest) {
|
||||
html += `
|
||||
<div class="splatfest-banner-container">
|
||||
<img class="its-splatfest-time" src="/assets/en/ui/Splatnet_its_splatfest_time!.png" alt="Its Splatfest Time!">
|
||||
</div>
|
||||
<div class="rotation-time">${formattedTime}</div>
|
||||
<div class="stages-section">
|
||||
<div class="mode-header">
|
||||
<img class="mode-title" src="/assets/en/svg/ui/ico_stage_fes-d2041f3d0fc360ad6c7c00dc4f5bfd1aa626a251d35af88c076b5498d8eb991d.svg" alt="Splatfest">
|
||||
<div class="mode-text"><img src="/assets/en/svg/text/scene/stage/tx_fesmatch-2cee60cbe41a1594b8d5ef867138f99d843cfce6efe0c490a41632b2e99ec685.svg" alt="Splatfest Battle"></div>
|
||||
</div>
|
||||
<div class="stages">
|
||||
${rotation.turf.map(name => `
|
||||
<div class="stage-item">
|
||||
<div class="sprite ${getStageClass(name)}"></div>
|
||||
<div class="stage-title">${name}</div>
|
||||
</div>
|
||||
`).join("")}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
if (isFirstItem) {
|
||||
const isAboutToExpire = !rotation.isExpired && (rotation.endTime - now) < (15 * 60 * 1000);
|
||||
if (isAboutToExpire) {
|
||||
html += `<div class="expiring-warning" style="background: #ffcc00; color: #000; padding: 12px; text-align: center; font-weight: bold; border-radius: 8px; margin-bottom: 20px;">NOTICE: This rotation is about to expire!</div>`;
|
||||
} else if (rotation.isExpired) {
|
||||
html += `<div class="expiring-warning" style="background: #ff4444; color: #fff; padding: 12px; text-align: center; font-weight: bold; border-radius: 8px; margin-bottom: 20px;">NOTICE: This rotation has expired!</div>`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html += `
|
||||
<div class="rotation-time">${formattedTime}</div>
|
||||
<div class="stages-section">
|
||||
<div class="mode-header">
|
||||
<img class="mode-title" src="/assets/en/svg/ui/ico_stage_regular-54557ab86d0cba16cf002e6d299f87dccb41655de8a171d32928bfebda3f3692.svg" alt="Regular Battle">
|
||||
<div class="mode-text"><img src="/assets/en/svg/text/scene/stage/tx_regularmatch-2cee60cbe41a1594b8d5ef867138f99d843cfce6efe0c490a41632b2e99ec685.svg" alt="Regular Battle"></div>
|
||||
html += `
|
||||
<div class="rotation-time">${formattedTime}</div>
|
||||
<div class="stages-section">
|
||||
<div class="mode-header">
|
||||
<img class="mode-title" src="/assets/en/svg/ui/ico_stage_regular-54557ab86d0cba16cf002e6d299f87dccb41655de8a171d32928bfebda3f3692.svg" alt="Regular Battle">
|
||||
<div class="mode-text"><img src="/assets/en/svg/text/scene/stage/tx_regularmatch-2cee60cbe41a1594b8d5ef867138f99d843cfce6efe0c490a41632b2e99ec685.svg" alt="Regular Battle"></div>
|
||||
</div>
|
||||
<div class="stages">
|
||||
${rotation.turf.map(name => `
|
||||
<div class="stage-item">
|
||||
<div class="sprite ${getStageClass(name)}"></div>
|
||||
<div class="stage-title">${name}</div>
|
||||
</div>
|
||||
`).join("")}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stages">
|
||||
${rotation.turf.map(name => `
|
||||
<div class="stage-item">
|
||||
<div class="sprite ${getStageClass(name)}"></div>
|
||||
<div class="stage-title">${name}</div>
|
||||
</div>
|
||||
`).join("")}
|
||||
<div class="stages-section">
|
||||
<div class="mode-header">
|
||||
<img class="mode-title" src="/assets/en/svg/ui/ico_stage_gachi-d2041f3d0fc360ad6c7c00dc4f5bfd1aa626a251d35af88c076b5498d8eb991d.svg" alt="Ranked Battle">
|
||||
<div class="mode-text"><img src="/assets/en/svg/text/scene/stage/tx_gachimatch-08a066c73d4dcf466c435be611b996ffd7930d19d9a6a865b712cd5dd802534f.svg" alt="Ranked Battle"></div>
|
||||
</div>
|
||||
<div class="ranked-mode-labels">
|
||||
<div class="battle-mode-text"><img src="/assets/en/svg/text/scene/stage/tx_rule-76cf0777fb715a9478f8b579512541f3f14ed834566e0b6e153834a57d726021.svg" alt="Battle Mode"></div>
|
||||
<div class="ranked-mode-text">${rotation.ranked_mode}</div>
|
||||
</div>
|
||||
<div class="stages">
|
||||
${rotation.ranked.map(name => `
|
||||
<div class="stage-item">
|
||||
<div class="sprite ${getStageClass(name)}"></div>
|
||||
<div class="stage-title">${name}</div>
|
||||
</div>
|
||||
`).join("")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stages-section">
|
||||
<div class="mode-header">
|
||||
<img class="mode-title" src="/assets/en/svg/ui/ico_stage_gachi-d2041f3d0fc360ad6c7c00dc4f5bfd1aa626a251d35af88c076b5498d8eb991d.svg" alt="Ranked Battle">
|
||||
<div class="mode-text"><img src="/assets/en/svg/text/scene/stage/tx_gachimatch-08a066c73d4dcf466c435be611b996ffd7930d19d9a6a865b712cd5dd802534f.svg" alt="Ranked Battle"></div>
|
||||
</div>
|
||||
<div class="ranked-mode-labels">
|
||||
<div class="battle-mode-text"><img src="/assets/en/svg/text/scene/stage/tx_rule-76cf0777fb715a9478f8b579512541f3f14ed834566e0b6e153834a57d726021.svg" alt="Battle Mode"></div>
|
||||
<div class="ranked-mode-text">${rotation.ranked_mode}</div>
|
||||
</div>
|
||||
<div class="stages">
|
||||
${rotation.ranked.map(name => `
|
||||
<div class="stage-item">
|
||||
<div class="sprite ${getStageClass(name)}"></div>
|
||||
<div class="stage-title">${name}</div>
|
||||
</div>
|
||||
`).join("")}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
`;
|
||||
}
|
||||
});
|
||||
|
||||
container.insertAdjacentHTML('beforeend', html);
|
||||
currentIndex += ITEMS_PER_PAGE;
|
||||
|
||||
currentIndex += nextBatch.length;
|
||||
if (!isInitial && loadingOverlay) loadingOverlay.style.display = 'none';
|
||||
if (trigger) trigger.style.display = 'block';
|
||||
|
||||
if (currentIndex >= allRotations.length) {
|
||||
if (observer) observer.disconnect();
|
||||
if (trigger) trigger.remove();
|
||||
}
|
||||
if (currentIndex >= allRotations.length && trigger) trigger.remove();
|
||||
}, waitTime);
|
||||
}
|
||||
|
|
@ -322,4 +322,16 @@ body {
|
|||
.sprite-linkedin { width: 30px; height: 30px; background-position: -1385px -745px; background-size: initial; aspect-ratio: 1/1; }
|
||||
.sprite-stackoverflow { width: 30px; height: 30px; background-position: -1425px -745px; background-size: initial; aspect-ratio: 1/1; }
|
||||
.sprite-tumblr { width: 30px; height: 30px; background-position: -1465px -745px; background-size: initial; aspect-ratio: 1/1; }
|
||||
.sprite-twitter { width: 30px; height: 30px; background-position: -1505px -745px; background-size: initial; aspect-ratio: 1/1; }
|
||||
.sprite-twitter { width: 30px; height: 30px; background-position: -1505px -745px; background-size: initial; aspect-ratio: 1/1; }
|
||||
|
||||
.splatfest-banner-container {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.its-splatfest-time {
|
||||
max-width: auto;
|
||||
height: 120%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
Loading…
Reference in a new issue