☰

Reorder Certificates

Reorders certificates based on completion percentage and simplifies the interface

// ==UserScript==
// @name         Reorder Certificates
// @namespace    FarmRPGCertificates
// @version      1.1
// @description  Reorders certificates based on completion percentage and simplifies the interface
// @author       ClientCoin
// @match        http*://*farmrpg.com/index.php
// @match        http*://*farmrpg.com/
// @match        http*://*alpha.farmrpg.com/
// @match        http*://*alpha.farmrpg.com/index.php
// @icon         https://www.google.com/s2/favicons?sz=64&domain=farmrpg.com
// @grant        none
// ==/UserScript==



function reorderCertificates() {

    const locName = location.hash.slice(location.hash.search(/[^#!\/]/), location.hash.search(/.php/))
    if (locName != "temple") {
        return;
    }

    //console.log("%c[Script] Reordering certificates...", "color: cyan; font-weight: bold;");

    let allContentBlocks = document.querySelectorAll(".content-block");
    let certificatesContainer = null;

    allContentBlocks.forEach(block => {
        let titleElement = block.querySelector(".content-block-title");
        if (titleElement && titleElement.textContent.trim() === "Secret Chains") {
            certificatesContainer = block.querySelector(".list-block ul");
        }
    });

    if (!certificatesContainer) {
        console.warn("%c[Script] Certificates container not found. Exiting.", "color: red;");
        return;
    }

    let certificateElements = Array.from(certificatesContainer.querySelectorAll("li"));
    if (certificateElements.length === 0) {
        console.warn("%c[Script] No certificate elements found. Exiting.", "color: red;");
        return;
    }

    //console.log("%c[Script] Found certificate elements:", "color: cyan;", certificateElements);

    let certificateBlocks = certificateElements.map(certificate => {
        let progress = extractProgress(certificate);
        //console.log(`%c[Script] Extracted progress: ${progress}%`, "color: lightgreen;");
        return { element: certificate, progress };
    });

    let completedCount = certificateBlocks.filter(c => c.progress === 100).length;
    let maxCount = certificateBlocks.length;

    // Sorting: Completed (100%) certificates at the bottom
    certificateBlocks.sort((a, b) => {
        // Move 100% completed items to the bottom
        if (a.progress === 100 && b.progress !== 100) return 1;
        if (b.progress === 100 && a.progress !== 100) return -1;

        // Sort by highest progress first
        let progressSort = b.progress - a.progress;
        if (progressSort !== 0) return progressSort;

        // If progress is the same, sort by itemsToGo (ascending)
        return a.itemsToGo - b.itemsToGo;
    });



    //console.log("%c[Script] Certificates sorted by progress.", "color: cyan;");

    certificatesContainer.innerHTML = ""; // Clear the list

    // Insert summary at the top
    let summaryElement = document.createElement("li");
    const certificateImages = [
        '7896-yellow.png', '7896-yellow.png', '7896-yellow.png',
        '7896-yellow.png', '7896-yellow.png', '7896-yellow.png',
        '7896-green.png', '7896-green.png', '7896-green.png',
        '7896-green.png', '7896-green.png', '7896-green.png',
        '7896.png', '7896.png', '7896.png', '7896.png',
        '7896-orange.png', '7896-orange.png',
        '7896-purple.png', '7896-purple.png',
        '7896-gray.png',
        '7896-blue.png'
    ];

    // Shuffle function
    function shuffleArray(arr) {
        return arr.map(value => ({ value, sort: Math.random() }))
            .sort((a, b) => a.sort - b.sort)
            .map(({ value }) => value);
    }

    const shuffledCertificates = shuffleArray(certificateImages);
    const beforeImages = shuffledCertificates.slice(0, 11);
    const afterImages = shuffledCertificates.slice(11);

    // Create HTML blocks
    const makeImageBlock = (images) =>
    images.map(src => `<img src="/img/items/${src}" style="height:1rem;width:1rem;margin:0 1px;">`).join('');

    summaryElement.innerHTML = `
    <div style="display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; overflow: hidden;">
        <div style="display: flex; gap: 2px; flex-shrink: 1; overflow: hidden;">
            ${makeImageBlock(beforeImages)}
        </div>
        <div style="font-weight: bold; color: gold; text-align: center; padding: 5px; flex-shrink: 0; min-width: 180px;">
            ${completedCount}/${maxCount} Certificates COMPLETE
        </div>
        <div style="display: flex; gap: 2px; flex-shrink: 1; overflow: hidden;">
            ${makeImageBlock(afterImages)}
        </div>
    </div>
`;

    certificatesContainer.appendChild(summaryElement);

// === Progress Summary (Total Crops Remaining) ===
// === Progress Summary (Total Crops Remaining) ===
let totalToGo = 0;
let cropCount = 0;

certificateBlocks.forEach(({ element }) => {
    const span = element.querySelector(".item-inner span");
    if (!span) return;

    const rawText = span.textContent.trim();
    console.log("[DEBUG] Raw span content:", rawText);

    const match = rawText.match(/([\d,]+)\s*\/\s*([\d,]+)\s*Items Sacrificed/i);
    if (match) {
        const sacrificed = parseInt(match[1].replace(/,/g, ''));
        const required = parseInt(match[2].replace(/,/g, ''));
        const toGo = required - sacrificed;
        totalToGo += toGo;
        cropCount++;
        console.log(`[DEBUG] Sacrificed=${sacrificed}, Required=${required}, To Go=${toGo}`);
    } else if (/COMPLETE/i.test(rawText)) {
        cropCount++;
        console.log("[DEBUG] COMPLETE certificate detected");
    } else {
        console.warn("[DEBUG] No match for sacrificed/required in:", rawText);
    }
});

const totalRequired = cropCount * 100000;
const percentComplete = ((totalRequired - totalToGo) / totalRequired * 100).toFixed(2);

const cropSummary = document.createElement("li");
cropSummary.innerHTML = `
    <div style="font-weight: bold; color: lightgreen; text-align: center; padding: 5px;">
        ${totalToGo.toLocaleString()} to go out of ${totalRequired.toLocaleString()} crops (${percentComplete}%)
    </div>
`;
certificatesContainer.appendChild(cropSummary);





    // Append reordered certificates
    certificateBlocks.forEach(({ element }) => {
        simplifyText(element);
        certificatesContainer.appendChild(element);
    });
    console.log("Certificates reordered and updated.");
}

function extractProgress(element) {
    let titleElement = element.querySelector(".item-title");
    if (!titleElement) {
        console.warn("%c[Script] Title element not found in certificate block.", "color: orange;");
        return 0;
    }

    // Extract sacrificed and required item counts
    let progressMatch = titleElement.innerText.match(/(\d{1,3}(?:,\d{3})*) \/ (\d{1,3}(?:,\d{3})*) Items Sacrificed/);

    if (!progressMatch) {
        console.warn("%c[Script] No progress values found in:", "color: orange;", titleElement.innerText);
        return 0;
    }

    let sacrificed = parseInt(progressMatch[1].replace(/,/g, '')); // Remove commas
    let required = parseInt(progressMatch[2].replace(/,/g, ''));

    // Calculate precise percentage
    let progress = (sacrificed / required) * 100;

    //console.log(`%c[Script] Corrected progress: ${progress.toFixed(2)}% (${sacrificed}/${required})`, "color: lightgreen;");

    return progress;
}


function simplifyText(element) {
    let titleElement = element.querySelector(".item-title");
    let imgElement = element.querySelector(".item-media img");

    if (!titleElement) {
        console.warn("%c[Script] Title element not found in certificate block.", "color: orange;");
        return;
    }

    if (element.classList.contains("row")) {
        element.style.marginBottom = "0px";
    }

    let nameMatch = titleElement.innerText.match(/Certificate of (.+?) Giving/);
    let progressMatch = titleElement.innerText.match(/(\d+(?:,\d+)?) \/ (\d+(?:,\d+)?) Items Sacrificed/);
    let onHandMatch = titleElement.innerText.match(/Sacrifice: (.+?) \(You have (\d+(?:,\d+)?)\)/);

    if (nameMatch && progressMatch && onHandMatch) {
        let itemName = nameMatch[1];
        let totalRequired = parseInt(progressMatch[2].replace(/,/g, ''));
        let sacrificed = parseInt(progressMatch[1].replace(/,/g, ''));
        let onHand = parseInt(onHandMatch[2].replace(/,/g, ''));
        let itemsToGo = totalRequired - sacrificed;
        let progressPercent = (sacrificed / totalRequired) * 100;

        let color = "white";
        if (itemsToGo === 0) color = "gold";
        else if (progressPercent >= 75) color = "lightgreen";
        else if (sacrificed < 10000) color = "grey";

        let lower10kThreshold = Math.floor(itemsToGo / 10000) * 10000;
        let remainingToLower10k = itemsToGo - lower10kThreshold;
        if (remainingToLower10k === 0) remainingToLower10k = 10000;

        let nn = "COMPLETE".padStart(15, '\u00A0');
        let outputPad = itemsToGo === 0
        ? `${nn} [${onHand.toLocaleString().padStart(7, '\u00A0')} on hand]`
    : `${itemsToGo.toLocaleString().padStart(9, '\u00A0')} to go [${onHand.toLocaleString().padStart(7, '\u00A0')} on hand]`;


        // Build the left block (60%) — content inside <a>
        let container = document.createElement("div");
        container.style.display = "flex";
        container.style.flexFlow = "row nowrap";
        container.style.alignItems = "center";
        container.style.verticalAlign = "middle";
        container.style.marginTop = "auto";
        container.style.marginBottom = "auto";

        let left = document.createElement("div");
        left.style.width = "20%";
        left.style.textAlign = "left";
        left.textContent = `${itemName}: `;

        let right = document.createElement("div");
        right.style.width = "80%";
        right.style.textAlign = "left";
        right.style.whiteSpace = "nowrap";
        right.style.overflow = "hidden";
        right.style.textOverflow = "ellipsis"; // optional, if you want to clip long lines with …
        right.innerHTML = `${outputPad}`;


        container.appendChild(left);
        container.appendChild(right);

        let span = document.createElement("span");
        span.style.color = color;
        span.appendChild(container);

        let outer = document.createElement("span");
        outer.style.fontFamily = "monospace";
        outer.style.width = "100%";
        outer.style.fontSize = "0.833rem";
        outer.appendChild(span);

        titleElement.outerHTML = outer.outerHTML;

        if (imgElement) {
            imgElement.style.width = "1rem";
            imgElement.style.height = "1rem";
        }

        let smallImgElement = element.querySelector(".item-after img");
        if (smallImgElement) {
            smallImgElement.style.width = "1rem";
            smallImgElement.style.height = "1rem";
        }

        // === Restructure LI ===
        let liElement = element.closest("li");
        let aTag = liElement.querySelector("a");
        if (!liElement || !aTag) return;

        // Create flex container
        let wrapper = document.createElement("div");
        wrapper.style.display = "flex";
        wrapper.style.width = "100%";

        // Left side: wrap <a> in div
        let leftDiv = document.createElement("div");
        leftDiv.style.width = "60%";
        leftDiv.appendChild(aTag); // Moves <a> inside left div

        // Right side: build button panel
        let rightDiv = document.createElement("div");
        rightDiv.style.width = "40%";
        rightDiv.style.display = "flex";
        rightDiv.style.flexDirection = "row";
        rightDiv.style.alignItems = "center";
        rightDiv.style.justifyContent = "space-between";

        const wrap = (link) => {
            const wrapper = document.createElement("div");
            wrapper.style.width = "33.33%";
            wrapper.style.display = "flex";
            wrapper.style.justifyContent = "center";
            wrapper.appendChild(link);
            return wrapper;
        };

        const isComplete = itemsToGo === 0;
        const notEnoughForNext10k = onHand < remainingToLower10k;

        const link1 = createLink(`Give ${onHand}`, onHand, itemName, 'all', itemsToGo, remainingToLower10k, isComplete);
        const give1kDisabled = isComplete || onHand < 1000;
        const link2 = createLink(`Give 1k`, onHand, itemName, '1k', itemsToGo, remainingToLower10k, give1kDisabled);
        const link3 = createLink(`Give ${remainingToLower10k}`, onHand, itemName, 'tothenext10k', itemsToGo, remainingToLower10k, isComplete || notEnoughForNext10k);


        rightDiv.appendChild(wrap(link1));
        rightDiv.appendChild(wrap(link2));
        rightDiv.appendChild(wrap(link3));


        // Clear the original LI content and re-append
        liElement.innerHTML = "";
        wrapper.appendChild(leftDiv);
        wrapper.appendChild(rightDiv);
        liElement.appendChild(wrapper);
    } else {
        console.warn("%c[Script] Failed to extract data for certificate text update.", "color: orange;");
    }
}

function createLink(linkText, onHand, itemName, type, itemsToGo, remainingToLower10k, disabled = false) {
    let link = document.createElement("a");
    link.innerText = linkText;
    link.href = "#";

    link.style.textDecoration = "none";
    link.style.background = "transparent";
    link.style.border = "1px solid";
    link.style.borderRadius = "6px";
    link.style.fontSize = "0.7rem";
    link.style.cursor = disabled ? "not-allowed" : "pointer";
    link.style.padding = "0.1rem 0.6rem";
    link.style.margin = "0";
    link.style.display = "inline-block";
    link.style.width = "90px";               // fixed width
    link.style.textAlign = "center";
    link.style.zIndex = 2;
    link.style.whiteSpace = "nowrap";

    if (disabled) {
        link.style.color = "gray";
        link.style.borderColor = "gray";
        link.onclick = function (e) {
            e.preventDefault();
        };
    } else {
        link.style.color = "gold";
        link.style.borderColor = "gold";

        link.onclick = function (e) {
            e.preventDefault();
            const params = new URLSearchParams();
            params.append("go", "sacrificeitem");
            params.append("item", itemName);
            params.append("amt", getAmount(type, onHand, itemsToGo, remainingToLower10k));
            params.append("special", "1");

            const url = `worker.php?${params.toString()}`;
            fetch(url, { method: "GET" })
                .then((response) => response.text())
                .then((data) => {
                if (data === "success") {
                    window.location.reload();
                } else {
                    console.warn("%c[Error] Something went wrong: ", "color: red;", data);
                }
            })
                .catch((error) => {
                console.error("%c[Error] AJAX request failed: ", "color: red;", error);
            });
        };
    }

    return link;
}


function getAmount(type, onHand, itemsToGo, remainingToLower10k) {
    switch (type) {
        case "all":
            return onHand;
        case "1k":
            return 1000;
        case "tothenext10k":
            return remainingToLower10k;
        default:
            return 0;
    }
}








function init() {
    //console.log("%c[Script] Initializing...", "color: green;");
    reorderCertificates();
    injectCSS();
}

window.addEventListener("load", init); // Ensures the script runs only once


function injectCSS() {
    const style = document.createElement('style');
    style.innerHTML = `
.list-block .item-content {
    min-height: 0 !important;
}

.list-block .item-inner {
    min-height: 0 !important;
}



    `;
    document.head.appendChild(style);
}

$(document).ready( () => {
    const target = document.querySelector("#fireworks")
    const observer = new MutationObserver( mutation => {if (mutation[0]?.attributeName == "data-page") reorderCertificates()} )


    const config = {
        attributes: true,
        childlist: true,
        subtree: true
    }


    observer.observe(target, config);

    const observera = new MutationObserver(() => {
        reorderCertificates();
    });

})