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
|
|
@ -0,0 +1,13 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="300" height="52">
|
||||
<path d="M0 0 C3.3 0 6.6 0 10 0 C10.495 7.92 10.495 7.92 11 16 C12.32 14.68 13.64 13.36 15 12 C17.75 11.25 17.75 11.25 20 11 C17.36 11 14.72 11 12 11 C12.125 9.125 12.125 9.125 13 7 C17.35199243 4.71520397 21.20634256 4.9107377 25.94921875 5.3203125 C28.85729282 6.28413134 29.60492985 7.27127789 31 10 C31.21326685 12.6729445 31.28545631 15.0926212 31.1875 17.75 C31.16719727 18.79607422 31.16719727 18.79607422 31.14648438 19.86328125 C31.1112945 21.57585541 31.05749155 23.28802941 31 25 C28.39555652 25.05394705 25.79223002 25.09364469 23.1875 25.125 C22.44951172 25.14175781 21.71152344 25.15851562 20.95117188 25.17578125 C17.08753574 25.21074628 15.29096332 25.19397555 12 23 C11.67 23.66 11.34 24.32 11 25 C7.7 25 4.4 25 1 25 C0.505 22.525 0.505 22.525 0 20 C-0.53625 20.639375 -1.0725 21.27875 -1.625 21.9375 C-4.44367193 24.38529404 -6.33860732 24.66714612 -10 25 C-10 26.65 -10 28.3 -10 30 C-13.3 30 -16.6 30 -20 30 C-20 21.75 -20 13.5 -20 5 C-6.72788462 4.50384615 -6.72788462 4.50384615 -3.04296875 7.015625 C-2.36878906 7.67046875 -1.69460937 8.3253125 -1 9 C-0.67 6.03 -0.34 3.06 0 0 Z M-10 17 C-9.67 18.32 -9.34 19.64 -9 21 C-8.67 19.68 -8.34 18.36 -8 17 C-8.66 17 -9.32 17 -10 17 Z M20 18 C19.67 18.99 19.34 19.98 19 21 C19.99 21.33 20.98 21.66 22 22 C22 20.68 22 19.36 22 18 C21.34 18 20.68 18 20 18 Z " fill="#FFFFFF" transform="translate(48,16)"/>
|
||||
<path d="M0 0 C1.06351675 3.38391693 1.21442982 4.5804634 -0.4375 7.8125 C-0.953125 8.534375 -1.46875 9.25625 -2 10 C-0.68 10 0.64 10 2 10 C2.268125 9.360625 2.53625 8.72125 2.8125 8.0625 C4 6 4 6 7 5 C12.02719969 4.48023868 15.78694191 4.22364282 20.125 7 C21.053125 7.99 21.053125 7.99 22 9 C22.45375 8.525625 22.9075 8.05125 23.375 7.5625 C26.48624632 4.570917 28.93215954 4.89289531 33.125 4.9375 C34.22070312 4.94652344 35.31640625 4.95554687 36.4453125 4.96484375 C37.70988281 4.98224609 37.70988281 4.98224609 39 5 C39 7.97 39 10.94 39 14 C37.68 14 36.36 14 35 14 C35 14.66 35 15.32 35 16 C36.32 16.66 37.64 17.32 39 18 C38.8125 20.375 38.8125 20.375 38 23 C34.33440697 24.93752774 31.28944957 25.22384216 27.1875 25.125 C25.72376953 25.09792969 25.72376953 25.09792969 24.23046875 25.0703125 C23.49441406 25.04710938 22.75835937 25.02390625 22 25 C22 23.68 22 22.36 22 21 C24.31 21 26.62 21 29 21 C29 20.34 29 19.68 29 19 C28.195625 18.855625 27.39125 18.71125 26.5625 18.5625 C24 18 24 18 23 17 C20.98405418 16.76572222 18.961526 16.58663876 16.9375 16.4375 C15.83277344 16.35371094 14.72804688 16.26992188 13.58984375 16.18359375 C12.73519531 16.12300781 11.88054687 16.06242187 11 16 C11.66 16.99 12.32 17.98 13 19 C16.96 18.505 16.96 18.505 21 18 C20.51963048 22.56351039 20.51963048 22.56351039 18.4375 24.3125 C13.15419078 25.80266414 7.82653626 25.69718203 3 23 C1 20 1 20 1 16 C0.34 16 -0.32 16 -1 16 C-1 18.97 -1 21.94 -1 25 C-4.3 25 -7.6 25 -11 25 C-11.33 22.03 -11.66 19.06 -12 16 C-12.66 16 -13.32 16 -14 16 C-14 13.69 -14 11.38 -14 9 C-13.34 9 -12.68 9 -12 9 C-11.896875 8.071875 -11.79375 7.14375 -11.6875 6.1875 C-11 3 -11 3 -9.9375 1.125 C-6.73943927 -0.73193849 -3.64481003 -0.17925295 0 0 Z M13 10 C12.01 11.485 12.01 11.485 11 13 C12.32 13 13.64 13 15 13 C14.67 12.01 14.34 11.02 14 10 C13.67 10 13.34 10 13 10 Z " fill="#FFFFFF" transform="translate(112,16)"/>
|
||||
<path d="M0 0 C2.97 0 5.94 0 9 0 C9 0.99 9 1.98 9 3 C10.98 3 12.96 3 15 3 C15 6.63 15 10.26 15 14 C13.02 14 11.04 14 9 14 C11.0072908 17.0109362 11.83884224 17.63016497 15 19 C15 20.32 15 21.64 15 23 C9.78020872 23.1799928 5.92737019 22.97094808 1 21 C0.67 18.69 0.34 16.38 0 14 C-0.99 14 -1.98 14 -3 14 C-3 16.97 -3 19.94 -3 23 C-5.58396679 23.08112454 -8.16537568 23.14054748 -10.75 23.1875 C-11.47960937 23.21263672 -12.20921875 23.23777344 -12.9609375 23.26367188 C-16.2025425 23.30787558 -18.58185453 23.21761973 -21.484375 21.70703125 C-23 20 -23 20 -23.5 16.5 C-23 13 -23 13 -21.3125 11.125 C-18.85981018 9.93179954 -16.69486977 9.37428747 -14 9 C-16.64 9 -19.28 9 -22 9 C-21.875 7.125 -21.875 7.125 -21 5 C-16.97050128 3.12581455 -13.4109734 2.6164371 -9 3 C-5.3 4.4 -5.3 4.4 -4 7 C-3.67 5.68 -3.34 4.36 -3 3 C-2.01 3 -1.02 3 0 3 C0 2.01 0 1.02 0 0 Z M-14 16 C-14 17.32 -14 18.64 -14 20 C-13.34 19.67 -12.68 19.34 -12 19 C-12 18.01 -12 17.02 -12 16 C-12.66 16 -13.32 16 -14 16 Z " fill="#FFFFFF" transform="translate(228,18)"/>
|
||||
<path d="M0 0 C2.77141717 -0.08089542 5.54047819 -0.14044062 8.3125 -0.1875 C9.09818359 -0.21263672 9.88386719 -0.23777344 10.69335938 -0.26367188 C11.45068359 -0.27333984 12.20800781 -0.28300781 12.98828125 -0.29296875 C14.03302612 -0.31653442 14.03302612 -0.31653442 15.09887695 -0.34057617 C17.63032433 0.11291928 18.46444297 0.96383696 20 3 C21.12769968 8.37826001 21.12538856 10.95220216 19 16 C19.30087716 19.22828237 19.30087716 19.22828237 20 22 C17.38521048 24.56761548 16.05471424 24.9956345 12.328125 25.29296875 C10.96843965 25.27316751 9.6089066 25.23759202 8.25 25.1875 C7.55261719 25.17396484 6.85523438 25.16042969 6.13671875 25.14648438 C4.42414459 25.1112945 2.71197059 25.05749155 1 25 C0.04541351 16.64736824 -0.11039334 8.40215965 0 0 Z M11 10 C11 11.32 11 12.64 11 14 C11.99 13.67 12.98 13.34 14 13 C13.67 12.01 13.34 11.02 13 10 C12.34 10 11.68 10 11 10 Z M11 16 C11 16.99 11 17.98 11 19 C11.66 19 12.32 19 13 19 C12.67 18.01 12.34 17.02 12 16 C11.67 16 11.34 16 11 16 Z " fill="#FFFFFF" transform="translate(184,16)"/>
|
||||
<path d="M0 0 C1.63001953 0.01353516 1.63001953 0.01353516 3.29296875 0.02734375 C4.12441406 0.03894531 4.95585937 0.05054688 5.8125 0.0625 C5.8125 3.6925 5.8125 7.3225 5.8125 11.0625 C3.8325 12.0525 3.8325 12.0525 1.8125 13.0625 C2.493125 13.59875 3.17375 14.135 3.875 14.6875 C5.8125 17.0625 5.8125 17.0625 5.8125 20.1875 C4.8125 23.0625 4.8125 23.0625 3.203125 24.234375 C-0.07770873 25.37087296 -2.97552918 25.25161057 -6.4375 25.1875 C-7.70078125 25.16945313 -8.9640625 25.15140625 -10.265625 25.1328125 C-11.22984375 25.10960938 -12.1940625 25.08640625 -13.1875 25.0625 C-13.1875 23.4125 -13.1875 21.7625 -13.1875 20.0625 C-10.5475 20.0625 -7.9075 20.0625 -5.1875 20.0625 C-5.1875 19.4025 -5.1875 18.7425 -5.1875 18.0625 C-6.13625 17.77375 -7.085 17.485 -8.0625 17.1875 C-11.1875 16.0625 -11.1875 16.0625 -13.1875 14.0625 C-13.69181963 11.02485384 -13.63692707 8.10560861 -13.1875 5.0625 C-9.59682045 0.10983855 -5.80363216 -0.06240465 0 0 Z " fill="#FFFFFF" transform="translate(21.1875,15.9375)"/>
|
||||
<path d="M0 0 C1.2684375 -0.02513672 1.2684375 -0.02513672 2.5625 -0.05078125 C5.54612496 0.39389362 6.87822301 1.18116545 9 3.3125 C9.8039548 6.00780999 9.81419502 8.47897402 10 11.3125 C6.37 11.3125 2.74 11.3125 -1 11.3125 C-0.01 12.7975 -0.01 12.7975 1 14.3125 C3.64 13.9825 6.28 13.6525 9 13.3125 C8.51963048 17.87601039 8.51963048 17.87601039 6.4375 19.625 C1.65229505 20.97467319 -2.39909019 21.04335013 -6.875 19 C-9 17.3125 -9 17.3125 -11 14.3125 C-11.55131965 5.62921554 -11.55131965 5.62921554 -9 2.3125 C-5.94683913 0.44142575 -3.55970407 0.01627913 0 0 Z M1 5.3125 C0.01 6.7975 0.01 6.7975 -1 8.3125 C0.32 8.3125 1.64 8.3125 3 8.3125 C2.67 7.3225 2.34 6.3325 2 5.3125 C1.67 5.3125 1.34 5.3125 1 5.3125 Z " fill="#FFFFFF" transform="translate(284,20.6875)"/>
|
||||
<path d="M0 0 C2.97 0 5.94 0 9 0 C9.33 0.99 9.66 1.98 10 3 C11.65 3 13.3 3 15 3 C15 6.63 15 10.26 15 14 C13.35 14 11.7 14 10 14 C10.33 14.99 10.66 15.98 11 17 C13.01508358 17.73323796 13.01508358 17.73323796 15 18 C15 19.65 15 21.3 15 23 C5.92307692 23.30769231 5.92307692 23.30769231 2 21 C0.23605791 18.39608549 0 17.19219704 0 14 C-0.66 14 -1.32 14 -2 14 C-2 10.37 -2 6.74 -2 3 C-1.34 3 -0.68 3 0 3 C0 2.01 0 1.02 0 0 Z " fill="#FFFFFF" transform="translate(246,18)"/>
|
||||
<path d="M0 0 C2.97 0 5.94 0 9 0 C9.33 0.99 9.66 1.98 10 3 C11.65 3 13.3 3 15 3 C15 6.63 15 10.26 15 14 C13.35 14 11.7 14 10 14 C10.33 14.99 10.66 15.98 11 17 C13.01508358 17.73323796 13.01508358 17.73323796 15 18 C15 19.65 15 21.3 15 23 C5.92307692 23.30769231 5.92307692 23.30769231 2 21 C0.23605791 18.39608549 0 17.19219704 0 14 C-0.66 14 -1.32 14 -2 14 C-2 10.37 -2 6.74 -2 3 C-1.34 3 -0.68 3 0 3 C0 2.01 0 1.02 0 0 Z " fill="#FFFFFF" transform="translate(154,18)"/>
|
||||
<path d="M0 0 C2.97 0 5.94 0 9 0 C9 0.99 9 1.98 9 3 C10.98 3 12.96 3 15 3 C15 6.63 15 10.26 15 14 C13.02 14 11.04 14 9 14 C10.63473516 17.12474627 10.63473516 17.12474627 13.125 17.6875 C13.74375 17.790625 14.3625 17.89375 15 18 C15 19.65 15 21.3 15 23 C6.11774601 23.30109336 6.11774601 23.30109336 2 21 C0 18 0 18 0 14 C-0.66 14 -1.32 14 -2 14 C-2 10.37 -2 6.74 -2 3 C-1.34 3 -0.68 3 0 3 C0 2.01 0 1.02 0 0 Z " fill="#FFFFFF" transform="translate(82,18)"/>
|
||||
<path d="M0 0 C3.3 0 6.6 0 10 0 C10.33 8.25 10.66 16.5 11 25 C7.7 25 4.4 25 1 25 C-0.19190363 16.65667456 -0.09283549 8.40676978 0 0 Z " fill="#FFFFFF" transform="translate(262,16)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.6 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 20 KiB |
BIN
assets/en/ui/Splatnet_its_splatfest_time!.png
Normal file
BIN
assets/en/ui/Splatnet_its_splatfest_time!.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 291 KiB |
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