a small script that adds label to tiermaker.com characters

tierMakerLabels.js

(() => {
  const debounce = (fn, ms = 50) => {
    let timer;
    const tick = () => {
      fn();
      timer = null;
    };

    return () => {
      if (null != timer) {
        clearTimeout(timer);
      }

      timer = setTimeout(tick, ms);
    };
  };
  const common = '_' + Math.random().toString(36).substring(2);
  const pattern = /(?<=\/flag-of-)[^\/]+(?=png\.png)/;
  const selector = `[data-common=${common}]`;

  document.body.addEventListener(
    'DOMSubtreeModified',
    debounce(() => {
      document.querySelectorAll(`.character:not(${selector})`).forEach((e) => {
        const style = getComputedStyle(e);
        const match = style.backgroundImage.match(pattern);

        if (null == match) {
          return;
        }

        const title = match[0]
          .replace(/-/g, ' ')
          .replace(/(?<=^|\W)\w/g, (m) => m.toUpperCase());
        const span = document.createElement('span');

        span.innerText = title;

        e.setAttribute('aria-label', title + ' Flag');
        e.setAttribute('data-common', common);

        e.appendChild(span);

        e.addEventListener('click', ($event) => {
          if ($event.ctrlKey) {
            $event.target.style.display = 'none';
          }
        });
      });
    })
  );

  const style = document.createElement('style');

  style.setAttribute('type', 'text/css');
  style.innerHTML =
    `${selector} {` +
    'position: relative' +
    '}' +
    `${selector} span {` +
    'position: absolute;' +
    'background-color: rgba(0,0,0,.68);' +
    'padding: .2em .4em;' +
    'max-width: 100%;' +
    'border-radius: .3em;' +
    'left: 0;' +
    'color: #fff;' +
    'margin: .4em;' +
    'font-size: small;' +
    'pointer-events: none' +
    '}';

  document.body.appendChild(style);
})();