// ==UserScript==
// @name        4chan Captcha Formatter
// @namespace   4chan-captcha-formatter
// @match       https://boards.4chan.org/*
// @match       https://sys.4chan.org/*/imgboard.php*
// @grant       none
// @version     1.1.1
// @author      -
// @description Shows the new 4chan captcha as a grid of images
// ==/UserScript==

//TCaptcha module is defined in https://s.4cdn.org/js/tcaptcha.min.4.js
(function () {
    "use strict";

    function removeSliderIdempotently() {
        const slider = TCaptcha.node.querySelector('#t-slider')
        if (slider) {
            TCaptcha.node.removeChild(slider)
        }
    }

    const createImageGrid = function () {
        removeSliderIdempotently()
        const bitmaps = TCaptcha.getCurrentTask().items
        const description = TCaptcha.getCurrentTask().str.replace(/^Use the scroll bar below to\s*|,\s*then click next\.?/gi, '').replace(/^./, c => c.toUpperCase()) + '.';
        const imageHTMLs = bitmaps.map((bitmap, imageNumber) => `<button class="tcaptcha-image" style="padding: 0; margin: 4px;border: none;background: none;"><img src="data:image/png;base64,${bitmap}" style="width:100%;height:100%"/></button>`).join('');
        const containerHTML = `<div id="t-task" style="display: flex; flex-wrap: wrap; grid-gap: 4px; width: 100%; justify-content: center; margin: 0 auto;overflow:auto;max-height: 60vh;"></div>`;
        const parent = TCaptcha.node;
        parent.style.height = 'auto';
        parent.children[1].outerHTML = containerHTML;
        parent.children[1].innerHTML = `<div id="t-desc" style="white-space:pre-line;text-align:center;font-size:14px;user-select:none">${description}</div>` + imageHTMLs;

        parent.children[1].querySelectorAll('.tcaptcha-image').forEach((val, index) => {
            val.addEventListener('click', () => submitCaptchaAnswer(index));
        })
        TCaptcha.taskNode = parent.children[1] //So the TCaptcha logic will put information like 'Done' or 'Captcha expired' onto containerHTML rather than nowhere
    }

    window.submitCaptchaAnswer = function (imageNumber) { //copied from TCaptcha.onNextClick
        let e = TCaptcha,
            t = e.tasks ? e.tasks.length - 1 : 0;
        if (t < 0) return !1;
        let a = imageNumber + 1;
        if (a < 1) return;
        e.respNode.value += `${a - 1}`; //Submit answer
        let o = e.taskId + 1;
        o <= t ? (e.setTaskId(o), e.sliderNode.focus(), createImageGrid()) :  // Case 1: We now move onto the next captcha. We make another image grid after the first one
            (e.nextNode.disabled = !0, e.setTaskNodeContent("Done."), e.sliderNode.blur(), e.toggleSlider(!1)) //Case 2: We just did the final captcha.
    }

    //This is a code injection thing that will execute that first createImageGrid() needed for each challenge
    const original_setChallenge = TCaptcha.setChallenge
    const new_setChallenge = function (e) {
        original_setChallenge(e);
        createImageGrid()
    }
    TCaptcha.setChallenge = new_setChallenge
})();