wordle-extended-share/wordle-share.js

const copyToClipboard = (s) => {
  document.addEventListener('copy', (e) => {
    e.preventDefault();
    e.clipboardData?.setData('text/plain', s);
    document.removeEventListener('copy', listener);
  });

  if (!navigator.clipboard) {
    document.execCommand('copy');
  } else {
    navigator.clipboard.writeText(s).catch((e) => {
      console.log(e);
      console.log('failed to copy');
    });
  }
};

const buildGuesses = () => {
  const rows = document
    .querySelector('game-app')
    .shadowRoot.querySelector('game-theme-manager')
    .querySelectorAll('game-row');
  const isDarkMode = window.localStorage.darkTheme === 'true';
  return [...rows]
    .map((row) => {
      const guess = row.attributes.letters.value;

      if (!guess) {
        return null;
      }

      const colors = [...row.shadowRoot.querySelectorAll('game-tile')]
        .map((letter) => {
          switch (letter.attributes.evaluation.value) {
            case 'present':
              return '🟨';
            case 'correct':
              return '🟩';
            default:
              return isDarkMode ? '⬛' : '⬜';
          }
        })
        .join('');

      return `${colors} [spoiler]${guess.toUpperCase()}[/spoiler]`;
    })
    .filter((el) => !!el);
};

const buildShareCopy = () => {
  const number = document.querySelector('[data-day-offset]').dataset.dayOffset;
  const hardMode =
    document.querySelector('[data-is-hard-mode]').dataset.isHardMode === 'true'
      ? '*'
      : '';
  const guesses = buildGuesses();
  const guessesCopy = guesses.join('\n');

  return `Wordle ${number} ${guesses.length}/6${hardMode}\n\n${guessesCopy}`;
};

const handleClick = (e) => {
  e.preventDefault();
  e.stopPropagation();

  const shareCopy = buildShareCopy();
  const toastContainer = document
    .querySelector('game-app')
    .shadowRoot.querySelector('game-theme-manager')
    .querySelector('#system-toaster');
  const toast = document.createElement('game-toast');
  toast.setAttribute('text', 'Copied results to clipboard');
  toast.setAttribute('duration', '2000');
  toastContainer.appendChild(toast);
  copyToClipboard(shareCopy);
};

const buildButton = () => {
  const button = document.createElement('button');
  button.id = 'extended-share-button';
  button.innerText = 'Share ++';
  button.addEventListener('click', handleClick);
  button.style.cssText = `
    align-items: center;
    background-color: var(--key-bg-correct);
    border-radius: 4px;
    border: none;
    color: var(--key-evaluated-text-color);
    cursor: pointer;
    display: flex;
    filter: brightness(100%);
    font-family: inherit;
    font-size: 20px;
    font-weight: bold;
    height: 52px;
    justify-content: center;
    margin-top: 10px;
    text-transform: uppercase;
    userSelect: none;
    width: 80%;
  `;
  return button;
};

const readyStateCheckInterval = setInterval(() => {
  const script = document.createElement('script');
  script.innerText = `
    (() => {
      const app = new window.wordle.bundle.GameApp();

      const offset = document.createElement('span');
      offset.dataset.dayOffset = app.dayOffset;
      document.body.appendChild(offset);

      const hardMode = document.createElement('span');
      hardMode.dataset.isHardMode = app.hardMode;
      document.body.appendChild(hardMode);
    })();
  `;
  document.body.appendChild(script);

  const el = document
    .querySelector('game-app')
    .shadowRoot.querySelector('game-theme-manager')
    .querySelector('game-modal game-stats');

  if (el && !el.querySelector('#extended-share-button')) {
    clearInterval(readyStateCheckInterval);
    const button = buildButton();
    const shareContainer = el.shadowRoot.querySelector('.share');
    shareContainer.style.flexDirection = 'column';

    shareContainer
      .querySelectorAll('#extended-share-button')
      .forEach((el) => el.remove());

    shareContainer.appendChild(button);
  }
}, 1000);