MediaWiki:FashionQuest.js
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
$(function() {
var eqClasses = ['Bard', 'Cleric', 'Druid', 'Enchanter', 'Magician', 'Monk', 'Necromancer', 'Paladin', 'Ranger', 'Rogue', 'Shadow Knight', 'Shaman', 'Warrior', 'Wizard'];
var armorSlots = ['Arms', 'Chest', 'Feet', 'Hands', 'Head', 'Legs', 'Wrist'];
// TODO: Get this like we get the colors, ie. by parsing fashionquest guide
// (that way if new styles are added they'll be added here)
var robeStyles = ['Crimson Robe of Alendine', 'Cryosilk Robe', 'Flowing Black Robe', 'Plain Robe', 'Robe of the Kedge', 'Robe of the Oracle', 'Shining Metallic Robes']
var fashionStyles = ['Cloth', 'Leather', 'Velious Leather 1', 'Velious Leather 2', 'Chain', 'Kunark Chain', 'Velious Chain 1', 'Velious Chain 2', 'Plate', 'Velious Plate 1', 'Velious Plate 2'];
/**
* This function uses a little-known JS feature of *someRegex*.exec,
* where calling it repeatedly returns different results. It uses a while
* loop (bleh) to do so.
*/
var extractColors = function(html) {
var colors = [];
var regex= /<td><a href="\/Category:Fashion:_.*?" title="Category:Fashion: (.*?)"/g;
var matched;
while(matched = regex.exec(html)) colors.push(matched[1]);
return colors;
};
/**
* @returns a promise that evaluates to an object containing color categories,
* by fetching the fashion quest guide and string-parsing it's HTML
* (sloppy but it works).
*/
var getColorCategories = function() {
return $.get('https://wiki.project1999.com/FashionQuest_Guide')
.then(function(html) {
return html
.split(/\/table/m)
// we split by table, but there were other tables we didn't care about,
// so filter through and find only the color ones
.filter(function(html) {
return html.includes('mw-headline') &&
html.includes('Category</th');
})
.reduce(function(categories, html) {
var name = html.match('id=".*?">(.*?)</span></h4>')[1];
categories[name] = extractColors(html);
return categories;
}, {});
});
};
getColorCategories().then(function(colorCategories) {
var buildOptionsFromArray = function(arr, defaultText) {
return '<option value="">' + defaultText + '</option>' + arr
.flat(2)
.sort()
.map(function(value) {
return '<option value="' + value + ' ">' + value + '</option>';
}).join('\n');
};
var buildClassSelect = function() {
var options = buildOptionsFromArray(eqClasses, 'All');
return '<select id="classSelect">' + options + '</select>';
};
var buildSlotSelect = function() {
var options = buildOptionsFromArray(armorSlots, 'All');
return '<select id="slotSelect">' + options + '</select>';
};
var buildStyleSelect = function() {
var options = buildOptionsFromArray(fashionStyles, 'All');
return '<select id="styleSelect">' + options + '</select>';
};
var buildRobeSelect = function() {
var options = buildOptionsFromArray(robeStyles, 'All');
return '<select id="robeSelect">' + options + '</select>';
};
var buildBaseColorSelect = function() {
var optionsHtml = buildOptionsFromArray(Object.keys(colorCategories), 'Any');
return '<select id="baseColorSelect">' + optionsHtml + '</select>';
};
var buildSpecificColorSelect = function() {
var optionsHtml = buildOptionsFromArray(Object.values(colorCategories), 'Any');
return '<select id="specificColorSelect">' + optionsHtml + '</select>';
};
$('#fashionQuestFinder').html(
'<form>'+
'<fieldset>' +
'<legend>Basics</legend>' +
' <div style="margin-bottom: 15px;">Class: ' + buildClassSelect() + '</div>' +
' <div>Armor Slot:' + buildSlotSelect() + '</div>' +
'</fieldset>' +
'<fieldset>' +
'<legend>Fashion Style</legend>' +
' <div><input type="radio" checked name="fashion" value="specific" /> Specific Fashion Style:' + buildStyleSelect() + '</div>' +
' <div id="robeStyle" style="display:none;"><input type="radio" name="fashion" value="robe" /> Specific Robe Style:' + buildRobeSelect() + '</div>' +
'</fieldset>' +
'<fieldset>' +
' <legend>Color</legend>' +
' <div>Search for base color or specific color (base is <em>much</em> slower as it has to check multiple specific colors; if you use it too often it can even slow down the whole wiki)</div>' +
' <div><input type="radio" checked name="color" value="specific" /> Specific Color Style:' + buildSpecificColorSelect() + '</div>' +
' <div><input type="radio" name="color" value="base" /> Base Color Style:' + buildBaseColorSelect() + '</div>' +
'</fieldset>' +
'<button id="search">Search</button>' +
'</form>');
$('#slotSelect').change(function() {
var armorSlot = $('#slotSelect').val().trim();
$('#robeStyle').toggle(armorSlot.trim() === 'Chest');
});
var buildQuery = function() {
var categories = [];
var eqClass = $('#classSelect').val();
if (eqClass) categories.push(eqClass.trim() + '+Equipment');
var armorSlot = $('#slotSelect').val();
if (armorSlot) categories.push(armorSlot.trim());
if ($('[name="fashion"]:checked').val() === 'specific') {
var style = $('#styleSelect').val();
if (style) categories.push('Fashion: ' + style.trim());
}
if ($('[name="fashion"]:checked').val() === 'robe' && armorSlot ==='Chest') {
var robeStyle = $('#robeSelect').val();
if (robeStyle) categories.push('Fashion: ' + robeStyle.trim());
}
if ($('[name="color"]:checked').val() === 'specific') {
var color = $('#specificColorSelect').val();
if (color) categories.push('Fashion: ' + color.trim());
}
var query = '';
if (categories.length > 0) query += 'wpInCategory1=' + categories[0];
if (categories.length > 1) query += '&wpInCategory2=' + categories[1];
if (categories.length > 2) query += '&wpInCategory3=' + categories[2];
return query + '&limit=500';
};
var baseUrl = ' http://wiki.project1999.com/Special:MultiCategorySearch?';
var $search = $('#search').click(function(e) {
var query = buildQuery();
if (!query) return false;
location = baseUrl + query;
//$.get(baseUrl + query).then(function(html) {
// console.log(window.html = html);
//});
return false;
});
});
}); // Close of onReady call