Super Mario YWOT Builder

(function (b) {
    var d = b('<div style="text-shadow: 0px 0px 5px #000000;position:fixed;width:300px;padding:4px;z-index:10;color:white;background:url(https://i.imgur.com/hxcxJ3Y.gif);background-size: cover;background-repeat: no-repeat;background-position-x: center;border-radius:3px;box-shadow:#222 1px 1px 5px 1px;font: 11pt/12pt sans-serif;pointer-events:none;"><p style="margin:3px;font:12pt/16pt monospace;text-align:center;">Super Mario Builder Alpha Version 0.4</p><p style="margin:4px;"><br>1. Works like the art blocks script</br><p style="margin:4px;"><p style="margin:4px;"><b></b></p><p style="margin:4px;float:right;"><i>~Poopman</i></p></div>').appendTo("body");
    d.css({
        top: b(window).height() / 2 - d.height() / 2,
        left: b(window).width() / 2 - d.width() / 2
    });
    b(document).one("mousedown.colibri-jslink", function () {
        d.fadeOut(100, function () {
            d.remove()

        })
    })
})(window.jQuery);

$("body").append("<style>" +

    ".m-block-dud {color: transparent;background-image: url(https://i.imgur.com/6Dxur3k.png);background-size: cover}" +
    ".m-block-stone {color: transparent;background-image: url(https://i.imgur.com/14EboDy.png);background-size: cover}" +
    ".m-bush-edge-right {color: transparent;background-image: url(https://i.imgur.com/gOBRvl6.png);background-size: cover}" +
    ".m-bush-edge-left {color: transparent;background-image: url(https://i.imgur.com/UUa6ANH.png);background-size: cover}" +
    ".m-grass {color: transparent;background-image: url(https://i.imgur.com/ABZ9SiT.jpg);background-size: cover}" +
    ".m-grass-edge-right {color: transparent;background-image: url(https://i.imgur.com/t3ptWaJ.png);background-size: cover}" +
    ".m-grass-edge-left {color: transparent;background-image: url(https://i.imgur.com/Ah7hKhO.png);background-size: cover}" +
    ".m-dirt {color: transparent;background-image: url(https://i.imgur.com/xGOqoS3.jpg);background-size: cover;}" +
    ".m-coin {color: transparent;background-image: url(https://i.imgur.com/Wrq208j.gif);background-size: contain;background-repeat: no-repeat;} " +
    ".m-lucky {color: transparent;background-image: url(https://i.imgur.com/n25g2Jw.gif);background-size: contain;background-repeat: no-repeat;}" +
    ".m-mario {background-image:url(https://i.imgur.com/786205S.png);color: transparent;background-size: cover;background-repeat: no-repeat;background-position-x: center;}" +
    ".m-start{color: transparent}div#m-target {position: fixed;width: 10px;height: 16px;background:transparent;background-size: cover;background-position-x: center;}" +
    ".m-invisible-platform{color:transparent;background:#bbb}" +
    ".m-invisible-kill{color: transparent;background-image: url(https://i.imgur.com/7s36bmo.jpg);background-size: cover}" +
    ".m-bush {color: transparent;background-image: url(https://i.imgur.com/JtJv50x.png);background-size: cover;background-position-x: center;}" +
    ".m-goomba {color: transparent;background-image: url(https://i.imgur.com/izaqvY0.png);background-size: contain;background-repeat: no-repeat;background-position-x: center;background-position-y: bottom;}" +
    ".m-lava {color: transparent;background-image: url(https://i.imgur.com/S10Q75m.gif);background-size: contain;background-repeat: no-repeat;background-position-x: center;background-position-y: bottom;}" +
    ".m-invisible-dud {color: transparent;background-image: url(https://i.imgur.com/6Dxur3k.png);background-size: cover;opacity:0.5}" +
    '.m-pipe-vertical-top-left  {color: transparent;background-image: url(https://i.imgur.com/qD9qHUU.png);background-size: cover;background-position-x: center;}'+
    '.m-pipe-vertical-top-right  {color: transparent;background-image: url(https://i.imgur.com/g0r1e0W.png);background-size: cover;background-position-x: center;}'+
    '.m-pipe-vertical-left      {color: transparent;background-image: url(https://i.imgur.com/mj3zKaX.png);background-size: cover;background-position-x: center;}'+
    '.m-pipe-vertical-right      {color: transparent;background-image: url(https://i.imgur.com/AlCEKLe.png);background-size: cover;background-position-x: center;}'+
    "</style>");


setInterval(function () {
    styleSheet();
}, 1000)



