AtCoder Submission User Colorizer

提出一覧のユーザ名を色付けします

Ekde 2024/03/10. Vidu La ĝisdata versio.

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

  1. // ==UserScript==
  2. // @name AtCoder Submission User Colorizer
  3. // @namespace http://tampermonkey.net/
  4. // @version 1.3
  5. // @description 提出一覧のユーザ名を色付けします
  6. // @author morio_prog
  7. // @match https://atcoder.jp/contests/*/submissions*
  8. // @grant none
  9. // @license CC0
  10. // @require https://unpkg.com/lscache/lscache.min.js
  11. // ==/UserScript==
  12.  
  13. $(function() {
  14. 'use strict';
  15.  
  16. const lastUpdateKey = 'user-colorizer-ranking-last-update';
  17. const rankingKey = 'user-colorizer-ranking';
  18. const OUT_OF_RANK = Number.MAX_VALUE; // > 100
  19.  
  20. function getColor(rating) {
  21. if (rating >= 2800) return '#FF0000';
  22. if (rating >= 2400) return '#FF8000';
  23. if (rating >= 2000) return '#C0C000';
  24. if (rating >= 1600) return '#0000FF';
  25. if (rating >= 1200) return '#00C0C0';
  26. if (rating >= 800) return '#008000';
  27. if (rating >= 400) return '#804000';
  28. if (rating > 0) return '#808080';
  29. return '#000000';
  30. }
  31.  
  32. function getColorClass(rating) {
  33. if (rating >= 2800) return 'user-red';
  34. if (rating >= 2400) return 'user-orange';
  35. if (rating >= 2000) return 'user-yellow';
  36. if (rating >= 1600) return 'user-blue';
  37. if (rating >= 1200) return 'user-cyan';
  38. if (rating >= 800) return 'user-green';
  39. if (rating >= 400) return 'user-brown';
  40. if (rating > 0) return 'user-gray';
  41. return 'user-unrated';
  42. }
  43.  
  44. function getAchRate(rating) {
  45. const base = Math.floor(rating / 400) * 400;
  46. return ((rating - base) / 400) * 100;
  47. }
  48.  
  49. function colorize(u, ranking, rating) {
  50. /* */if (ranking <= 1) $(u).before('<img style="vertical-align: middle;" src="//img.atcoder.jp/assets/icon/crown_champion.png">&nbsp;');
  51. else if (ranking <= 10) $(u).before('<img style="vertical-align: middle;" src="//img.atcoder.jp/assets/icon/crown_gold.png">&nbsp;');
  52. else if (ranking <= 30) $(u).before('<img style="vertical-align: middle;" src="//img.atcoder.jp/assets/icon/crown_silver.png">&nbsp;');
  53. else if (ranking <= 100) $(u).before('<img style="vertical-align: middle;" src="//img.atcoder.jp/assets/icon/crown_bronze.png">&nbsp;');
  54. else if (rating > 0) {
  55. const color = getColor(rating);
  56. const achRate = getAchRate(rating);
  57. $(u).before(`
  58. <span style="
  59. display: inline-block;
  60. height: 12px;
  61. width: 12px;
  62. vertical-align: center;
  63. border-radius: 50%;
  64. border: solid 1px ${color};
  65. background: -webkit-linear-gradient(
  66. bottom,
  67. ${color} 0%,
  68. ${color} ${achRate}%,
  69. rgba(255, 255, 255, 0.0) ${achRate}%,
  70. rgba(255, 255, 255, 0.0) 100%);
  71. "></span>
  72. `);
  73. }
  74. $(u).addClass(getColorClass(rating));
  75. }
  76.  
  77. function getRankingMap() {
  78. return new Promise(function(callback) {
  79. const currentTime = new Date().getTime();
  80. const lastUpdateTime = localStorage.getItem(lastUpdateKey);
  81. // Update every 3 hours
  82. if (lastUpdateTime && currentTime < Number(lastUpdateTime) + 3 * 60 * 60 * 1000) {
  83. callback(JSON.parse(localStorage.getItem(rankingKey)));
  84. } else {
  85. let ranking = {};
  86. $.ajax({
  87. url: "https://atcoder.jp/ranking",
  88. type: 'GET',
  89. dataType: 'html'
  90. })
  91. .done(function(data) {
  92. $($.parseHTML(data)).find('.username > span').each(function(idx) {
  93. const userName = $(this).text();
  94. ranking[userName] = idx + 1;
  95. });
  96. })
  97. .then(function() {
  98. localStorage.setItem(lastUpdateKey, currentTime);
  99. localStorage.setItem(rankingKey, JSON.stringify(ranking));
  100. callback(ranking);
  101. });
  102. }
  103. });
  104. }
  105.  
  106. function getRanking(rankingMap, userName) {
  107. if (userName in rankingMap) return rankingMap[userName];
  108. return OUT_OF_RANK;
  109. }
  110.  
  111. lscache.flushExpired();
  112. getRankingMap().then((rankingMap) => {
  113. let index = 0;
  114. $('a[href*="/users"]').each(function(_, u) {
  115. // Skip "My Profile"
  116. if ($(u).find('span').length) return true;
  117. const partUri = $(this).attr('href');
  118. const userName = partUri.slice(7);
  119. const lskey = "rating-" + userName;
  120. const ranking = getRanking(rankingMap, userName);
  121. let rating = lscache.get(lskey);
  122.  
  123. if (rating !== null) {
  124. colorize(u, ranking, rating);
  125. return;
  126. }
  127.  
  128. index += 1;
  129. setTimeout(function() {
  130. $.ajax({
  131. url: "https://atcoder.jp" + partUri + "/history/json",
  132. type: 'GET',
  133. dataType: 'json'
  134. })
  135. .done(function(data) {
  136. const ratedCount = data.length;
  137. if (ratedCount == 0) {
  138. rating = 0;
  139. } else {
  140. rating = data[ratedCount - 1]["NewRating"];
  141. }
  142. // Update every 3 hours
  143. lscache.set(lskey, rating, 3 * 60);
  144. })
  145. .then(function() {
  146. colorize(u, ranking, rating);
  147. });
  148. }, index * 300);
  149. });
  150. });
  151.  
  152. });