online.html 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Online Players on Source of Mana</title>
  8. </head>
  9. <body>
  10. <h3>Online Players on Source of Mana (<span id="time"></span>):</h3>
  11. <table border="1" cellspacing="1">
  12. <thead>
  13. <tr>
  14. <th>Name</th>
  15. </tr>
  16. </thead>
  17. <tbody id="players"></tbody>
  18. </table>
  19. <p><span id="user-count"></span> users are online.</p>
  20. <script>
  21. const count = document.getElementById("user-count");
  22. const playerTable = document.getElementById("players");
  23. const updateTime = document.getElementById("time");
  24. function refresh() {
  25. fetch("./online.json")
  26. .then((response) => response.json())
  27. .then((players) => {
  28. updateTime.innerText = new Date().toLocaleString();
  29. count.innerText = players.length;
  30. // clear old entries
  31. playerTable.innerHTML = "";
  32. for (const player of players) {
  33. const td = document.createElement("td");
  34. td.innerText = player;
  35. const tr = document.createElement("tr");
  36. tr.appendChild(td);
  37. playerTable.appendChild(tr);
  38. }
  39. });
  40. }
  41. setInterval(refresh, 10 * 1000 /*milliseconds */);
  42. refresh()
  43. </script>
  44. </body>
  45. </html>