UX Improvements for Flight Rising's Scrying Workshop and Search
Per
// ==UserScript==
// @name Scrying Workshop Reworked
// @namespace http://www.flightrising.com/
// @description UX Improvements for Flight Rising's Scrying Workshop and Search
// @include http://flightrising.com/main.php?p=scrying&view=*
// @include https://flightrising.com/main.php?p=scrying&view=*
// @include http://flightrising.com/main.php?p=search&search=dragon
// @include https://flightrising.com/main.php?p=search&search=dragon
// @version 1.04
// @grant none
// ==/UserScript==
function InjectScript(func, documentLoaded) {
// Function stolen-I-mean-borrowed from the old FRE script
// If head isn't ready, defer execution (this is Chrome support shenanigans)
var head = document.head || document.getElementsByTagName("head")[0];
if (head) {
var source = func.toString();
var scriptEl = document.createElement('script');
scriptEl.setAttribute("id", func.name);
scriptEl.setAttribute("type", "text/javascript");
if (documentLoaded) {
source = "document.addEventListener('DOMContentLoaded', " + source + ", true);";
} else {
source = "(" + source + ")();";
}
scriptEl.innerHTML = source;
head.appendChild(scriptEl);
}
else {
setTimeout(function() { InjectScript(func, documentLoaded); }, 0);
}
}
var thePage = document.location.href.match(/[^\=]+$/)[0];
InjectScript(theWorks);
if (thePage === "dragon") {
InjectScript(privateEye);
} else if (thePage === "bloodlines") {
InjectScript(picturePicture);
InjectScript(exogamyFTW);
} else if (thePage === "progeny") {
InjectScript(picturePicture);
InjectScript(showMeYourTrueColors);
$('input[value="Preview"]').parent('div').css('width','250px').css('text-align','center');
$('input[value="Preview"]').after('<input class="beigebutton thingbutton" type="button" onclick="movinRightAlong(\'bloodlines\')" id="check" style="margin-top: .5em; display: none;" value="Check Bloodlines?">');
} else if (thePage === "morphintime") {
InjectScript(metaMorph);
runAway();
}
var thePage = document.location.href.match(/[^\=]+$/)[0];
if(localStorage.getItem('scrying_destination') === thePage) {
for(var key in localStorage) {
if (key.indexOf("scrying_") > -1) {
$('#'+key.slice(8)).val(localStorage.getItem(key));
localStorage.removeItem(key);
}
}
if(thePage === 'bloodlines') {
$( "#id10t1" ).trigger( "change" );
$( "#id10t2" ).trigger( "change" );
hipCheck();
} else if(thePage === 'progeny') {
$( "#id10t1" ).trigger( "change" );
$( "#id10t2" ).trigger( "change" );
showNewbies();
} else if(thePage === 'morphintime') {
lolRedNinjaRanger();
} else if(thePage === 'dragon') {
$( "form:first" ).submit();
}
}
function privateEye() {
$('select[name="breed"]').attr('id','breed');
$('select[name="gender"]').attr('id','gender');
$('select[name="pc"]').attr('id','bodycolor');
$('select[name="sc"]').attr('id','wingcolor');
$('select[name="tc"]').attr('id','tertcolor');
$('select[name="pg"]').attr('id','prigene');
$('select[name="sg"]').attr('id','secgene');
$('select[name="tg"]').attr('id','tertgene');
$('form:first-of-type').after('<div id="results" style="margin-top: 1em;"></div>');
var theURL = $('form:first-of-type').attr('action');
$('.mb_button').after('<input type="button" value="Reset" style="background-color:#731d08; color:#fff; border:1px solid #000; height:25px; width:130px; font-weight:bold; margin-left: 1em; margin-right: 2em;" class="mb_button" onclick="wipeIt();">').parent('div').after('<div style="position: relative; left: 195px; top: -2.25em; display: inline;"><input type="checkbox" name="hideGone" id="hideGone" value="hideGone">Hide Exalted</div>');
function prettyIt(stuff) {
var resultData = $($.parseHTML(stuff)).find("#super-container").children('div').toArray();
$('#results').html(resultData[2]);
$('#results a[href*="did"]').attr('target','_blank');
$('#results>div:first-of-type>div:first-of-type').attr('style','font-size:12px; text-align:center').css('margin-bottom','.5em');
$('#results>div:first-of-type>div:nth-of-type(2)').attr('style','font-size:12px; text-align:center; line-height:1.5em; margin-bottom:.25em;');
$('#results>div:first-of-type>div:nth-of-type(2)>span:first-of-type').hide();
$('#results>div:first-of-type>div:nth-of-type(2)>span:nth-of-type(2)').attr('id','pages');
if ($('#results>div:first-of-type>div:first-of-type>span:nth-of-type(2)').text() > 20) {
$('#pages').css('float','none');
$('#pages').html(function () {
return $(this).html().replace('Page ', '');
});
if($('a:contains("»")').length) {
$('a:contains("»")').html('<img src="/images/layout/arrow_right.png" style="vertical-align:middle; margin-left: 1em;"/>');
} else {
$('#pages').append('<img src="/images/layout/arrow_right_off.png" style="vertical-align:middle; margin-left: 1em;"/>');
}
if($('a:contains("«")').length) {
$('a:contains("«")').html('<img src="/images/layout/arrow_left.png" style="vertical-align:middle; margin-right: 1em;"/>');
} else {
$('#pages').prepend('<img src="/images/layout/arrow_left_off.png" style="vertical-align:middle; margin-right: 1em;"/>');
}
}
$('#pages').clone().attr('id','pages2').appendTo( "#results>div" );
$('#pages2').css('font-size','12px').css('width','100%').css('text-align','center').css('margin-top','-1em');
$('#results img[src*="avatar"]').parent('a').each(function() {
var theID = (/did=(\d+)/.exec($(this).attr('href')))[1];
$(this).attr('rel','includes/ah_dragonajax.php?id='+theID);
$(this).cluetip({
height: 380,
ajaxCache: true,
onShow: function (ct, ci) {
var thePicture = '<img src="rendern/350/' + (parseInt(10*(theID/1000))+1) + '/' + theID + '_350.png" width="265px">';
$('#cluetip div[style*="color:#999"]').html(thePicture);
}
});
});
exaltBeGone();
}
function exaltBeGone() {
if ($('#hideGone').is(':checked')) {
$('#results img[src*="avatar"]').parent('a').parent('span').parent('span:contains("Exalted")').hide();
if($('#results img[src*="avatar"]').parent('a').parent('span').parent('span').length-$('#results img[src*="avatar"]').parent('a').parent('span').parent('span:contains("Exalted")').length<1) {
$('#pages2').hide();
}
} else {
$('#results img[src*="avatar"]').parent('a').parent('span').parent('span:contains("Exalted")').show();
$('#pages2').show();
}
}
$('#hideGone').change( function () {
exaltBeGone();
});
$('form:first-of-type').submit(function (e) {
e.preventDefault();
$('#results').html('<center><br><br>Searching...<br><br><img src="/images/layout/loading.gif"></center>');
$.ajax({
type: "POST",
data: $('form').serialize(),
url: theURL,
cache:false
}).done(function(stuff){
prettyIt(stuff);
});
});
this.sPage = function (page) {
$("#newpage").val(page);
var newData = $('form').serialize();
var newURL = $('#searched').attr('action');
$('#results').html('<center><br><br>Loading...<br><br><img src="/images/layout/loading.gif"></center>');
$.ajax({
type: "POST",
data: newData,
url: newURL,
cache:false
}).done(function(stuff){
prettyIt(stuff);
});
}
this.wipeIt = function () {
$('form')[0].reset();
$('#results').html('');
}
}
function showMeYourTrueColors(theSource) {
var theColors = ["none", "Maize", "White", "Ice", "Platinum", "Silver", "Grey", "Charcoal", "Coal", "Black", "Obsidian", "Midnight", "Shadow", "Mulberry", "Thistle", "Lavender", "Purple", "Violet", "Royal", "Storm", "Navy", "Blue", "Splash", "Sky", "Stonewash", "Steel", "Denim", "Azure", "Caribbean", "Teal", "Aqua", "Seafoam", "Jade", "Emerald", "Jungle", "Forest", "Swamp", "Avocado", "Green", "Leaf", "Spring", "Goldenrod", "Lemon", "Banana", "Ivory", "Gold", "Sunshine", "Orange", "Fire", "Tangerine", "Sand", "Beige", "Stone", "Slate", "Soil", "Brown", "Chocolate", "Rust", "Tomato", "Crimson", "Blood", "Maroon", "Red", "Carmine", "Coral", "Magenta", "Pink", "Rose"]
var theGenders = ["Male","Female"];
var theBreeds = ["None", "Fae", "Guardian", "Mirror", "Pearlcatcher", "Ridgeback", "Tundra", "Spiral", "Imperial", "Snapper", "Wildclaw", "Nocturne", "Coatl", "Skydancer"];
var primaryGenes = ["Basic", "Iridescent", "Tiger", "Clown", "Speckle"];
var secondaryGenes = ["Basic", "Shimmer", "Stripes", "Eye Spot", "Freckle", "Seraph"];
var tertiaryGenes = ["Basic", "Circuit", "Unknown 2", "Unknown 3", "Gembond", "Underbelly", "Crackle"];
// then, put together the translations
var dragonInfo = parseQueryString(theSource);
var breed = theBreeds[parseInt(dragonInfo["style"])] + "</font></b><hr>";
var gender = "|<b><font color=#731d08>" + theGenders[parseInt(dragonInfo["gender"])];
var primary = "<b>Primary Gene:</b> " + theColors[parseInt(dragonInfo["body"])] + " " + primaryGenes[parseInt(dragonInfo["prig"])];
var secondary = "<b>Secondary Gene:</b> " + theColors[parseInt(dragonInfo["wing"])] + " " + secondaryGenes[parseInt(dragonInfo["secg"])];
var tertiary = "<b>Tertiary Gene:</b> " + theColors[parseInt(dragonInfo["tert"])] + " " + tertiaryGenes[parseInt(dragonInfo["tertg"])];
// then, assign the translations to the rel
return gender + ' ' + breed + '|' + primary + '|' + secondary + '|' + tertiary;
}
function metaMorph() {
this.lolRedNinjaRanger = function() {
if($("#breed").val()&&$("#gender").val()&&$("#setage").val()&&$("#prigene").val()&&$("#bodycolor").val()&&$("#secgene").val()&&$("#wingcolor").val()&&$("#tertgene").val()&&$("#tertcolor").val()) {
$('#searcher').css('display','block');
lolRedRanger();
} else {
$('#searcher').css('display','none');
$("#newdragon").html("");
}
}
this.jeepersCreepers = function() {
var thePic = $("#newdragon img").attr("src");
var oldElem = /elem=(\d+)/;
var newElem = "elem\="+$("#element").val();
console.log(thePic.replace(oldElem, newElem));
var newPic = thePic.replace(/elem=\d+/, newElem);
$("#newdragon img").attr("src", newPic);
}
this.runAway = function() {
$("#makindragons")[0].reset();
$('#searcher').css('display','none');
$("#newdragon").html("");
}
this.cowsWithHats = function() {
$("select").each(function() {
var theOptions = $(this).find("option"),
random = ~~(Math.random() * theOptions.length-1)+1;
theOptions.eq(random).prop("selected", true);
});
lolRedRanger();
$('#searcher').css('display','block');
}
var theFlight = /(\w+)_banner.png/.exec($("img[src*='elemental_banners']").attr("src"))[1];
theFlight = theFlight.charAt(0).toUpperCase() + theFlight.substring(1);
$('select').attr('onChange','lolRedNinjaRanger()');
$('#prigene').insertAfter('#bodycolor br');
$('#secgene').insertAfter('#wingcolor br');
$('#tertgene').insertAfter('#tertcolor br');
$('#makindragons').attr('style','position: relative; top:15px;');
$('#makindragons .thingbutton').css('display','none').before('\
<select id="element" name="element" onChange="jeepersCreepers()"> \
<option value="">Element</option> \
<option value="1">Earth</option> \
<option value="2">Plague</option> \
<option value="3">Wind</option> \
<option value="4">Water</option> \
<option value="5">Lightning</option> \
<option value="6">Ice</option> \
<option value="7">Shadow</option> \
<option value="8">Light</option> \
<option value="9">Arcane</option> \
<option value="10">Nature</option> \
<option value="11">Fire</option> \
</select> \
<br/>');
$('#element').after('<br/><input class="beigebutton thingbutton" type="button" onclick="movinRightAlong(\'dragon\')" value="Search?" id="searcher" style="position: relative; top: 4em; padding: 0px 20px; width: 120px; display: none;">').after('<br/><input class="beigebutton thingbutton" type="button" onclick="runAway()" value="Reset" style="position: relative; top: .5em; padding: 0px 20px; width: 120px;">').after('<br/><input class="beigebutton thingbutton" type="button" onclick="cowsWithHats()" value="Random" style="position: relative; top: .3em; padding: 0px 20px; width: 120px;">');
$('select[name="element"] > option:contains("' + theFlight + '")').attr('selected', 'selected');
}
function picturePicture() {
$( document ).on( "click", "#preview img", function() {
var dragonInfo = parseQueryString($(this).attr('src'));
localStorage.setItem('scrying_breed',parseInt(dragonInfo["style"]));
localStorage.setItem('scrying_gender',parseInt(dragonInfo["gender"]));
localStorage.setItem('scrying_setage',1);
localStorage.setItem('scrying_bodycolor',parseInt(dragonInfo["body"]));
localStorage.setItem('scrying_wingcolor',parseInt(dragonInfo["wing"]));
localStorage.setItem('scrying_tertcolor',parseInt(dragonInfo["tert"]));
localStorage.setItem('scrying_prigene',parseInt(dragonInfo["prig"]));
localStorage.setItem('scrying_secgene',parseInt(dragonInfo["secg"]));
localStorage.setItem('scrying_tertgene',parseInt(dragonInfo["tertg"]));
movinRightAlong('morphintime');
});
$('#id10t1').css('left','10px').css('text-align','right').before('<div id="pic1" style="height: 175px; width: 175px; position: absolute; bottom: 70px; left:-8px;"></div>');
$('#id10t2').css('left','560px').before('<div id="pic2" style="height: 175px; width: 175px; position: absolute; left: 545px; bottom: 70px"></div>');
if ($('div[style*="bg_assaybloodlines"]').length != 0) {
$('#pic1').css('bottom','140px').css('left', '60px');
$('#pic2').css('bottom','140px').css('left', '331px');
}
function showMeNow() {
var id = $(this).attr('id').slice(-1);
if ($(this).val() !== "") {
var theDragon = $(this).val().match(/[^\=]+$/)[0].replace(/\s+/g, "").replace(/\D+/g, "");
$(this).val(theDragon);
if (theDragon) {
var theGroup = (parseInt(10*(theDragon/1000))+1);
$('#pic'+id).html('<img id="Dragon'+id+'" src="rendern/350/'+theGroup+'/'+theDragon+'_350.png" width="175px">');
$('#Dragon'+id).error(function(){
$('#id10t'+id).val('');
$('#pic'+id).html('');
});
}
} else {
$('#pic'+id).html('');
$('#check').css('display','none');
}
if ($('#id10t1').val()||$('#id10t2').val()) {
// lower opacity bg
$('img[src*="bg_foreseeprogeny"]').css('opacity','0.4');
} else {
// full opacity bg
$('img[src*="bg_foreseeprogeny"]').css('opacity','1');
}
if($(this).val() === '') {
$('#pic'+id).html('');
$('#check').css('display','none');
}
$('#validity').html('');
$('#symbol').html('');
}
$('input[id*="id10t"]').change(showMeNow);
}
function exogamyFTW() {
$('.thingbutton').attr('onclick','hipCheck()');
$('#id10t1').parent('div:first-child').attr('style','vertical-align:middle; width:570px; margin-left:0px; padding-top:100px; text-align: center;').after('<div id="symbol" style="position: relative; font-size: 80px; top: -250px; width: 570px; text-align: center; visibility: hidden;"></div>').after('<div id="validity" style="width:140px; font-size: 12px; text-align: center; margin: 1em auto;"></div>');
this.hipCheck = function() {
$('#symbol').css('visibility','hidden');
var id10t1 = $('#id10t1').val();
var id10t2 = $('#id10t2').val();
$("#validity").html('<img src="/images/layout/loading.gif"> loading...');
$.ajax({
type: "POST",
data: {id1: id10t1, id2: id10t2},
url: "includes/ol/scryer_bloodlines.php",
cache:false
}).done(function(stuff){
var theVerdict = $($.parseHTML(stuff)).toArray();
$("#validity").html($(theVerdict[2]).text().replace('Success!','<h2 style="color:green; margin: -8px auto 2px;">Success!</h2>')).append('<input class="beigebutton thingbutton" style="padding: 5px 20px; margin-top: .75em; left: -3px;" type="button" border="0" onclick="movinRightAlong(\'progeny\')" value="Scry Progeny?">');
if($("#validity").text().indexOf( "Success" ) !== -1) {
$('#symbol').css('color','green').text('✔').css('top','-275px').css('visibility','visible');
} else {
$('#symbol').css('color','red').text('✖').css('top','-290px').css('visibility','visible');
}
});
}
}
function theWorks() {
this.movinRightAlong = function(where) {
localStorage.setItem('scrying_destination',where);
localStorage.setItem('scrying_id10t1',$('#id10t1').val());
localStorage.setItem('scrying_id10t2',$('#id10t2').val());
$('select').each(function() {
localStorage.setItem('scrying_'+$(this).attr('id'),$(this).val());
});
if(where === 'bloodlines') {
window.location = "main.php?p=scrying&view=bloodlines";
} else if(where === 'progeny') {
window.location = "main.php?p=scrying&view=progeny";
} else if(where === 'morphintime') {
window.location = "main.php?p=scrying&view=morphintime";
} else if(where === 'dragon') {
window.location = "main.php?p=search&search=dragon";
}
}
this.parseQueryString = function(theString) {
theString = theString.slice(33);
var query = theString,
map = {};
query.replace(/([^&=]+)=?([^&]*)(?:&+|$)/g, function(match, key, value) {
(map[key] = map[key] || []).push(value);
});
return map;
}
}
$(document).ajaxSuccess(function(e, xhr, options) {
if (options.url.indexOf('scryer_getdragon') > -1) {
jeepersCreepers();
} else if (options.url.indexOf('scryer_progeny') > -1) {
$('#preview img').each(function() {
$(this).attr('title',showMeYourTrueColors($(this).attr('src')));
$(this).cluetip({splitTitle: '|', width: 245, height: "auto", cursor: "pointer", positionBy: "fixed", leftOffset: "-10px", topOffset: "95px"});
});
$('#check').css('display','inline');
}
});