MediaWiki:CustomItemTracker.js

mw.hook('wikipage.content').add(function () {

    const container = document.getElementById("customItemTracker");

    if (!container) return;

    const allowedUsers = [
        "Hefner"
    ];

    const currentUser = mw.config.get("wgUserName");

    let trackerData = {
        tiers: [],
        completed: {}
    };

    function loadData() {

        $.getJSON(
            mw.util.wikiScript("api"),
            {
                action: "query",
                titles: "Module:CustomItemTracker/data.json",
                prop: "revisions",
                rvprop: "content",
                format: "json",
                formatversion: 2
            }

        ).done(function (data) {

            const page = data.query.pages[0];

            if (!page.revisions)
                return;

            try {

                trackerData =
                    JSON.parse(
                        page.revisions[0].content
                    );

                render();

            } catch (e) {

                console.error(e);

            }

        });

    }

    function render() {

        container.innerHTML = "";

        let totalItems = 0;

        trackerData.tiers.forEach(function (tier) {
            totalItems += tier.items.length;
        });

        let completed = 0;

        Object.keys(trackerData.completed).forEach(function (key) {

            if (trackerData.completed[key])
                completed++;

        });

        const progress =
            document.createElement("div");

        progress.className = "trackerProgress";

        progress.innerHTML =
            `Completed: <strong>${completed}/${totalItems}</strong> (${Math.floor((completed / totalItems) * 100) || 0}%)`;

        container.appendChild(progress);

        let globalIndex = 0;

        trackerData.tiers.forEach(function (tier) {

            const heading =
                document.createElement("h2");

            heading.textContent = tier.name;

            heading.style.color = "#fff";
            heading.style.margin = "25px 0 10px 0";
            heading.style.borderBottom = "1px solid #596e96";
            heading.style.paddingBottom = "5px";

            container.appendChild(heading);

            const grid =
                document.createElement("div");

            grid.className = "trackerGrid";

            container.appendChild(grid);

            tier.items.forEach(function (item) {

                const currentIndex = globalIndex++;

                const tile =
                    document.createElement("div");

                tile.className = "trackerTile";

                if (trackerData.completed[currentIndex])
                    tile.classList.add("completed");

                const image =
                    document.createElement("div");

                image.className = "itemImage";

                tile.appendChild(image);

                const name =
                    document.createElement("div");

                name.className = "itemName";
                name.textContent = item.name;

                tile.appendChild(name);

                loadImage(item.name, image);

                tile.onclick = function () {

                    if (!allowedUsers.includes(currentUser))
                        return;

                    trackerData.completed[currentIndex] =
                        !trackerData.completed[currentIndex];

                    saveData();

                };

                grid.appendChild(tile);

            });

        });

    }
        function loadImage(itemName, target) {

        const template = "{{plinkp|" + itemName + "}}";

        $.getJSON("/api.php", {
            action: "parse",
            text: template,
            format: "json"
        }).done(function (data) {

            if (!data.parse)
                return;

            const wrapper =
                document.createElement("div");

            wrapper.innerHTML =
                data.parse.text["*"];

            const img =
                wrapper.querySelector("img");

            if (img) {

                img.style.maxWidth = "50px";
                img.style.maxHeight = "50px";
                img.style.width = "auto";
                img.style.height = "auto";
                img.style.objectFit = "contain";

                target.appendChild(img);

            }

        });

    }

    function saveData() {

        $.post(
            mw.util.wikiScript("api"),
            {

                action: "edit",

                title: "Module:CustomItemTracker/data.json",

                token: mw.user.tokens.get("csrfToken"),

                format: "json",

                text: JSON.stringify(
                    trackerData,
                    null,
                    4
                )

            }

        ).done(function () {

            render();

            console.log(
                "Tracker updated."
            );

        });

    }

    loadData();

});