diff --git a/html/stages/stages.html b/html/stages/stages.html index 11e1f63..5f6caf3 100644 --- a/html/stages/stages.html +++ b/html/stages/stages.html @@ -51,7 +51,8 @@ /* MAIN CONTENT */ .content { display: flex; - justify-content: center; + flex-direction: column; + align-items: center; padding-top: 24px; } @@ -59,9 +60,19 @@ width: 65%; max-width: 600px; height: auto; + margin-bottom: 20px; + } + + .stages-container { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + gap: 30px; } +
@@ -71,7 +82,11 @@
Stage Info + +
+ + diff --git a/html/stages/stages.js b/html/stages/stages.js new file mode 100644 index 0000000..7224b2b --- /dev/null +++ b/html/stages/stages.js @@ -0,0 +1,77 @@ +const API_URL = "https://api.splatcord.ink/prod/s1rotations"; + +function stageNames(stages, lang = "en-US") { + return stages.map(s => s.translatedNames[lang]); +} + +function stageImagePath(stageName) { + const firstWord = stageName + .split(" ")[0] + .toLowerCase() + .replace(/['.]/g, ""); + + return `../../assets/stages/${firstWord}.jpg`; +} + +async function fetchRotations() { + const res = await fetch(API_URL); + 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) + ); + + 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" + }]; + } + + return []; +} + +async function renderStages() { + const container = document.getElementById("stages-container"); + const rotations = await fetchRotations(); + + if (!rotations.length) { + container.innerHTML = "

No rotations available

"; + return; + } + + for (const rotation of rotations) { + container.innerHTML += ` +
+

Turf War

+
+ ${rotation.turf.map(img => + `Turf Stage` + ).join("")} +
+
+ +
+

Ranked Battle (${rotation.ranked_mode})

+
+ ${rotation.ranked.map(img => + `Ranked Stage` + ).join("")} +
+
+ `; + } +} + +renderStages(); diff --git a/html/stages/styles.css b/html/stages/styles.css index 36ae99c..2aeb573 100644 --- a/html/stages/styles.css +++ b/html/stages/styles.css @@ -3,4 +3,4 @@ justify-content: center; padding-top: 24px; padding-bottom: 300px; /* forces scroll */ -} +} \ No newline at end of file