Armyfroge_Cards_Userscript/main.user.js

// ==UserScript==
// @name        Armyfroge Cards
// @namespace   https://git.euph.dev/Snoweuph
// @match       https://army-forge.onepagerules.com/view*
// @grant       none
// @version     1.0.1
// @author      Snoweuph
// @require https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
// @require https://html2canvas.hertzen.com/dist/html2canvas.min.js
// ==/UserScript==

// Bind to Ctrl + S
document.addEventListener("keydown", (event) => {
  if (event.ctrlKey && event.key === "s") {
    event.preventDefault();
    generateCards();
    generateRules();
  }
});

function generateCards() {
  const cards_root =
    document.getElementsByClassName("MuiContainer-root")[0].firstElementChild;

  Array.from(cards_root.children).forEach((child) => {
    const card = child.firstElementChild;
    const header = card.firstElementChild;

    const marker_section = document.createElement("div");
    marker_section.style.display = "flex";
    marker_section.style.gap = "0.5rem";
    marker_section.style.padding = "0.5rem";
    marker_section.style.marginBottom = "0.5rem";
    for (let i = 0; i < 10; i++) {
      const maker_space = document.createElement("div");
      maker_space.style.width = "3rem";
      maker_space.style.aspectRatio = "1";
      maker_space.style.borderRadius = "100%";
      maker_space.style.border = "dashed 1px lightgray";
      marker_section.appendChild(maker_space);
    }
    card.insertBefore(marker_section, header.nextSibling);

    html2canvas(card, { scale: 15, backgroundColor: null }).then((canvas) => {
      const link = document.createElement("a");
      link.download = getHeaderTitle(header) + ".png";
      link.href = canvas.toDataURL();
      document.body.appendChild(link);
      link.click();
    });
  });
}

function generateRules() {
  const rules_root =
    document.getElementsByClassName("MuiContainer-root")[1].firstElementChild.firstElementChild.firstElementChild.firstElementChild.lastElementChild;
  rules_root.style.displa = "flex"
  rules_root.style.flexDirection = "column"
  rules_root.style.gap = "1rem"

  html2canvas(rules_root, { scale: 15, backgroundColor: null }).then((canvas) => {
    const link = document.createElement("a");
    link.download = "Rules.png";
    link.href = canvas.toDataURL();
    document.body.appendChild(link);
    link.click();
  });
}


// Extract Title of Card
function getHeaderTitle(pElement) {
  let textContent = "";
  pElement.firstElementChild.firstElementChild.firstElementChild.childNodes.forEach(
    (node) => {
      if (node.nodeType === Node.TEXT_NODE) {
        textContent += node.textContent;
      }
    },
  );
  return textContent;
}