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: {}
    };


    let images = [];



    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
                    );


            } catch(e) {

                console.error(
                    "Invalid tracker JSON",
                    e
                );

                return;

            }



            loadImages();


        });


    }





    function loadImages() {


        const allItems = [];


        trackerData.tiers.forEach(function(tier) {


            tier.items.forEach(function(item) {


                allItems.push(item);


            });


        });



        const templates =
            allItems
            .map(function(item) {

                return "{{plinkp|" +
                    item.name +
                    "}}";

            })
            .join("\n");



        $.getJSON(
            "/api.php",
            {
                action: "parse",
                text: templates,
                format: "json"
            }

        ).done(function(data) {



            if (!data.parse)
                return;



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



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



            images =
                Array.from(
                    wrapper.querySelectorAll("img")
                );



            render();


        });


    }





    function render() {


        container.innerHTML = "";



        let total = 0;


        trackerData.tiers.forEach(function(tier) {

            total += 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}/${total}</strong>
        (${total ? Math.floor((completed / total) * 100) : 0}%)
        `;


        container.appendChild(progress);



        let globalIndex = 0;
        
        trackerData.tiers.forEach(function(tier) {


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


            heading.className =
                "trackerTierHeading";


            heading.textContent =
                tier.name;


            container.appendChild(heading);



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


            grid.className =
                "trackerGrid";


            container.appendChild(grid);





            tier.items.forEach(function(item) {


                const index =
                    globalIndex++;



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


                tile.className =
                    "trackerTile";



                if (
                    trackerData.completed[index]
                ) {

                    tile.classList.add(
                        "completed"
                    );

                }





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


                imageBox.className =
                    "itemImage";



                if (
                    images[index]
                ) {

                    const img =
                        images[index]
                        .cloneNode(true);



                    img.style.maxWidth =
                        "50px";


                    img.style.maxHeight =
                        "50px";


                    img.style.width =
                        "auto";


                    img.style.height =
                        "auto";


                    img.style.objectFit =
                        "contain";



                    imageBox.appendChild(img);

                }



                tile.appendChild(imageBox);





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


                name.className =
                    "itemName";


                name.textContent =
                    item.name;



                tile.appendChild(name);





                tile.onclick = function() {



                    if (
                        !allowedUsers.includes(
                            currentUser
                        )
                    ) {

                        return;

                    }



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



                    saveData();


                };



                grid.appendChild(tile);


            });


        });


    }





    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(
                "Custom Item Tracker updated"
            );


        });


    }





    loadData();


});