Difference between revisions of "MediaWiki:LocMaps.js"

Revision as of 19:28, 7 July 2019

(function() {

var zones = {
  '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 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
  },
  '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
  },
/*  'Misty Thicket':{
    height: 341,
      image: 'Map_mistythicket.jpg', 
      modifier: ?,
      test: {
        maxX: 2000,
        maxY: 1000,
        minX: -3000,
        minY: -1000
      },
      width: 550,
      zeroX: ?,
      zeroY: ?
  },*/
  '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 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
  }
};


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

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) {
  $('.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) {
  $('.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(/(\( *\-?\d+, *\-?\d+(?: ?, ?\-?\d+)?\)?)/g)
    .filter(function(bit) { 
       return bit.includes('(') && 
              bit.includes(')') && 
              bit.includes(',')
    );

  // 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(/\( *(\-?\d+), *(\-?\d+)\)/);
        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 */}


})();