[GC] Visualizer for Shop Ban

Displays your current shop ban status in visual format directly on the page.

このスクリプトの質問や評価の投稿はこちら通報はこちらへお寄せください。
// ==UserScript==
// @name        [GC] Visualizer for Shop Ban
// @namespace   https://greasyfork.org/en/users/1225524-kaitlin
// @match       https://www.grundos.cafe/viewshop/*
// @grant       GM.addStyle
// @license     MIT
// @version     1.0
// @author      Cupkait
// @icon        https://i.imgur.com/4Hm2e6z.png
// @description Displays your current shop ban status in visual format directly on the page.
//  Next up: Settings! Probably always on, always off, alert only (and set what % you want it to appear at).
// ==/UserScript==


var shopBan = $('.big-image').attr('title').match(/\d+/g); // Grab current ban amount from image title.
var barColor = getBarColor(shopBan); // Determine color of bar based on how close you are to a ban.
setprogressGradient(barColor);

$('#greeting').remove();
$('.nomargin').eq(0).remove();
$('.nomargin').eq(0).append(`<div class="range" style="--p:${shopBan}"></div>`);
$('#page_footer').remove();

function getBarColor(shopBan) {
	// This range of colors is kinda ugly in the middle right now
	// but I'll worry about that later.
var colors = ['#70fa77', '#7ff166', '#8ce855', '#97df45', '#a0d535', '#a9cc26', '#b0c215', '#b7b800', '#bdae00', '#c2a400', '#c69a00', '#c98f00', '#cc8400', '#ce7a01', '#cf6f0e', '#cf6318', '#ce5820', '#cd4c27', '#ca402d', '#c73333'];
    var colorIndex = Math.floor(shopBan / 5);
    return colors[colorIndex];
}


// CSS required for the bar to appear correctly.
async function setprogressGradient(barColor) {
    GM.addStyle(`.range {
        position: relative;
        background-color: #33333338;
        width: 100%;
        height: 15px;
        margin-top: 5px;
        transform: skew(30deg);
        font-family: 'Courier', monospace;
    }

    .range:before {
        --width: calc(var(--p) * 1%);
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        background-color: ${barColor};
        z-index: 0;
animation: load 2.5s forwards linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%);    }

    .range:after {
        counter-reset: progress var(--p);
        content: counter(progress) '% to shop ban';
        color: #000;
        position: absolute;
        right: 5%;
        top: 50%;
        transform: translateY(-50%) skewX(-30deg);
        z-index: 1;
    }
h1.greeting {
	font-family:heffaklump;
	font-size:22px;
	font-weight:normal;
}
    @keyframes load {
        to {
            width: var(--width);
        }
    }`);
}