Adds arrows that indicate what direction is being pressed for streamers

tagpro-arrows.user.js

// ==UserScript==
// @name          TagPro OnScreen Arrows
// @namespace     http://www.reddit.com/user/thevdude/
// @description   Adds indicators to show what arrows are being pressed for streamers
// @include       http://tagpro-*.koalabeast.com:*
// @include       http://tangent.jukejuice.com:*
// @include       http://maptest.newcompte.fr:*
// @include       http://justletme.be:*
// @copyright     2014+ thevdude
// @author        thevdude
// @version       1.1
// ==/UserScript==

// set to false to keep arrows visible and displaying presses of last followed player while centered
var centerHide = true;

// jQuery draggable plugin
(function($) {
    $.fn.drags = function(opt) {

        opt = $.extend({handle:"",cursor:"move"}, opt);

        if(opt.handle === "") {
            var $el = this;
        } else {
            var $el = this.find(opt.handle);
        }

        return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
            if(opt.handle === "") {
                var $drag = $(this).addClass('draggable');
            } else {
                var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
            }
            var z_idx = $drag.css('z-index'),
                drg_h = $drag.outerHeight(),
                drg_w = $drag.outerWidth(),
                pos_y = $drag.offset().top + drg_h - e.pageY,
                pos_x = $drag.offset().left + drg_w - e.pageX;
            $drag.css('z-index', 1000).parents().on("mousemove", function(e) {
                $('.draggable').offset({
                    top:e.pageY + pos_y - drg_h,
                    left:e.pageX + pos_x - drg_w
                }).on("mouseup", function() {
                    $(this).removeClass('draggable').css('z-index', z_idx);
                });
            });
            e.preventDefault(); // disable selection
        }).on("mouseup", function() {
            if(opt.handle === "") {
                $(this).removeClass('draggable');
            } else {
                $(this).removeClass('active-handle').parent().removeClass('draggable');
            }
        });

    }
})(jQuery);

var left = false,
    right = false,
    up = false,
    down = false,
    playerId

function setArrowColor(team){
    switch (team) {
      case 1: // RED
        $('.arrowkeys').css('background-color', 'rgb(200,0,0)');
        $('.uparrow').css('border-bottom-color', 'rgb(255,85,85)');
        $('.leftarrow').css('border-right-color', 'rgb(255,85,85)');
        $('.downarrow').css('border-top-color', 'rgb(255,85,85)');
        $('.rightarrow').css('border-left-color', 'rgb(255,85,85)');
        break;
      case 2: // BLUE
        $('.arrowkeys').css('background-color', 'rgb(0,0,200)');
        $('.uparrow').css('border-bottom-color', 'rgb(85,85,255)');
        $('.leftarrow').css('border-right-color', 'rgb(85,85,255)');
        $('.downarrow').css('border-top-color', 'rgb(85,85,255)');
        $('.rightarrow').css('border-left-color', 'rgb(85,85,255)');
    }
}

function toggleArrows(dir, toggle){
  switch(dir) {
    case 'up':
      toggle ? $('.arrowup').css('opacity', '.8') : $('.arrowup').css('opacity', '.3');
      break;
    case 'left':
      toggle ? $('.arrowleft').css('opacity', '.8') : $('.arrowleft').css('opacity', '.3');
      break;
    case 'down':
      toggle ? $('.arrowdown').css('opacity', '.8') : $('.arrowdown').css('opacity', '.3');
      break;
    case 'right':
      toggle ? $('.arrowright').css('opacity', '.8') : $('.arrowright').css('opacity', '.3');
  }
}

function getArrows (){
  if(tagpro.viewPort.followPlayer || centerHide == false){
    $('.arrowsTable').css('display', 'table')
    playerId = tagpro.playerId
    setArrowColor(tagpro.players[playerId].team);
    if(tagpro.players[playerId].left && !left){
      left = true;
      toggleArrows("left", true)
    }
    if(tagpro.players[playerId].up && !up){
      up = true;
      toggleArrows("up", true)
    }
    if(tagpro.players[playerId].right && !right){
      right = true;
      toggleArrows("right", true)
    }
    if(tagpro.players[playerId].down && !down){
      down = true;
      toggleArrows("down", true)
    }

    if(!tagpro.players[playerId].left && left){
      left = false;
      toggleArrows("left", false)
    }
    if(!tagpro.players[playerId].up && up){
      up = false;
      toggleArrows("up", false)
    }
    if(!tagpro.players[playerId].right && right){
      right = false;
      toggleArrows("right", false)
    }
    if(!tagpro.players[playerId].down && down){
      down = false;
      toggleArrows("down", false)
    }
  } else if (centerHide) {
    $('.arrowsTable').css('display', 'none');
  }
}

function isOffset(){
  if ($('#viewPort').offset().left > 0) {
    keysCSS = '<style type="text/css">.arrowkeys{opacity: 0.3;background-color: rgb(255, 0, 0);width: 80px;height: 80px;border-radius: 15px;transition: .1s;}.arrow{width:0;height:0;background:transparent;border: 10px solid transparent;margin-top:30px;margin-left:30px;position:absolute;}.uparrow{border-bottom-color: rgb(125,125,125);margin-top: 25px;}.leftarrow{border-right-color: rgb(125,125,125);margin-left: 25px;}.downarrow{border-top-color: rgb(125,125,125);margin-top: 35px;}.rightarrow{border-left-color: rgb(125,125,125);margin-left: 35px;}</style>'
    
    keysHTML = '<table class="arrowsTable"><tr><td></td><td><div class="arrowkeys arrowup"><div class="arrow uparrow"></div></div></td><td></td></tr><tr><td><div class="arrowkeys arrowleft"><div class="arrow leftarrow"></div></div></td><td><div class="arrowkeys arrowdown"><div class="arrow downarrow"></div></div></td><td><div class="arrowkeys arrowright"><div class="arrow rightarrow"></div></div></td></tr></table>'
    $('head').append(keysCSS);
    $('body').append(keysHTML);
    $('.arrowsTable').drags();

    // You can directly set this instead
    $('.arrowsTable').css('margin-top', (-1 * ($('.arrowsTable').height() + 20)) + "px")
    $('.arrowsTable').css('margin-left', ($('#viewPort').offset().left + $('#viewPort').width() - $('.arrowsTable').width()) + "px")
    $(window).resize(function(){
      setTimeout(function(){
        $('.arrowsTable').css('margin-left', ($('#viewPort').offset().left + $('#viewPort').width() - $('.arrowsTable').width()) + "px")
      }, 1000);
    });

    setInterval(getArrows, 100);
  } else {
    setTimeout(isOffset, 100);
  }
}

isOffset();