Brawlify - Active Member

Monitor club member progress

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey, Greasemonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Userscripts.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een gebruikersscriptbeheerder nodig.

(Ik heb al een user script manager, laat me het downloaden!)

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

(Ik heb al een beheerder - laat me doorgaan met de installatie!)

// ==UserScript==
// @name         Brawlify - Active Member
// @namespace    http://tampermonkey.net/
// @version      2
// @description  Monitor club member progress
// @author       Esor
// @require      https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
// @include      /https?:\/\/(www.)?brawlify.com\/stats\/.+
// @icon         https://www.google.com/s2/favicons?sz=64&domain=brawlify.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    var css = '';
    window.progressrange = ['recent', 'today', 'week', 'season'];
    window.progressindex = 3;

    css += '.sticky-top { position: relative !important; } ';                                          // remove sticky navbar
    css += '@media (min-width: 1200px) { .container#activemember { max-width: 1300px !important; } }'; // extra width foe Active Member

    $('.container-fluid.content-container').css({'max-width' : '1270px'}); // extra width for parent container to allow Active Member have wider max-width
    $('.text-white.shadow-normal.mb-0:contains("Data Visualization")').hide();
    addCSS(css);
    getProgress();

    $(document).ready(async function() {
        if ($('[id^="push"]').length) {
            $('html, body').scrollTop($('[id^="push"]').offset().top); // for batttle stats
        }

        setInterval(function(){
            if ($('#activemember').is(':visible')) return;
            if (activeMemberList.length != 30)     return;
            card();
            $('html, body').scrollTop($('#activemember').offset().top); // for club stats
        }, 500)

    });

    function addCSS(css) {
        $('<style type="text/css"></style>').html(css).appendTo('head');
    }

    async function getProgress () {
        window.activeMemberList = [];
        await asyncForEach(memberList, async (tag) => {
            fetch(`https://brawlify.com/stats/profile/${tag.slice(1)}`)
                .then(response => response.text())
                .then(data =>  saveMember(data))
                .catch(error => console.error("Error fetching page:", error));
        });
    }

    function saveMember(data) {
        // Create a temporary jQuery object to hold the HTML
        let doc = $(data);

        // Find the #mainNumbers element and log its text
        let progress = doc.find('#mainNumbers').text().trim();
        let name     = doc.find('.profile-top h1').text();
        let tag      = doc.find('.profile-top p').contents().eq(0).text().slice(1);
        let trophy   = doc.find('th:contains("Trophies"):first').next().text().replace(',', '');

        let zprogress = doc.find('#mainNumbers').clone();
        let zrecent   = doc.find('#mainRecent').addClass('progress-range').clone();
        let ztoday    = doc.find('#mainDaily').addClass('progress-range').clone();
        let zweek     = doc.find('#mainWeekly').addClass('progress-range').clone();
        let zseason   = doc.find('#mainSeason').addClass('progress-range').clone();

        // Save member data
        activeMemberList.push({ tag, name, trophy, ...split(progress), zprogress, zrecent, ztoday, zweek, zseason });
        activeMemberList = activeMemberList.sort((a,b) => b.xseason - a.xseason);

        // Output the text
        // console.log(tag, name, progress);
    }

    function split(data) {
        // Initialize the object outside the loop
        let splited = {};

        // Split the input data into lines and process each line
        data.split('\n').forEach((line) => {
            let match = line.trim().match(/^([+-]?[\d,]+)\s(.*)$/); // match value and label
            if (match) {
                let [, value, label] = match;

                // Assign the value based on the label
                if (label === 'recently')    splited.xrecent = value.replace('+', '').replace(',', '');
                if (label === 'today')       splited.xtoday  = value.replace('+', '').replace(',', '');
                if (label === 'this week')   splited.xweek   = value.replace('+', '').replace(',', '');
                if (label === 'this season') splited.xseason = value.replace('+', '').replace(',', '');
            }
        });

        return splited;
    }

    window.card = function() {
        var elem   = $('#members').clone();
        var toggle = $('#graphGroupingBtn').clone();

        toggle.attr('id', 'activememberBtn');
        toggle.attr('onclick', 'switchProgress()');
        toggle.text('SEASON');

        elem.attr('id', 'activemember');
        elem.find('.text-white.shadow-normal.mb-1').text('Active Members');
        elem.find('.alert.alert-info.mb-1').contents().wrapAll('<div class="new-wrapper"></div>');
        elem.find('.alert.alert-info.mb-1').addClass('d-flex justify-content-between align-items-center');
        elem.find('.new-wrapper').after(toggle);
        elem.find('.row:first').children().each(function() {
            var tag    = $(this).attr('id');
            var member = activeMemberList.find(item => item.tag == tag);

            $(this).find('.text-dark.h6.small').remove();
            $(this).find('.text-dark.border-info').remove();
            $(this).find('.text-white.mr-1').remove();
            $(this).find('.h5.mt-1').parent().css({
                'white-space': 'nowrap',
                'overflow': 'hidden',
                'text-overflow': 'ellipsis',
                'margin-right' : '5px',
            });
            $(this).find('.grayer-border:last').find('h4, .container').remove();
            $(this).find('.grayer-border:last').find('.stats-top').empty().append(member.zprogress);
            $(this).find('.grayer-border:last').find('tr:contains("Position"), tr:contains("Role")').remove();
            $(this).find('.text-orange.ml-0').after(member.zseason).remove();
            $(this).removeClass('col-lg-6');
            $(this).addClass('col-lg-3');
            $(this).data('recent', member.xrecent);
            $(this).data('today',  member.xtoday);
            $(this).data('week',   member.xweek);
            $(this).data('season', member.xseason);
        });

        var sorted = elem.find('.row:first').children().sort((a, b) => {
            return parseInt($(b).data("season")) - parseInt($(a).data("season"));
        });
        elem.find('.row:first').append(sorted);
        elem.insertBefore('#members');
    }

    window.switchProgress = function () {
        progressindex = (progressindex + 1) % 4; // Increment the index and cycle back to 0 after reaching the end

        var range = progressrange[progressindex];
        $('#activememberBtn').text(range.toUpperCase()); // Set the button text

        // Change Member Progress
        $('#activemember').find('.row:first').children().each(function() {
            var tag    = $(this).attr('id');
            var member = activeMemberList.find(item => item.tag == tag);

            $(this).find('.progress-range').after(member[`z${range}`])
            $(this).find('.progress-range:first').remove();
        });

        // Resort Member Card
        var sorted = $('#activemember').find('.row:first').children().sort((a, b) => {
            return parseInt($(b).data(range)) - parseInt($(a).data(range));
        });
        $('#activemember').find('.row:first').append(sorted);
    }

})();