[GC] Visualizer for Shop Ban

Displays your current shop ban status in visual format directly on the page.
Wrap lines
// ==UserScript==
// @name        [GC] Visualizer for Shop Ban
// @namespace   https://gf.qytechs.cn/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);
        }
    }`);
}
欢迎访问Greasy Fork镜像
