Color difference values of AtCoder's gradebook
// ==UserScript==
// @name AtCoderColouringDifference
// @namespace https://chocobo777.github.io
// @version 1.0.0
// @description Color difference values of AtCoder's gradebook
// @author chocobo
// @include https://beta.atcoder.jp/users/*/history
// @grant none
// @require https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
// ==/UserScript==
$(function() {
'use strict';
/*
色づけモード
0: 色なし
1: 文字
2: 背景
*/
var colouringMode = 2;
// 読み込み元と整合性を取る
// https://wiki.greasespot.net/Third-Party_Libraries
this.$ = this.jQuery = jQuery.noConflict(true);
// 背景色
function convertvalueToColorCode(value){
if(value >= 100) return '#FFB2B2';
if(value >= 80) return '#FFD9B2';
if(value >= 60) return '#ECECB2';
if(value >= 40) return '#B2B2FF';
if(value >= 20) return '#B2ECEC';
if(value >= 10) return '#B2D9B2';
if(value >= 0) return '#D9C5B2';
return '#D9D9D9';
}
// 文字色
function convertvalueToColorClass(value){
if(value >= 100) return 'user-red';
if(value >= 80) return 'user-orange';
if(value >= 60) return 'user-yellow';
if(value >= 40) return 'user-blue';
if(value >= 20) return 'user-cyan';
if(value >= 10) return 'user-green';
if(value >= 0) return 'user-brown';
return 'user-gray';
}
// セルをmodeで色づけ
function colouringCell(cell, mode){
const value = cell.text();
// console.log(cell);
if(isNaN(value)) return;
if (mode == 0) { // 色づけしない
cell.text(value);
cell.attr('style', '');
}
else if (mode == 1) { // 文字を色づけ
cell.text('');
cell.append('<span class="' + convertvalueToColorClass(value) + '">' + value + '</span>');
}
else if (mode == 2) { // 背景を色づけ
cell.text(value);
cell.attr('style', 'background-color:' + convertvalueToColorCode(value));
}
}
// 色づけする
function colouring(){
$('#history').find('tbody').find('tr').each(function(i, contestInfo) {
const tds = $(contestInfo).find('td');
colouringCell($(tds[5]), colouringMode);
});
}
// ページを読み込んだ時に色づけする
colouring();
// ページの右上にボタンを設置
$('#history_wrapper').prepend('<button id="change-color-button" class="btn btn-primary pull-right", type="button">change color</button>');
// ボタンをクリックでmodeを変える
$('#change-color-button').on('click', function() {
colouringMode = (colouringMode + 1) % 3;
colouring();
});
});