pattern.user.js

// ==UserScript== 
// @name          TagPro Tile Pattern
// @namespace     http://www.reddit.com/u/snaps_/
// @description   Tints every other floor tile a slightly different shade.
// @include       http://tagpro-*.koalabeast.com:* 
// @include       http://tangent.jukejuice.com:* 
// @include       http://*.newcompte.fr:* 
// @license       GPL version 3 or any later version; http://www.gnu.org/copyleft/gpl.html 
// @author        snaps
// @version       0.1.0
// ==/UserScript==

/* User-Defined Variables */

// The color to tint the floor tiles.
var TINT_COLOR = "#663300";

// How much to tint the floor tiles. Should be a number from 0 to 1.
// In practice try values from 0.05 to 1 in increments of .2 to start,
// then smaller amounts to hone in on what you like.
var OPACITY = 0.05;

/* End of User-Defined Variables */


/**
 * Executes `fn` when the relevant parts of the `tagpro` object have
 * been initialized.
 * @param {Function} fn - The function to execute.
 */
function waitForInitialized(fn) {
  if (!tagpro || !tagpro.tiles || !tagpro.tiles.draw || !tagpro.renderer) {
    setTimeout(function() {
      waitForInitialized(fn);
    }, 10);
  } else {
    // Only override if we load early enough.
    if (!tagpro.renderer.layers.backgroundDrawn) {
      fn();
    }
  }
}

waitForInitialized(function() {
  var stdDraw = tagpro.tiles.draw;
  // ids of the tiles we're interested in changing.
  var floorTiles = [2, 11, 12, 17, 18];
  var prefix = "__tinted__";

  /**
   * Set tint of a given canvas element.
   * @param {HTMLElement} image - Canvas element holding the image to tint.
   * @param {string} [color="#000000"] - Color string to tint the tiles, like "#FF0000".
   * @param {number} [opacity="0.01"] - How much to preserve the original image.
   */
  var setTint = function(image, color, opacity) {
    // Adapted from: http://stackoverflow.com/a/4231508/1698058
    var tint = document.createElement("canvas");
    tint.width = image.width;
    tint.height = image.height;

    var tintCtx = tint.getContext("2d");
    tintCtx.fillStyle = color || "#000000";
    tintCtx.fillRect(0, 0, tint.width, tint.height);
    tintCtx.globalCompositeOperation = "destination-atop";
    tintCtx.drawImage(image, 0, 0);

    var imageCtx = image.getContext("2d");
    imageCtx.globalAlpha = opacity || 0.01;
    imageCtx.drawImage(tint, 0, 0);
  }

  /**
   * Creates the tinted texture for the tile of the given id and sets
   * the relevant values such that the returned value will function in
   * the original `tagpro.tiles.draw` function.
   * @param {(number|string)} tileId - The original id of the tile to set information for.
   * @return {string} - The new id to use for the tile.
   */
  var setTintedTexture = function(tileId) {
    var originalTileId = tileId;
    tileId = prefix + originalTileId;
    if (!tagpro.tiles[tileId] || !PIXI.TextureCache[tileId]) {
      var tile = tagpro.tiles[originalTileId];
      tagpro.tiles[tileId] = tile;

      var spread = tile.spread || 0;
      var elt = document.createElement("canvas");
      elt.width = tile.size || 40;
      elt.height = tile.size || 40;

      var ctx = elt.getContext("2d");
      var sx = tile.x * 40 - spread;
      var sy = tile.y * 40 - spread;
      var size = (tile.size || 40) + spread * 2;
      ctx.drawImage(tagpro.tiles.image, sx, sy, size, size, 0, 0, size, size);
      setTint(elt, TINT_COLOR, OPACITY);
      PIXI.TextureCache[tileId] = PIXI.Texture.fromCanvas(elt);
    }
    return tileId;
  }

  // Override `tagpro.tiles.draw`.
  tagpro.tiles.draw = function() {
    // Only make changes when drawing background tiles.
    if (tagpro.tiles.draw.caller === tagpro.tiles.drawLayers) {
      var loc = arguments[2];
      
      var floorTile = floorTiles.indexOf(arguments[1]) !== -1;
      if (loc && !(typeof arguments[1] == "object") && floorTile) {
        var arrayLoc = {
          x: Math.floor(loc.x / 40),
          y: Math.floor(loc.y / 40)
        };
        if ((arrayLoc.x % 2 == 0 && arrayLoc.y % 2 == 0) ||
            (arrayLoc.x % 2 == 1 && arrayLoc.y % 2 == 1)) {
          arguments[1] = setTintedTexture(arguments[1]);
        }
      }
    }
    return stdDraw.apply(null, arguments);
  }
});