migrate to javascript from python

2026-01-16 02:30:44 +01:00 · 2026-01-16 02:30:44 +01:00 · 0406f77af7
commit 0406f77af7
parent ea2b7ff840
3 changed files with 94 additions and 2 deletions
--- 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;
    }
 </style>
 </head>
+
 <body>

 <div class="header">
@ -71,7 +82,11 @@

 <div class="content">
    <img src="../../assets/stageinfo.png" class="stage-info" alt="Stage Info">
+
+    <div class="stages-container" id="stages-container"></div>
 </div>

+<script src="stages.js"></script>
+
 </body>
 </html>
--- a/html/stages/stages.js
+++ 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 = "<h2>No rotations available</h2>";
+        return;
+    }
+
+    for (const rotation of rotations) {
+        container.innerHTML += `
+            <div class="stages-section">
+                <h2>Turf War</h2>
+                <div class="stages">
+                    ${rotation.turf.map(img =>
+                        `<img src="${img}" alt="Turf Stage">`
+                    ).join("")}
+                </div>
+            </div>
+
+            <div class="stages-section">
+                <h2>Ranked Battle (${rotation.ranked_mode})</h2>
+                <div class="stages">
+                    ${rotation.ranked.map(img =>
+                        `<img src="${img}" alt="Ranked Stage">`
+                    ).join("")}
+                </div>
+            </div>
+        `;
+    }
+}
+
+renderStages();
--- 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 */
-}
+}