☰

Scrying Workshop Reworked

UX Improvements for Flight Rising's Scrying Workshop and Search

  1. // ==UserScript==
  2. // @name        Scrying Workshop Reworked
  3. // @namespace   http://www.flightrising.com/
  4. // @description UX Improvements for Flight Rising's Scrying Workshop and Search
  5. // @include     http://flightrising.com/main.php?p=scrying&view=*
  6. // @include     https://flightrising.com/main.php?p=scrying&view=*
  7. // @include     http://flightrising.com/main.php?*&tab=dragon*
  8. // @include     https://flightrising.com/main.php?*&tab=dragon*
  9. // @include     http://flightrising.com/main.php?dragon=*
  10. // @include     https://flightrising.com/main.php?dragon=*
  11. // @include     http://flightrising.com/main.php?p=search&search=dragon
  12. // @include     https://flightrising.com/main.php?p=search&search=dragon
  13. // @version     1.16
  14. // @grant       none
  15. // ==/UserScript==
  16.  
  17.  
  18. 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"];
  19. var theGenders = ["Male","Female"];
  20. var theBreeds = ["None", "Fae", "Guardian", "Mirror", "Pearlcatcher", "Ridgeback", "Tundra", "Spiral", "Imperial", "Snapper", "Wildclaw", "Nocturne", "Coatl", "Skydancer"];
  21. var primaryGenes = ["Basic", "Iridescent", "Tiger", "Clown", "Speckle", "Ripple", "Bar", "Crystal", "Vipera", "Piebald", "Cherub", "Poison"];
  22. var secondaryGenes = ["Basic", "Shimmer", "Stripes", "Eye Spots", "Freckle", "Seraph", "Current", "Daub", "Facet", "Hypnotic", "Paint", "Peregrine", "Toxin"];
  23. var tertiaryGenes = ["Basic", "Circuit", "Unknown 2", "Unknown 3", "Gembond", "Underbelly", "Crackle", "Smoke", "Spines", "Okapi", "Glimmer"];
  24. var theElements = ["None", "Earth", "Plague", "Wind", "Water", "Lightning", "Ice", "Shadow", "Light", "Arcane","Nature", "Fire"];
  25. 	
  26. function privateEye() {
  27. 	$('select[name="breed"]').attr('id','breed');
  28. 	$('select[name="gender"]').attr('id','gender');
  29. 	$('select[name="pc"]').attr('id','bodycolor');
  30. 	$('select[name="sc"]').attr('id','wingcolor');
  31. 	$('select[name="tc"]').attr('id','tertcolor');
  32. 	$('select[name="pg"]').attr('id','prigene');
  33. 	$('select[name="sg"]').attr('id','secgene');
  34. 	$('select[name="tg"]').attr('id','tertgene');
  35. 	$('form:first-of-type').after('<div id="results" style="margin-top: 1em;"></div>');
  36. 	var theURL = $('form:first-of-type').attr('action');
  37. 	$('.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>');
  38. 	function prettyIt(stuff) {
  39. 		var resultData = $($.parseHTML(stuff)).find("#super-container").children('div').toArray();
  40. 		$('#results').html(resultData[2]);
  41. 		$('#results a[href*="did"]').attr('target','_blank');
  42. 		$('#results>div:first-of-type>div:first-of-type').attr('style','font-size:12px; text-align:center').css('margin-bottom','.5em');
  43. 		$('#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;');		
  44. 		$('#results>div:first-of-type>div:nth-of-type(2)>span:first-of-type').hide();
  45. 		$('#results>div:first-of-type>div:nth-of-type(2)>span:nth-of-type(2)').attr('id','pages');
  46. 		if ($('#results>div:first-of-type>div:first-of-type>span:nth-of-type(2)').text() > 20) {
  47. 			$('#pages').css('float','none');
  48. 			$('#pages').html(function () {
  49. 				return $(this).html().replace('Page ', ''); 
  50. 			});
  51. 			if($('a:contains("»")').length) {
  52. 				$('a:contains("»")').html('<img src="/images/layout/arrow_right.png" style="vertical-align:middle; margin-left: 1em;"/>');
  53. 			} else {
  54. 				$('#pages').append('<img src="/images/layout/arrow_right_off.png" style="vertical-align:middle; margin-left: 1em;"/>');
  55. 			}
  56. 			if($('a:contains("«")').length) {
  57. 				$('a:contains("«")').html('<img src="/images/layout/arrow_left.png" style="vertical-align:middle; margin-right: 1em;"/>');		
  58. 			} else {
  59. 				$('#pages').prepend('<img src="/images/layout/arrow_left_off.png" style="vertical-align:middle; margin-right: 1em;"/>');
  60. 			}
  61. 		}
  62. 		$('#pages').clone().attr('id','pages2').appendTo( "#results>div" );
  63. 		$('#pages2').css('font-size','12px').css('width','100%').css('text-align','center').css('margin-top','-1em');
  64. 		$('#results img[src*="avatar"]').parent('a').each(function() {
  65. 			var theID = (/did=(\d+)/.exec($(this).attr('href')))[1];
  66. 			$(this).attr('rel','includes/ah_dragonajax.php?id='+theID);
  67. 			$(this).cluetip({
  68. 				height: 380,
  69. 				ajaxCache: true,
  70. 				onShow: function (ct, ci) {
  71. 					var thePicture = '<img src="rendern/350/' + (parseInt(10*(theID/1000))+1) + '/' + theID + '_350.png" width="265px">';
  72. 					$('#cluetip div[style*="color:#999"]').html(thePicture);
  73. 				} 
  74. 			});
  75. 		});		
  76. 		exaltBeGone();
  77. 	}	
  78. 	function exaltBeGone() {
  79. 		if ($('#hideGone').is(':checked')) {
  80. 			$('#results img[src*="avatar"]').parent('a').parent('span').parent('span:contains("Exalted")').hide();
  81. 			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) {
  82. 				$('#pages2').hide();
  83. 			}
  84. 		} else {
  85. 			$('#results img[src*="avatar"]').parent('a').parent('span').parent('span:contains("Exalted")').show();
  86. 			$('#pages2').show();
  87. 		}
  88. 	}
  89. 	$('#hideGone').change( function () {
  90. 		exaltBeGone();
  91. 	});
  92. 	$('form:first-of-type').submit(function (e) {
  93.         e.preventDefault();
  94. 		$('#results').html('<center><br><br>Searching...<br><br><img src="/images/layout/loading.gif"></center>');
  95. 		$.ajax({
  96. 			type: "POST",
  97. 			data: $('form').serialize(), 
  98. 			url: theURL,
  99. 			cache:false
  100. 		}).done(function(stuff){
  101. 			prettyIt(stuff);
  102. 		}); 
  103. 	}); 
  104. 	this.sPage = function (page) {
  105. 		$("#newpage").val(page);
  106. 		var newData = $('form').serialize();
  107. 		var newURL = $('#searched').attr('action');
  108. 		$('#results').html('<center><br><br>Loading...<br><br><img src="/images/layout/loading.gif"></center>');
  109. 		$.ajax({
  110. 			type: "POST",
  111. 			data: newData, 
  112. 			url: newURL,
  113. 			cache:false
  114. 		}).done(function(stuff){
  115. 			prettyIt(stuff);
  116. 		}); 
  117. 	}
  118. 	this.wipeIt = function () {
  119. 		$('form')[0].reset();
  120. 		$('#results').html('');
  121. 	}
  122. }	
  123. 	
  124. function changingRoom() {
  125. 	$( document ).on( "click", "#scry", function() {
  126. 		var theDragon = parseInt((/did=(\d+)/.exec(window.location.href) || /dragon=(\d+)/.exec(window.location.href))[1]);
  127. 		localStorage.setItem('scrying_greenranger',theDragon);
  128. 		movinRightAlong('morphintime');
  129. 	});
  130. }
  131.  
  132. function showMeYourTrueColors(theSource) { 
  133. 	// then, put together the translations
  134. 	var dragonInfo = parseQueryString(theSource);
  135. 	var breed = theBreeds[parseInt(dragonInfo["style"])] + "</font></b><hr>";
  136. 	var gender = "|<b><font color=#731d08>" + theGenders[parseInt(dragonInfo["gender"])];
  137. 	var primary = "<b>Primary Gene:</b> " + theColors[parseInt(dragonInfo["body"])] + " " + primaryGenes[parseInt(dragonInfo["prig"])];
  138. 	var secondary = "<b>Secondary Gene:</b> " + theColors[parseInt(dragonInfo["wing"])] + " " + secondaryGenes[parseInt(dragonInfo["secg"])];
  139. 	var tertiary = "<b>Tertiary Gene:</b> " + theColors[parseInt(dragonInfo["tert"])] + " " + tertiaryGenes[parseInt(dragonInfo["tertg"])];
  140.  
  141. 	// then, assign the translations to the rel
  142. 	return  gender + ' ' + breed + '|' + primary + '|' + secondary + '|' + tertiary;
  143. }
  144.  
  145. function metaMorph() {
  146. 	var theRound = 0;
  147. 	this.lolRedNinjaRanger = function() { 
  148. 		if($('#greenranger').val() && theRound === 0){
  149. 			theRound = 1; 
  150. //			$('#summon_dragon').click();
  151. 			setTimeout( "$('#summon_dragon').click();",250 );
  152. 		} else if($("#breed").val()&&$("#gender").val()&&$("#setage").val()&&$("#prigene").val()&&$("#bodycolor").val()&&$("#secgene").val()&&$("#wingcolor").val()&&$("#tertgene").val()&&$("#tertcolor").val()&&$("#element").val()) { 
  153. 			lolRedRanger(); 
  154. 		} else {
  155. 			alert('oops');
  156. 			$('#newdragon').html(""); 
  157. 		}
  158. 		$(document).ajaxSuccess(function(e, xhr, options) {
  159. 			if (options.url.indexOf('getstats') > -1 ) {
  160. //			alert('round: '+theRound);
  161. 				if (theRound == 1 && $('#setage').val() == 0) {
  162. //					alert('ok');
  163. 				$('#setage').val(1).attr('selected','selected');
  164. 				theRound = 2;
  165. 				lolRedRanger();
  166. 			}
  167. 			}
  168. 		});
  169. 	} 
  170. 	
  171. 	this.runAway = function() { 
  172. 		$("#makindragons")[0].reset(); 
  173. 		$('#searcher').css('display','none');
  174. 		$("#newdragon").html(""); 
  175. 	} 
  176. 	
  177. 	this.cowsWithHats = function() { 
  178. 		$("select").each(function() { 
  179. 			var theOptions = $(this).find("option"), 
  180. 				random = ~~(Math.random() * theOptions.length); 
  181. 			theOptions.eq(random).prop("selected", true); 
  182. 		});
  183. 		lolRedRanger(); 
  184. 		$('#searcher').css('display','block');
  185. 	} 
  186.  
  187. 	this.canWeFixIt = function() {
  188. 		$('select').attr('onChange','lolRedNinjaRanger()');
  189. 		$('#bodycolor').insertBefore($('span:contains("Primary Gene")'));
  190. 		$('#bodycolor').before($('span:contains("Primary Color")')).before(' ');
  191. 		$('#wingcolor').insertBefore($('span:contains("Secondary Gene")'));
  192. 		$('#wingcolor').before($('span:contains("Secondary Color")')).before(' ');
  193. 		$('#tertcolor').insertBefore($('span:contains("Tertiary Gene")'));
  194. 		$('#tertcolor').before($('span:contains("Tertiary Color")')).before(' ');
  195. 		$('#makindragons br').remove();
  196. 		$('select').after('<br>');
  197. 		$('#makindragons').attr('style','position: relative; top:15px;');
  198. 		$('#makindragons .thingbutton').css('display','none');
  199. 		$('#element').after('<br/><input class="beigebutton thingbutton" type="button" onclick="movinRightAlong(\'dragon\')" value="Search?" id="searcher" style="position: relative; top: .8em; padding: 0px 20px; margin: 5px 45px 0; width: 120px;">').after('<br/><input class="beigebutton thingbutton" type="button" onclick="runAway()" value="Reset" style="position: relative; top: .5em; padding: 0px 20px; margin: 5px 45px 0; width: 120px;">').after('<br/><input class="beigebutton thingbutton" type="button" onclick="cowsWithHats()" value="Random" style="position: relative; top: .3em; padding: 0px 20px; margin: 5px 45px 0; width: 120px;">');
  200. 	}
  201. }
  202.  
  203. function picturePicture() {
  204. 	$( document ).on( "click", "#preview img", function() {
  205. 		var dragonInfo = parseQueryString($(this).attr('src'));
  206. 		localStorage.setItem('scrying_breed',parseInt(dragonInfo["style"]));
  207. 		localStorage.setItem('scrying_gender',parseInt(dragonInfo["gender"]));
  208. 		localStorage.setItem('scrying_setage',1);
  209. 		localStorage.setItem('scrying_bodycolor',parseInt(dragonInfo["body"]));
  210. 		localStorage.setItem('scrying_wingcolor',parseInt(dragonInfo["wing"]));
  211. 		localStorage.setItem('scrying_tertcolor',parseInt(dragonInfo["tert"]));
  212. 		localStorage.setItem('scrying_prigene',parseInt(dragonInfo["prig"]));
  213. 		localStorage.setItem('scrying_secgene',parseInt(dragonInfo["secg"]));
  214. 		localStorage.setItem('scrying_tertgene',parseInt(dragonInfo["tertg"]));
  215. 		localStorage.setItem('scrying_element',parseInt(dragonInfo["elem"]));
  216. 		movinRightAlong('morphintime');
  217. 	});
  218. 	$('#id10t1').css('left','10px').css('text-align','right').before('<div id="pic1" style="height: 175px; width: 175px; position: absolute; bottom: 70px; left:-8px;"></div>');
  219. 	$('#id10t2').css('left','552px').before('<div id="pic2" style="height: 175px; width: 175px; position: absolute; left: 545px; bottom: 70px"></div>');
  220. 	if ($('div[style*="bg_assaybloodlines"]').length != 0) {
  221. 		$('#pic1').css('bottom','140px').css('left', '60px');
  222. 		$('#pic2').css('bottom','140px').css('left', '331px');
  223. 	}	
  224. 	function showMeNow() { 
  225. 		var id = $(this).attr('id').slice(-1);
  226. 		if ($(this).val() !== "") {
  227. 			var theDragon = $(this).val().match(/[^\=]+$/)[0].replace(/\s+/g, "").replace(/\D+/g, "");
  228. 			$(this).val(theDragon);
  229. 			if (theDragon) {	
  230. 				var theGroup = (parseInt(10*(theDragon/1000))+1);
  231. 				$('#pic'+id).html('<a href="main.php?dragon='+theDragon+'"><img id="Dragon'+id+'" src="rendern/350/'+theGroup+'/'+theDragon+'_350.png" width="175px"></a>');
  232. 				$('#Dragon'+id).error(function(){
  233. 					$('#id10t'+id).val('');
  234. 					$('#pic'+id).html('');
  235. 				});
  236. 			}
  237. 		} else {
  238. 			$('#pic'+id).html('');			
  239. 			$('#check').css('display','none');
  240. 		}
  241. 		if ($('#id10t1').val()||$('#id10t2').val()) {
  242. 			// lower opacity bg
  243. 			$('img[src*="bg_foreseeprogeny"]').css('opacity','0.4');
  244. 		} else {
  245. 			// full opacity bg
  246. 			$('img[src*="bg_foreseeprogeny"]').css('opacity','1');
  247. 		}
  248. 		if($(this).val() === '') {
  249. 			$('#pic'+id).html('');		
  250. 			$('#check').css('display','none');
  251. 		}
  252. 		$('#validity').html('');
  253. 		$('#symbol').html('');
  254. 	}
  255. 	$('input[id*="id10t"]').change(showMeNow); 	
  256. }
  257.  
  258. function exogamyFTW() {
  259. 	$('.thingbutton').attr('onclick','hipCheck()');
  260. 	$('#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>');
  261. 	this.hipCheck = function() {
  262. 		$('#symbol').css('visibility','hidden');
  263. 		var id10t1 = $('#id10t1').val();
  264. 		var id10t2 = $('#id10t2').val();
  265. 		$("#validity").html('<img src="/images/layout/loading.gif"> loading...');
  266. 		$.ajax({
  267. 			type: "POST",
  268. 			data: {id1: id10t1, id2: id10t2},
  269. 			url: "includes/ol/scryer_bloodlines.php",
  270. 			cache:false
  271. 		}).done(function(stuff){
  272. 			var theVerdict = $($.parseHTML(stuff)).toArray();
  273. 			$("#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?">');
  274. 			if($("#validity").text().indexOf( "Success" ) !== -1) {
  275. 				$('#symbol').css('color','green').text('✔').css('top','-275px').css('visibility','visible');
  276. 			} else {
  277. 				$('#symbol').css('color','red').text('✖').css('top','-290px').css('visibility','visible');
  278. 			} 
  279. 		});
  280. 	}
  281. }
  282.  
  283. function theWorks() {
  284. 	this.movinRightAlong = function(where) {
  285. 		localStorage.setItem('scrying_destination',where);
  286. 		localStorage.setItem('scrying_id10t1',$('#id10t1').val());
  287. 		localStorage.setItem('scrying_id10t2',$('#id10t2').val());
  288. 		$('select').each(function() {
  289. 			localStorage.setItem('scrying_'+$(this).attr('id'),$(this).val());
  290. 		});
  291. 		if(where === 'bloodlines') {
  292. 			window.location = "main.php?p=scrying&view=bloodlines";
  293. 		} else if(where === 'progeny') {
  294. 			window.location = "main.php?p=scrying&view=progeny";
  295. 		} else if(where === 'morphintime') {
  296. 			var win = window.open("main.php?p=scrying&view=morphintime","_blank");
  297. 			win.focus();
  298. 		} else if(where === 'dragon') {
  299. 			var win = window.open("main.php?p=search&search=dragon","_blank");
  300. 			win.focus();
  301. 		}
  302. 	}
  303. 	this.parseQueryString = function(theString) {
  304. 		theString = theString.slice(34);
  305. 		var query = theString,
  306. 			map   = {};
  307. 		query.replace(/([^&=]+)=?([^&]*)(?:&+|$)/g, function(match, key, value) {
  308. 			(map[key] = map[key] || []).push(value);
  309. 		});
  310. 		return map;
  311. 	} 
  312. }
  313.  
  314. $(document).ajaxSuccess(function(e, xhr, options) {
  315. 	if (options.url.indexOf('scryer_get') > -1) {
  316. 		canWeFixIt();
  317. 	} else if (options.url.indexOf('scryer_progeny') > -1) {
  318. 		$('#par1').remove();
  319. 		$('#par2').remove();
  320. 		$('#preview img').each(function() {
  321. 			$(this).attr('title',showMeYourTrueColors($(this).attr('src')));
  322. 			$(this).cluetip({splitTitle: '|', width: 245, height: "auto", cursor: "pointer", positionBy: "fixed", leftOffset: "-10px", topOffset: "95px"});
  323. 		});
  324. 		$('#check').css('display','inline');
  325. 	}
  326. });
  327.  
  328. function InjectScript(func, documentLoaded) {
  329. 	// Function stolen-I-mean-borrowed from the old FRE script
  330.     // If head isn't ready, defer execution (this is Chrome support shenanigans)
  331.     var head = document.head || document.getElementsByTagName("head")[0];
  332.     if (head) {
  333.         var source = func.toString();
  334.         var scriptEl = document.createElement('script');
  335.         scriptEl.setAttribute("id", func.name);
  336.         scriptEl.setAttribute("type", "text/javascript");
  337.         if (documentLoaded) {
  338.             source = "document.addEventListener('DOMContentLoaded', " + source + ", true);";
  339.         } else {
  340.             source = "(" + source + ")();";
  341.         }
  342.         scriptEl.innerHTML = source;
  343.         head.appendChild(scriptEl);
  344.     }
  345.     else {
  346.         setTimeout(function() { InjectScript(func, documentLoaded); }, 0);
  347.     }
  348. }
  349.  
  350. var thePage = document.location.href.match(/[^\=]+$/)[0];
  351. InjectScript(theWorks);
  352. if (thePage === "dragon") {
  353. 	InjectScript(privateEye);
  354. } else if (thePage === "bloodlines") {
  355. 	InjectScript(picturePicture);
  356. 	InjectScript(exogamyFTW);
  357. } else if (thePage === "progeny") {
  358. 	InjectScript(picturePicture);
  359. 	InjectScript(showMeYourTrueColors);
  360. 	$('input[value="Preview"]').parent('div').css('width','250px').css('text-align','center');
  361. 	$('input[value="Preview"]').after('<input class="beigebutton thingbutton" type="button" onclick="movinRightAlong(\'bloodlines\')" id="check" style="margin-top: .5em; display: none;" value="Check Bloodlines?">');
  362. } else if (thePage === "morphintime") {
  363. 	InjectScript(metaMorph);
  364. 	runAway();
  365. } else {
  366. 	InjectScript(changingRoom);
  367. 	$('span[style="position:absolute; bottom:10px; right:110px;"]').css('right','207px');
  368. 	$('span[style="position:absolute; bottom:10px; right:-10px;"]').css('right','87px');
  369. 	$('div[style*="390px"]').css('width','320px').parent('span').parent('div').append('<span style="position:absolute; bottom:10px; right:-10px;"><input type="image" id="scry"  src="http://i59.tinypic.com/21erkfk.png" value="Scry"></span>');
  370. 	
  371. } 
  372.  
  373. var thePage = document.location.href.match(/[^\=]+$/)[0];
  374. if(localStorage.getItem('scrying_destination') === thePage) {
  375. 	for(var key in localStorage) {
  376. 		if (key.indexOf("scrying_") > -1) {
  377. 			$('#'+key.slice(8)).val(localStorage.getItem(key));
  378. 			localStorage.removeItem(key);
  379. 		}
  380. 	}
  381. 	if(thePage === 'bloodlines') {
  382. 		$( "#id10t1" ).trigger( "change" );
  383. 		$( "#id10t2" ).trigger( "change" );
  384. 		hipCheck();
  385. 	} else if(thePage === 'progeny') {
  386. 		$( "#id10t1" ).trigger( "change" );
  387. 		$( "#id10t2" ).trigger( "change" );
  388. 		showNewbies();
  389. 	} else if(thePage === 'morphintime') {	
  390. 		lolRedNinjaRanger();
  391. 	} else if(thePage === 'dragon') {
  392. 		$( "form:first" ).submit();
  393. 	}
  394. }