AtCoderColouringDifference

Color difference values of AtCoder's gradebook

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey, Greasemonkey или Violentmonkey.

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey или Violentmonkey.

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey или Violentmonkey.

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey или Userscripts.

За да инсталирате скрипта, трябва да инсталирате разширение като Tampermonkey.

За да инсталирате този скрипт, трябва да имате инсталиран скриптов мениджър.

(Вече имам скриптов мениджър, искам да го инсталирам!)

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

(Вече имам инсталиран мениджър на стиловете, искам да го инсталирам!)

// ==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();
  });
});