ylOppTactsPreview (MODIFIED)

Shows latest 6 tactics of a specific opponent on the scheduled matches page… (made by kostrzak16)

目前為 2024-11-09 提交的版本,檢視 最新版本

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name         ylOppTactsPreview (MODIFIED)
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Shows latest 6 tactics of a specific opponent on the scheduled matches page… (made by kostrzak16)
// @author       kostrzak16 in MZ feat. D and X
// @match        https://www.managerzone.com/?p=match&sub=scheduled
// @icon         https://www.google.com/s2/favicons?sz=64&domain=managerzone.com
// @grant        none
// @license      MIT
// ==/UserScript==

(function () {
    "use strict";

    function insertIconsAndListeners() {
        const linksWithTid = document.querySelectorAll('a[href*="tid"].clippable');
        console.log("Links found:", linksWithTid.length);

        linksWithTid.forEach((link) => {
            if (link.parentNode.querySelector('.magnifier-icon')) return;

            const triggerElement = document.createElement("span");
            triggerElement.textContent = "🔍";
            triggerElement.classList.add('magnifier-icon');
            triggerElement.style.cursor = "pointer";
            triggerElement.style.fontSize = "12px";
            triggerElement.style.marginLeft = "5px";

            link.parentNode.insertBefore(triggerElement, link.nextSibling);
        });
    }

    document.body.addEventListener('click', function(e) {
        if (e.target && e.target.classList.contains('magnifier-icon')) {
            e.stopPropagation();
            e.preventDefault();

            const triggerElement = e.target;
            const link = triggerElement.previousSibling;

            if (!link || !link.href) return;

            const tidValue = new URL(link.href, window.location.origin).searchParams.get("tid");
            console.log("Extracted tidValue:", tidValue);

            showMatchTypeSelector(tidValue);
        }
    });

    function showMatchTypeSelector(tidValue) {
        const existingSelector = document.getElementById("matchTypeSelector");
        if (existingSelector) {
            existingSelector.remove();
        }

        const selectorDiv = document.createElement("div");
        selectorDiv.id = "matchTypeSelector";
        selectorDiv.style.position = "fixed";
        selectorDiv.style.top = "50%";
        selectorDiv.style.left = "50%";
        selectorDiv.style.transform = "translate(-50%, -50%)";
        selectorDiv.style.backgroundColor = "#fff";
        selectorDiv.style.border = "1px solid #ccc";
        selectorDiv.style.padding = "20px";
        selectorDiv.style.zIndex = "1000";
        selectorDiv.style.boxShadow = "0 0 10px rgba(0,0,0,0.5)";
        selectorDiv.style.textAlign = "center";

        const label = document.createElement("label");
        label.textContent = "Select match type:";
        label.style.marginRight = "10px";

        const select = document.createElement("select");
        select.id = "matchTypeSelect";
        ["u18", "u21", "u23", "no_restriction"].forEach((type) => {
            const option = document.createElement("option");
            option.value = type;
            option.textContent = type;
            select.appendChild(option);
        });

        const okButton = document.createElement("button");
        okButton.textContent = "OK";
        okButton.style.marginLeft = "10px";
        okButton.addEventListener("click", () => {
            const matchType = select.value;
            console.log("Selected matchType:", matchType);
            selectorDiv.remove();
            fetchLatestSixTactics(tidValue, matchType);
        });

        const cancelButton = document.createElement("button");
        cancelButton.textContent = "Cancel";
        cancelButton.style.marginLeft = "10px";
        cancelButton.addEventListener("click", () => {
            selectorDiv.remove();
        });

        selectorDiv.appendChild(label);
        selectorDiv.appendChild(select);
        selectorDiv.appendChild(okButton);
        selectorDiv.appendChild(cancelButton);

        document.body.appendChild(selectorDiv);
    }

    const fetchLatestSixTactics = (tidValue, theType) => {
        console.log("Starting fetch for tid:", tidValue, "with type:", theType);

        fetch(
            "https://www.managerzone.com/ajax.php?p=matches&sub=list&sport=soccer",
            {
                headers: {
                    accept: "application/json, text/javascript, */*; q=0.01",
                    "content-type": "application/x-www-form-urlencoded; charset=UTF-8",
                    "x-requested-with": "XMLHttpRequest",
                },
                referrer:
                    "https://www.managerzone.com/?p=match&sub=played&tid=" + tidValue,
                referrerPolicy: "strict-origin-when-cross-origin",
                body:
                    "type=played&hidescore=false&tid1=" +
                    tidValue +
                    "&offset=&selectType=" +
                    theType +
                    "&limit=default",
                method: "POST",
                mode: "cors",
                credentials: "include",
            }
        )
            .then((response) => {
                if (!response.ok) {
                    throw new Error("Network response was not ok");
                }
                console.log("Response received successfully");
                return response.json();
            })
            .then((data) => {
                console.log("Data received:", data);
                const listHTML = data.list;
                const parser = new DOMParser();
                const htmlDocument = parser.parseFromString(listHTML, "text/html");

                const scoreShownLinks = htmlDocument.querySelectorAll("a.score-shown");
                console.log("Found score-shown links:", scoreShownLinks.length);

                const existingContainer = document.getElementById("oppLast");
                if (existingContainer) {
                    existingContainer.remove();
                }

                const container = document.createElement("div");
                container.id = "oppLast";
                container.style.position = "fixed";
                container.style.top = "150px";
                container.style.right = "5px";
                container.style.display = "grid";
                container.style.gridTemplateColumns = "repeat(2, 150px)";
                container.style.gridTemplateRows = "repeat(3, 200px)";
                container.style.gap = "5px";
                container.style.backgroundColor = "rgba(255, 255, 255, 0.9)";
                container.style.padding = "10px";
                container.style.border = "1px solid #ccc";
                container.style.zIndex = "10";
                container.style.maxHeight = "80%";
                container.style.overflowY = "auto";
                container.style.boxSizing = "border-box";
                container.style.width = "320px";
                container.style.boxShadow = "0 0 10px rgba(0,0,0,0.5)";
                container.style.borderRadius = "5px";
                container.style.pointerEvents = 'none';

                const closeButton = document.createElement("button");
                closeButton.textContent = "Close";
                closeButton.style.position = "absolute";
                closeButton.style.top = "5px";
                closeButton.style.right = "5px";
                closeButton.style.pointerEvents = 'auto';
                closeButton.addEventListener("click", () => {
                    container.remove();
                });
                container.appendChild(closeButton);

                document.body.appendChild(container);

                const maxMatches = 6;
                for (let i = 0; i < Math.min(maxMatches, scoreShownLinks.length); i++) {
                    const isHome = checkNextDdForStrong(scoreShownLinks[i]);
                    console.log("Is home game?", isHome);

                    let canvas;
                    if (!isHome) {
                        canvas = createCanvasWithModifiedColorsAndRotation(
                            "https://www.managerzone.com/dynimg/pitch.php?match_id=" +
                                extractMidFromUrl(scoreShownLinks[i].href)
                        );
                    } else {
                        canvas = createCanvasWithReplacedColors(
                            "https://www.managerzone.com/dynimg/pitch.php?match_id=" +
                                extractMidFromUrl(scoreShownLinks[i].href)
                        );
                    }
                    canvas.style.cursor = "pointer";
                    canvas.style.pointerEvents = 'auto';
                    container.appendChild(canvas);
                }
            })
            .catch((error) => {
                console.error("There was a problem with the fetch operation:", error);
            });
    };

    setTimeout(() => {
        if (document.getElementById("legendDiv")) {
            if (document.getElementById("eloScheduledSelect").checked) {
                waitToStatsXenteELOValues(1500);
            } else {
                insertIconsAndListeners();
            }
        } else {
            insertIconsAndListeners();
        }
    }, 500);

    function waitToStatsXenteELOValues(miliseconds) {
        let interval = setInterval(function () {
            let elements = document.querySelectorAll(".home-team-column.flex-grow-1");
            if (elements.length > 0 && elements[elements.length - 1]) {
                if (elements[elements.length - 1].innerHTML.includes("br")) {
                    clearInterval(interval);
                    clearTimeout(timeout);
                    insertIconsAndListeners();
                }
            }
        }, 100);

        let timeout = setTimeout(function () {
            clearInterval(interval);
            insertIconsAndListeners();
        }, miliseconds);
    }

    function extractMidFromUrl(url) {
        const urlSearchParams = new URLSearchParams(new URL(url, window.location.origin).search);
        return urlSearchParams.get("mid");
    }

    function checkNextDdForStrong(ele) {
        const closestDd = ele.closest("dd");
        if (closestDd) {
            const nextDd = closestDd.nextElementSibling;
            if (nextDd && nextDd.querySelector("strong")) return true;
        }
        return false;
    }

    function createCanvasWithReplacedColors(imageUrl) {
        const canvas = document.createElement("canvas");
        canvas.width = 150;
        canvas.height = 200;

        const context = canvas.getContext("2d");

        const image = new Image();
        image.crossOrigin = "Anonymous";
        image.onload = function () {
            context.drawImage(image, 0, 0, canvas.width, canvas.height);

            const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
            const data = imageData.data;

            for (let i = 0; i < data.length; i += 4) {
                if (data[i] > 200 && data[i + 1] > 200 && data[i + 2] < 100) {
                    data[i] = 64;
                    data[i + 1] = 154;
                    data[i + 2] = 64;
                }
            }

            context.putImageData(imageData, 0, 0);
        };

        image.src = imageUrl;

        canvas.style.pointerEvents = 'auto';
        return canvas;
    }

    function createCanvasWithModifiedColorsAndRotation(imageUrl) {
        const canvas = document.createElement("canvas");
        canvas.width = 150;
        canvas.height = 200;

        const context = canvas.getContext("2d");

        const image = new Image();
        image.crossOrigin = "Anonymous";
        image.onload = function () {
            context.translate(canvas.width / 2, canvas.height / 2);
            context.rotate(Math.PI);
            context.translate(-canvas.width / 2, -canvas.height / 2);
            context.drawImage(image, 0, 0, canvas.width, canvas.height);

            const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
            const data = imageData.data;

            for (let i = 0; i < data.length; i += 4) {
                if (data[i] === 0 && data[i + 1] === 0 && data[i + 2] === 0) {
                    data[i] = 64;
                    data[i + 1] = 154;
                    data[i + 2] = 64;
                } else if (data[i] > 200 && data[i + 1] > 200 && data[i + 2] < 100) {
                    data[i] = 0;
                    data[i + 1] = 0;
                    data[i + 2] = 0;
                }
            }

            context.putImageData(imageData, 0, 0);
        };

        image.src = imageUrl;

        canvas.style.pointerEvents = 'auto';
        return canvas;
    }
})();