☰

DC_auto_refresh

Custom auto-refresh, display ping/delay network info overlay.

  1. // ==UserScript==
  2. // @name		DC_auto_refresh
  3. // @author		Ladoria
  4. // @version		0.23
  5. // @grant    none
  6. // @description	Custom auto-refresh, display ping/delay network info overlay.
  7. // @match		http://www.dreadcast.net/Main
  8. // @match		http://www.dreadcast.net/Index
  9. // @copyright	2015+, Ladoria
  10. // @namespace InGame
  11. // ==/UserScript==
  12.  
  13. /*	
  14. 	Reload or ask to reload window if no successful network activityfor a while
  15. 	Display tiny overlay on left top of window. (Delay between 2 refreshs)
  16. 	Display alert message before reload (Can be deactivated)
  17. 	Always can abort a reload
  18. */
  19.  
  20. // Global
  21. var reload_asked = 0;
  22. var last_request_completed = Date.now();
  23. var check_delay = 3000; // In ms, x >= 3000. DC's refresh is each ~2950ms.
  24. var lag_buster = 10000; // In ms, setted to casual or hard mode.
  25. var casual_lag_buster = 10000; // In ms, x >= 2000. Time to activate reconnection routine. Because lag is life, m'k.
  26. var hard_lag_buster = 600000; // In ms, x >= 600000 (10min). Time to activate reconnection routine during hard lagging.
  27. casual_lag_buster += check_delay; // Basic anti-lag security
  28. hard_lag_buster += check_delay;
  29. var refresh_time_limit = 120000; // In ms. Time to auto-refresh. (+ lag_buster in script)
  30. var script_paused = false;
  31. var disconnected = false;
  32. var global_clock_interval = undefined;
  33.  
  34. // Cookies
  35. var cookie_prefix = "DC_auto_refresh_";
  36. var animation_enabled = true; // Enable delay animation
  37. var show_overlay = true; // Show ping overlay
  38. var show_overlay_options = true; // Show options overlay
  39. var full_auto = false; // Do not ask to reload
  40.  
  41. // Overlay
  42. var refresh_interval;
  43. var server_date = new Date(); // Hard lagging from 5:00 to 6:00 GTM + 2
  44. var last_request_send = Date.now(); // Last attempt time
  45. var first_request_send = Date.now(); // First of failed attempts time
  46.  
  47. var alert_messages = new Array();
  48. alert_messages.ask_to_reload = 'Attention, vous semblez avoir été déconnecté. Rechargement de la page dans <span class="seconds">&nbsp;</span> seconde(s) <br><div class="btnTxt abort"><div>Annuler</div></div><div class="btnTxt reload"><div>Recharger</div></div>';
  49. alert_messages.unconnected = 'Attention, vous semblez toujours déconnecté.&nbsp;<div class="btnTxt hide"><div>OK</div></div>';
  50. alert_messages.connected = '<span class="ok_message">Vous semblez avoir été reconnecté.</span>&nbsp;&nbsp;<div class="btnTxt hide"><div>OK</div></div>';
  51.  
  52. $(document).ready( function() {
  53. 	$('body').append('<style>#auto_refresh {display: block;z-index: 1000000;position: absolute;top: 31px;width: 100%;text-align: center;}#auto_refresh .overlay_container {z-index: 1000001;position: absolute;top: 0px;max-width: 131px;color: white;line-height: 14px;font-size: 10px;}#auto_refresh .overlay, #auto_refresh .overlay_options {float: left;margin-right: 2px;margin-bottom: 1px;max-height: 125px;color: white;background-color: rgba(0, 0, 0, 0.75);line-height: 14px;font-size: 10px;}#auto_refresh .overlay .toggle, #auto_refresh .overlay_options .toggle, #auto_refresh .overlay_options .abort_reload_auto {float: right;padding-left: 5px;padding-right: 5px;width: 6px;border: 1px solid gray;cursor: pointer;}#auto_refresh .overlay_options .abort_reload_auto {display: none;color: red;font-weight: bold;border: 1px solid red;}#auto_refresh .overlay_options .check_box {float: right;width: 14px;height: 100%;background-color: rgba(255,0,0,0.5);box-shadow: inset 0px 0px 0px 1px red;}#auto_refresh .overlay .refresh_delay, #auto_refresh .overlay_options .full_auto , #auto_refresh .overlay_options .reload_auto {float: left;margin-right: 1px;width: 105px;color: back;background-color: transparent;border: 1px solid green;cursor: pointer;}#auto_refresh .overlay_options .full_auto, #auto_refresh .overlay_options .reload_auto {border: 1px solid gray;}#auto_refresh .overlay_options .reload_auto {cursor: default;display: none;}#auto_refresh .overlay .refresh_delay .actual_time {position: absolute;top: 0px;left: 0px;background-color: rgba(0, 255, 0, 0.1);height: 100%;overflow: hidden;}#auto_refresh .alert_container {display: none;}#auto_refresh .alert {position: relative;display: inline-block;padding: 5px;color: red;background-color: white;text-align: center;font-size: 15px;}#auto_refresh .alert .abort, #auto_refresh .alert .reload, #auto_refresh .alert .hide {display: inline-block;margin: 4px;width: 100px;}#auto_refresh .ok_message{color: green;}</style>');
  54. 	$("body").append('<div id="auto_refresh"><div class="overlay_container"><div class="overlay"><div class="ping refresh_delay" title="Activer/Désactiver animation"><div class="actual_time barre_etat"></div><span class="data">Ping</span> : <span class="seconds">&nbsp;</span> <span class="unit">ms</span></div><div class="toggle" title="Ping">&lt;</div></div><div class="overlay_options"><div class="full_auto" title="Activer/Désactiver notifications"><span class="data">Full auto</span><span class="check_box" value="0">&nbsp;</span></div><div class="toggle" title="Mode full auto">&lt;</div></div><div class="overlay_options"><div class="reload_auto" title="Refresh prévu dans..."><span class="data">Refresh</span> : <span class="seconds">&nbsp;</span> <span class="unit">s</span></div><div class="abort_reload_auto" title="Stopper le refresh prévu">x</div></div></div><div class="alert_container"><div class="alert fakeToolTip"></div></div></div>');
  55. 	
  56. 	function initialize() {
  57. 		if(undefined !== getCookie('global')) {
  58. 			show_overlay = (/overlay_on/gi.test(getCookie('global'))) ? true : false;
  59. 			show_overlay_options = (/overlay_options_on/gi.test(getCookie('global'))) ? true : false;
  60. 			animation_enabled = (/delay_anim_on/gi.test(getCookie('global'))) ? true : false;
  61. 			full_auto = (/full_auto_on/gi.test(getCookie('global'))) ? true : false;
  62. 		}
  63. 		else
  64. 			saveCookie('global','');
  65. 		
  66. 		if(false === show_overlay) {
  67. 			$('#auto_refresh .overlay .toggle').html('>');
  68. 			$('#auto_refresh .overlay .ping').hide();
  69. 		}
  70. 		if(false === animation_enabled) {
  71. 			$('#auto_refresh .animation_enabled .toggle').html('>');
  72. 			$('#auto_refresh .animation_enabled .full_auto').hide();
  73. 		}
  74. 		if(false === show_overlay_options) {
  75. 			$('#auto_refresh .overlay_options .toggle').html('>');
  76. 			$('#auto_refresh .overlay_options .full_auto').hide();
  77. 			
  78. 			if(false === full_auto)
  79. 				$('#auto_refresh .overlay_options .toggle').css({'borderColor' : 'red'});
  80. 			else
  81. 				$('#auto_refresh .overlay_options .toggle').css({'borderColor' : 'green'});
  82. 		}
  83. 		if(true === full_auto) {
  84. 			$('#auto_refresh .overlay_options .full_auto .check_box').css({	'boxShadow' : 'inset 0px 0px 0px 1px rgba(0, 210, 0,1)',
  85. 																			'backgroundColor' : 'rgba(0,255,0,0.5)'});
  86. 		}
  87. 	}
  88. 	
  89. 	// Handle alert messages
  90. 	function show_alert(message) {
  91. 		// Automatic mode, no alert
  92. 		if (true === full_auto) {
  93. 			hide_alert();
  94. 			return;
  95. 		}
  96. 		
  97. 		$('#auto_refresh .alert').html(alert_messages[message]);
  98. 		
  99. 		// Yes/No alert
  100. 		if('ask_to_reload' == message) {
  101. 			// User want to abort, then notify user and pause script
  102. 			$('#auto_refresh .alert .abort').on('click', function() {
  103. 				abort_reload();
  104. 				
  105. 				show_alert('unconnected');
  106. 			});
  107. 			
  108. 			// Do reload
  109. 			$('#auto_refresh .alert .reload').on('click', function() {
  110. 				do_reload();
  111. 			});
  112. 			
  113. 			// Refresh reload countdown
  114. 			refresh_reload_alert(true);
  115. 		}
  116. 		else if ('connected' == message || 'unconnected' == message) {
  117. 			// hide alert
  118. 			$('#auto_refresh .alert .hide').on('click', function() {
  119. 				hide_alert();
  120. 			});
  121. 		}
  122. 		
  123. 		$('#auto_refresh .alert_container').show();
  124. 	}
  125. 	
  126. 	function hide_alert() {
  127. 		$('#auto_refresh .alert_container').hide();
  128. 	}
  129. 	
  130. 	// Stop refresh countdown
  131. 	function abort_reload() {
  132. 		clearInterval(refresh_interval);
  133. 		
  134. 		reload_asked = 0;
  135. 		script_paused = true;
  136. 		// last_request_completed = Date.now();
  137. 	}
  138. 	
  139. 	// Reload window
  140. 	function do_reload() {
  141. 		// Useless, but lovely
  142. 		script_paused = true;
  143. 		
  144. 		// Click method to avoid form issues
  145. 		window.location.href = 'http://www.dreadcast.net/Main';
  146. 	}
  147. 	
  148. 	// Handle reload events
  149. 	function handle_reload() {
  150. 		if(true === script_paused) return;
  151. 		
  152. 		// If no network activity for a while, reload.
  153. 		if (Date.now() - last_request_completed >= lag_buster) {
  154. 			// Delay to refresh
  155. 			if(0 === reload_asked) {
  156. 				reload_asked = Date.now();
  157. 				refresh_reload_auto();
  158. 			}
  159. 			
  160. 			// If yes/no alert hidden, show it (fired every seconds in full auto mode)
  161. 			if (true === full_auto) {
  162. 				hide_alert();
  163. 			}
  164. 			else if (false === $('#auto_refresh .alert .abort').is(':Visible'))
  165. 					show_alert('ask_to_reload'); // If full auto mode, disabled function
  166. 			
  167. 			// If waiting asked and done, reload
  168. 			if (0 !== reload_asked)
  169. 				if (Date.now() - reload_asked >= refresh_time_limit) {
  170. 					
  171. 					do_reload();
  172. 				}
  173. 		}
  174. 	}
  175. 	
  176. 	// Refresh reload countdown
  177. 	function refresh_reload_alert(forced) {
  178. 		if (true === forced || true === $('#auto_refresh .alert .seconds').is(':Visible')) {
  179. 			$('#auto_refresh .alert .seconds').html(Math.round((refresh_time_limit - (Date.now() - reload_asked)) / 1000));
  180. 		}
  181. 	}
  182. 	
  183. 	// Overlay
  184. 	// Display refreshed ping
  185. 	function refresh_ping(request_send, request) {
  186. 		// If connected, refresh values
  187. 		if (false === disconnected)
  188. 			first_request_send = request_send;
  189. 		else {
  190. 			request = Date.now(); // If disconnected, keep stored data.
  191. 			request_send = first_request_send;
  192. 		}
  193. 		
  194. 		var ping = ((request - request_send) < 0) // During requesting new Check
  195. 			? ping
  196. 			: request - request_send;
  197. 		
  198. 		if (false === show_overlay) {
  199. 			if (ping > (check_delay * 2))
  200. 				$('#auto_refresh .overlay .toggle').css({'borderColor' : 'red'});
  201. 			
  202. 			return;
  203. 		}
  204. 		
  205. 		// Time background-color cheat.
  206. 		if (ping > (check_delay * 2)) {
  207. 			$('#auto_refresh .overlay .refresh_delay').css(	{'borderColor' : 'red'});
  208. 			$('#auto_refresh .overlay .actual_time').css(	{'width' : '0px'},
  209. 															{'backgroundColor' : 'rgba(255, 0, 0, 0.2)'});
  210. 			$('#auto_refresh .overlay .refresh_delay .data').html('Délai');
  211. 		}
  212. 		
  213. 		if (true === disconnected) {
  214. 			ping = Math.round(ping / 100) / 10;
  215. 			$('#auto_refresh .overlay .refresh_delay .unit').html('s');
  216. 		}
  217. 		else
  218. 			$('#auto_refresh .overlay .refresh_delay .unit').html('ms');
  219. 		
  220. 		$('#auto_refresh .overlay .ping .seconds').html(ping);
  221. 	}
  222. 	// Display refreshed delay animation
  223. 	function refresh_delay(request, animation_start) {
  224. 		var animation_progression = 0;
  225. 		
  226. 		if (undefined === animation_start)
  227. 			animation_start = 0;
  228. 		else {
  229. 			// Percent of animation completion
  230. 			animation_progression = (request + check_delay - animation_start);
  231. 			animation_progression = 1 - (animation_progression / check_delay);
  232. 		}
  233. 		// Stop animation, then set to new width
  234. 		$('#auto_refresh .overlay .actual_time').stop();
  235. 		
  236. 		// Overlay hide, do not animate
  237. 		if(false === show_overlay) {
  238. 			$('#auto_refresh .overlay .toggle').css({'borderColor' : 'green'});
  239. 			
  240. 			return;
  241. 		}
  242. 		
  243. 		$('#auto_refresh .overlay .toggle').css({'borderColor' : 'gray'});
  244. 		$('#auto_refresh .overlay .refresh_delay').css(	{'borderColor' : 'green'});
  245. 		$('#auto_refresh .overlay .actual_time').css(	{'width' : (animation_progression * $('#auto_refresh .overlay .refresh_delay').width()) + 'px'},
  246. 														{'backgroundColor' : 'rgba(0, 255, 0, 0.2)'});
  247. 		$('#auto_refresh .overlay .refresh_delay .data').html('Ping');
  248. 		
  249. 		if (false === animation_enabled) return;
  250. 		
  251. 		// Moving width to 100% at correct speed
  252. 		$('#auto_refresh .overlay .actual_time').animate(
  253. 			{width : $('#auto_refresh .overlay .refresh_delay').width()}
  254. 			, check_delay - (check_delay * animation_progression));
  255. 	}
  256. 	
  257. 	function refresh_reload_auto() {
  258. 		if (0 === reload_asked || true !== full_auto) {
  259. 			$('#auto_refresh .overlay_options .reload_auto').hide();
  260. 			$('#auto_refresh .overlay_options .abort_reload_auto').hide();
  261. 			return;
  262. 		}
  263. 		
  264. 		$('#auto_refresh .overlay_options .reload_auto').show();
  265. 		$('#auto_refresh .overlay_options .abort_reload_auto').show();
  266. 		$('#auto_refresh .overlay_options .reload_auto .seconds').html(Math.round((refresh_time_limit - (Date.now() - reload_asked)) / 1000));
  267. 	}
  268. 	
  269. 	// Toggle delay animation
  270. 	$('#auto_refresh .overlay .ping').on('click', function() {
  271. 		animation_enabled = !animation_enabled;
  272. 		
  273. 		refresh_delay(last_request_completed, Date.now());
  274. 		
  275. 		// Remove old value and put new value
  276. 		saveCookie(	'global',
  277. 					getCookie('global').replace(/(delay_anim_on|delay_anim_off)/gi, '') + ((true === animation_enabled) ? 'delay_anim_on' : 'delay_anim_off'));
  278. 	});
  279. 	// Toggle full auto mode
  280. 	$('#auto_refresh .overlay_options .full_auto').on('click', function() {
  281. 		full_auto = !full_auto;
  282. 		
  283. 		if(true === full_auto) {
  284. 			$('#auto_refresh .overlay_options .full_auto .check_box').css({	'boxShadow' : 'inset 0px 0px 0px 1px rgba(0, 210, 0,1)',
  285. 																			'backgroundColor' : 'rgba(0,255,0,0.5)'});
  286. 		}
  287. 		else {
  288. 			$('#auto_refresh .overlay_options .full_auto .check_box').css({	'boxShadow' : 'inset 0px 0px 0px 1px red',
  289. 																			'backgroundColor' : 'rgba(255,0,0,0.5)'});
  290. 		}
  291. 		
  292. 		script_paused = false;
  293. 		
  294. 		// Remove old value and put new value
  295. 		saveCookie(	'global',
  296. 					getCookie('global').replace(/(full_auto_on|full_auto_off)/gi, '') + ((true === full_auto) ? 'full_auto_on' : 'full_auto_off'));
  297. 	});
  298. 	
  299. 	// Toggle overlay
  300. 	$('#auto_refresh .overlay .toggle').on('click', function() {
  301. 		$('#auto_refresh .overlay .ping').toggle();
  302. 		
  303. 		show_overlay = !show_overlay;
  304. 		
  305. 		if (true === show_overlay) {
  306. 			$('#auto_refresh .overlay .toggle').html('<');
  307. 			$('#auto_refresh .overlay .toggle').css({'borderColor' : 'gray'});
  308. 		}
  309. 		else {
  310. 			$('#auto_refresh .overlay .toggle').html('>');
  311. 			$('#auto_refresh .overlay .toggle').css({'borderColor' : $('#auto_refresh .overlay .refresh_delay').css('borderColor')});
  312. 		}
  313. 		
  314. 		if(true === animation_enabled)
  315. 			refresh_delay(last_request_completed, Date.now());
  316. 		
  317. 		refresh_ping(last_request_send, last_request_completed);
  318. 		
  319. 		// Remove old value and put new value
  320. 		saveCookie(	'global',
  321. 					getCookie('global').replace(/(overlay_on|overlay_off)/gi, '') + ((true === show_overlay) ? 'overlay_on' : 'overlay_off'));
  322. 	});
  323. 	
  324. 	// Toggle overlay options
  325. 	$('#auto_refresh .overlay_options .toggle').on('click', function() {
  326. 		$('#auto_refresh .overlay_options .full_auto').toggle(); // full auto option
  327. 		
  328. 		show_overlay_options = !show_overlay_options;
  329. 		
  330. 		if (true === show_overlay_options) {
  331. 			$('#auto_refresh .overlay_options .toggle').css({'borderColor' : 'gray'});
  332. 			$('#auto_refresh .overlay_options .toggle').html('<');
  333. 		}
  334. 		else {
  335. 			if (true === full_auto)
  336. 				$('#auto_refresh .overlay_options .toggle').css({'borderColor' : 'green'});
  337. 			else
  338. 				$('#auto_refresh .overlay_options .toggle').css({'borderColor' : 'red'});
  339. 				
  340. 			$('#auto_refresh .overlay_options .toggle').html('>');
  341. 		}
  342. 		
  343. 		// Remove old value and put new value
  344. 		saveCookie(	'global',
  345. 					getCookie('global').replace(/(overlay_options_on|overlay_options_off)/gi, '') + ((true === show_overlay_options) ? 'overlay_options_on' : 'overlay_options_off'));
  346. 	});
  347. 	
  348. 	$('#auto_refresh .overlay_options .abort_reload_auto').on('click', function() {
  349. 		abort_reload();
  350. 		refresh_reload_auto();
  351. 	});
  352. 	
  353. 	// Global clock
  354. 	function start_global_clock() {
  355. 		if(undefined !== global_clock_interval)
  356. 			clearInterval(global_clock_interval);
  357. 			
  358. 		global_clock_interval = setInterval(function() {
  359. 			// In case of hard lagging (5:00 -> 5:59)
  360. 			lag_buster = (5 == server_date.getHours()) ? hard_lag_buster : casual_lag_buster;
  361. 			
  362. 			// Alert reload time refresh
  363. 			refresh_reload_alert();
  364. 			
  365. 			// Ping refresh
  366. 			refresh_ping(last_request_send, last_request_completed);
  367. 			
  368. 			// Reload auto refresh
  369. 			refresh_reload_auto();
  370. 			
  371. 			// Countdown to window reload
  372. 			handle_reload();
  373. 		}, 1000);
  374. 	}
  375. 	
  376. 	// Script start
  377. 	initialize();
  378. 	start_global_clock();
  379. 	
  380. 	// Update last request send time
  381. 	$(document).ajaxSend( function(a,b,c) {
  382. 		if(/Check/.test(c.url)) {
  383. 			last_request_send = Date.now();
  384. 		}
  385. 	});
  386. 	
  387. 	// Update last request time
  388. 	$(document).ajaxComplete( function(a,b,c) {
  389. 		if(/Check/.test(c.url)) {
  390. 			// Refresh server date
  391. 			server_date = new Date(b.getResponseHeader('Date'));
  392. 			
  393. 			// If request succeeded
  394. 			if(b.readyState === 4) {
  395. 				// If reconnected again connexion, resume script and notify
  396. 				if($('#auto_refresh .alert').is(':Visible') || true === disconnected) {
  397. 					show_alert('connected');
  398. 				
  399. 					// Stop reload
  400. 					abort_reload();
  401. 				}
  402. 				
  403. 				// Resume script
  404. 				script_paused = false;
  405. 				disconnected = false;
  406. 				
  407. 				last_request_completed = Date.now();
  408. 				
  409. 				// Display new data (better sync)
  410. 				refresh_delay(last_request_completed);
  411. 				refresh_reload_auto();
  412. 			}
  413. 			else
  414. 				disconnected = true;
  415. 			
  416. 			// Display new data (better sync)
  417. 			refresh_ping(last_request_send, last_request_completed);
  418. 		}
  419. 	});
  420. });
  421. // handle cookies
  422. function saveCookie(name,val) {
  423. 	name = cookie_prefix + name;
  424. 	
  425. 	if(!navigator.cookieEnabled) return;
  426. 		document.cookie = name + '=' + val + ';expires=Wed, 01 Jan 2020 00:00:00 GMT; path=/';
  427. }
  428. function getCookie(var_name) {
  429. 	name = cookie_prefix + var_name;
  430. 	
  431. 	if(!navigator.cookieEnabled) return undefined;
  432. 	
  433. 	var start = document.cookie.indexOf(name + '=')
  434. 	if(start == -1) return undefined;
  435. 	start += name.length + 1;
  436. 	
  437. 	var end = document.cookie.indexOf(';',start);
  438. 	if (end == -1) end = document.cookie.lenght;
  439. 	
  440. 	return document.cookie.substring(start,end);
  441. };
  442. console.log('DC - Auto Refresh started');