SFVノートのフレーム表を絞り込むUserScript

sfvnote_filter.js

// ==UserScript==
// @name         SFV note filter
// @namespace    https://blog.mezquita.jp/
// @version      0.0.2
// @description  SFVノートの絞り込み。chrome ウェブストアでTampermonkeyをいれて、そこにこいつを追加
// @author       Halipeco(@halipeco)
// @match        https://sf4.sakura.ne.jp/v.note/frames?*
// @match        https://sf4.sakura.ne.jp/v.note/frames/index*
// ==/UserScript==

/*
 Tampermonkeyの設定のとこ、include/excludeに
   https://sf4.sakura.ne.jp/v.note/frames?*
   https://sf4.sakura.ne.jp/v.note/frames/index*
  を追加すると反応するはず
 */

var helpText = `
 * つかいかた
 * sfvnoteのフレーム表に遷移
 * 以下のルールで4文字～入力
 * h|g ヒットorガード
 * +|- フレームの有利/不利
 * 数字 有利/不利フレーム数
 * +|- 以上・以下の検索条件
 * 例
 * g+0+ : ガード時0F以上の有利を検索
 * h+3+ : ヒット時+3F以上の有利を検索
 * g-2- : ガード時-2F以上の不利を検索
`;

(function () {

    // フレーム表にだけ反応
    if (document.location.pathname != "/v.note/frames") {
        return false;
    }

    var appendScript = document.createElement('script');
    appendScript.type = "text/javascript"
    appendScript.innerHTML = `
    function filter_clear(){
      // このぺーじにtableタグは一個だけなので雑に拾う
      var rows = document.querySelectorAll('tbody tr');
      for (let i = 0; i < rows.length; i++) {
        rows[i].style.display = "table-row";
      }
    }
    // myFilter呼ぶだけ
    function callMyFilter(){
        var ipt=document.getElementById("filter_text").value.trim()
        myFilter(ipt);
    }

    /**
     * 指定条件でテーブルを絞り込む
     */
    function myFilter(ipt) {
        // node.nodeType
        const ELEMENT_NODE = 1;
        const TEXT_NODE = 3;
        // テーブルのガード列・ヒット列
        const GUARD = 13;
        const HIT = 14;

        if (!ipt) {
            return false;
        }

        // テキスト埋め込みでのエスケープは更にエスケープしないといけないみたい
        var matched = ipt.match(/^([gh])([\\+\\-])(\\d+)([\\+\\-])$/);
        //var matched = ipt.match(/^([gh])([\+\-])(\d+)([\+\-])$/);

        if (!matched) {
                console.log("検索条件を満たさないのでスキップ");
                console.log(ipt);
                return false;
        }
        var guardhit = matched[1] == "g" ? "ガード" : "ヒット";
        var criteria_txt = matched[4] == "-" ? "以下" : "以上";

        var x = matched[2] == "-" ? -1 : 1;
        var frame = parseInt(matched[3]) * x;
        var criteria = matched[4] == "-" ? "lt" : "gt";
        var gh = matched[1] == "g" ? GUARD : HIT;

        console.log("検索条件:" + guardhit + "時 " + frame + criteria_txt);

        // このぺーじにtableタグは一個だけなので雑に拾う
        var rows = document.querySelectorAll('tbody tr');

        for (let i = 0; i < rows.length; i++) {
            // ヒット硬直差
            let cell = rows[i].children[gh];
            let tgt = gt(cell);
            if (tgt == "" || tgt == "D" || tgt == "GB" || tgt == " GB") {
                rows[i].style.display = "none";
                continue
            }
            if ((criteria == "lt" && frame >= tgt) ||
                (criteria == "gt" && frame <= tgt)) {
                //　検索条件に合致する場合はhit/guard列をハイライト
                cell.style.backgroundColor = '#ffffee';
            } else {
                // 合致しない行はまるごと消す
                rows[i].style.display = "none";
            }
        }
    }

    /**
     * タグからテキストを取り出す
     * @param {HTMLElement} d
     */
    function gt(d) {
        // 値取得用
        //var gt_ptn = /^\s*([\+\-]?)([0-9]+)/;
        var gt_ptn = /^\\s*([\\+\\-]?)([0-9]+)/;

        if (d.firstChild == null) {
            return "";
        }
        let txt = d.firstChild.nodeValue;
        if (txt == "D" || txt == "GB" || txt == " GB" || txt == "") {
            return txt;
        }

        let m = txt.match(gt_ptn);
        if (!m) {
            // aタグのケース
            let a = d.querySelector("a").firstChild.nodeValue;
            m = a.match(gt_ptn);
        }
        if (m) {
            let x = (m[1] == "-") ? -1 : 1;
            // マイナスの場合は負の数にする
            return parseInt(m[2]) * x;
        } else {
            return txt;
        }
    }
`;
    var ele_1 = document.createElement('div');
    ele_1.id = "myfilter"
    ele_1.classList.add("nowrap");
    ele_1.classList.add("pull-left");
    // 作った箱の中にまるっと入れる
    var addPart = `
    <ul class="list-inline search-group">
        <li>
        +ガード・ヒット　±フレーム　以上以下（[gh][+-][\d][+-]）
        </li>
        <li>
        <input type="text" id="filter_text" />
        <input type="button" id="filter_submit" value="filter" onclick="callMyFilter();"/>
        <input type="button" id="filter_reload" value="reload" onclick="filter_clear();"/>
        </li>
    </ul>`;
    ele_1.innerHTML = addPart;

    // 「発生」の要素を探して上のパーツを挿入
    var tgt = document.querySelector("#GroupStartup");
    tgt.after(ele_1);
    tgt.after(appendScript);
    console.log(helpText);
}
)();

ガードブレイクの行があるときに処理止まってたのに対応

ダイアログ毎回出て鬱陶しかったのを改善
HTML内にフォーム埋め込んでそこから絞れるように
んで絞り込みを解除できるように
※絞り込み解除の際に、前回絞り込んだ背景色が残っているのは意図的なものです

記事
https://blog.mezquita.jp/archives/6513