spacebar/SplatNet
spacebar/SplatNet
Watch
10
1
Fork
You've already forked SplatNet
 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

5am changes but page is complete!

Browse source
This commit is contained in:
kittentm 2026-01-22 23:08:26 -05:00
commit 732e6b8337
3 changed files with 133 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

3
index.html
View file

@ -17,6 +17,9 @@
<div class="content"> <div class="content">
<img src="/assets/stageinfo.png" class="stage-info" alt="Stage Info" /> <img src="/assets/stageinfo.png" class="stage-info" alt="Stage Info" />
<div class="stage-info-text">
Use the stage information to guide your weapon strategy and battle strategy!
</div>
<div class="stages-container" id="stages-container"></div> <div class="stages-container" id="stages-container"></div>
</div> </div>

94
stages.js
View file

@ -9,7 +9,6 @@ function stageImagePath(stageName) {
.split(" ")[0] .split(" ")[0]
.toLowerCase() .toLowerCase()
.replace(/['.]/g, ""); .replace(/['.]/g, "");
return `/assets/stages/${firstWord}.png`; return `/assets/stages/${firstWord}.png`;
} }
@ -18,30 +17,29 @@ async function fetchRotations() {
const res = await fetch(API_URL); const res = await fetch(API_URL);
if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`); if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
const data = await res.json(); const data = await res.json();
const rotations = data?.pretendo?.rotations ?? {}; const rotations = data?.pretendo?.rotations ?? {};
const now = new Date(); const now = new Date();
const timestamps = Object.keys(rotations).sort((a, b) => Number(a) - Number(b));
const timestamps = Object.keys(rotations).sort( const result = [];
(a, b) => Number(a) - Number(b)
);
for (const ts of timestamps) { for (const ts of timestamps) {
const start = new Date(Number(ts)); const start = new Date(Number(ts));
const end = new Date(start.getTime() + 2 * 60 * 60 * 1000); const end = new Date(start.getTime() + 2 * 60 * 60 * 1000);
if (end < now) continue; if (end < now) continue;
const r = rotations[ts]; const r = rotations[ts];
return [{ result.push({
turf: stageNames(r.turfStages).map(stageImagePath), turf: stageNames(r.turfStages),
ranked: stageNames(r.rankedStages).map(stageImagePath), ranked: stageNames(r.rankedStages),
ranked_mode: r.rankedMode?.translatedNames?.["en-US"] ?? "Ranked" ranked_mode: r.rankedMode.replace(/([a-z])([A-Z])/g, "$1 $2"),
}]; startTime: start,
endTime: end
});
} }
return []; return result;
} catch (error) { } catch (error) {
console.error("Failed to fetch rotations:", error); console.error("Failed to fetch rotations:", error);
return []; return [];
@ -52,48 +50,41 @@ function animateLoadingCanvas() {
const canvas = document.getElementById("loading-canvas"); const canvas = document.getElementById("loading-canvas");
const loadingOverlay = document.getElementById("loading-overlay"); const loadingOverlay = document.getElementById("loading-overlay");
if (!canvas || !loadingOverlay) return; if (!canvas || !loadingOverlay) return;
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
const image = new Image(); const image = new Image();
image.src = "/assets/loading.png"; image.src = "/assets/loading.png";
const frameWidth = 100; const frameWidth = 100;
const frameHeight = 100; const frameHeight = 100;
const totalFrames = 17; const totalFrames = 17;
let currentFrame = 0; let currentFrame = 0;
let lastUpdateTime = 0; let lastUpdateTime = 0;
const frameDuration = 50;
let animationId; let animationId;
image.onload = () => { image.onload = () => {
function animate(timestamp = 0) { function animate(timestamp = 0) {
if (loadingOverlay.style.display === "none") { if (loadingOverlay.style.display === "none") {
cancelAnimationFrame(animationId); cancelAnimationFrame(animationId);
return; return;
} }
if (!lastUpdateTime) lastUpdateTime = timestamp; if (!lastUpdateTime) lastUpdateTime = timestamp;
const elapsed = timestamp - lastUpdateTime; const elapsed = timestamp - lastUpdateTime;
if (elapsed > 50) {
if (elapsed > frameDuration) {
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage( ctx.drawImage(
image, image,
0, currentFrame * frameHeight, 0,
frameWidth, frameHeight, currentFrame * frameHeight,
0, 0, frameWidth,
frameWidth, frameHeight frameHeight,
0,
0,
frameWidth,
frameHeight
); );
currentFrame = (currentFrame + 1) % totalFrames; currentFrame = (currentFrame + 1) % totalFrames;
lastUpdateTime = timestamp; lastUpdateTime = timestamp;
} }
animationId = requestAnimationFrame(animate); animationId = requestAnimationFrame(animate);
} }
animationId = requestAnimationFrame(animate); animationId = requestAnimationFrame(animate);
}; };
} }
@ -101,43 +92,54 @@ function animateLoadingCanvas() {
async function renderStages() { async function renderStages() {
const loadingOverlay = document.getElementById("loading-overlay"); const loadingOverlay = document.getElementById("loading-overlay");
const container = document.getElementById("stages-container"); const container = document.getElementById("stages-container");
let rotations = []; let rotations = [];
try { try {
rotations = await fetchRotations(); rotations = await fetchRotations();
} catch (err) { } catch (err) {
console.error("Error in renderStages:", err); console.error("Error in renderStages:", err);
} finally { } finally {
loadingOverlay.style.display = "none"; // always hide loading loadingOverlay.style.display = "none";
} }
if (!rotations.length) { if (!rotations.length) {
container.innerHTML = ` container.innerHTML = `<h2 class="error-message">Something went wrong! Try reloading the page. If this problem persists you may be ratelimited.</h2>`;
<h2 class="error-message">
Something went wrong! Try reloading the page. If this problem persists you may be ratelimited.
</h2>
`;
return; return;
} }
for (const rotation of rotations) { 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 += ` container.innerHTML += `
<div class="rotation-time">${formattedTime}</div>
<div class="stages-section"> <div class="stages-section">
<h2>Turf War</h2> <img class="mode-title" src="/assets/regular.svg" alt="Regular Battle">
<div class="mode-text">Regular Battle</div>
<div class="stages"> <div class="stages">
${rotation.turf.map(img => ${rotation.turf.map(name => `
`<img src="${img}" alt="Turf Stage">` <div class="stage-tile">
).join("")} <img src="${stageImagePath(name)}" alt="${name}">
<div class="stage-title">${name}</div>
</div>
`).join("")}
</div> </div>
</div> </div>
<div class="stages-section"> <div class="stages-section">
<h2>Ranked Battle (${rotation.ranked_mode})</h2> <img class="mode-title" src="/assets/ranked.svg" alt="Ranked Battle">
<div class="mode-text">Ranked Battle</div>
<div class="ranked-mode-labels">
<div class="battle-mode-text">Battle Mode</div>
<div class="ranked-mode-text">${rotation.ranked_mode}</div>
</div>
<div class="stages"> <div class="stages">
${rotation.ranked.map(img => ${rotation.ranked.map(name => `
`<img src="${img}" alt="Ranked Stage">` <div class="stage-tile">
).join("")} <img src="${stageImagePath(name)}" alt="${name}">
<div class="stage-title">${name}</div>
</div>
`).join("")}
</div> </div>
</div> </div>
`; `;

92
styles.css
View file

@ -5,6 +5,13 @@
font-style: normal; font-style: normal;
} }
@font-face {
font-family: "Regular";
src: url("./regular.otf") format("opentype");
font-weight: normal;
font-style: normal;
}
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -57,7 +64,7 @@ body {
/* STAGES */ /* STAGES */
.stages-container { .stages-container {
width: 100%; width: 100%;
max-width: 600px; max-width: 400px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 32px; gap: 32px;
@ -71,13 +78,10 @@ body {
width: 100%; width: 100%;
} }
.stages-section h2 { .stages-section {
margin: 0; background-color: rgba(0, 0, 0, 0.7);
color: white; border-radius: 14px;
text-align: center; padding: 16px 18px 20px;
font-family: "Splatoon1", sans-serif;
font-size: 28px;
letter-spacing: 1px;
} }
.stages { .stages {
@ -87,11 +91,59 @@ body {
width: 100%; 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 { .stages img {
width: 100%; width: 100%;
height: auto; height: auto;
display: block; 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 { .error-message {
@ -101,6 +153,26 @@ body {
margin-top: 40px; 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 { .loading-overlay {
position: fixed; position: fixed;
top: 50%; top: 50%;
@ -137,4 +209,4 @@ body {
font-size: 20px; font-size: 20px;
letter-spacing: 1.2px; letter-spacing: 1.2px;
text-align: center; text-align: center;
} }