☰

AtCoder Submission Status

AtCoderで提出した解答がいくつのテストケースでACか, WAか...が一目でわかるように表示する

2020-09-04 يوللانغان نەشرى. ئەڭ يېڭى نەشرىنى كۆرۈش.

  1. // ==UserScript==
  2. // @name         AtCoder Submission Status
  3. // @name:en      AtCoder Submission Status
  4. // @namespace    https://github.com/9sako6/atcoder-userscripts
  5. // @version      1.1
  6. // @description  AtCoderで提出した解答がいくつのテストケースでACか, WAか...が一目でわかるように表示する
  7. // @description:en This script shows submission's statuses clearly!
  8. // @author       9sako6
  9. // @match        https://atcoder.jp/contests/*/submissions/*
  10. // @exclude      https://atcoder.jp/contests/*/submissions/me
  11. // @license     MIT
  12. // @supportURL   https://github.com/9sako6/atcoder-userscripts/issues
  13. // ==/UserScript==
  14.  
  15. function main() {
  16.   /**
  17.   * count each status
  18.   */
  19.   const statusPanel = document.getElementsByClassName('panel-default')[2];
  20.   const testCaseElems = statusPanel.querySelector('tbody').querySelectorAll('tr');
  21.   const statusCounter = {};
  22.  
  23.   testCaseElems.forEach((elem) => {
  24.     const statusCodeColumnNum = 1;
  25.     const statusCode = elem.querySelectorAll('td')[statusCodeColumnNum].querySelector('span').textContent;
  26.  
  27.     statusCounter[statusCode] ? statusCounter[statusCode]++ : statusCounter[statusCode] = 1;
  28.   });
  29.  
  30.   const statusCodes = Object.keys(statusCounter).sort();
  31.  
  32.   /**
  33.    * make result table
  34.    */
  35.   // NOTE: Create a wrapper element of table.
  36.   const wrapElem = document.createElement('div');
  37.   wrapElem.id = 'added-result-panel';
  38.   wrapElem.classList.add('panel', 'panel-default');
  39.   wrapElem.appendChild(document.createTextNode(''));
  40.  
  41.   statusPanel.parentNode.insertBefore(wrapElem, statusPanel);
  42.  
  43.   // NOTE: Don't use `<table></table>` to avoid conflict 'AtCoder TestCase Extension'.
  44.   const testCasesCount = testCaseElems.length;
  45.   const rowWidthPercent = 100 / statusCodes.length;
  46.  
  47.   const resultTable = `
  48.     <div class="table table-bordered table-striped th-center">
  49.       <div style="width: 100%; display: flex;">
  50.       ${statusCodes.map((status, index) => `<div style="width: ${rowWidthPercent}%; text-align: center; border: 0.1px solid #ddd; border-top: 0; border-bottom: 0; border-right: 0; ${index == 0 ? "border-left: 0;" : ""}">
  51.             <div style="line-height: 2em; border: 0.1px solid #ddd; border-top: 0; border-right: 0; border-left: 0; border-bottom: 1;">
  52.               <span class="label label-${status === 'AC' ? 'success' : 'warning'}" aria-hidden="true" data-toggle="tooltip" data-placement="top" style="text-align: center; line-height: 2em;">${status}</span>
  53.             </div>
  54.           <div style="line-height: 1.8em;">${statusCounter[status]}/${testCasesCount}</div>
  55.         </div>`).join('')}
  56.       </div>
  57.     </div>`;
  58.  
  59.   document.getElementById('added-result-panel').insertAdjacentHTML("beforeend", resultTable);
  60. }
  61.  
  62. (function () {
  63.   try {
  64.     main();
  65.   } catch (_error) {
  66.     // noop
  67.   }
  68. })();