Regex Crossword Debugger

index.user.js

// ==UserScript==
// @name         Regex Crossword Debugger
// @namespace    http://www.kunxi.org/
// @version      0.1
// @description  Check the answers and mark the mismatched regex.
// @author       Kun Xi
// @match        https://regexcrossword.com/playerpuzzles/*
// @match        https://regexcrossword.com/challenges/*
// @require      https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js
// @require      https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant        none
// ==/UserScript==

waitForKeyElements("button.validate", function(validateButton) {
    var debugAnswers = function(matrix, answers) {
        var payload = {
            patternsX: [],
            patternsY: []
        };

        if (answers[0].length !== matrix.patternsX.length) {
            throw "Columns in answer doesn't match number of patterns in X.";
        }
        if (answers.length !== matrix.patternsY.length) {
            throw "Rows in answer doesn't match number of patterns in Y.";
        }

        // check the Y axis
        for (var i = 0; i < matrix.patternsY.length; i++) {
            payload.patternsY[i] = []
            for (var j = 0; j < matrix.patternsY[i].length; j++) {
                var pattern = new RegExp("^" + matrix.patternsY[i][j] + "$");
                payload.patternsY[i].push(pattern.test(answers[i]));
            }
        }

        // check the X axis
        for (var i = 0; i < matrix.patternsX.length; i++) {
            for (var a = "", j = 0; j< matrix.patternsY.length; j++) {
                // get the answer in X axis
                a += answers[j][i];
            }

            payload.patternsX[i] = [];
            for (var j = 0; j < matrix.patternsX[i].length; j++) {
                var pattern = new RegExp("^" + matrix.patternsX[i][j] + "$");
                payload.patternsX[i].push(pattern.test(a));
            }
        }
        return payload;
    };

    var markMismatch = function(isMatched, el) {
        if (isMatched) {
            el.removeClass("text-danger");
        } else {
            el.addClass("text-danger");
        }
    };

    // inject the debug button
    var button = $('<button class="btn btn-warning" style="margin-right: 1.5em;">Debug</button>');
    button.click(function(e) {
        var scope = angular.element($('.puzzle')).scope();
        var payload = debugAnswers({
            patternsX: scope.puzzle.patternsX.data(),
            patternsY: scope.puzzle.patternsY.data()
        }, scope.puzzle.answer.data());

        // render patterns in X axis: top
        $(".puzzle table thead th:nth-child(n+2)").each(function(index) {
            markMismatch(payload.patternsX[index][0], $(this));
        });

        // render patterns in X axis: bottom
        $(".puzzle table tfoot th:nth-child(n+2)").each(function(index) {
            markMismatch(payload.patternsX[index][1], $(this));
        });

        // render patterns in Y axis
        $(".puzzle table tbody tr").each(function(index) {
            $(this).find('th').each(function(j) {
                markMismatch(payload.patternsY[index][j], $(this));
            });
        });
        e.preventDefault();
    });

    validateButton.after(button);
});