const data_whoami = document.getElementById("data_whoami");
const time = document.getElementById("time");
const weekday = document.getElementById("weekday");
const timezone = document.getElementById("timezone");
const nofetchy = document.getElementById("no-fetchy");
fetch("https://pronouns.cc/api/v1/users/MeowcaTheoRange")
  .then((x) => x.json())
  .then((user) => {
    data_whoami.innerHTML = `
<p>I'm <a href="https://pronouns.cc/@MeowcaTheoRange" target="_blank"><b>${
      user.names[0].value
    }</b></a>, also better known online as <b>${
      user.name
    }</b>. <small>(${user.pronouns
      .map((pronoun) => pronoun.pronouns.split("/")[0])
      .join("/")})</small></p>`;
    const curTime = new Date();
    timezone.innerHTML = `(UTC${user.utc_offset > 0 ? "+" : "-"}${Math.abs(
      user.utc_offset / (60 * 60)
    )})`;
    function updateTime() {
      curTime.setTime(
        Date.now() -
          curTime.getTimezoneOffset() * 60 * 1000 -
          user.utc_offset * 1000
      );
      time.innerHTML = curTime.toLocaleTimeString();
      weekday.innerHTML = curTime.toLocaleString("en-us", { weekday: "long" });

      window.requestAnimationFrame(updateTime);
    }
    window.requestAnimationFrame(updateTime);
    nofetchy.style.display = null;
  });