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

changes to resemble https://www.youtube.com/watch?v=-vnySQrbzL0&list=LL&index=3

Browse source
This commit is contained in:
kittentm 2026-02-03 04:19:38 +01:00
commit 3ca8dcecff
2 changed files with 74 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

46
stages/stages.js
View file

@ -189,8 +189,9 @@ async function renderStages() {
} finally {
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.</h2>`;
return;
}
@ -200,52 +201,45 @@ async function renderStages() {
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)`;
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 += `
<div class="rotation-time">${formattedTime}</div>
<div class="stages-section">
<img class="mode-title" src="/assets/en/svg/ui/ico_stage_regular-54557ab86d0cba16cf002e6d299f87dccb41655de8a171d32928bfebda3f3692.svg" alt="Regular Battle">
<div class="mode-text">Regular Battle</div>
<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">Regular Battle</div>
</div>
<div class="stages">
${rotation.turf
.map(
(name) => `
<div class="stage-tile">
${rotation.turf.map(name => `
<div class="stage-item">
<img src="${stageImagePath(name)}" alt="${name}">
<div class="stage-title">${name}</div>
</div>
`
)
.join("")}
`).join("")}
</div>
</div>
<div class="stages-section">
<img class="mode-title" src="/assets/en/svg/ui/ico_stage_gachi-d2041f3d0fc360ad6c7c00dc4f5bfd1aa626a251d35af88c076b5498d8eb991d.svg" alt="Ranked Battle">
<div class="mode-text">Ranked Battle</div>
<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">Ranked Battle</div>
</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(
(name) => `
<div class="stage-tile">
${rotation.ranked.map(name => `
<div class="stage-item">
<img src="${stageImagePath(name)}" alt="${name}">
<div class="stage-title">${name}</div>
</div>
`
)
.join("")}
`).join("")}
</div>
</div>
`;

87
stages/styles.css
View file

@ -39,7 +39,7 @@ body {
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 60px 0 0;
padding: 40px 0;
box-sizing: border-box;
}
@ -63,7 +63,7 @@ body {
.stages-container {
width: 100%;
max-width: 500px;
max-width: 1000px;
display: flex;
flex-direction: column;
gap: 32px;
@ -73,38 +73,79 @@ body {
.stages-section {
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
gap: 16px;
width: 100%;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 14px;
padding: 16px 18px 20px;
padding: 24px;
box-sizing: border-box;
}
.mode-header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
}
.mode-title {
display: block;
max-width: 160px;
height: auto;
margin: 80px;
margin-left: -20px;
}
.mode-text {
margin: 0;
text-align: left;
color: white;
font-family: "Splatoon1", sans-serif;
font-size: 44px;
letter-spacing: 1.2px;
user-select: none;
margin-left: -60px;
}
.stages {
display: flex;
flex-direction: column;
gap: 16px;
flex-direction: row;
gap: 20px;
width: 100%;
justify-content: center;
}
.stage-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.stages img {
width: 100%;
max-width: 450px;
height: auto;
display: block;
margin-bottom: 10px;
}
.stage-title {
font-family: "Regular", sans-serif;
text-align: center;
margin-top: 6px;
font-size: 28px;
color: white;
}
.stages img {
width: 100%;
height: auto;
display: block;
margin: 20px 0;
margin: 0;
margin-bottom: 80px;
}
.ranked-mode-labels {
text-align: center;
margin-bottom: 12px;
margin-top: -40px;
}
.battle-mode-text {
@ -138,24 +179,6 @@ body {
margin-top: 40px;
}
.mode-title {
display: block;
margin: 4px auto;
max-width: 166px;
width: 80%;
height: auto;
}
.mode-text {
margin: 0 0 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%;