☰

Master Duel Meta - Screenshot for Deck Builder

Take a nice shot of your deck!

// ==UserScript==
// @name         Master Duel Meta - Screenshot for Deck Builder
// @namespace    https://github.com/DonkeyBear
// @version      0.2.6
// @description  Take a nice shot of your deck!
// @author       DonkeyBear
// @match        http://www.masterduelmeta.com/deck-tester*
// @match        https://www.masterduelmeta.com/deck-tester*
// @icon         https://s3.duellinksmeta.com/img/icons/favicon-32x32.png
// @require      https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js
// @grant        none
// ==/UserScript==

const stylesheet = /* css */`
  .deck-container.taking-shot .new-card, .deck-container.taking-shot .adjust-buttons-container, .search-container.taking-shot {
    display: none !important;
  }
  .screenshot {
    object-fit: contain;
    max-width: 100vw;
    max-height: 100vh;
  }
  .overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .5);
    backdrop-filter: blur(3px);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .info-container {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: .75em;
    font-weight: 500;
  }
  .info-container .slot-info {
    color: white;
  }
  .slot-info, .card-count {
    flex-basis: auto !important;
  }
  .tag {
    color: white;
    padding: .1rem .4rem;
    border-radius: .25rem;
    margin-right: .25rem;
  }
  .tag.rarity-ur {
    background: linear-gradient(90deg, #c92ae7 0%, #7844fd 49%, #43bcd5 100%);
  }
  .tag.rarity-sr {
    background: linear-gradient(90deg, #e85504 0%, #f19d00 100%);
  }
  .tag.rarity-r {
    background: linear-gradient(90deg, #1831cc 0%, #017cfb 100%);
  }
  .tag.rarity-n {
    background: linear-gradient(90deg, #4f494b 0%, #969696 100%);
  }
`;
const style = document.createElement('style');
style.textContent = stylesheet;
document.head.appendChild(style);

// Append screenshot button
const tabButtonContainer = document.querySelector('ul.svelte-umfxo');
const newTabButton = document.createElement('li');
newTabButton.classList.add('svelte-umfxo', 'screenshot-button');
newTabButton.textContent = 'Screenshot';
newTabButton.onclick = () => { takeshot() };
tabButtonContainer.appendChild(newTabButton);

countCards();

const observer = {};

// Append screenshot button again if it's removed
observer.tabButtonContainer = new MutationObserver(() => {
  if (!tabButtonContainer.querySelector('.screenshot-button')) {
    tabButtonContainer.appendChild(newTabButton);
  }
});
observer.tabButtonContainer.observe(tabButtonContainer, { childList: true });

// Count cards and print
observer.mainDeck = new MutationObserver(() => { countCards() });
observer.extraDeck = new MutationObserver(() => { countCards() });
observer.deckContainer = new MutationObserver(() => {
  // Append count-info again if it's removed
  if (document.querySelector('.deck-container > .info-container').textContent.includes('cards')) { countCards() }
  const mainDeck = document.querySelector('.deck-container > .box-container');
  const extraDeck = document.querySelector('.extra-side-deck');
  if (mainDeck) { observer.mainDeck.observe(mainDeck, { childList: true, subtree: true, attributes: true }) }
  if (extraDeck) { observer.extraDeck.observe(extraDeck, { childList: true, subtree: true, attributes: true }) }
  if (mainDeck && mainDeck) { observer.deckContainer.disconnect() }
});
observer.deckContainer.observe(document.querySelector('.deck-container'), { childList: true });

function takeshot () {
  const deckContainer = document.querySelector('.deck-container');
  const searchContainer = document.querySelector('.search-container');

  deckContainer.classList.add('taking-shot');
  searchContainer.classList.add('taking-shot');

  const overlay = document.createElement('div');
  overlay.classList.add('overlay');
  overlay.onclick = () => { overlay.remove() };
  document.body.appendChild(overlay);

  const options = {
    allowTaint: false,
    useCORS: true,
    backgroundColor: '#001b35', // Background color of <body>
    logging: false
  };
  html2canvas(deckContainer.parentElement, options).then(canvas => { // eslint-disable-line no-undef
    canvas.classList.add('screenshot');
    overlay.appendChild(canvas);
  });

  deckContainer.classList.remove('taking-shot');
  searchContainer.classList.remove('taking-shot');
}

function countCards () {
  const counter = {
    main: 0,
    extra: 0,
    ur: 0,
    sr: 0,
    r: 0,
    n: 0
  };

  const mainDeckCards = document.querySelectorAll('.deck-container > .box-container > .card-container > .card');
  const extraDeckCards = document.querySelectorAll('.extra-side-deck .card-container > .card');

  for (const cards of [mainDeckCards, extraDeckCards]) {
    for (const card of cards) {
      if (!card.querySelector('img')) { break }

      let copies;
      const cardAmount = card.querySelector('img.card-amount');
      if (!cardAmount) {
        copies = 1;
      } else if (cardAmount.alt.includes('2')) {
        copies = 2;
      } else if (cardAmount.alt.includes('3')) {
        copies = 3;
      }

      cards === mainDeckCards ? counter.main += copies : counter.extra += copies;

      const rarityImage = card.querySelector('.rarity-image > img');
      if (!rarityImage) { break }
      switch (rarityImage.alt) {
        case 'UR Rarity':
          counter.ur += copies;
          break;
        case 'SR Rarity':
          counter.sr += copies;
          break;
        case 'R Rarity':
          counter.r += copies;
          break;
        case 'N Rarity':
          counter.n += copies;
      }
    }
  }

  const infoLeft = document.querySelector('.info-container .slot-info');
  const infoRight = document.querySelector('.info-container .card-count');
  infoLeft.innerHTML = /* html */`
    <span class="tag rarity-ur">${counter.ur} UR</span>
    <span class="tag rarity-sr">${counter.sr} SR</span>
    <span class="tag rarity-r">${counter.r} R</span>
    <span class="tag rarity-n">${counter.n} N</span>
  `;
  infoRight.textContent = `Main: ${counter.main} Extra: ${counter.extra}`;
}