Allows direct editing of the f-puzzles json data

fpuzzles-jsoneditor.user.js

// ==UserScript==
// @name         Fpuzzles-JSONEditor
// @namespace    http://tampermonkey.net/
// @version      1.4
// @description  Allows direct editing of the f-puzzles json data
// @author       Rangsk
// @match        https://*.f-puzzles.com/*
// @match        https://f-puzzles.com/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @require      https://dclamage.github.io/jsoneditor/jsoneditor.min.js
// @resource     JSONEDITOR_CSS https://dclamage.github.io/jsoneditor/jsoneditor.min.css
// @grant        GM_xmlhttpRequest
// @grant        GM_getResourceText
// @grant        GM_addStyle
// @run-at       document-end
// ==/UserScript==

(function() {
    // Load remote JS
    GM_xmlhttpRequest({
        method: "GET",
        url: "https://dclamage.github.io/jsoneditor/jsoneditor.min.js",
        onload: (ev) => {
            let e = document.createElement("script");
            e.innerText = ev.responseText;
            document.head.appendChild(e);
        },
    });

    // Load remote CSS
    // @see https://github.com/Tampermonkey/tampermonkey/issues/835
    const myCss = GM_getResourceText("JSONEDITOR_CSS");
    GM_addStyle(myCss);

    const doShim = function() {
        "use strict";

        // Create the editor div
        const jsondiv = document.createElement("div");
        jsondiv.id = "jsoneditor";
        jsondiv.style =
            "width: 75%; height: 75%; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); background-color: white;";
        jsondiv.hidden = true;
        document.body.appendChild(jsondiv);

        // Create the editor
        var options = {
            modes: ["tree", "code"],
        };
        const editor = new JSONEditor(jsondiv, options);

        const prevOnKeyDown = document.onkeydown;
        document.onkeydown = function(event) {
            if (jsondiv.hidden) {
                if (
                    event.key.toLowerCase() !== "j" ||
                    (!event.ctrlKey && !event.metaKey) ||
                    event.altKey
                ) {
                    prevOnKeyDown(event);
                } else {
                    // set json
                    editor.set(
                        JSON.parse(
                            compressor.decompressFromBase64(exportPuzzle(true))
                        )
                    );
                    jsondiv.hidden = false;
                    event.preventDefault();
                }
            } else {
                if ((event.metaKey || event.ctrlKey) && !event.altKey) {
                    if (event.key.toLowerCase() === "s") {
                        jsondiv.hidden = true;
                        importPuzzle(
                            compressor.compressToBase64(editor.getText()),
                            false
                        );
                        onInputEnd();
                        event.preventDefault();
                    } else if (event.key.toLowerCase() === "x") {
                        jsondiv.hidden = true;
                        event.preventDefault();
                    }
                }
            }
        };

        const origOnMouseMove = document.onmousemove;
        document.onmousemove = function(event) {
            if (jsondiv.hidden) {
                origOnMouseMove(event);
            }
        };

        const origOnMouseDown = document.onmousedown;
        document.onmousedown = function(event) {
            if (jsondiv.hidden) {
                origOnMouseDown(event);
            }
        };
    };

    let intervalId = setInterval(() => {
        if (!document.onmousemove || !document.onmousedown) {
            return;
        }

        clearInterval(intervalId);
        doShim();
    }, 16);
})();