DMOJ Userscript for displaying user ranks

script.js

// User Script for displaying Ranks

'use strict';

const MAP_ULEVEL = {
    'user': '[',
    'setter': '[S/',
    'admin': '[A/'
};

const MAP_RATING = {
    'rate-none': 'Unrated',
    'rate-newbie': 'Newbie',
    'rate-amateur': 'Amateur',
    'rate-expert': 'Expert',
    'rate-candidate-master': 'Candidate Master',
    'rate-master': 'Master',
    'rate-grandmaster': 'Grandmaster',
    'rate-target': '<span style="color:black;">L</span>egendary Grandmaster'
};

const MAP_RATING_COMPRESS = {
    'rate-candidate-master': 'CM',
    'rate-grandmaster': 'GM',
    'rate-target': '<span style="color:black;">L</span>GM'
};

const SELF_HANDLE = 'Plasmatic';
const USER_TAG_CLASSES = '.user, .setter, .admin';
const USER_TAG_CLASSES_A = '.user a, .setter a, .admin a';
const SELF_BOXES = '#user-' + SELF_HANDLE;
const TEXT_TAGS = 'p, a, span, td, div';

// Rank String Functions

function getLevelStr(classes){
    return MAP_ULEVEL[classes[2]];
}

function getRankStr(classes){
    if(MAP_RATING_COMPRESS[classes[1]]){
        return MAP_RATING_COMPRESS[classes[1]];
    }
    return MAP_RATING[classes[1]];
}

function getRankStrUC(classes){
    return MAP_RATING[classes[1]];
}

function getFullRankStr(classes){ // Gets prefix
    return getLevelStr(classes) + getRankStr(classes) + '] ';
}

function getFullRankStrUC(classes){
    return getLevelStr(classes) + getRankStrUC(classes) + '] ';
}

// Rainbow Math Functions

const ANGLE_MAX = 360;
const VALUE_MAX = 235;

function rotateClr(angle) {
    var red = amountNoOffset(angle + 120);
    var green = amountNoOffset(angle);
    var blue = amountNoOffset(angle + 240);

    return '#' + byteToHex(red) + byteToHex(green) + byteToHex(blue);
}

function amountNoOffset(angle, maxangle, maxvalue) {
    angle %= ANGLE_MAX;
    if (angle > 0 && angle <= 60) {
        return Math.trunc(VALUE_MAX * (angle / 60));
    } 
    else if (angle > 60 && angle <= 180) {
        return VALUE_MAX;
    }   
    else if (angle > 180 && angle <= 240) {
        return Math.trunc(VALUE_MAX * (1 - ((angle - 180) / 60)));
    } 
    else {
        return 0;
    }
}

const SIZE = 16;
const SHIFT = 4;
const DIGITS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];

function byteToHex(byte) {
    return DIGITS[(byte >> SHIFT) % SIZE] + DIGITS[byte % SIZE];
}

// Jquery

$(function() {
    // Thank Thank Stackoverflow
    
    $.fn.classes = function (callback) {
        var classes = [];
        $.each(this, function (i, v) {
            var splitClassName = v.className.split(/\s+/);
            for (var j = 0; j < splitClassName.length; j++) {
                var className = splitClassName[j];
                if (-1 === classes.indexOf(className)) {
                    classes.push(className);
                }
            }
        });
        if ('function' === typeof callback) {
            for (var i in classes) {
                callback(classes[i]);
            }
        }
        return classes;
    };
    
    // Stuff
    
    var $selfTexts = $(USER_TAG_CLASSES_A).filter(function(){
        console.log($(this).html());
        return $(this).html() == SELF_HANDLE;
    });
    var $selfBoxes = $(SELF_BOXES);
    
    $selfTexts.css('color', 'red'); // Reset Color
    $('.rate-target').css('color', 'black'); //LGM Color
    
    $(USER_TAG_CLASSES).each(function(){
        var $ele = $(this), $child = $ele.children('a');
        var classes = $ele.classes();
        
        if(classes[1] == 'rate-target'){
            var og = $child.html();
            $child.html('<span style="color:black;">' + og[0] + '</span>' + og.substr(1, og.length));
        }
        
        var uncompress = getFullRankStrUC(classes) + $child.html();
        var compress = getFullRankStr(classes) + $child.html();
        
        if(MAP_RATING_COMPRESS[classes[1]]){
            $child.hover(function(){
                $(this).html(uncompress);
            }, function(){
                $(this).html(compress);
            })
        }
        
        $child.html(compress); // Applies prefix
    });
    
    const MAX_COLOUR = 360;
    var currColour = MAX_COLOUR;
    setInterval(function(){
        currColour = (currColour + 1) % MAX_COLOUR;
        
        $selfTexts.css('color', rotateClr(currColour));
        $selfBoxes.find(TEXT_TAGS).css('color', rotateClr(currColour));
    }, 10);
});

The Source of the Algorithm I used for the Rainbow Math function is here

k

even more rainbow now yay

Why no u use css transition property instead of hue changing alg? Its shorter and has native support

Seems like an interesting idea. I might consider switching to it at some point.

Also note:

Changes on 18/12/2018:

Since DMOJ underwent a major rating change that caused significant inflation of rating for many users, some of them have now hit 3000 rating. With that said, here is the change:

Made the target rank look a lot cooler (like LGM on codeforces)