Shows players viewport of what they can see ingame when zoomed out, can toggle between players and toggle alpha of the box drawn with the arrow keys.

tagpro-viewportviewer.user.js

// ==UserScript==
// @name          TagPro Viewport Viewer
// @namespace     http://www.reddit.com/user/-omicron-/
// @description   Shows players viewport of what they can see ingame when zoomed out, can toggle between players and toggle alpha of the box drawn with the arrow keys.
// @include       http://tagpro-*.koalabeast.com:*
// @include       http://tangent.jukejuice.com:*
// @include       http://maptest.newcompte.fr:*
// @include       http://justletme.be:*
// @license       GPL version 3 or any later version; http://www.gnu.org/copyleft/gpl.html
// @author        OmicroN
// @version       0.3
// ==/UserScript==
(function() {

  function contentEval(source)
  {
    // Check for function input.
    if ('function' == typeof source) {
      // Execute this function with no arguments, by adding parentheses.
      // One set around the function, required for valid syntax, and a
      // second empty set calls the surrounded function.
      source = '(' + source + ')();'
    }

    // Create a script node holding this  source code.
    var script = document.createElement('script');
    script.setAttribute("type", "application/javascript");
    script.textContent = source;

    // Insert the script node into the page, so it will run, and immediately
    // remove it to clean up.
    document.body.appendChild(script);
    document.body.removeChild(script);
  }

  // The actual script functionality
  function viewportScript()
  {
    //########## EDITABLE VARIABLES ##############//

    // Toggle between drawing a filled in rectangle or a stroked rectangle of the viewport
    var fillRect = true;

    // Default opacity to draw viewport boxes on script load.  (0 transparent - 1 solid) [use increments of 0.05] {Togglable on screen with up/down arrow keys once loaded}
    var alpha = .1;

    // Default who to start drawing viewport on script load.  (-1 Flag Carriers, 0 All, 1-8 Players) {Togglable on screen with left/right arrow keys once loaded}
    var playertoggle = -1;

    //######## END EDITABLE VARIABLES ############//


    var timer = new Date().getTime();

    function objectLength(obj) {
      var result = 0;

      for(var prop in obj) {
        if (obj.hasOwnProperty(prop)) {
          result++;
        }
      }

      return result;
    }

    function waitUntilGameLoaded()
    {
      // Check if game is loaded and players are inside
      if(typeof tagpro.players !== "undefined" && objectLength(tagpro.players) > 0)
      {
        (function() {
          var proxied_drawWithZoom = tagpro.tiles.drawWithZoom;

          tagpro.tiles.drawWithZoom = function(e, t, n, r, i, s) {
            if (tagpro.spectator) {
              if (t == 'redball' || t == 'blueball') {
                if (new Date().getTime() - timer >= 5) {
                  timer = new Date().getTime();
                  e.globalAlpha = alpha //(tagpro.zoom == 1) ? 0 : (tagpro.zoom + 2) * .10;

                  if (playertoggle && playertoggle != -1) {
                    var pid = Object.keys(tagpro.players)[playertoggle - 1];

                    if ( ! tagpro.players[pid].dead) {
                      player = {x: 0, y: 0};
                      player.x = ((tagpro.players[pid].x - tagpro.viewPort.source.x) / tagpro.zoom) + ($('#viewPort').width() / 2);
                      player.y = ((tagpro.players[pid].y - tagpro.viewPort.source.y) / tagpro.zoom) + ($('#viewPort').height() / 2);

                      e.fillStyle = e.strokeStyle = (tagpro.players[pid].team == 1) ? '#FF0000' : '#0000FF';

                      if (fillRect) {
                        e.fillRect(player.x - (640 / tagpro.zoom), player.y - (400 / tagpro.zoom), 1280 / tagpro.zoom, 800 / tagpro.zoom);
                      } else {
                        e.strokeRect(player.x - (640 / tagpro.zoom), player.y - (400 / tagpro.zoom), 1280 / tagpro.zoom, 800 / tagpro.zoom);
                      }
                    }
                  } else {
                    for (var pid in tagpro.players) {
                      if (tagpro.players[pid].dead) continue;
                      if (playertoggle == -1 && tagpro.players[pid].flag == null) continue;

                      player = {x: 0, y: 0};
                      player.x = ((tagpro.players[pid].x - tagpro.viewPort.source.x) / tagpro.zoom) + ($('#viewPort').width() / 2);
                      player.y = ((tagpro.players[pid].y - tagpro.viewPort.source.y) / tagpro.zoom) + ($('#viewPort').height() / 2);

                      e.fillStyle = e.strokeStyle = (tagpro.players[pid].team == 1) ? '#FF0000' : '#0000FF';

                      if (fillRect) {
                        e.fillRect(player.x - (640 / tagpro.zoom), player.y - (400 / tagpro.zoom), 1280 / tagpro.zoom, 800 / tagpro.zoom);
                      } else {
                        e.strokeRect(player.x - (640 / tagpro.zoom), player.y - (400 / tagpro.zoom), 1280 / tagpro.zoom, 800 / tagpro.zoom);
                      }
                    }
                  }

                  e.globalAlpha = 1;
                }
              }
            }

            return proxied_drawWithZoom.apply(this, arguments);
          };
        })();

        $(document).keyup(function(e) {
          if ( ! tagpro.disableControls) {
            if (e.keyCode == 37) { // Left
              playertoggle--;

              if (playertoggle < -1) {
                playertoggle = objectLength(tagpro.players);
              }
            } else if (e.keyCode == 39) { // Right
              playertoggle++;

              if (playertoggle > objectLength(tagpro.players)) {
                playertoggle = -1;
              }
            } else if (e.keyCode == 38) { // Up
              alpha += .05;

              if (alpha > 1) alpha = 0;
            } else if (e.keyCode == 40) { // Down
              alpha -= .05;

              if (alpha < 0) alpha = 1;
            }
          }
        });
      }
      else
      {
        // Loop the function to check for game to be loaded every second
        setTimeout(function(){
            waitUntilGameLoaded();
        }, 1000);
      }
    }

    // Call the function to check if game is loaded, players are inside, and execute our custom code
    waitUntilGameLoaded();
  }

  contentEval(viewportScript);
})();