Difference between revisions of "MediaWiki:LocMaps.js"

Revision as of 14:09, 5 July 2019

(function() {

var zones = {
  'Eastern Wastes': {
      height: 452,
      image: 'Map_eastern_wastes.jpg', 
      modifier: -.0380,
      test: {
        maxX: 7000,
        maxY: 1000,
        minX: -6000,
        minY: -9000,
        xInterval: 1000,
        yInterval: 1000
      },
      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': { 
      height: 540,
      image: 'Rivervale.jpg', 
      modifier: -.5,
      test: {
        maxX: 200,
        maxY: 600,
        minX: -800,
        minY: -400,
        xInterval: 200,
        yInterval: 200
      },
      width: 484,
      zeroX: 0,
      zeroY: 250
  },
};


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 + x * zone.modifier,
          position: 'absolute',
          top: zone.zeroY + y * zone.modifier
        }));
};

// Use this function to find the correct 0,0 point
window.testXZeroZero = function(zone) {
    makeX(0, 0, zone);
};

// Use this function to generate a grid of alignment X's
window.testMakeX = function(zone) {
  for (var x = zone.test.maxX; x >= zone.test.minX; x -= zone.test.xInterval) {
    for (var y = zone.test.maxY; y >= zone.test.minY; y -= zone.test.yInterval) {
      makeX(x, y, zone);
    }
  };
}


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

  // uncomment this to test the 0,0 x
  makeX(x, 0, zone);
  // uncomment this to produce a series of x's for checking the alignment
  //testMakeX(zone)
};

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 */}


})();