<!-- HTML -->
<style>
.hehe-fclist {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: var(--size-2xs) var(--size-lg);
  width: 100%;
  min-height: 2rem;

  .fc {
    text-transform: capitalize;
  }

  .npc sup {
    font-family: var(--font-accent);
    text-transform: uppercase;
    color: var(--color-neutral-500);
  }

  &:not(:has(> .fc)):before {
    content: "";
    position: absolute;
    width: 2rem;
    height: 2rem;
    border: var(--size-2xs) solid;
    border-color: var(--color-neutral-500) transparent var(--color-neutral-500) transparent; 
    border-radius: 50%;
    animation: hehe-fc-spin 1.2s linear infinite;
  }
}

@keyframes hehe-fc-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

<div id="hehe-fc-target" class="hehe-fclist"></div>

<script>
(() => {
  const characterTemplate = (id, name) => {
    if (id) {
      return `<a href="/profile.php?id=${id}" target="_blank" rel="noopener noreferrer">${name}</a>`;
    }

    return `<span class="npc">${name} <sup>npc</sup></span>`;
  };

  const generateFCList = (characters) => {
    const container = document.getElementById("hehe-fc-target");
    if (!container) {
      return;
    }

    Object.entries(characters)
      .map(([name, character]) => ({
        name,
        fc: character.fc,
        id: character.id
      }))
      .sort((first, second) => first.fc.localeCompare(second.fc))
      .forEach(({ fc, name, id }) => {
        container.insertAdjacentHTML(
          "beforeend",
          `<span class="fc"><strong>${fc}</strong> — ${characterTemplate(id, name)}</span>`
        );
      });
  };

  const hash = +new Date();
  const script = document.createElement("script");
  script.charset = "windows-1251";
  script.src = `https://forumstatic.ru/files/001c/ab/7e/61137.js?v=${hash}`;

  script.addEventListener(
    "load",
    async () => {
      try {
        const characters = await window.teh.loadCharacters();
        generateFCList(characters);
      } catch (error) {
        console.error("Could not generate face-claim list.", error);
      }
    },
    { once: true }
  );

  script.addEventListener(
    "error",
    () => {
      console.error("Character-vault script failed to load.");
    },
    { once: true }
  );

  document.body.append(script);
})();
</script>