LineDrawer

(function(b) {
    var d = b('<div style="position:fixed;width:300px;padding:4px;z-index:10;background-color:rgba(255,255,255,0.9);border-radius:3px;box-shadow:#222 1px 1px 5px 1px;font: 11pt/12pt sans-serif;color:#555;pointer-events:none;"><p style="margin:3px;font:12pt/16pt monospace;text-align:center;color:#777;">Line Drawer</p><p style="margin:4px;"><br>1. Draw lines with arrow keys</br><br>2. Click a line and press a direction to create a "T" junction</br><br>3. Be kind :)</br><p style="margin:4px;"><p style="margin:4px;"><b></b></p><p style="margin:4px;float:right;color:#777;"><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);
var char = {
vertical:"│",
horizontal: "─",
cross: "┼",
corner: {
topleft: "┌",
topright: "┐",
bottomleft: "└",
bottomright: "┘",
},
t:{
right:"├",
left:"┤",
up:"┴",
down:"┬"
}
};
var clickChar = ""
var firstMove = true;
    var none = jQuery.Event("keydown");
    var left = jQuery.Event("keydown");
    left.which = $.ui.keyCode.LEFT
    left.keyCode = $.ui.keyCode.LEFT
    var right = jQuery.Event("keydown");
    right.which = $.ui.keyCode.RIGHT
    right.keyCode = $.ui.keyCode.RIGHT
    var up = jQuery.Event("keydown");
    up.which = $.ui.keyCode.UP
    up.keyCode = $.ui.keyCode.UP
    var down = jQuery.Event("keydown");
    down.which = $.ui.keyCode.DOWN
    down.keyCode = $.ui.keyCode.DOWN
var previousDir =""
var typeChar = function(c){$($("textarea")[0]).val(c);}

    $(document).on("keyup.funky", function(e) {

var h = ($(".active-cursor")[0].innerText);

        if (e.key == "ArrowRight")

{setLine(h,e.key,char.vertical,char.corner.topleft,char.corner.bottomleft,char.horizontal,char.horizontal,char.horizontal,left,left,left,none,none)}
        if (e.key == "ArrowLeft")
{setLine(h,e.key,char.vertical,char.corner.topright,char.corner.bottomright,char.horizontal,char.horizontal,char.horizontal,left,right,right,none,none)}
        if (e.key == "ArrowUp")
{setLine(h,e.key,char.horizontal,char.vertical,char.vertical,char.corner.bottomleft,char.corner.bottomright,char.vertical,left,none,none,down,down)}
        if (e.key == "ArrowDown")
{setLine(h,e.key,char.horizontal,char.vertical,char.vertical,char.corner.topleft,char.corner.topright,char.vertical,left,none,none,up,up)}

})

var setLine = function(h,key,crosskey,u,d,l,r,a,dir,uu,dd,ll,rr){
    var cc;
if(!firstMove){
    if(h == crosskey ){ cc = char.cross }
    else if( previousDir == "ArrowUp" ) { cc = u;  setTimeout(function() {$($("textarea")[0]).trigger(uu);}, 20)    }
    else if( previousDir == "ArrowDown" ) { cc = d;  setTimeout(function() {$($("textarea")[0]).trigger(dd);}, 20)   }
    else if( previousDir == "ArrowLeft" ) { cc = l;  setTimeout(function() {$($("textarea")[0]).trigger(ll);}, 20)   }
    else if( previousDir == "ArrowRight" ) { cc = r;  setTimeout(function() {$($("textarea")[0]).trigger(rr);}, 20)  }
    else { cc = a}    }
else {
console.log(clickChar)
if(key == "ArrowLeft" && clickChar == char.vertical || clickChar == char.cross ||clickChar == char.corner.topleft ||clickChar == char.corner.topright ||clickChar == char.corner.bottomleft ||clickChar == char.corner.bottomright ){
    $($("textarea")[0]).trigger(right);
   cc=(char.t.left)

}
else if(key == "ArrowRight" && clickChar == char.vertical || clickChar == char.cross ||clickChar == char.corner.topleft ||clickChar == char.corner.topright ||clickChar == char.corner.bottomleft ||clickChar == char.corner.bottomright ){
$($("textarea")[0]).trigger(left);
   cc=(char.t.right)

}
else if(key == "ArrowUp" && clickChar == char.horizontal || clickChar == char.cross ||clickChar == char.corner.topleft ||clickChar == char.corner.topright ||clickChar == char.corner.bottomleft ||clickChar == char.corner.bottomright ){
$($("textarea")[0]).trigger(down);
   cc=(char.t.up)

}
else if(key == "ArrowDown" && clickChar == char.horizontal || clickChar == char.cross ||clickChar == char.corner.topleft ||clickChar == char.corner.topright ||clickChar == char.corner.bottomleft ||clickChar == char.corner.bottomright ){
$($("textarea")[0]).trigger(up);
  cc=(char.t.down)

}
else{firstMove = false; return}

}


  setTimeout(function() {typeChar(cc)}, 20)

    previousDir = key

  setTimeout(function() {$($("textarea")[0]).trigger(dir);}, 30)

  firstMove = false;
}
$(document).on("click",function(){
previousDir = ""
if( $(".active-cursor")[0]){
clickChar =  $(".active-cursor")[0].innerText}
firstMove = true;
})