☰

MZ Saul Goodman's League Standings

Display all leagues for a division on a single page

当前为 2023-06-19 提交的版本，查看 最新版本。

// ==UserScript==
// @name          MZ Saul Goodman's League Standings
// @version       1.0
// @description   Display all leagues for a division on a single page
// @author        Douglas Vieira
// @match         *://www.managerzone.com/?p=team
// @icon          https://www.google.com/s2/favicons?sz=64&domain=managerzone.com
// @grant         GM_addStyle
// @license       MIT
// @namespace https://greasyfork.org/users/1088808
// ==/UserScript==

GM_addStyle(`
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
`);

(function () {
  const mainContainer = document.createElement("div");

  const infoAboutTeam = document.getElementById("infoAboutTeam");
  const teamStadiumWrapper = document.getElementById("team-stadium-wrapper");

  const seniorLeagues = {
    "Top Division": [1],
    "Division 1": [2, 3, 4],
    "Division 2": [5, 6, 7, 8, 9, 10, 11, 12, 13],
  };

  let worldLeagues = getWorldLeaguesObj();

  const uxxLeagues = {
    "Top Division": [1],
    "Division 1": [2, 3, 4],
    "Division 2": [5, 6, 7, 8, 9, 10, 11, 12, 13],
  };

  const buttonNames = [
    "Senior Leagues",
    "World Leagues",
    "U18 World Leagues",
    "U21 World Leagues",
    "U23 World Leagues",
    "U18 Leagues",
    "U21 Leagues",
    "U23 Leagues",
  ];

  const teamId = RegExp(/\((\d+)\)/).exec(
    infoAboutTeam.querySelector("dd").textContent
  )[1];

  const teamLeaguesInfo = Array.from(infoAboutTeam.querySelectorAll("dd"))
    .slice(5, 14)
    .reduce((info, dd, index) => {
      const leagueType = dd
        .querySelector(".teamExpText")
        .textContent.trim()
        .toLowerCase();

      const leagueValue = dd.querySelector("strong a").textContent.trim();

      let division;
      if (index === 0 || leagueType === "league") {
        division = isNaN(parseInt(leagueValue[0], 10))
          ? "Top Division"
          : `Division ${parseInt(leagueValue[0], 10)}`;
      } else if (
        [
          "world league",
          "u18 world league",
          "u21 world league",
          "u23 world league",
        ].includes(leagueType)
      ) {
        division = leagueValue.startsWith("Top")
          ? "Top Series"
          : `Division ${parseInt(
              leagueValue.split("div")[1].split(".")[0],
              10
            )}`;
      } else {
        division = leagueValue.includes("div")
          ? `Division ${parseInt(
              leagueValue.split("div")[1].split(".")[0],
              10
            )}`
          : "Top Division";
      }

      info[leagueType] = division;
      return info;
    }, {});

  if (infoAboutTeam && teamStadiumWrapper) {
    appendLeagueButtonsToTeamPage();
  }

  function getWorldLeaguesObj() {
    const worldLeagues = {};
    let start = 1;

    for (let i = 0; i <= 3; ++i) {
      const divisionName = i === 0 ? "Top Series" : `Division ${i}`;
      worldLeagues[divisionName] = [];
      const numLeagues = Math.pow(3, i);

      for (let j = 0; j < numLeagues; ++j) {
        worldLeagues[divisionName].push(start++);
      }
    }

    return worldLeagues;
  }

  function appendLeagueButtonsToTeamPage() {
    for (let i = 0; i < 8; ++i) {
      const button = document.createElement("button");
      setupButton(
        button,
        `league-button-${buttonNames[i].toLocaleLowerCase()}`,
        buttonNames[i]
      );
      mainContainer.appendChild(button);
    }
    teamStadiumWrapper.appendChild(
      setupMainContainer(mainContainer, "league-buttons-container")
    );
  }

  async function fetchLeagueTable(sid, leagueType, divisionCount) {
    try {
      const response = await fetch(
        `https://www.managerzone.com/ajax.php?p=league&type=${leagueType}&sid=${sid}&tid=${teamId}&sport=soccer&sub=table`
      );
      const html = await response.text();
      const parser = new DOMParser();
      const doc = parser.parseFromString(html, "text/html");

      const niceTable = doc.querySelector(".nice_table");
      niceTable.style.margin = "16px auto";
      niceTable.style.width = "60%";

      handleHelpButton(niceTable, sid, leagueType);

      return {
        table: niceTable,
        divisionCount: divisionCount,
      };
    } catch (error) {
      console.error("Error: ", error);
      return null;
    }
  }

  function handleHelpButton(table, sid, leagueType) {
    const secondRow = table.querySelector("tbody tr:nth-child(2)");
    const helpButton = secondRow.querySelector(".help_button");
    const teamLink = secondRow.querySelector("a[onclick*='purchaseChallenge']");
    const tid = teamLink
      ? teamLink
          .getAttribute("onclick")
          .split(",")[2]
          .replace(/[ ';)]/g, "")
      : null;

    if (helpButton && tid) {
      helpButton.removeAttribute("onclick");
      helpButton.addEventListener("click", (event) => {
        event.preventDefault();
        fetchExtraLeagueData(sid, leagueType, tid);
      });
    }
  }

  function createLeaguesModal(modalId, button) {
    const leagueType = getLeagueTypeFromButtonId(button.id);
    const leaguesObject = getLeaguesObjFromLeagueType(leagueType);

    const leaguesModalTitle = button.textContent;

    const leaguesModal = document.createElement("div");
    setupModal(leaguesModal, modalId);

    const leaguesModalContent = addContentToLeaguesModal(leaguesModal);
    ensureContentIsCentered(leaguesModalContent);

    const leagueTablesContainer =
      addTablesContainerToLeaguesModal(leaguesModalContent);

    addOtherComponentsToLeaguesModal(
      leaguesModal,
      leaguesModalContent,
      leaguesModalTitle,
      leagueTablesContainer,
      leagueType,
      leaguesObject
    );

    return leaguesModal;
  }

  function addContentToLeaguesModal(modal) {
    const modalContent = document.createElement("div");
    setupLeaguesModalContent(modalContent, "leagues-modal-content");
    modal.appendChild(modalContent);
    return modalContent;
  }

  function addTablesContainerToLeaguesModal(modalContent) {
    const leagueTablesContainer = document.createElement("div");
    leagueTablesContainer.id = "league-tables-container";
    modalContent.appendChild(leagueTablesContainer);
    return leagueTablesContainer;
  }

  function addOtherComponentsToLeaguesModal(
    modal,
    modalContent,
    modalTitle,
    leagueTablesContainer,
    leagueType,
    leaguesObject
  ) {
    const dropdownAndTablesContainer = document.createElement("div");

    addModalTitleToLeaguesModal(modalContent, modalTitle);

    addTabsToLeaguesModal(
      modalContent,
      leagueType,
      leaguesObject,
      leagueTablesContainer
    );

    addCloseButtonToLeaguesModal(modal, modalContent);

    dropdownAndTablesContainer.appendChild(leagueTablesContainer);
    modalContent.appendChild(dropdownAndTablesContainer);
  }

  function addModalTitleToLeaguesModal(modalContent, titleText) {
    const title = document.createElement("h2");
    setupLeaguesModalTitle(title, "leagues-modal-title", titleText);
    modalContent.appendChild(title);
  }

  function addTabsToLeaguesModal(
    container,
    leagueType,
    leaguesObj,
    leagueTablesContainer
  ) {
    const tabContainer = document.createElement("div");
    setupLeaguesTabs(
      tabContainer,
      "leagues-tabs",
      leagueType,
      leaguesObj,
      leagueTablesContainer
    );
    container.appendChild(tabContainer);
  }

  function addCloseButtonToLeaguesModal(modal, modalContent) {
    const closeButton = document.createElement("button");
    setupCloseButton(closeButton, "leagues-modal-close-button", modal);
    modalContent.appendChild(closeButton);
  }

  function ensureContentIsCentered(modalContent) {
    const initialMarginTop = Math.max(
      (window.innerHeight - modalContent.offsetHeight) / 2,
      0
    );
    modalContent.style.marginTop = initialMarginTop + "px";

    window.addEventListener("scroll", function () {
      const newMarginTop = Math.max(
        (window.innerHeight - modalContent.offsetHeight) / 2,
        0
      );
      modalContent.style.marginTop = newMarginTop + "px";
    });
  }

  function setupModal(modal, id) {
    modal.id = id;
    modal.style.position = "fixed";
    modal.style.zIndex = "1";
    modal.style.left = "0";
    modal.style.top = "0";
    modal.style.width = "100%";
    modal.style.height = "100%";
    modal.style.display = "flex";
    modal.style.justifyContent = "center";
    modal.style.alignItems = "center";
    modal.style.backgroundColor = "rgba(0,0,0,0.8)";
    modal.style.opacity = "0";
    modal.style.transition = "opacity 0.5s ease-in-out";
    setTimeout(function () {
      modal.style.opacity = "1";
    }, 0);
  }

  function setupLeaguesModalContent(modalContent, id) {
    modalContent.id = id;
    modalContent.style.backgroundColor = "#fefefe";
    modalContent.style.backgroundImage =
      "url('https://s1.ax1x.com/2023/06/19/pC1wQaR.md.jpg')";
    modalContent.style.backgroundSize = "cover";
    modalContent.style.backgroundPosition = "center";
    modalContent.style.margin = "0 auto";
    modalContent.style.padding = "20px";
    modalContent.style.border = "1px solid #888";
    modalContent.style.width = "80%";
    modalContent.style.position = "relative";
    modalContent.style.overflowY = "auto";
    modalContent.style.maxHeight = "80vh";
    ensureContentIsCentered(modalContent);
  }

  function setupLeaguesModalTitle(title, id, textContent) {
    title.id = id;
    title.textContent = textContent;
    title.style.textAlign = "center";
    title.style.fontFamily = "Montserrat, sans-serif";
    title.style.color = "navy";
  }

  function setupCloseButton(button, id, modal) {
    button.id = id;
    button.textContent = "X";
    button.style.position = "absolute";
    button.style.top = "10px";
    button.style.right = "10px";
    button.style.fontFamily = "Arial, sans-serif";
    button.style.fontSize = "20px";
    button.style.fontWeight = "bold";
    button.style.color = "#000";
    button.style.backgroundColor = "transparent";
    button.style.border = "none";
    button.style.cursor = "pointer";
    button.onclick = function () {
      modal.style.opacity = "0";
      setTimeout(function () {
        document.body.removeChild(modal);
      }, 500);
    };
  }

  function setupLeaguesTabs(
    tabContainer,
    id,
    leagueType,
    leagues,
    leagueTablesContainer
  ) {
    tabContainer.id = id;
    for (const league in leagues) {
      const tab = document.createElement("button");
      tab.textContent = league;
      tab.id = `tab-${league.toLocaleLowerCase().replace(" ", "")}`;
      tab.onclick = async function () {
        updateLeaguesModal(leagueTablesContainer);
        const selected = this.textContent;
        const leagueIds = leagues[selected];
        const fetchPromises = leagueIds.map((sid, index) =>
          fetchLeagueTable(sid, leagueType, index + 1)
        );
        const tablesData = await Promise.all(fetchPromises);
        tablesData.sort((a, b) => a.divisionCount - b.divisionCount);
        tablesData.forEach((data) => {
          if (data !== null) {
            leagueTablesContainer.appendChild(document.createElement("hr"));
            leagueTablesContainer.appendChild(
              createLeagueTitle(selected, data.divisionCount)
            );
            leagueTablesContainer.appendChild(data.table);
            data.table.id = `${leagueType}-${selected
              .toLocaleLowerCase()
              .replace(" ", "")}-${data.divisionCount}`;
          }
        });
      };
      tabContainer.appendChild(tab);
    }
  }

  function getLeagueTypeFromButtonId(id) {
    if (id.includes("senior leagues")) {
      return "senior";
    } else if (id.includes("u18 world leagues")) {
      return "u18_world";
    } else if (id.includes("u21 world leagues")) {
      return "u21_world";
    } else if (id.includes("u23 world leagues")) {
      return "u23_world";
    } else if (id.includes("u18 leagues")) {
      return "u18";
    } else if (id.includes("u21 leagues")) {
      return "u21";
    } else if (id.includes("u23 leagues")) {
      return "u23";
    } else {
      return "world";
    }
  }

  function getLeaguesObjFromLeagueType(leagueType) {
    let leagues;
    switch (leagueType) {
      case "senior":
        leagues = seniorLeagues;
        break;
      case "world":
        leagues = worldLeagues;
        break;
      case "u18_world":
        leagues = worldLeagues;
        break;
      case "u21_world":
        leagues = worldLeagues;
        break;
      case "u23_world":
        leagues = worldLeagues;
        break;
      case "u18":
        leagues = uxxLeagues;
        break;
      case "u21":
        leagues = uxxLeagues;
        break;
      case "u23":
        leagues = uxxLeagues;
        break;
      default:
        break;
    }
    return leagues;
  }

  function updateLeaguesModal(leagueTablesContainer) {
    while (leagueTablesContainer.firstChild) {
      leagueTablesContainer.removeChild(leagueTablesContainer.firstChild);
    }
  }

  function createLeagueTitle(selectedLeague, divisionCount) {
    const p = document.createElement("p");
    if (!selectedLeague.startsWith("Division")) {
      p.textContent = selectedLeague;
    } else {
      const theDivision = selectedLeague + "." + divisionCount;
      p.textContent = theDivision.replace("Division", "div");
    }
    p.style.fontFamily = "Montserrat, sans-serif";
    p.style.fontWeight = "bold";
    p.style.textAlign = "center";
    return p;
  }

  function setupButton(button, id, textContent) {
    button.id = id;
    button.textContent = textContent;

    styleButton(button);
    setupButtonAnimations(button);

    button.onclick = function () {
      const leaguesModal = createLeaguesModal("leagues-modal", button);
      appendAndShowOrHideModal(leaguesModal);
    };
  }

  function styleButton(button) {
    button.style.margin = "4px";
    button.style.padding = "8px 16px";
    button.style.border = "none";
    button.style.borderRadius = "12px";
    button.style.backgroundColor = "#000080";
    button.style.color = "white";
    button.style.fontFamily = "Montserrat, sans-serif";
    button.style.fontSize = "12px";
    button.style.cursor = "pointer";
    button.style.boxShadow = "0px 2px 6px rgba(0, 0, 0, 0.3)";
  }

  function setupButtonAnimations(button) {
    button.onmouseover = function () {
      button.style.backgroundColor = "#27285C";
      button.style.transform = "scale(1.05)";
    };
    button.onmouseout = function () {
      button.style.backgroundColor = "#000080";
      button.style.transform = "scale(1)";
    };
    button.onmousedown = function () {
      button.style.transform = "scale(0.95)";
    };
    button.onmouseup = function () {
      button.style.transform = "scale(1)";
    };
  }

  function appendAndShowOrHideModal(modal) {
    document.body.appendChild(modal);
    window.onclick = function (event) {
      if (event.target == modal) {
        modal.style.opacity = "0";
        setTimeout(function () {
          document.body.removeChild(modal);
        }, 500);
      }
    };
  }

  function setupMainContainer(container, id) {
    container.id = id;
    container.style.display = "flex";
    container.style.flexDirection = "column";
    container.style.justifyContent = "center";
    container.style.alignItems = "center";
    container.style.marginTop = "20px";
    return container;
  }

  function fetchExtraLeagueData(sid, leagueType, tid) {
    fetch(
      `https://www.managerzone.com/ajax.php?p=extraLeague&sub=division_runner_ups&type=${leagueType}&sid=${sid}&tid=${tid}&sport=soccer`
    )
      .then((response) => response.text())
      .then((html) => {
        const extraLeagueDataModal = createExtraLeagueDataModal(html);
        document.body.appendChild(extraLeagueDataModal);
      })
      .catch((error) => console.error("Error: ", error));
  }

  function createExtraLeagueDataModal(html) {
    const modal = document.createElement("div");
    setupModal(modal, "extra-league-data-modal");

    const extraDataDiv = document.createElement("div");
    extraDataDiv.innerHTML = html;
    extraDataDiv.style.width = "60%";
    modal.appendChild(extraDataDiv);

    window.addEventListener("click", function (event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    });

    return modal;
  }
})();