<div class="view-counter">
  <div data-viewcount>
    <span>?</span>
    <span>?</span>
    <span>?</span>
    <span>?</span>
    <span>?</span>
    <span>?</span>
  </div>
  <div>unique visitors</div>
</div>

<style lang="scss" is:global>
  .view-counter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 1rem;
    width: 100%;
    text-align: center;

    [data-viewcount] {
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 1;
      gap: 0.2rem;
      padding: 0.25rem;
      font-size: 1.25rem;
      span {
        display: inline-flex;
        position: relative;
        background: black;
        color: white;
        padding: 0.5ch;
        font-family: monospace;
        min-width: 1.5rem;
        min-height: 2rem;
        overflow: hidden;
        &::before {
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          content: "?";
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
        &::after {
          content: attr(data-number);
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          top: -100%;
          left: 0;
          width: 100%;
          height: 100%;
        }
        &[data-number] {
          &::before {
            animation-delay: inherit;
            animation-duration: 0.2s;
            animation-name: spin-before;
            animation-fill-mode: forwards;
          }
          &::after {
            animation-delay: inherit;
            animation-duration: 0.2s;
            animation-name: spin-after;
            animation-fill-mode: forwards;
          }
        }
      }
    }

  }

  @container(max-width: 175px) {
    .view-counter {
      margin: 0 auto;
    }
  }

  @keyframes spin-before {
    0% {
      top: 0;
    }
    100% {
      top: 100%;
    }
  }
  @keyframes spin-after {
    0% {
      top: -100%;
    }
    100% {
      top: 0;
    }
  }

</style>

<script>

  updateViewCount();
  let previousCount = 0;

  async function updateViewCount() {
    const viewCounter = document.querySelector("[data-viewcount]");
    if (!viewCounter) {
      setTimeout(updateViewCount, 10000);
      return;
    }
    console.debug("Updating view count...");
    const result = await fetch("https://youhavetrouble-view_counter.web.val.run").catch(() => null);
    if (result === null) {
      setTimeout(updateViewCount, 10000);
      return;
    }
    const json = await result.json();
    const rawCount = json.count;
    if (rawCount === previousCount) {
      setTimeout(updateViewCount, 10000);
      return;
    }
    previousCount = rawCount;
    let chars = rawCount.toString();
    while (chars.length < 6) {
      chars = "0" + chars;
    }
    viewCounter.innerHTML = "";
    for (let i = 0; i < chars.length; i++) {
      const span = document.createElement("span");
      span.setAttribute("data-number", chars[i]);
      span.style.animationDelay = `${i * 0.05}s`;
      viewCounter.appendChild(span);
    }
    setTimeout(updateViewCount, 10000);
  }

</script>
