Check Constraints

Add checkboxes to constraints of an AtCoder problem.

Verzia zo dňa 31.10.2021. Pozri najnovšiu verziu.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey, Greasemonkey alebo Violentmonkey.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey, % alebo Violentmonkey.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey, % alebo Violentmonkey.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey alebo Userscripts.

Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie, ako napríklad Tampermonkey.

Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie správcu používateľských skriptov.

(Už mám správcu používateľských skriptov, nechajte ma ho nainštalovať!)

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

(Už mám správcu používateľských štýlov, nechajte ma ho nainštalovať!)

// ==UserScript==
// @name            Check Constraints
// @name:ja         制約をチェックする
// @description     Add checkboxes to constraints of an AtCoder problem.
// @description:ja  AtCoderの問題ページの制約にチェックボックスを追加します。
// @version         1.0.0
// @icon            https://www.google.com/s2/favicons?domain=atcoder.jp
// @author          w0mbat
// @match           https://atcoder.jp/contests/*/tasks/*
// @grant           GM_addStyle
// @namespace https://greatest.deepsurf.us/users/754798
// ==/UserScript==

(function () {
  'use strict';

  console.log('😼<「制約をチェックする」を実行します。');

  async function addStyle(src) {
    return new Promise((resolve) => {
      const link = document.createElement("link");
      link.rel = "stylesheet";
      link.href = src;
      document.getElementsByTagName("head")[0].appendChild(link);
    });
  }
  addStyle('https://cdn.jsdelivr.net/npm/[email protected]/dist/pretty-checkbox.min.css');
  addStyle('https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css');
  GM_addStyle(`
    .pretty.p-icon .state .icon { top: calc(((100% - 1em) - 2px) / 3) !important }
    .pretty .state label:after,.pretty .state label:before { top: calc(((100% - 1em) - 2px) / 3) !important }
  `);

  function* getConstraintsSections() {
    // <h3>制約</h3>を子要素に持つsectionを取得
    for (const section of document.getElementsByTagName('section')) {
      for (const child of section.children) {
        if (child.tagName.toLowerCase() !== 'h3') continue;
        const text = child.textContent;
        if (text === '制約' || text === 'Constraints') yield section;
      }
    }
  }

  function createCheckBox() {
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    return checkbox;
  }

  /**
   * @param {HTMLLIElement} li
   */
  function insertCheckBox(li) {
    // https://lokesh-coder.github.io/pretty-checkbox/
    const div = document.createElement('div');
    div.className = 'pretty p-icon p-round p-pulse';
    div.appendChild(createCheckBox());
    const state = div.appendChild(document.createElement('div'));
    state.className = 'state p-success';
    const icon = state.appendChild(document.createElement('i'));
    icon.className = 'icon mdi mdi-check';
    const label = state.appendChild(document.createElement('label'));
    [...li.childNodes].forEach(e => label.appendChild(e));
    li.appendChild(div);
    li.style.listStyleType = 'none';
  }

  for (const section of getConstraintsSections()) {
    const ul = [...section.getElementsByTagName('ul')].shift();
    if (ul) {
      ul.style.paddingLeft = '1em';
      [...ul.querySelectorAll('li')].forEach(li => insertCheckBox(li));
    }
  }

  console.log('😼<「制約をチェックする」を実行しました。');
})();