Scrying Workshop Reworked

UX Improvements for Flight Rising's Scrying Workshop and Search

当前为 2014-04-14 提交的版本,查看 最新版本

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