☰

AtCoder Difficulty Display

display a difficulty of AtCoder Problems.

As of 2020-06-28. See the latest version.

  1. // ==UserScript==
  2. // @name            AtCoder Difficulty Display
  3. // @namespace       https://github.com/hotarunx
  4. // @homepage        https://github.com/hotarunx/AtCoderDifficultyDisplay
  5. // @supportURL      https://github.com/hotarunx/AtCoderDifficultyDisplay/issues
  6. // @version         0.6
  7. // @description     AtCoder Problemsの難易度を表示します。
  8. // @description:en  display a difficulty of AtCoder Problems.
  9. // @author          hotarunx
  10. // @match           https://atcoder.jp/contests/*/tasks/*
  11. // @grant           none
  12. // @connect         https://kenkoooo.com/atcoder/resources/*
  13. // @connect         https://kenkoooo.com/atcoder/atcoder-api/*
  14. // @license         MIT
  15. //
  16. // Copyright(c) 2020 hotarunx
  17. // This software is released under the MIT License, see LICENSE or https://github.com/hotarunx/AtCoderMyExtensions/blob/master/LICENSE.
  18. //
  19. // ==/UserScript==
  20.  
  21. (function () {
  22.  
  23.     // -------------------------------------------------------------------------
  24.     // 設定
  25.     // 次の変数の値を書き換えることで各数値を表示するかどうかを変更できます
  26.  
  27.     // 難易度を表示するかどうか
  28.     const displayDifficulty = true;
  29.  
  30.     // 提出状況を表示するかどうか
  31.     const displaySubmissionStatus = true;
  32.  
  33.     // true: 表示する
  34.     // false: 表示しない
  35.     // -------------------------------------------------------------------------
  36.  
  37.     // URL of Estimated difficulties of the problems
  38.     const SUBMISSION_API = "https://kenkoooo.com/atcoder/atcoder-api/results?user=" + userScreenName;
  39.     const SUBMISSIONS_DATASET = "https://kenkoooo.com/atcoder/resources/problem-models.json";
  40.  
  41.     if (displayDifficulty)
  42.         fetch(SUBMISSIONS_DATASET)
  43.             .then((response) => response.json())
  44.             .then((jsonData) => {
  45.                 addDifficultyText(jsonData);
  46.             });
  47.  
  48.     if (displaySubmissionStatus && userScreenName != "")
  49.         fetch(SUBMISSION_API)
  50.             .then((response) => response.json())
  51.             .then((submissionData) => {
  52.                 addSubmissionStatusText(submissionData);
  53.             });
  54.  
  55. })();
  56.  
  57. // Webページの問題ステータス（実行時間制限とメモリ制限が書かれた部分）のHTMLオブジェクトを取得
  58. function getElementOfProblemStatus() {
  59.     let element_status;
  60.  
  61.     const main_container = document.getElementById('main-container');
  62.     const elements_p = main_container.getElementsByTagName("p");
  63.  
  64.     for (let i = 0; i < elements_p.length; i++) {
  65.         const element = elements_p[i];
  66.         if (element.textContent.match("メモリ制限:") || element.textContent.match("Memory Limit:")) {
  67.             element_status = element;
  68.             break
  69.         }
  70.     }
  71.  
  72.     return element_status;
  73. }
  74.  
  75. // レーティングに対応する色のカラーコードを返す
  76. function colorRating(rating) {
  77.     let color;
  78.     if (rating < 400) color = '#808080'; //       gray
  79.     else if (rating < 800) color = '#804000'; //  brown
  80.     else if (rating < 1200) color = '#008000'; // green
  81.     else if (rating < 1600) color = '#00C0C0'; // cyan
  82.     else if (rating < 2000) color = '#0000FF'; // blue
  83.     else if (rating < 2400) color = '#C0C000'; // yellow
  84.     else if (rating < 2800) color = '#FF8000'; // orange
  85.     else color = '#FF0000'; // red
  86.  
  87.     return color;
  88. }
  89.  
  90. // 難易度円→◒の文章を生成する
  91. function generateDifficultyCircle(rating) {
  92.  
  93.     if (rating < 3200) {
  94.         // 色と円がどのぐらい満ちているかを計算
  95.         const color = colorRating(rating);
  96.         const percentFull = (rating % 400) / 400 * 100;
  97.  
  98.         // ◒を生成
  99.         return "<span style = 'display: inline-block; border-radius: 50%; border-style: solid;border-width: 1px; margin-right: 5px; height: 12px; width: 12px;border-color: " + color + "; background: linear-gradient(to top, " + color + " 0%, " + color + " " + percentFull + "%, rgba(0, 0, 0, 0) " + percentFull + "%, rgba(0, 0, 0, 0) 100%); '></span>"
  100.  
  101.     }
  102.     // 金銀銅は例外処理
  103.     else if (rating < 3600) {
  104.         return '<span style="display: inline-block; border-radius: 50%; border-style: solid;border-width: 1px; margin-right: 5px; height: 12px; width: 12px; border-color: rgb(150, 92, 44); background: linear-gradient(to right, rgb(150, 92, 44), rgb(255, 218, 189), rgb(150, 92, 44));"></span>';
  105.  
  106.     } else if (rating < 4000) {
  107.         return '<span style="display: inline-block; border-radius: 50%; border-style: solid;border-width: 1px; margin-right: 5px; height: 12px; width: 12px; border-color: rgb(128, 128, 128); background: linear-gradient(to right, rgb(128, 128, 128), white, rgb(128, 128, 128));"></span>';
  108.  
  109.     } else {
  110.         return '<span style="display: inline-block; border-radius: 50%; border-style: solid;border-width: 1px; margin-right: 5px; height: 12px; width: 12px; border-color: rgb(255, 215, 0); background: linear-gradient(to right, rgb(255, 215, 0), white, rgb(255, 215, 0));"></span>';
  111.  
  112.     }
  113. }
  114.  
  115. // レーティングを0以上に補正
  116. // 参考 https://qiita.com/anqooqie/items/92005e337a0d2569bdbd#%E6%80%A7%E8%B3%AA4-%E5%88%9D%E5%BF%83%E8%80%85%E3%81%B8%E3%81%AE%E6%85%88%E6%82%B2
  117. function correctLowerRating(rating) {
  118.     if (rating >= 400) return rating;
  119.     do {
  120.         rating = 400 / Math.exp((400 - rating) / 400);
  121.     } while (rating < 0);
  122.     return rating;
  123. }
  124.  
  125. // 難易度を表示する文字列を生成
  126. function generateDifficultyText(difficulty, is_experimental) {
  127.     // 難易度を0にして四捨五入
  128.     difficulty = correctLowerRating(difficulty);
  129.     difficulty = difficulty.toFixed();
  130.  
  131.     // テキストを生成
  132.     let difficultyText = "Difficulty: ";
  133.     if (is_experimental) difficultyText = "🧪" + difficultyText;
  134.     difficultyText += difficulty;
  135.     difficultyText += generateDifficultyCircle(difficulty);
  136.  
  137.     // 色つけ
  138.     const color = colorRating(difficulty);
  139.     difficultyText = "<span style='color: " + color + ";'>" + difficultyText + "</span>";
  140.  
  141.     // Problemsへのリンクを追加
  142.     const atcoderProblemsUrl = "https://kenkoooo.com/atcoder/#/table/" + userScreenName;
  143.     difficultyText = "<a href='" + atcoderProblemsUrl + "'>" + difficultyText + "</a>";
  144.  
  145.     return " / " + difficultyText;
  146. }
  147.  
  148. function addDifficultyText(jsonData) {
  149.     // URLから問題IDを取得
  150.     const path = location.pathname.split("/");
  151.     const id = path[path.length - 1];
  152.     // 問題データを取得
  153.     const problem = jsonData[id];
  154.  
  155.     // 問題が存在しなければ終了
  156.     if (problem == null || problem.difficulty == null) { return; }
  157.  
  158.     // 難易度を表示する文字列を生成
  159.     const text = generateDifficultyText(problem.difficulty, problem.is_experimental);
  160.  
  161.     // 問題ステータスのHTMLオブジェクトを探してtextを追加
  162.     let status = getElementOfProblemStatus();
  163.     status.insertAdjacentHTML('beforeend', text);
  164. }
  165.  
  166. function addSubmissionStatusText(submissionData) {
  167.     // URLから問題IDを取得
  168.     const path = location.pathname.split("/");
  169.     const id = path[path.length - 1];
  170.  
  171.     // コンテスト時間を取得
  172.     const start = Math.floor(Date.parse(startTime._i) / 1000);
  173.     const end = Math.floor(Date.parse(endTime._i) / 1000);
  174.  
  175.     // 4つの提出状況記録変数
  176.     // コンテスト中にACした、コンテスト外にACした、コンテスト中に提出した、コンテスト外に提出した
  177.     let contestAccepted = false, accepted = false, contestSubmitted = false, submitted = false;
  178.  
  179.     let latestAcceptedSubmission, latestSubmission;
  180.  
  181.     // この問題への提出をすべて探索して提出状況を更新する
  182.     const submissions = submissionData.filter(function (item, index) { if (item.problem_id == id) return true; });
  183.     submissions.sort((a, b) => a.epoch_second - b.epoch_second);
  184.  
  185.     for (const item of submissions) {
  186.         const time = item["epoch_second"];
  187.         const isDuringContest = start <= time && time <= end;
  188.         const isAccepted = item["result"] == "AC";
  189.  
  190.         if (isDuringContest) {
  191.             contestSubmitted = true;
  192.             if (isAccepted) contestAccepted = true;
  193.         } else {
  194.             submitted = true;
  195.             if (isAccepted) accepted = true;
  196.         }
  197.  
  198.         if (isAccepted) latestAcceptedSubmission = item;
  199.         else latestSubmission = item;
  200.     }
  201.  
  202.     // 提出状況を表す文字列を生成
  203.     let text;
  204.     if (contestAccepted) text = "<span style='color: #5CB85C;'>★Accepted</span>";
  205.     else if (accepted) text = "<span style='color: #5CB85C;'>Accepted</span>";
  206.     else if (submitted) text = "<span style='color: #F0AD4E;'>Trying</span>";
  207.     else if (contestSubmitted) text = "<span style='color: #F0AD4E;'>★Trying</span>";
  208.     else text = "Trying";
  209.  
  210.     // 最新のAC提出または提出へのリンクを追加
  211.     if (submitted || contestSubmitted) {
  212.         const submission = (latestAcceptedSubmission != null ? latestAcceptedSubmission : latestSubmission);
  213.  
  214.         const url = "https://atcoder.jp/contests/" + submission.contest_id + "/submissions/" + submission.id;
  215.  
  216.         text = "<a href='" + url + "'>" + text + "</a>";
  217.     }
  218.  
  219.     // 問題ステータスのHTMLオブジェクトを探してtextを追加
  220.     let status = getElementOfProblemStatus();
  221.     status.insertAdjacentHTML('beforeend', " / " + text);
  222. }