kitten/SplatNet
Watch
0
0
Fork
You've already forked SplatNet
 0
forked from spacebar/SplatNet
Code Pull requests Activity

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">
<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>

94
stages.js
View file

@ -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 = `
<h2 class="error-message">
Something went wrong! Try reloading the page. If this problem persists you may be ratelimited.
</h2>
`;
container.innerHTML = `<h2 class="error-message">Something went wrong! Try reloading the page. If this problem persists you may be ratelimited.</h2>`;
return;
}
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 += `
<div class="rotation-time">${formattedTime}</div>
<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">
${rotation.turf.map(img =>
`<img src="${img}" alt="Turf Stage">`
).join("")}
${rotation.turf.map(name => `
<div class="stage-tile">
<img src="${stageImagePath(name)}" alt="${name}">
<div class="stage-title">${name}</div>
</div>
`).join("")}
</div>
</div>
<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">
${rotation.ranked.map(img =>
`<img src="${img}" alt="Ranked Stage">`
).join("")}
${rotation.ranked.map(name => `
<div class="stage-tile">
<img src="${stageImagePath(name)}" alt="${name}">
<div class="stage-title">${name}</div>
</div>
`).join("")}
</div>
</div>
`;

92
styles.css
View file

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