123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139 |
- 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);
|