Difference between revisions of "MediaWiki:LocMaps.js"

Revision as of 15:09, 8 July 2019

(function() {

var zones = {
  'Butcherblock Mountains': {
    height: 480,
    image: 'Butcherblock-v3.jpg', 
    test: {
      interval: 1000,
      maxX: 3000,
      maxY: 3000,
      minX: -3000,
      minY: -3000
    },
    width: 500,
    zeroX: 251,
    zeroY: 240,
    zoomX: .073,
    zoomY: .0727
  },
  'East Commonlands': {
    height: 279,
    image: 'Map_eastcommons.jpg',
    test: {
      interval: 1000,
      maxX: 5000,
      maxY: 2000,
      minX: -2000,
      minY: -2000
    },
    width: 642,
    zeroX: 469.3,
    zeroY: 133,
    zoomX: 0.0887,
    zoomY: 0.0887
  },
  'Eastern Plains of Karana': {
    height: 554,
    image: 'Map_ekarana.jpg',
    test: {
      interval: 1000,
      maxX: 2000,
      maxY: 2000,
      minX: -4000,
      minY: -5000,
    },
    width: 450,
    zeroX: 119.5,
    zeroY: 193,
    zoomX: 0.0793,
    zoomY: 0.0788
  },
  'Eastern Wastes': {
      height: 452,
      image: 'Map_eastern_wastes.jpg',
      test: {
        interval: 1000,
        maxX: 7000,
        maxY: 1000,
        minX: -6000,
        minY: -9000
      },
      width: 550,
      zeroX: 284,
      zeroY: 62,
      zoomX: 0.038,
      zoomY: 0.038
  },
  'Greater Faydark': {
      height: 532,
      image: 'Greaterfaydark.jpg', 
      test: {
        interval: 1000,
        maxX: 3000,
        maxY: 2000,
        minX: -3000,
        minY: -2000
      },
      width: 550,
      zeroX: 269,
      zeroY: 255,
      zoomX: .089,
      zoomY: .089
  },
  'Halas': {
    height: 434,
    image: 'Zone_halas.jpg',
    test: {
	interval: 200,
	maxX: 600,
	maxY: 800,
	minX: -600,
	minY: -200,
    },
    width: 550,
    zeroX: 252.2,
    zeroY: 346,
    zoomX: 0.458,
    zoomY: 0.46
  },
  'Kithicor Forest': {
    height: 333,
    image: 'Map_kithicor.jpg',
    test: {
        interval: 1000,
        maxX: 5000,
        maxY: 3000,
        minX: -1000,
        minY: -2000
    },
    width: 560,
    zeroX: 449.5,
    zeroY: 198,
    zoomX: 0.0875,
    zoomY: 0.089
  },
  'Northern Felwithe': {
    height: 385,
    image: 'Nfelwithe.jpg',
	test: {
        interval: 100,
        maxX: 100,
        maxY: 400,
        minX: -800,
        minY: -300
   },
    width: 589,
    zeroX: 109,
    zeroY: 217,
    zoomX: 0.547,
    zoomY: 0.55
  },
  'North Qeynos': {
     height: 319,
     image: 'Zone_nqeynos.jpg', 
     test: {
       interval: 200,
       maxX: 400,
       maxY: 400,
       minX: -600,
       minY: -200
     },
     width: 458,
     zeroX: 204,
     zeroY: 189,
     zoomX: .39,
     zoomY: .39
  },
  'Oggok': {
     height: 440,
     image: 'Oggok.jpg', 
     test: {
       interval: 200,
       maxX: 1000,
       maxY: 800,
       minX: -400,
       minY: -400
     },
     width: 536,
     zeroX: 361,
     zeroY: 305,
     zoomX: .3155,
     zoomY: .315
  },
  'Rivervale': { 
    height: 540,
    image: 'Rivervale.jpg', 
    test: {
      interval: 200,
      maxX: 200,
      maxY: 600,
      minX: -800,
      minY: -400,
    },
    width: 484,
    zeroX: 85,
    zeroY: 287,
    zoomX: 0.522,
    zoomY: 0.517
  },
  'South Kaladim': {
    height: 341,
    image: 'Skaladim.jpg',
    test: {
      interval: 100,
      maxX: 600,
      maxY: 500,
      minX: -500,
      minY: -200
    },
    width: 550,
    zeroX: 291,
    zeroY: 238,
    zoomX: 0.51,
    zoomY:0.52
  },
  'South Qeynos': {
    height: 426,
    image: 'Zone_sqeynos.jpg',
    test: {
        interval: 200,
        maxX: 200,
        maxY: 600,
        minX: -600,
        minY: -400
    },
    width: 423,
    zeroX: 107,
    zeroY: 259,
    zoomX: .395,
    zoomY: .39,
  },
  'Southern Felwithe': {
    height: 377,
    image: 'Sfelwithe.jpg',
    test: {
        interval: 100,
        maxX: -0,
        maxY: 800,
        minX: -900,
       minY: 0
    },
    width: 400,
    zeroX: -155,
    zeroY: 473,
    zoomX: 0.58,
    zoomY: 0.584
  },
  'West Commonlands': {
    height: 284,
    image: 'Zone_westcommons.jpg',
    test: {
        interval: 1000,
        maxX: 5000,
        maxY: 2000,
        minX: -2000,
        minY: -2000,
    },
    width: 649,
    zeroX: 435.5,
    zeroY: 126.5,
    zoomX: 0.096,
    zoomY: 0.096
  }
};

// Regex to separate out multiple locs from a single string
var locSeperationRegex = /(\( *\-?\d+, *\-?\d+(?: ?, ?\-?\d+)?\)?)/g;

// Regex to parse the individual y/x dimensions from a single loc string
var locParseRegex = /\( *(\-?\d+), *(\-?\d+)\)/;

/**
 * Helper function for distinguishing locs (from other bits of text near locs)
 */
var isALoc = function(bit) { 
   return bit.includes('(') && 
          bit.includes(')') && 
          bit.includes(',')
};

/**
 * Draws a red "X" on the map at the provided coordinate
 */
var makeX = function(x, y, zone) {
  $('img[alt="' + zone.image + '"]')
    .parent()
    .css({position: 'absolute'})
    .append(
      $('<div class="x">x</div>')
        .css({
          color: 'red',
          fontSize: '2em',
          fontWeight: 'bold',
          left: (zone.zeroX || 0) + x * -1 * (zone.zoomX || 0.1),
          position: 'absolute',
          top: (zone.zeroY || 0) + y * -1 * (zone.zoomY || 0.1)
        }));
};

/**
 * Adds a loc map to the page (presumably in response to a user
 * mousing over a loc map link)
 */
var addMap = function($locTd, imageName, width, height) {
  if ($('.map-wrapper').length) return;

  $locTd.append(
    '<div class="map-wrapper" style="position:relative">'+
      '<img alt="' + imageName + '" ' +
           'src="/images/'+ imageName + '" ' +
           'width="' + width + '" ' +
           'height="'+ height + '" ' +
           'class="thumbborder" ' +
           'title="' + imageName + '">' +
    '</div>'
  );
}

// Define two helper functions for building new zone definitions

// 1) Use this function to find the correct 0,0 point
window.testZeroZero = function(zone) {
  var $locTd = $('b:contains("Location:")').parent();
  $('.x').remove();
  $('img[alt="' + zone.image + '"]').show()
  addMap($locTd, zone.image, zone.width, zone.height);
  makeX(0, 0, zone);
};

// 2) Use this function to generate a grid of alignment of X's
window.testGrid = function(zone) {
  var $locTd = $('b:contains("Location:")').parent();
  $('.x').remove();
  for (var x = zone.test.maxX; x >= zone.test.minX; x -= zone.test.interval) {
    for (var y = zone.test.maxY; y >= zone.test.minY; y -= zone.test.interval) {
      addMap($locTd, zone.image, zone.width, zone.height);
      makeX(x, y, zone);
    }
  };
}

try {
  // Find the zone name
  var $zoneTd = $('b:contains("Zone:")').parent().text();
  var zoneName = $zoneTd.split('Zone:')[1].trim();

  // Do we have data for that zone's map?
  var zone = zones[zoneName];
  if (!zone) return;  // If not, stop here

  // Get the mob's loc(s)
  var $locTd = $('b:contains("Location:")').parent();
  var locs = $locTd.text()
    .split(locSeperationRegex)
    .filter(isALoc);

  // Add the mouseover link
  var $link = $(' <a href="#">(Show on Map)</a>');

  // When it's moused-over, show the map
  $link
    .on('mouseover', function(e) {
      addMap($locTd, zone.image, zone.width, zone.height);
      $.each(locs, function(i, locText) {
        var match = locText.match(locParseRegex);
        var y = match[1]
        var x = match[2];
        makeX(x, y, zone);
      });
    })
    .on('mouseleave', function(e) {
      $('.map-wrapper').remove();
    });
  $locTd.append($link) 
} catch (err) {/* Didn't work, move on */}


})();