☰

AtCoderPerformanceColorizer

Colorize performance values in AtCoder's gradebook.

  1. // ==UserScript==
  2. // @name         AtCoderPerformanceColorizer
  3. // @namespace    https://satanic0258.github.io/
  4. // @version      1.0.4
  5. // @description  Colorize performance values in AtCoder's gradebook.
  6. // @author       satanic0258
  7. // @include      https://atcoder.jp/users/*/history*
  8. // @grant        none
  9. // @require      https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
  10. // @copyright    2021, satanic0258 (https://satanic0258.github.io/)
  11. // @license      MIT License; https://opensource.org/licenses/MIT
  12. // ==/UserScript==
  13.  
  14. /*jshint esversion: 6 */
  15.  
  16. $(function() {
  17.     'use strict';
  18.  
  19.     // -------------->8---------------------------->8--------------
  20.  
  21.     // 色づけモードには以下の数値を指定します
  22.     // -        0 : なし
  23.     // -        1 : 文字を色づけ
  24.     // -        2 : 背景を色づけ
  25.     // - それ以外 : デフォルト設定
  26.  
  27.     // パフォーマンス値の色づけモード
  28.     const perfColorizeMode = 2;
  29.  
  30.     // レート値の色づけモード
  31.     const rateColorizeMode = 2;
  32.  
  33.     // --------------8<----------------------------8<--------------
  34.  
  35.     // 読み込み元と整合性を取る
  36.     // https://wiki.greasespot.net/Third-Party_Libraries
  37.     this.$ = this.jQuery = jQuery.noConflict(true);
  38.  
  39.     // 文字に色付けする
  40.     function colorizeCellFont(cell, value){
  41.         cell.text('');
  42.  
  43.         if(value >= 3200) { // 王冠をつける
  44.             const floorValue = Math.floor(value / 400) * 400;
  45.             cell.append('<img src="https://img.atcoder.jp/assets/icon/crown' + floorValue + '.gif"> ');
  46.         }
  47.  
  48.         let colorClass = 'user-black'; // 黒
  49.         /**/ if(value <  400) colorClass = 'user-gray';   // 灰
  50.         else if(value <  800) colorClass = 'user-brown';  // 茶
  51.         else if(value < 1200) colorClass = 'user-green';  // 緑
  52.         else if(value < 1600) colorClass = 'user-cyan';   // 水
  53.         else if(value < 2000) colorClass = 'user-blue';   // 青
  54.         else if(value < 2400) colorClass = 'user-yellow'; // 黄
  55.         else if(value < 2800) colorClass = 'user-orange'; // 橙
  56.         else /*            */ colorClass = 'user-red';    // 赤
  57.  
  58.         cell.append('<span class="' + colorClass + '">' + value + '</span>');
  59.     }
  60.  
  61.     // 背景に色付けする
  62.     function colorizeCellBackGround(cell, value){
  63.         cell.text(value);
  64.  
  65.         if(value < 3200) {
  66.             let colorCode = '#FFFFFF'; // 白
  67.             /**/ if(value <  400) colorCode = '#D9D9D9'; // 灰
  68.             else if(value <  800) colorCode = '#D9C5B2'; // 茶
  69.             else if(value < 1200) colorCode = '#B2D9B2'; // 緑
  70.             else if(value < 1600) colorCode = '#B2ECEC'; // 水
  71.             else if(value < 2000) colorCode = '#B2B2FF'; // 青
  72.             else if(value < 2400) colorCode = '#ECECB2'; // 黄
  73.             else if(value < 2800) colorCode = '#FFD9B2'; // 橙
  74.             else /*value < 3200*/ colorCode = '#FFB2B2'; // 赤
  75.  
  76.             cell.attr('style', 'background-color:' + colorCode + ';>');
  77.         }
  78.         else if(value < 3600) { // 銀
  79.             cell.attr('style', 'background-image: linear-gradient(135deg, #E4E4E4, #EEEEEE, #E4E4E4, #CCCCCC, #C4C4C4);>');
  80.         }
  81.         else { // 金
  82.             cell.attr('style', 'background-image: linear-gradient(135deg, #FFD325, #FDEBA6, #FFE065, #FFCC00, #F0BE00);>');
  83.         }
  84.     }
  85.  
  86.     // セルをmodeで色づけ
  87.     function colorizeCell(cell, mode){
  88.         const value = cell.text();
  89.         if(isNaN(value)) return;
  90.  
  91.         if (mode === 0) { // なし
  92.             cell.text(value);
  93.         }
  94.         else if (mode === 1) { // 文字を色づけ
  95.             colorizeCellFont(cell, value);
  96.         }
  97.         else if (mode === 2) { // 背景を色づけ
  98.             colorizeCellBackGround(cell, value);
  99.         }
  100.     }
  101.  
  102.     $('#history').find('tbody').find('tr').each(function(i, contestInfo) {
  103.         const tds = $(contestInfo).find('td');
  104.         colorizeCell($(tds[3]), perfColorizeMode);
  105.         colorizeCell($(tds[4]), rateColorizeMode);
  106.     });
  107. });