Difference between revisions of "MediaWiki:LocMaps.js"

Revision as of 16:45, 5 July 2019

(function() {

var zones = {
  'Eastern Wastes': {
      height: 452,
      image: 'Map_eastern_wastes.jpg', 
      modifierX: 0.038,
      modifierY: 0.038,
      test: {
        interval: 1000,
        maxX: 7000,
        maxY: 1000,
        minX: -6000,
        minY: -9000
      },
      width: 550,
      zeroX: 284,
      zeroY: 62
  },
/*  'Misty Thicket':{
    height: 341,
      image: 'Map_mistythicket.jpg', 
      modifier: ?,
      test: {
        maxX: 2000,
        maxY: 1000,
        minX: -3000,
        minY: -1000
      },
      width: 550,
      zeroX: ?,
      zeroY: ?
  },*/
  'Rivervale': { 
    modifierX: 0.522,
    modifierY: 0.517,
    height: 540,
    image: 'Rivervale.jpg', 
    test: {
      interval: 200,
      maxX: 200,
      maxY: 600,
      minX: -800,
      minY: -400,
    },
    width: 484,
    zeroX: 85,
    zeroY: 287
  }
};


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.modifierX || 0.1),
          position: 'absolute',
          top: (zone.zeroY || 0) + y * -1 * (zone.modifierY || 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>'
  );
}

var showLocOnMap = function($locTd, zone, x, y) {
  addMap($locTd, zone.image, zone.width, zone.height);
  makeX(x, y, zone);
};

// 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()
  showLocOnMap($locTd, zone, 0, 0);
};

// 2) Use this function to generate a grid of alignment of X's (ie. xModifier/yModifier)
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) {
      showLocOnMap($locTd, zone, x, y);
    }
  };
}


try {
  var $locTd = $('b:contains("Location:")').parent();
  var match = $locTd.text().match(/\( *(\-?\d+), *(\-?\d+)\)/);
  var y = match[1]
  var x = match[2];
  var $zoneTd = $('b:contains("Zone:")').parent().text();
  var zoneName = $zoneTd.split('Zone:')[1].trim();
  var zone = zones[zoneName];
  if (!zone) return;

  var $link = $(' <a href="#">(Show on Map)</a>');
  $link
    .on('mouseover', function(e) {
      showLocOnMap($locTd, zone, x, y);
    })
    .on('mouseleave', function(e) {
      $('.map-wrapper').remove();
    });
  $locTd.append($link) 
} catch (err) {/* Didn't work, move on */}


})();