Difference between revisions of "MediaWiki:HuntingGuide.js"

Revision as of 00:21, 7 June 2020

// Basic DOM manipulation onReady (since the wiki won't let us add <input> tags in the wiki text

var buildEraCheckbox = function (era) {
  return (
    '<label><input checked class="era-filter" type="checkbox" value="' +
    era.substr(0, 3).toLowerCase() +
    '"/>' +
    era +
    '</label>'
  );
};

// Create filter results table
var $filterResults = $('table.eoTable3.wikitable.sortable').eq(0).clone().hide();

var $headerRow = $('.hunting-guide-row:first').clone();
var clearFilterResults = function () {
  return $filterResults.empty().append($headerRow);
};
clearFilterResults();

$('h4:contains("Hunting Spots 1-4")').before($filterResults);

var toTitleCase = function(original){
  return original.split(' ').map(function toTitleCaseSingleWord(word) {
    return word[0].toUpperCase() + word.substr(1);
  }).join(' ');
};

var eras = ['Classic', 'Kunark', 'Velious'];

var classAbbreviations = {
    bard: 'BRD',
    cleric: 'CLR',
    druid: 'DRU',
    enchanter: 'ENC',
    magician: 'MAG',
    monk: 'MNK',
    necromancer: 'NEC',
    paladin: 'PAL',
    ranger: 'RNG',
    rogue: 'ROG',
    'shadow knight': 'SHD',
    shaman: 'SHM',
    warrior: 'WAR',
    wizard: 'WIZ',
};
var monsterTypes = ['Goblin', 'Guard', 'Undead'];

// Add radio buttons (since MediaWiki won't allow them as content)
$('#filter-ui').html(
  '<ul><li><strong>Class:</strong>' +
  Object.keys(classAbbreviations).map(function(eqClass){
    return '<label class="class-filter filter-link"><input type="radio" name="class-filter" />' + toTitleCase(eqClass) + '</label>';
  }).join('') + '</li>' +

  '<li><strong>Monster:</strong>' +
  monsterTypes.map(function(monster){
    return '<label class="monster-filter filter-link"><input type="radio" name="monster-filter" />' + monster + '</label>';
  }).join('') + '</li>' +
  '<li><span style="font-weight:bold">Level:</span> <input id="level-filter" style="width:30px"/></li>'+
  '<li><span style="font-weight:bold">Zone:</span> <input id="zone-filter" style="width:50em"/></li>' +
  '<li><span style="font-weight:bold">Era:</span> ' + eras.map(buildEraCheckbox).join('') + '</li>' +
  '<li><button id="clear-filters">Clear Filters</button></li>' +
  '</ul>'); 


//$('.filter-link').each(function (i, el) {
//  var $el = $(el);
//  var eqClass = $el.text();
//  var htmlClass = $el.attr('class');
//  var name = htmlClass.split('-', 1)[0];
//  var inputHtml = '<input type="radio" name="' + name + '" />';
//  $el.replaceWith('<label class="' + htmlClass + '">' + inputHtml + eqClass + '</label>');
//});

// Get jQuery object of every row in the hunting guide (because all of the filter functions need it)
var $rows = $('.wikitable tbody tr');

/**
 * Build a in-memory data object with the data parsed from each row (which will tell us which
 * levels/classes should be shown for any filter).
 * @example a "spot" created by this function for critters in Butcherblock Mountains: {
 *   soloLevel: '04-06',
 *   groupLevel: '03-05',
 *   zone: 'Butcherblock Mountains',
 *   area: 'Greater Faydark zoneline',
 *   monsters: 'Assorted Critters	',
 *   xpMod: '100%',
 *   notes: '',
 *   $tr: *a jQuery object pointing to the <tr> that all this data originally came from*
 * }
 */
var spots = [];
$rows.each(function (i, el) {
  var groupLevel = $(el).children('td:eq(1)').text();
  groupLevel = groupLevel.trim() === '-' ? null : groupLevel;
  var $tr = $(el);

  if ($tr.children('th').length) return; // Header row

  spots.push({
    soloLevel: $tr.children('td:eq(0)').text(),
    groupLevel: groupLevel,
    zone: $tr.children('td:eq(2)').text(),
    area: $tr.children('td:eq(3)').text(),
    monsters: $tr.children('td:eq(4)').text(),
    xpMod: $tr.children('td:eq(5)').text(),
    era: $tr.children('td:eq(6)').text(),
    image: $tr.children('td:eq(7)').text(),
    notes: $tr.children('td:eq(8)').text(),
    for: $tr.find('.for').text(),
    $tr: $tr,
  });
});

