☰

AtCoder Problems Marker

AtCoder Problems 上に表示される問題にユーザが独自のマーカー（解説ACなど）を付けられるようにします

// ==UserScript==
// @name         AtCoder Problems Marker
// @namespace    iilj
// @version      2020.6.26.1
// @description  AtCoder Problems 上に表示される問題にユーザが独自のマーカー（解説ACなど）を付けられるようにします
// @author       iilj
// @supportURL   https://github.com/iilj/AtCoderProblemsExt/issues
// @match        https://kenkoooo.com/atcoder/*
// @require      https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.ui.position.js
// @resource     css_contextmenu https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css
// @grant        GM_addStyle
// @grant        GM_getResourceText
// ==/UserScript==

/* globals $ */

(function () {
    'use strict';

    GM_addStyle(GM_getResourceText('css_contextmenu'));
    GM_addStyle(`
td.table-problem.apm-ac-after-reading-answer {
    background-color: #ffff88 !important;
}
    `);

    /**
     * key for localStorage to save ac-after-reading-answer state
     * @type {string}
     */
    const localStorageKey = "apm-hashset";
    /**
     * json string loaded from localStorage, or to save on localStorage
     * @type {string}
     */
    let json;
    /**
     * hashset to store whether the problem is marked as ac-after-reading-answer or not
     * @type {{[key:string]: number}}
     */
    let hash;
    /**
     * user id of AtCoder
     * @type {string}
     */
    let userId;

    /**
     * load ac-after-reading-answer state from localStorage
     */
    const loadHash = () => {
        json = localStorage.getItem(localStorageKey);
        hash = json ? JSON.parse(json) : {};
    }
    /**
     * save ac-after-reading-answer state to localStorage
     */
    const saveHash = () => {
        json = JSON.stringify(hash);
        localStorage.setItem(localStorageKey, json);
    }
    /**
     * url of problem -> key of hash
     *
     * @param {string} href
     * @returns {string | null} key of hash if valid url supplied, otherwise null
     */
    const href2key = (href) => {
        let result
        if (result = href.match(/^https?:\/\/atcoder\.jp\/contests\/([^\/]+)\/tasks\/([^\/]+)$/)) {
            return `${userId}/${result[1]}/${result[2]}`;
        }
        return null;
    };

    $.contextMenu({
        selector: '.table-problem',
        callback: (key, options) => {
            switch (key) {
                case "ac_after_reading_answer": {
                    const td = options.$trigger;
                    const href = td.find('a[href]').attr('href');
                    const key = href2key(href);
                    if (key in hash) {
                        delete hash[key];
                    } else {
                        hash[key] = 0;
                    }
                    td.toggleClass('apm-ac-after-reading-answer');
                    saveHash();
                    break;
                }
                case "about":
                    alert("解説ACした問題を Table ページ上でマークできます．マークした結果はブラウザに保存されます．");
            }
        },
        items: {
            "ac_after_reading_answer": { name: "解説AC On/Off" },
            "sep1": "---------",
            "about": { name: "About" }
        }
    });

    /**
     * Table 表示ページで "Show Accepted" の変更検知に利用する MutationObserver
     *
     * @type {MutationObserver}
     */
    let tableObserver;

    /**
     * Table 表示ページで表のセルの色を塗り分ける．
     *
     * @date 2020-01-27
     * @param {string} userId
     */
    const processTable = () => {
        const tableChanged = () => {
            if (tableObserver) {
                tableObserver.disconnect();
            }
            document.querySelectorAll('.table-problem').forEach(td => {
                const lnk = td.querySelector('a[href]');
                if (!lnk) {
                    return;
                }
                const key = href2key(lnk.href);
                if (!key) {
                    return;
                }
                if (key in hash) {
                    td.classList.add('apm-ac-after-reading-answer');
                }
            });
            if (tableObserver) {
                document.querySelectorAll('.react-bs-container-body').forEach(div => {
                    tableObserver.observe(div, { childList: true, subtree: true });
                });
            }
        };

        tableObserver = new MutationObserver(mutations => tableChanged());
        tableChanged();
        document.querySelectorAll('.react-bs-container-body').forEach(div => {
            tableObserver.observe(div, { childList: true, subtree: true });
        });
    }

    /**
     * ページ URL が変化した際のルートイベントハンドラ．
     *
     * @date 2020-01-27
     */
    const hrefChanged = () => {
        if (tableObserver) {
            tableObserver.disconnect();
        }

        /** @type {RegExpMatchArray} */
        let result;
        if (result = location.href.match(/^https?:\/\/kenkoooo\.com\/atcoder\/#\/table\/([^/?#]+)/)) {
            userId = result[1];
            processTable();
        }
    };

    // main
    loadHash();

    let href = location.href;
    const observer = new MutationObserver(mutations => {
        if (href === location.href) {
            return;
        }
        // href changed
        href = location.href;
        hrefChanged();
    });
    observer.observe(document, { childList: true, subtree: true });
    hrefChanged();
})();