function styleSheet() {
    var blocks = "█▓▫▢⛹░◠▄▅╮╭▦▤xᴥ▣⣿╗╒│║".split("");
    var classes = ["m-grass", "m-dirt", "m-coin", "m-lucky", "m-mario", "m-invisible-platform", "m-bush", "m-grass-edge-right", "m-grass-edge-left", "m-bush-edge-right", "m-bush-edge-left", "m-block-dud", "m-block-stone", "m-invisible-kill", "m-goomba", "m-invisible-dud","m-lava","m-pipe-vertical-top-right", "m-pipe-vertical-top-left", "m-pipe-vertical-left", "m-pipe-vertical-right"]



    for (i = 0; i < blocks.length; i++) {
        $("." + classes[i]).removeClass(classes[i])
        $("#unicode-topbar button:contains('" + blocks[i] + "'),.text-button:contains('" + blocks[i] + "'),td:contains('" + blocks[i] + "')").addClass(classes[i]);
    }






}

(I = $("textarea")[0]).oninput = function () {
    0 <= (V = I.value) & 10 > V && (I.value = $("#unicode-topbar button")[V].innerText)
};
$("body").append('<style>#unicode-sidebar .selected {background: blue;color: white;border: blue;}#unicode-topbar button { resize: none; width: 17px;height: 25px;display: inline;}#unicode-topbar li {display: inline-block;padding: 3px;}#artblocks li {float: left;text-decoration: none;width: 16px;height: 20px;display: block;padding: 21px;}#artblocks { padding-bottom: 50px;}#unicode-instructions {display: inline-block; margin-top: 50px; height: max-content; padding-bottom: 20px;}</style>')
$("body").append('<div id="unicode-sidebar" style="position: fixed;top: 0;left: 0;display: block;width: 400px;height: 100%;background: #ddd;overflow-y: scroll;user-select: text;padding: 10px;font-family: monospace;"><div id="unicode-topbar" style="width: inherit;position: fixed;top: 0px;left:0px;display: block;height: 25px;background: #bbb;user-select: text;padding: 10px;font-family: monospace;"><ul><li>0:<button id="ta0" rows = 1 cols = 1 maxlength = 1>⛹</button></li><li>1:<button id="ta1" rows = 1 cols = 1 maxlength = 1>▅</button></li><li>2:<button id="ta2" rows = 1 cols = 1 maxlength = 1>█</button></li><li>3:<button id="ta3" rows = 1 cols = 1 maxlength = 1>▄</button></li><li>4:<button id="ta4" rows = 1 cols = 1 maxlength = 1>▓</button></li><li>5:<button id="ta5" rows = 1 cols = 1 maxlength = 1>╭</button></li><li>6:<button id="ta6" rows = 1 cols = 1 maxlength = 1>◠</button></li><li>7:<button id="ta7" rows = 1 cols = 1 maxlength = 1>╮</button></li><li>8:<button id="ta8" rows = 1 cols = 1 maxlength = 1>▦</button></li><li>9:<button id="ta9" rows = 1 cols = 1 maxlength = 1>▤</button></li></ul></div><div id="unicode-instructions"><h1>instructions</h1><p>Type 0-9 on your keyboard to draw. The top-bar corresponds with what will be written when typing 0-9. to change the top bar symboles, click next to the number you would want to change and then click on a symbole you want to replace it with.</p></div><ul id="artblocks"></ul></div>')

var artblocks = '▅█▄╭◠╮▦▤▢▫x░⛹ᴥ▣⣿╗╒│║'
var desc = ["grass left", "grass", "grass right", "bush left", "bush", "bush right", "dud", "stone", "lucky", "coin", "kill", "invisible", "player start", "goomba", "invisible dud","lava","pipe vertical top right", " pipe vertical top left", "pipe vertical left", "pipe vertical right"]
for (var i = 0; i < artblocks.length; i++) {
    $("#artblocks").append('<li><button class="text-button">' + artblocks[i] + '</button>' + desc[i] + '</li>')
}
$("#unicode-topbar button").on("click", function () {
    if ($(this).hasClass("selected")) {
        $(this).removeClass("selected");
    }
    else {
        $("#unicode-topbar .selected").removeClass("selected");
        $(this).addClass("selected");
        setblock();
    }
})
$("#artblocks button").on("click", function () {
    if ($(this).hasClass("selected")) {
        $(this).removeClass("selected");
    }
    else {
        $("#artblocks .selected").removeClass("selected")
        $(this).addClass("selected");
        setblock();
    }
})
var setblock = function () {
    if ($("#unicode-topbar .selected")[0] && $("#artblocks .selected")[0]) {
        $("#unicode-topbar .selected")[0].innerText = $("#artblocks .selected")[0].innerText;
    }
}