// Clear garbage entries (wish I had ES6 filter ..)
var cleanedSpots = [];
$.each(spots, function (i, spot) {
  if (spot.soloLevel && spot.zone) cleanedSpots.push(spot);
});

$('#numSpots').text(cleanedSpots.length);

var toClassAbbreviation = function (eqClass) {
  return classAbbreviations[eqClass.toLowerCase()];
};

var getFilteredSpots = function (
  selectedClass,
  selectedMonster,
  selectedLevel,
  selectedZone,
  selectedEras
) {
  return cleanedSpots.filter(function (spot) {
    var classMatches = !selectedClass || spot.for.includes(toClassAbbreviation(selectedClass));
    var monsterMatches =
      !selectedMonster ||
      spot.monsters.includes(selectedMonster) ||
      spot.notes.includes(selectedMonster);

    var minAndMax = spot.soloLevel.split('-');
    var minLevel = parseFloat(minAndMax[0]);
    var maxLevel = parseFloat(minAndMax[1] || minAndMax[0]);
    console.log(spot.soloLevel, 'min', minLevel, 'max', maxLevel, 'selected', selectedLevel);
    var levelMatches = !selectedLevel || (minLevel <= selectedLevel && maxLevel >= selectedLevel);

    var lowerCaseZone = spot.zone.toLowerCase();
    var zonePattern = new RegExp(selectedZone.toLowerCase());
    var zoneMatches = !selectedZone || lowerCaseZone.match(zonePattern);

    var lowerCaseEra = spot.era.toLowerCase().trim();
    var eraMatches = selectedEras.length === 3 || selectedEras.includes(lowerCaseEra);

    return classMatches && monsterMatches && levelMatches && zoneMatches && eraMatches;
  });
};

/**
 * Replaces the contents of the search results UI with the rows of the provided hunting spots
 */
var setResults = function (spots) {
  // Clear the results (but add back the header row), then append (clones of) the result rows
  var $resultsTbody = clearFilterResults();
  var resultRows = spots.map(function (spot) {
    return spot.$tr.clone();
  });
  $resultsTbody.append(resultRows);

  if (spots.length) return; // Show "no matches" UI only if there are no matches
  $resultsTbody.append(
    '<tr><th colspan="50" style="color:red; font-weight: bold; font-size: 2em; padding: 1em;">' +
      'No results for those filters</th></tr>'
  );
};
/**
 * Re-filter the page when one of the filtering UI elements changes
 */
var handleAnyFilteringElementChange = function (e) {
  var $target = $(e.target);
  if ($target.is('.was-checked')) {
    // Let users "uncheck" a radio button by clicking it again
    $target.attr('checked', false);
  } else {
    // ... but if they're not un-checking something, uncheck the "no filters" radio button
    // (and differentiate that it's been clicked by adding a class ... if we didn't use a class
    // and just cheked .is(':checked'), it would always be true from the click itself)
    $target.addClass('was-checked');
    $('.no-filter').attr('checked', false);
  }

  var selectedClass = $('.class-filter :checked').parent().text();
  var selectedMonster = $('.monster-filter :checked').parent().text();
  var selectedLevel = $('#level-filter').val();
  var selectedZone = $('#zone-filter').val();
  var selectedEras = $('.era-filter:checked')
    .map(function (i, el) {
      return $(el).val();
    })
    .toArray();

  // Are we actually filtering out anything?
  var willFilter =
    selectedClass || selectedMonster || selectedLevel || selectedZone || selectedEras.length < 3;

  // If so, hide the normal UI and show results (otherwise show normal UI)
  $('h4, .wikitable').toggle(!willFilter);
  $filterResults.toggle(willFilter);

  var filteredSpots = getFilteredSpots(
    selectedClass,
    selectedMonster,
    selectedLevel,
    selectedZone,
    selectedEras
  );
  setResults(filteredSpots);
};
$('.class-filter, .monster-filter').click(handleAnyFilteringElementChange);
$('#level-filter').keyup(handleAnyFilteringElementChange);
$('#zone-filter').keyup(function (e) {
  if (e.target.value.length > 3) handleAnyFilteringElementChange;
});
$('.era-filter').change(handleAnyFilteringElementChange);

$('#clear-filters').click(function () {
  // Clear the other radio buttons (the browser won't do it since they have different names)
  $('.filter-link :radio').attr('checked', false);
  // Clear the text inputs
  $('#level-filter').val('');
  $('#zone-filter').val('');
  // Re-check all three era checkboxes
  $('.era-filter').attr('checked', true);
  handleAnyFilteringElementChange();
});