File manager - Edit - /home/ipsc/assets/js/realtime.js
Back
document.addEventListener("DOMContentLoaded", () => { /* =============================== ELEMENTS =============================== */ const btnPlayers = document.getElementById("btnPlayers"); const btnRanking = document.getElementById("btnRanking"); const playersSection = document.getElementById("playersSection"); const rankingSection = document.getElementById("rankingSection"); const playerListEl = document.getElementById("playerList"); const runningBoxEl = document.getElementById("runningBox"); const nextListEl = document.getElementById("nextList"); const podiumEl = document.getElementById("podium"); const rankingListEl = document.getElementById("rankingList"); let runningTimer = null; /* =============================== FORMAT TIME =============================== */ function formatTime(seconds) { if (seconds === null || seconds === undefined) return "-"; return `<strong>${Number(seconds).toFixed(2)} วิ</strong>`; } /* =============================== TAB CONTROL =============================== */ btnPlayers.onclick = () => { playersSection.style.display = "block"; rankingSection.style.display = "none"; btnPlayers.classList.add("active"); btnRanking.classList.remove("active"); }; btnRanking.onclick = () => { playersSection.style.display = "none"; rankingSection.style.display = "block"; btnRanking.classList.add("active"); btnPlayers.classList.remove("active"); }; /* =============================== LOAD PLAYERS =============================== */ async function loadPlayers() { try { const res = await fetch("api/get_players.php"); const data = await res.json(); playerListEl.innerHTML = ""; data.forEach(p => { playerListEl.innerHTML += ` <div class="player-card"> <img src="upload/players/${p.image || 'user.png'}"> <div> <h3>${p.name}</h3> <p>IPSC ${p.code}</p> </div> </div> `; }); } catch (err) { console.error("loadPlayers error:", err); } } /* =============================== LOAD RANKING =============================== */ async function loadRanking() { try { const res = await fetch("api/ranking.php"); const data = await res.json(); runningBoxEl.innerHTML = ""; nextListEl.innerHTML = ""; podiumEl.innerHTML = ""; rankingListEl.innerHTML = ""; const running = []; const waiting = []; const finished = []; const dq = []; data.ranking.forEach(p => { if (p.status === "running") running.push(p); else if (p.status === "waiting") waiting.push(p); else if (p.status === "finished") finished.push(p); else if (p.status === "dq") dq.push(p); }); /* =============================== RUNNING =============================== */ if (running.length > 0) { const p = running[0]; const startTime = new Date(p.start_time).getTime(); runningBoxEl.innerHTML = ` <div class="ranking-card running"> <img src="upload/players/${p.image || 'user.png'}"> <div> <h3>${p.name}</h3> <p>IPSC ${p.code}</p> <p class="live-time"> ⏱ <span id="runningTime">0.00</span> วิ </p> </div> </div> `; if (runningTimer) clearInterval(runningTimer); runningTimer = setInterval(() => { const diff = (Date.now() - startTime) / 1000; const timeEl = document.getElementById("runningTime"); if (timeEl && diff >= 0) { timeEl.textContent = diff.toFixed(2); } }, 50); } /* =============================== NEXT (แสดง 3 คน) =============================== */ if (waiting.length > 0) { waiting.slice(0, 3).forEach((p, index) => { nextListEl.innerHTML += ` <div class="ranking-card next"> <div class="rank">${index + 1}</div> <img src="upload/players/${p.image || 'user.png'}"> <div> <h3>${p.name}</h3> <p>IPSC ${p.code}</p> </div> </div> `; }); } else { nextListEl.innerHTML = ` <p style="text-align:center;opacity:.6">ยังไม่มีผู้แข่งขันถัดไป</p> `; } /* =============================== SORT FINISHED (เร็วสุดก่อน) =============================== */ finished.sort((a, b) => a.time - b.time); /* =============================== PODIUM 1–3 =============================== */ finished.slice(0, 3).forEach((p, i) => { podiumEl.innerHTML += ` <div class="podium-item podium-${i + 1}" data-rank="${i + 1}"> <img src="upload/players/${p.image || 'user.png'}"> <h3>${p.name}</h3> <p>${formatTime(p.time)}</p> </div> `; }); /* =============================== RANK 4+ =============================== */ finished.slice(3).forEach((p, index) => { rankingListEl.innerHTML += ` <div class="ranking-card rank-normal"> <div class="rank">${index + 4}</div> <img src="upload/players/${p.image || 'user.png'}"> <div> <h3>${p.name}</h3> <p>IPSC ${p.code}</p> <p>${formatTime(p.time)}</p> </div> </div> `; }); /* =============================== DQ =============================== */ dq.forEach(p => { rankingListEl.innerHTML += ` <div class="ranking-card dq"> <div class="rank">DQ</div> <img src="upload/players/${p.image || 'user.png'}"> <div> <h3>${p.name}</h3> <p>IPSC ${p.code}</p> </div> </div> `; }); } catch (err) { console.error("loadRanking error:", err); } } /* =============================== INIT =============================== */ loadPlayers(); loadRanking(); setInterval(() => { loadPlayers(); loadRanking(); }, 1000); });
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 1.34 |
proxy
|
phpinfo
|
Settings