let resolveLoaded;
const loaded = new Promise(resolve => resolveLoaded = resolve);

function formatUptime(s) {
  let units = [
    ['d', (s / (1000 * 60 * 60 * 24))],
    ['h', (s / (1000 * 60 * 60)) % 24],
    ['m', (s / (1000 * 60)) % 60],
    ['s', (s / 1000) % 60]
  ];

  return units.filter(([_, t]) => t > 1).map(([sh, t]) => `${Math.ceil(t)}${sh}`).join(' ');
}

Promise.all([
  fetch('/api/status')
    .then(res => res.json()),
  loaded
]).then(([status]) => {
  document.querySelector('#status').innerHTML = `
    <div class="status"></div> online &middot; ${status.guilds} guilds &middot; up for <span id="uptime">${formatUptime(status.uptime)}</span>
  `;
  const firstRender = Date.now();
  setInterval(() => {
    document.querySelector('#uptime').innerText = formatUptime(status.uptime + Date.now() - firstRender);
  }, 1000);
});

document.addEventListener('DOMContentLoaded', () => resolveLoaded());