☰

AtCoderPerformanceColorizer

Colorize performance values in AtCoder's gradebook.

As of 2019-03-13. See the latest version.

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