miketrethewey / Super Metroid Map Rando Swap Logic Node

// ==UserScript==
// @name        Super Metroid Map Rando Swap Logic Node
// @namespace   https://openuserjs.org/users/miketrethewey
// @version     1.0.0
// @description Swaps the Node selections in SM Map Rando
// @author      Minnie A. Trethewey
// @match       https://maprando.com/logic*
// @match       https://dev.maprando.com/logic*
// @require     https://code.jquery.com/jquery-3.7.1.slim.min.js
// @copyright   2023, miketrethewey (https://openuserjs.org/users/miketrethewey)
// @license     MIT
// @grant       none
// ==/UserScript==

// ==OpenUserJS==
// @author  miketrethewey
// ==/OpenUserJS==

(function() {
    let fromNode = $("#fromNode")[0];
    let toNode = $("#toNode")[0];
    function doTheThing() {
        let fromSelected = fromNode.selectedIndex;
        let toSelected = toNode.selectedIndex;
        if(fromSelected != toSelected) {
            fromNode.selectedIndex = toSelected;
            fromNode.onchange();
            toNode.selectedIndex = fromSelected;
            toNode.onchange();
        }
    }

    // Build a button to Randomize settings
    let button = document.createElement("button");
    let img = document.createElement("img");
    img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAWCAYAAAAb+hYkAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAB7SURBVDhPzZFdDoAgDIMHx/PAXg/DpGT8SacvfglgwNJuCEinpPK5JeRpJwjH/R8IrIMVxv4WFzPHvIdRtpRY1iH3P2ha3ke0tTRnOGBWjNoIBripCLexqMjb7mm8lbM30Xcea7FxbN21Jk9eVTOCxulNRyin5TvyjiIXG0RJowthnggAAAAASUVORK5CYII=";
    img.style = "image-rendering:pixelated;transform:scale(4);";
    button.style = "background-color:transparent;border:0;position:relative;top:24px;";
    button.appendChild(img);
    button.onclick = doTheThing;
    button.type = "button";

    // Add it to the header
    let headers = null;
    let header = null;
    headers = document.getElementsByTagName("h3");
    header = headers[0];
    header.appendChild(button);

    // Make new container for From Node & To Node
    let rows = $(".row");

    let divTable = document.createElement("div");
    divTable.style = "display:table;width:100%;";

    let divTableBody = document.createElement("div");
    divTableBody.style = "display:table-row-group;";

    let divTableRow = document.createElement("div");
    divTableRow.style = "display:table-row;width:100%;";

    let rowsContainer = document.createElement("div"); // divTableRow
    rowsContainer.style = "display:table-cell;width:50%;";
    rowsContainer.appendChild(rows[4-1]); // From Node
    rowsContainer.appendChild(rows[5-1]); // To Node

    let buttonContainer = document.createElement("div");
    buttonContainer.style = "display:table-cell;";
    buttonContainer.appendChild(button);

    divTableRow.appendChild(rowsContainer);
    divTableRow.appendChild(buttonContainer);

    divTableBody.appendChild(divTableRow);
    divTable.appendChild(divTableBody);

    rows[3-1].parentNode.appendChild(divTable);
})();