Difference between revisions of "MediaWiki:LocMaps.js"

Revision as of 16:15, 11 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
  },
  'Kelethin': {
    height: 519,
    image: 'Kelethin.jpg', 
    test: {
      interval: 200,
      maxX: 800,
      maxY: 1000,
      minX: -600,
      minY: -600
    },
    width: 442,
    zeroX: 237,
    zeroY: 312,
    zoomX: 0.264,
    zoomY: 0.264
  },
  '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
  },
  'Lake Rathetear': {
    height: 450,
    image: 'Map_lakerathetear.jpg',
    test: {
      interval: 1000,
      maxX: 3000,
      maxY: 5000,
      minX: -3000,
      minY: -2000
    },
    width: 450,
    zeroX: 247.3,
    zeroY: 342.4,
    zoomX: 0.0755,
    zoomY: 0.0755
  },
  '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
  },
  'Northern Karana': {
    height: 476,
    image: 'Map_nkarana.jpg',
    test: {
      interval: 1000,
      maxX: 4000,
      maxY: 2000,
      minX: -3000,
      minY: -5000,
    },
    width: 500,
    zeroX: 263.3,
    zeroY: 135.5,
    zoomX: 0.071,
    zoomY: 0.0705
  },
  '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
  },
  'Qeynos Hills': {
    height: 575,
    image: 'Qeynoshills.jpg',
    test: {
      interval: 1000,
      maxX: 2000,
      maxY: 6000,
      minX: -2000,
      minY: -1000,
    },
    width: 324,
    zeroX: 136,
    zeroY: 516.3,
    zoomX: 0.0945,
    zoomY: 0.094
  },
  '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
  },
  'Surefall Glade': {
    height: 539,
    image: 'Surefallglade.jpg',
    test: {
      interval: 200,
      maxX: 400,
      maxY: 1000,
      minX: -800,
      minY: -800
   },
    width: 330,
    zeroX: 97,
    zeroY: 306,
    zoomX: 0.323,
    zoomY: 0.32
  },
  '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
  },
  'Western Plains of Karana': {
    height: 422,
    image: 'Zone_westkarana.jpg',
    test: {
      interval: 1000,
      maxX: 0,
      maxY: 2000,
      minX: -17000,
      minY: -5000,
    },
    width: 1058,
    zeroX: -21.5,
    zeroY: 107,
    zoomX: 0.06375,
    zoomY: 0.0641
  }
};

// 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>'
  );
}

/**
 * Kelethin is special because it has its own map, but is part of the
 * Greater Faydark zone.  This variable/function helps determine whether
 * a provided loc is within the boundaries of Kelethin, and so should 
 * use its map.
 */
var kelethin = {
  maxX: 1000,
  minX: -700,
  maxY: 1200,
  minY: -800
};

var locIsWithinKelethin = function(loc) {
  return loc.x < kelethin.maxX && 
         loc.x > kelethin.minX &&
         loc.y < kelethin.maxY &&
         loc.y > kelethin.minY;
}

var getZoneData = function(zoneName, locs) {
  var zoneData = zones[zoneName];
  if (zoneName === 'Greater Faydark'  ) {
    var allAreInKelethin = true;
    // wish I had ES6 [].every
    $.each(locs, function(i, loc) {
      allAreInGFay = allAreInKelethin && locIsWithinKelethin(loc);
    });
    if (allAreInKelethin) zoneData = zones.Kelethin;
  };
  return zoneData;
};

// 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 {
  // Get the mob's loc(s)
  var $locTd = $('b:contains("Location:")').parent();
  var locs = $locTd.text()
    .split(locSeperationRegex)
    .filter(isALoc);
  if (!locs.length) return;
  var parsedLocs = [];
  $.each(locs, function(i, locText) {
    var match = locText.match(locParseRegex);
    parsedLocs.map({x: match[2], y: match[1] });
  });

  // 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 = getZoneData(zoneName, parsedLocs);
  if (!zone) return;  // If not, stop here

  // 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(parsedLocs, function(i, loc) {
        makeX(loc.x, loc.y, zone);
      });
    })
    .on('mouseleave', function(e) {
      $('.map-wrapper').remove();
    });
  $locTd.append($link) 
} catch (err) {/* Didn't work, move on */}


})();