☰

GLB Canvas Replay Conversion

sdfsdf

  1. // ==UserScript==
  2. // @name        GLB Canvas Replay Conversion
  3. // @namespace   pbr/canvas
  4. // @include     http://goallineblitz.com/game/replay.pl?game_id=*&pbp_id=*
  5. // @copyright   2012, pabst
  6. // @license     (CC) Attribution Share Alike; http://creativecommons.org/licenses/by-sa/3.0/
  7. // @version	12.11.30
  8. // @description sdfsdf
  9. // ==/UserScript==
  10.  
  11. /*
  12.  *
  13.  * pabst did this 12/11/27+
  14.  *
  15.  *
  16.  */
  17.  
  18. unsafeWindow.pause();
  19. document.getElementById("offense_container").style.visibility = "hidden";
  20. document.getElementById("defense_container").style.visibility = "hidden";
  21. document.getElementById("offense_container").style.display = "none";
  22. document.getElementById("defense_container").style.display = "none";
  23.  
  24. var play_data = null;
  25. var imageData = [];
  26.  
  27. if (!window.requestAnimationFrame) {
  28. 	requestAnimFrame = (function () {
  29. 		return  window.requestAnimationFrame       || 
  30. 	        	window.webkitRequestAnimationFrame || 
  31. 	              	window.mozRequestAnimationFrame    || 
  32. 	              	window.oRequestAnimationFrame      || 
  33. 	              	window.msRequestAnimationFrame     || 
  34. 	              	function(callback, element) {
  35. 				console.log("no request animation frame!!");
  36. 	                	window.setTimeout(callback, 1000 / 20);
  37. 	              	};
  38. 	}) ();
  39. };
  40.  
  41. window.setTimeout(
  42. 	function() {
  43. 		if (unsafeWindow.defaultFrameSpeed != 100) {
  44. 			console.log("replays must be set to 10fps for this script to work : "+unsafeWindow.defaultFrameSpeed);
  45. 			unsafeWindow.play();
  46. 		}
  47. 		else {
  48. 			main();
  49. 		}
  50. 	}
  51. , 100);
  52.  
  53. function main() {
  54. 	var container = document.getElementById("replay_container")
  55. 	container.style.height = "500px";
  56. 	container.style.width = "520px";
  57. 	var area = document.getElementById("replay_area");
  58. 	container.removeChild(area);
  59.  
  60. 	play_data = fixFrames();
  61. 	fixButtons();
  62.  
  63. 	initBackground();
  64. 	initForeground();
  65. 	initOffense();
  66. 	initDefense();
  67. 	initReplayInfo();
  68.  
  69. 	drawFrame(0,0);
  70. 	setTimeout(function() { 
  71. 		isPlaying = true;
  72. 		document.getElementById("pause_button").visibility = "visible";
  73. 		document.getElementById("play_button").visibility = "hidden";
  74. 		render(); 
  75. 	}, 2500);
  76. }
  77.  
  78. function initBackground() {
  79. 	var canvas = document.createElement("canvas");
  80. 	canvas.style.position = 'absolute';
  81. 	canvas.setAttribute("id","background");
  82. 	canvas.setAttribute("width","520px");
  83. 	canvas.setAttribute("height","500px");
  84.  
  85. 	var container = document.getElementById("replay_container")
  86. 	container.appendChild(canvas);
  87.  
  88. 	var context = canvas.getContext("2d");
  89. 	context.save();
  90. }
  91.  
  92. function initForeground() {
  93. 	var canvas = document.createElement("canvas");
  94. 	canvas.style.position = 'absolute';
  95. 	canvas.setAttribute("id","foreground");
  96. 	canvas.setAttribute("width","520px");
  97. 	canvas.setAttribute("height","500px");
  98.  
  99. 	var container = document.getElementById("replay_container")
  100. 	container.appendChild(canvas);
  101.  
  102. 	var context = canvas.getContext("2d");
  103. 	context.save();
  104. }
  105.  
  106. function initOffense() {
  107. 	var canvas = document.createElement("canvas");
  108. 	canvas.style.position = 'absolute';
  109. 	canvas.style.top = "20px";
  110.  
  111. 	canvas.setAttribute("id","offense");
  112. 	canvas.setAttribute("width","20px");
  113. 	canvas.setAttribute("height","460px");
  114.  
  115. 	var container = document.getElementById("replay_container")
  116. 	container.appendChild(canvas);
  117.  
  118. 	canvas.addEventListener("click", offenseClicked, false);
  119. }
  120.  
  121. function offenseClicked() {
  122. 	renderOffenseLineup();
  123. }
  124.  
  125. function initDefense() {
  126. 	var canvas = document.createElement("canvas");
  127. 	canvas.style.position = 'absolute';
  128. 	canvas.style.left = "500px";
  129. 	canvas.style.top = "20px";
  130.  
  131. 	canvas.setAttribute("id","defense");
  132. 	canvas.setAttribute("width","20px");
  133. 	canvas.setAttribute("height","460px");
  134.  
  135. 	var container = document.getElementById("replay_container")
  136. 	container.appendChild(canvas);
  137.  
  138. 	canvas.addEventListener("click", defenseClicked, false);
  139. }
  140.  
  141. function defenseClicked() {
  142. 	renderDefenseLineup();
  143. }
  144.  
  145. function initReplayInfo() {
  146. 	var canvas = document.createElement("canvas");
  147. 	canvas.style.position = 'absolute';
  148. 	canvas.setAttribute("id","replayInfo");
  149. 	canvas.setAttribute("width","520px");
  150. 	canvas.setAttribute("height","20px");
  151.  
  152. 	var container = document.getElementById("replay_container")
  153. 	container.appendChild(canvas);
  154.  
  155. 	var canvas = document.createElement("canvas");
  156. 	canvas.style.position = 'absolute';
  157. 	canvas.style.top = "480px";
  158. 	canvas.setAttribute("id","playResults");
  159. 	canvas.setAttribute("width","520px");
  160. 	canvas.setAttribute("height","20px");
  161.  
  162. 	var container = document.getElementById("replay_container")
  163. 	container.appendChild(canvas);
  164. }
  165.  
  166. function getTeamBColor(id) {
  167. 	var team = unsafeWindow.ptid[id];
  168. 	var position = unsafeWindow.players[id].position;
  169. 	var fcolor = unsafeWindow.home_color2+"_border_home";
  170. 	var bcolor = unsafeWindow.home_color1;
  171. 	if (unsafeWindow.home != team) {
  172. 		fcolor = unsafeWindow.away_color2+"_border";
  173. 		bcolor = unsafeWindow.away_color1;
  174. 	}
  175. 	bcolor = bcolor.replace("mid_","medium");	
  176. 	bcolor = bcolor.replace("_","");
  177. 	return bcolor;
  178. }
  179.  
  180. function getTeamFColor(bcolor) {
  181. 	var canvas = document.createElement("canvas");
  182. 	var context = canvas.getContext("2d");
  183. 	context.strokeStyle = bcolor;
  184. 	var color = context.strokeStyle.toString().slice(1);
  185. 	var r = parseInt(color.slice(0,2), 16);
  186. 	var g = parseInt(color.slice(2,4), 16);
  187. 	var b = parseInt(color.slice(4,6), 16);
  188. 	if ((r+g+b)/3 > 128) {
  189. 		return "black";
  190. 	}
  191. 	else {
  192. 		return "white";
  193. 	}
  194. }
  195.  
  196. function renderReplayInfo() {
  197. 	if (imageData["replayInfo"] == null) {
  198. 		var canvas = document.createElement("canvas");
  199. 		canvas.setAttribute("width","520px");
  200. 		canvas.setAttribute("height","20px");
  201. 		var context = canvas.getContext("2d");
  202.  
  203. 		var gradient = context.createLinearGradient(0,0,0,20);
  204. 		gradient.addColorStop(0,"rgb(100,100,100)");
  205. 		gradient.addColorStop(1,"rgb(40,40,40)");
  206.  
  207. 		context.lineWidth = 2;
  208. 		context.fillStyle = gradient;
  209. 		context.fillRect(0,0,520,20);
  210.  
  211. 		context.font = "bold 18px sans-serif";
  212. 		context.fillStyle = "#ffcc00";
  213. 		var info = document.getElementsByTagName("h1")[0].textContent;
  214. 		var length = context.measureText(info.toString());
  215. 		context.fillText(info.toString(), 260-length.width/2,16);
  216.  
  217. 		var p = play_data[0][1];
  218. 		var id = p.id;
  219. 		var bcolor = getTeamBColor(id);
  220. 		var fcolor = getTeamFColor(bcolor);
  221.  
  222. 		context.lineWidth = 2;
  223. 		context.fillStyle = bcolor;
  224. 		context.strokeStyle = fcolor;
  225.  
  226. 		context.beginPath();
  227. 		context.moveTo(0,0);
  228. 		context.lineTo(40, 0);
  229. 		context.lineTo(60,20);
  230. 		context.lineTo(0,20);
  231. 		context.lineTo(0,0);
  232. 		context.closePath();
  233. 		context.fill();
  234. 		context.stroke();
  235. 		
  236. 		context.font="bold 16px sans-serif";
  237. 		var score = document.getElementById("off_score").textContent;
  238. 		var length = context.measureText(score.toString());
  239. 		context.fillStyle = fcolor;
  240. 		context.fillText(score.toString(), 20-length.width/2,16);
  241.  
  242. 		var p = play_data[0][12];
  243. 		var id = p.id;
  244. 		var bcolor = getTeamBColor(id);
  245. 		var fcolor = getTeamFColor(bcolor);
  246.  
  247. 		context.lineWidth = 2;
  248. 		context.fillStyle = bcolor;
  249. 		context.strokeStyle = fcolor;
  250.  
  251. 		context.beginPath();
  252. 		context.moveTo(520,0);
  253. 		context.lineTo(480, 0);
  254. 		context.lineTo(460,20);
  255. 		context.lineTo(520,20);
  256. 		context.lineTo(520,0);
  257. 		context.closePath();
  258. 		context.fill();
  259. 		context.stroke();
  260.  
  261. 		context.font="bold 16px sans-serif";
  262. 		var score = document.getElementById("def_score").textContent;
  263. 		var length = context.measureText(score.toString());
  264. 		context.fillStyle = fcolor;
  265. 		context.fillText(score.toString(), 500-length.width/2,16);
  266.  
  267. 		imageData["replayInfo"] = canvas;
  268. 	}
  269. 	var canvas = document.getElementById("replayInfo");
  270. 	var context = canvas.getContext("2d");
  271. 	context.drawImage(imageData["replayInfo"],0,0);
  272.  
  273. 	if (imageData["playResults"] == null) {
  274. 		var canvas = document.createElement("canvas");
  275. 		canvas.setAttribute("width","520px");
  276. 		canvas.setAttribute("height","20px");
  277. 		var context = canvas.getContext("2d");
  278.  
  279. 		var gradient = context.createLinearGradient(0,0,0,20);
  280. 		gradient.addColorStop(0,"rgb(100,100,100)");
  281. 		gradient.addColorStop(1,"rgb(40,40,40)");
  282.  
  283. 		context.lineWidth = 2;
  284. 		context.fillStyle = gradient;
  285. 		context.fillRect(0,0,520,20);
  286.  
  287. 		var size = 14;
  288. 		do {
  289. 			context.font = "bold "+size+"px sans-serif";
  290. 			context.fillStyle = "#ffcc00";
  291. 			var info = document.getElementById("outcome_content").textContent;
  292. 			var length = context.measureText(info.toString());
  293. 			size--;
  294. 		}
  295. 		while (length.width > 520);
  296. 		context.fillText(info.toString(), 260-length.width/2,14);
  297. 		imageData["playResults"] = canvas;
  298. 	}
  299. 	var canvas = document.getElementById("playResults");
  300. 	var context = canvas.getContext("2d");
  301. 	context.drawImage(imageData["playResults"],0,0);
  302. }
  303.  
  304. function renderOffenseBar(frame, pct, loc) {
  305. 	if (imageData["offenseBar"] == null) {
  306. 		var canvas = document.createElement("canvas");
  307. 		canvas.setAttribute("width","20px");
  308. 		canvas.setAttribute("height","480px");
  309. 		var context = canvas.getContext("2d");
  310. 	
  311. 		var p = play_data[0][1];
  312. 		var id = p.id;
  313. 		var bcolor = getTeamBColor(id);
  314. 		var fcolor = getTeamFColor(bcolor);
  315.  
  316. 		context.lineWidth = 3;
  317. 		context.fillStyle = bcolor;
  318. 		context.strokeStyle = fcolor;
  319. 		context.fillRect(0,0, 20,460);
  320. 		context.strokeRect(0,0, 20,460);
  321. 	
  322. 		var teamName = document.getElementsByClassName("secondary_container")[0].textContent;
  323. 		context.fillStyle = fcolor;
  324. 		context.lineWidth=1;
  325. 		context.font="bold 14px sans-serif";
  326. 		context.save();
  327. 	
  328. 		context.rotate(Math.PI/2);
  329. 		context.fillText(teamName, 50,-6);
  330. 		context.restore();
  331. 	
  332. 		imageData["offenseBar"] = canvas;
  333. 	}
  334.  
  335. 	var canvas = document.getElementById("offense");
  336. 	var context = canvas.getContext("2d");
  337. 	context.drawImage(imageData["offenseBar"],0,0);
  338.  
  339. }
  340.  
  341. var offenseLineupVisible = false;
  342. function renderOffenseLineup(frame, pct, loc) {
  343. 	offenseLineupVisible = !offenseLineupVisible;
  344. 	
  345. 	if (offenseLineupVisible == true) {
  346. 		var canvas = document.createElement("canvas");
  347. 		canvas.setAttribute("id","offenseLineup");
  348. 		canvas.setAttribute("width","200px");
  349. 		canvas.setAttribute("height","480px");
  350. 		canvas.style.position = "absolute";
  351. 		canvas.style.left = "20px";
  352. 		var context = canvas.getContext("2d");
  353.  
  354. 		var id = unsafeWindow.play_data[0][1].id;
  355. 		var team = unsafeWindow.ptid[id];
  356. 		var bcolor = getTeamBColor(id);
  357. 		var fcolor = getTeamFColor(bcolor);
  358.  
  359. 		context.font="14px sans-serif";
  360. 		context.lineWidth = 2;
  361. 		context.fillStyle = bcolor;
  362. 		context.strokeStyle = fcolor;
  363. 		context.fillRect(0,130, 200,500);
  364. 		context.strokeRect(0,130, 200,500);
  365.  
  366. 		for (var i=1; i<12; i++) {
  367. 			var id = unsafeWindow.play_data[0][i].id;
  368. 			var position = unsafeWindow.players[id].position;
  369. 			var name = unsafeWindow.players[id].name;
  370.  
  371. 			var x = i;
  372. 			var y = 216;
  373. 			context.fillStyle = bcolor
  374. 			context.fillRect(0,(x-1)*24+y, 200,x*24+y);
  375. 			context.strokeRect(0,(x-1)*24+y, 200,x*24+y);
  376. 			context.fillStyle = fcolor;
  377. 			context.fillText(name, 25, x*24-10+y+3);
  378. 			context.drawImage(imageData[id], 5, (x-1)*24+y+4);
  379. 		}
  380.  
  381. 		var image = new Image();
  382. 		image.src = "http://goallineblitz.com/game/team_pic.pl?team_id="+team;
  383. 		var imgcanvas = document.createElement("canvas");
  384. 		var imgcontext = imgcanvas.getContext("2d");
  385. 		imgcontext.scale(75/image.width, 75/image.height);
  386. 		imgcontext.drawImage(image, 0, 0);
  387.  
  388. 		context.drawImage(imgcanvas, 5,135);
  389.  
  390. 		context.font = "64px sans-serif";
  391. 		context.fillColor = fcolor;
  392. 		var score = document.getElementById("off_score").textContent;
  393. 		var length = context.measureText(score.toString());
  394. 		context.fillText(score.toString(), 138-length.width/2,200);
  395.  
  396. 		var container = document.getElementById("replay_container");
  397. 		container.appendChild(canvas);		
  398. 	}
  399. 	else {
  400. 		var lineup = document.getElementById("offenseLineup");
  401. 		lineup.parentNode.removeChild(lineup);
  402. 	}
  403. }
  404.  
  405. function renderDefenseBar(frame, pct, loc) {
  406. 	if (imageData["defenseBar"] == null) {
  407. 		var canvas = document.createElement("canvas");
  408. 		canvas.setAttribute("width","20px");
  409. 		canvas.setAttribute("height","460px");
  410. 		var context = canvas.getContext("2d");
  411. 		
  412. 		var p = play_data[0][12];
  413. 		var id = p.id;
  414. 		var bcolor = getTeamBColor(id);
  415. 		var fcolor = getTeamFColor(bcolor);
  416.  
  417. 		context.lineWidth = 3;
  418. 		context.fillStyle = bcolor;
  419. 		context.strokeStyle = fcolor;
  420. 		context.fillRect(0,0, 20,460);
  421. 		context.strokeRect(0,0, 20,460);
  422. 	
  423. 		var teamName = document.getElementsByClassName("secondary_container")[1].textContent;
  424. 		context.fillStyle = fcolor;
  425. 		context.lineWidth=1;
  426. 		context.font="bold 14px sans-serif";
  427. 		context.save();
  428. 	
  429. 		context.rotate(Math.PI/2);
  430. 		context.fillText(teamName, 50,-6);
  431. 		context.restore();
  432. 	
  433. 		imageData["defenseBar"] = canvas;
  434. 	}
  435.  
  436. 	var canvas = document.getElementById("defense");
  437. 	var context = canvas.getContext("2d");
  438. 	context.drawImage(imageData["defenseBar"],0,0);
  439. }
  440.  
  441. var defenseLineupVisible = false;
  442. function renderDefenseLineup(frame, pct, loc) {
  443. 	defenseLineupVisible = !defenseLineupVisible;
  444. 	
  445. 	if (defenseLineupVisible == true) {
  446. 		var canvas = document.createElement("canvas");
  447. 		canvas.setAttribute("id","defenseLineup");
  448. 		canvas.setAttribute("width","200px");
  449. 		canvas.setAttribute("height","480px");
  450. 		canvas.style.position = "absolute";
  451. 		canvas.style.left = "300px";
  452. 		var context = canvas.getContext("2d");
  453.  
  454. 		var id = unsafeWindow.play_data[0][13].id;
  455. 		var team = unsafeWindow.ptid[id];
  456. 		var bcolor = getTeamBColor(id);
  457. 		var fcolor = getTeamFColor(bcolor);
  458.  
  459. 		context.font="14px sans-serif";
  460. 		context.lineWidth = 2;
  461. 		context.fillStyle = bcolor;
  462. 		context.strokeStyle = fcolor;
  463. 		context.fillRect(0,130, 200,460);
  464. 		context.strokeRect(0,130, 200,460);
  465.  
  466. 		for (var i=12; i<23; i++) {
  467. 			var id = unsafeWindow.play_data[0][i].id;
  468. 			var position = unsafeWindow.players[id].position;
  469. 			var name = unsafeWindow.players[id].name;
  470.  
  471. 			var x = i-11;
  472. 			var y = 216;
  473. 			context.fillStyle = bcolor;
  474. 			context.fillRect(0,(x-1)*24+y, 200,x*24+y);
  475. 			context.strokeRect(0,(x-1)*24+y, 200,x*24+y);
  476. 			context.fillStyle = fcolor;
  477. 			context.fillText(name, 25, x*24-10+y+3);
  478. 			context.drawImage(imageData[id], 5, (x-1)*24+y+4);
  479. 		}
  480.  
  481. 		var image = new Image();
  482. 		image.src = "http://goallineblitz.com/game/team_pic.pl?team_id="+team;
  483. 		var imgcanvas = document.createElement("canvas");
  484. 		var imgcontext = imgcanvas.getContext("2d");
  485. 		imgcontext.scale(75/image.width, 75/image.height);
  486. 		imgcontext.drawImage(image, 0, 0);
  487.  
  488. 		context.drawImage(imgcanvas, 5,135);
  489.  
  490. 		context.font = "64px sans-serif";
  491. 		context.fillColor = fcolor;
  492. 		var score = document.getElementById("def_score").textContent;
  493. 		var length = context.measureText(score.toString());
  494. 		context.fillText(score.toString(), 138-(length.width/2),200);
  495.  
  496. 		var container = document.getElementById("replay_container");
  497. 		container.appendChild(canvas);		
  498. 	}
  499. 	else {
  500. 		var lineup = document.getElementById("defenseLineup");
  501. 		lineup.parentNode.removeChild(lineup);
  502. 	}
  503. }
  504.  
  505. function drawFrame(frame, pct) {
  506. 	var loc = renderField(frame, pct);
  507.  
  508. 	var canvas = document.getElementById("foreground");
  509. 	var context = canvas.getContext("2d");
  510. 	context.restore();
  511. 	context.save();
  512.         context.clearRect(20, 0, 500, 1160);
  513.  
  514. 	renderFirstDown(frame, pct, loc);
  515. 	renderVisionCone(frame, pct, loc);
  516. 	renderPlayers(frame, pct, loc);
  517. 	renderBall(frame, pct, loc);
  518. 	renderIcons(frame, pct, loc);
  519.  
  520. 	renderOffenseBar(frame, pct, loc);
  521. 	renderDefenseBar(frame, pct, loc);
  522. 	renderReplayInfo();
  523. }
  524.  
  525. var initialTime = null;
  526. var currentTime = null;
  527. var isPlaying = false;
  528.  
  529. var frameMultiplier = 1;
  530.  
  531. function render() {
  532. 	if (isPlaying == false) return;
  533.  
  534.  	currentTime = new Date();
  535. 	if (initialTime == null) {
  536. 		initialTime = currentTime;
  537. 	}
  538.  
  539. 	var diff = currentTime - initialTime;
  540. 	var frame = diff/100 * frameMultiplier;
  541. 	pct = frame - Math.floor(frame);
  542. 	frame = Math.floor(frame) % play_data.length;
  543.  
  544.         try {
  545. 		drawFrame(frame, pct);
  546. 		lastTime = currentTime;
  547. 		var scrubber = 480/play_data.length*(frame+pct);
  548. 		document.getElementById("scrubber_handle").style.left = scrubber+"px";
  549.         }
  550. 	catch (e) {
  551.                 window.console.log(e);
  552.         }
  553.  
  554. 	measureFps();
  555.  
  556. 	if (frame >= play_data.length-1) {
  557. 		initialTime = null;
  558. 		setTimeout(function() { 
  559. 			drawFrame(0,0); 
  560. 			setTimeout(function() { render(); }, 2500);			
  561. 		}, 2500);
  562. 	}
  563. 	else {
  564. 	        requestAnimFrame(render);
  565. 	}
  566. }
  567.  
  568. function renderIcons(frame, pct, loc) {
  569. 	var canvas = document.getElementById("foreground");
  570. 	var context = canvas.getContext("2d");
  571.  
  572. 	for (var p=1; p<play_data[frame].length; p++) {
  573. 		var left = play_data[frame];
  574. 		if (left[p].icon != null) {
  575. 			var right = play_data[Math.min(frame+1, play_data.length-1)];
  576. 	
  577. 			var xdiff = right[p].x - left[p].x;
  578. 			var ydiff = right[p].y - left[p].y;
  579. 			var x = left[p].x + xdiff * pct;
  580. 			var y = left[p].y + ydiff * pct + loc - 20;
  581. 	
  582. 			var image = new Image();
  583. 			image.src = "/images/replay_icons/"+left[p].icon+".gif"; 
  584. 			context.drawImage(image, x-14, y-16);
  585. 		}
  586. 	}
  587. }
  588.  
  589. function renderVisionCone(frame, pct, loc) {
  590. 	var p = play_data[frame][0];
  591. 	if ((p.tx != null) && (p.ty != null)) {
  592. 		var left = play_data[frame][0];
  593. 		var right = play_data[Math.min(frame+1, play_data.length-1)][0];
  594.  
  595. 		var xdiff = right.x - left.x;
  596. 		var ydiff = right.y - left.y;
  597. 		var ballx = left.x + xdiff * pct - 16;
  598. 		var bally = left.y + ydiff * pct + loc;
  599.  
  600. 		var xdiff = right.tx - left.tx;
  601. 		var ydiff = right.ty - left.ty;
  602. 		var targetx = left.tx + xdiff * pct - 16;
  603. 		var targety = left.ty + ydiff * pct + loc - 20;
  604.  
  605. 		var canvas = document.getElementById("foreground");
  606. 		var context = canvas.getContext("2d");
  607. 		context.drawImage(imageData["target"], targetx+11, targety-5);
  608.  
  609. /*
  610. 		var gradient = context.createRadialGradient(250,900,0,300,950,1);
  611. 		gradient.addColorStop(0,"rgba(200,200,200,1)");
  612. 		gradient.addColorStop(1,"rgba(200,200,200,0.0)");
  613. 		context.beginPath();
  614. 		context.moveTo(250,900);
  615. 		context.lineTo(250,950);
  616. 		context.lineTo(300,900);
  617. 		context.lineTo(250,900);
  618. 		context.closePath();
  619. 		context.fillStyle = gradient;
  620. 		context.strokeStyle = gradient;
  621. 		context.fill();
  622. 		context.stroke();
  623. */
  624. 	}
  625. }
  626.  
  627. function renderFirstDown(frame, pct, loc) {
  628. 	for (var i=1; i<play_data[0].length; i++) {
  629. 		var p = play_data[0][i];
  630. 		if ((unsafeWindow.players[p.id].position == "C") || (unsafeWindow.players[p.id].position == "LS")) {
  631. 			var y = p.y+loc;
  632.  
  633. 			var canvas = document.getElementById("foreground");
  634. 			var context = canvas.getContext("2d");
  635.  
  636. 			var dir = document.getElementById("time_ytg");
  637. 			var dirText = dir.innerHTML;
  638. 			var togo = "";
  639. 			if (dirText.indexOf(" inches ") != -1) {
  640. 				togo = 0.3;
  641. 			}
  642. 			else {
  643. 				if (dirText.indexOf(" G on ") == -1) {
  644. 					var p2 = dirText.indexOf(" &amp; ")+7;
  645. 					var p1 = dirText.indexOf(" on ");
  646. 					togo = parseFloat(dirText.substring(p2,p1));
  647. 					if (dirText.substring(p2-10,p2-9) == "4") {
  648. 						context.strokeStyle = "rgb(255,0,0)";
  649. 					}
  650. 					else {
  651. 						context.strokeStyle = "rgb(255,255,0)";
  652. 					}
  653. 				}
  654. 			}
  655. 	
  656. 			var dy = togo * 9;
  657. 			if (parseFloat(play_data[0][1].y) > parseFloat(play_data[0][0].y)) {
  658. 				dy = dy * -1;
  659. 			}
  660.  
  661. 			context.beginPath();
  662. 			context.moveTo(20,y-dy);
  663. 			context.lineTo(500,y-dy);
  664. 			context.stroke();
  665.  
  666. 			context.lineWidth = 2;
  667. 			context.beginPath();
  668. 			context.strokeStyle = "rgb(0,0,255)";
  669. 			context.moveTo(20,y);
  670. 			context.lineTo(500,y);
  671. 			context.stroke();
  672. 			break;
  673. 		}
  674. 	}
  675. }
  676.  
  677. function renderField(frame, pct) {
  678. 	var left = play_data[frame];
  679. 	var right = play_data[Math.min(frame+1, play_data.length-1)];
  680.  
  681. 	var ydiff = right[0].y - left[0].y;
  682. 	var y = left[0].y + ydiff * pct;
  683.  
  684. 	var location = -1 * y + 250;
  685. 	location = Math.max(location, -660);
  686. 	location = Math.min(location, 0);
  687.  
  688. 	var canvasbg = document.getElementById("background");
  689. 	var contextbg = canvasbg.getContext("2d");
  690.  
  691. 	contextbg.drawImage(imageData["field"], 20, 0-location, 480, 500, 20, 0, 480, 500);
  692. 	return location;
  693. }
  694.  
  695. function renderPlayers(frame, pct, loc) {
  696. /*
  697. 	for (var f=0; f<play_data.length; f++) {
  698. 		for (var p=0; p<play_data[f].length; p++) {
  699. if (play_data[f][p].icon != null) {
  700. 			console.log(f+") "+p+" -- "+play_data[f][p].icon);
  701. }			
  702. 		}
  703. 	}
  704. */
  705. 	
  706. 	var canvas = document.getElementById("foreground");
  707. 	var context = canvas.getContext("2d");
  708.  
  709. 	for (var p=1; p<play_data[frame].length; p++) {
  710. 		var left = play_data[frame];
  711. 		var right = play_data[Math.min(frame+1, play_data.length-1)];
  712.  
  713. 		var xdiff = right[p].x - left[p].x;
  714. 		var ydiff = right[p].y - left[p].y;
  715. 		var x = left[p].x + xdiff * pct;
  716. 		var y = left[p].y + ydiff * pct + loc - 20;
  717.  
  718. 		if (imageData[left[p].id] != null) {
  719. 			context.drawImage(imageData[left[p].id], x, y);
  720. 		}
  721. 	}
  722.  
  723.  }
  724.  
  725. function renderBall(frame, pct, loc) {
  726. 	var left = play_data[frame];
  727. 	var right = play_data[Math.min(frame+1, play_data.length-1)];
  728.  
  729. 	var xdiff = right[0].x - left[0].x;
  730. 	var ydiff = right[0].y - left[0].y;
  731. 	var x = left[0].x + xdiff * pct + 3;
  732. 	var y = left[0].y + ydiff * pct + loc - 20;
  733.  
  734. 	var canvasfg = document.getElementById("foreground");
  735. 	var contextfg = canvasfg.getContext("2d");
  736.  
  737. 	if ((left[0].z < 5) || (right[0].z < 5)) {
  738. 		contextfg.drawImage(imageData["ball"], x, y);
  739. 	}
  740. 	else {
  741. 		if (imageData["rotated-ball"] == null) {
  742. 			var mul = 1;
  743. 			if (left[0].x < right[0].x) {
  744. 				mul = 1;
  745. 			}
  746. 			else {
  747. 				mul = -1;
  748. 			}
  749. 			if (left[0].y < right[0].y) {
  750. 				mul = mul * -1;
  751. 			}
  752. 			else {
  753. 				mul = mul * 1;
  754. 			}
  755. 			var rotation = mul * Math.atan(Math.abs(left[0].x-right[0].x)/Math.abs(left[0].y-right[0].y));
  756. 			rotation += 2*Math.PI;
  757. 		
  758. 			var canvas = document.createElement("canvas");
  759. 			canvas.setAttribute("width",16);
  760. 			canvas.setAttribute("height",16);
  761. 			var context = canvas.getContext("2d");
  762. 			context.save();
  763. 			context.translate(8, 8);
  764. 			context.rotate(rotation);
  765. 			context.drawImage(imageData["passing-ball"], -8, -8);
  766. 			context.restore();
  767.  
  768. 			imageData["rotated-ball"] = canvas;
  769. 		}
  770. 		contextfg.drawImage(imageData["rotated-ball"], x, y); //fix me!!
  771. 	}
  772. }
  773.  
  774. function getFromCanvas(src, w, h) {
  775. 	var image = new Image();
  776. 	image.src = src;
  777.  
  778. 	var canvas = document.createElement("canvas");
  779. 	canvas.setAttribute("width",w);
  780. 	canvas.setAttribute("height",h);
  781.  
  782. 	var context = canvas.getContext("2d");
  783. 	context.drawImage(image,0,0);
  784.  
  785. 	return canvas;
  786. }
  787.  
  788. function prepareImages() {
  789. 	imageData["ball"] = getFromCanvas("http://goallineblitz.com/images/ball.gif", 16, 16);
  790. 	imageData["passing-ball"] = getFromCanvas("http://goallineblitz.com/images/passing-ball.gif", 16, 16); //fix me!!
  791. 	imageData["kicking-ball"] = getFromCanvas("http://goallineblitz.com/images/kicking-ball.gif", 16, 16); //fix me!!
  792. 	imageData["field"] = getFromCanvas("http://goallineblitz.com/images/game/fields/"+unsafeWindow.field+".jpg", 520, 1160);
  793.  
  794. 	var canvas = document.createElement("canvas");
  795. 	canvas.setAttribute("width","26");
  796. 	canvas.setAttribute("height","26");
  797. 	var context = canvas.getContext("2d");
  798. 	context.beginPath();
  799. 	context.strokeStyle = "rgb(255,255,255)";
  800. 	context.lineWidth = 3;
  801. 	context.moveTo(13,0);
  802. 	context.lineTo(13,26);
  803. 	context.moveTo(0,13);
  804. 	context.lineTo(26,13);
  805. 	context.stroke();
  806. 	context.beginPath();
  807. 	context.strokeStyle = "rgb(255,0,0)";
  808. 	context.lineWidth = 2;
  809. 	context.arc(13, 13, 10, 0, 2*Math.PI, false); 
  810. 	context.closePath();
  811. 	context.stroke();
  812. 	imageData["target"] = canvas;
  813. 	canvas = null;
  814.  
  815. 	var done = [];
  816. 	for (var i=1; i<unsafeWindow.play_data[0].length; i++) {
  817. 		var p = unsafeWindow.play_data[0][i];
  818. 		var id = p.id;
  819. 		if (imageData[id] != null) continue;
  820.  
  821. 		var team = unsafeWindow.ptid[id];
  822. 		var position = unsafeWindow.players[id].position;
  823. 		var fcolor = unsafeWindow.home_color2+"_border_home";
  824. 		var bcolor = unsafeWindow.home_color1;
  825. 		if (unsafeWindow.home != team) {
  826. 			fcolor = unsafeWindow.away_color2+"_border";
  827. 			bcolor = unsafeWindow.away_color1;
  828. 		}
  829.  
  830. 		var fimage = new Image();
  831. 		fimage.src = "http://goallineblitz.com/images/dots/"+fcolor+"/"+position+".gif";
  832.  
  833. 		var bimage = new Image();
  834. 		bimage.src = "http://goallineblitz.com/images/dots/"+bcolor+".gif";
  835.  
  836. 		var canvas = document.createElement("canvas");
  837. 		canvas.setAttribute("width","16");
  838. 		canvas.setAttribute("height","16");
  839. 		var context = canvas.getContext("2d");
  840.  
  841. 		if ((bimage.complete == false) || (fimage.complete == false)) {
  842. 			if (bimage.complete == false) {
  843. 				done.push(fimage.src);
  844. 			}
  845. 			if (fimage.complete == false) {
  846. 				done.push(fimage.src);
  847. 			}
  848. 		}
  849. 		else {
  850. 			context.drawImage(bimage,0,0);
  851. 			context.drawImage(fimage,0,0);
  852. 			imageData[id] = canvas;
  853. 		}
  854. 	}
  855. 	if (done.length > 0) {
  856. 		console.log("noooooo greasemonkey, no one would ever want to use worker threads...");
  857. 		console.log(done);
  858. 		setTimeout(prepareImages, 250);
  859. 	}
  860. }
  861.  
  862. function beginPressed() {
  863. 	pausePressed();
  864. 	initialTime = null;
  865. 	currentTime = null;
  866. 	drawFrame(0,0);	
  867. }
  868.  
  869. function rwPressed() {
  870. 	if (isPlaying == true) {
  871. 		frameMultiplier = Math.max(frameMultiplier - 0.25, 0);
  872. 		console.log(frameMultiplier);
  873. 	}
  874. 	else {
  875. 		currentTime = currentTime.setMilliseconds(currentTime.getMilliseconds() - 100);
  876. 		currentTime = new Date(currentTime);
  877. 		var diff = currentTime - initialTime;
  878. 		var frame = diff/100 * frameMultiplier;
  879. 		pct = frame - Math.floor(frame);
  880. 		frame = Math.floor(frame) % play_data.length;
  881. 		if (frame < 0) frame += play_data.length;
  882. 		drawFrame(frame, pct);
  883. 	}
  884. }
  885.  
  886. function pausePressed() {
  887. 	console.log("pause");
  888.  
  889. 	document.getElementById("pause_button").visibility = "hidden";
  890. 	document.getElementById("play_button").visibility = "visible";
  891.  
  892. 	isPlaying = false;
  893. }
  894.  
  895. function playPressed() {
  896. 	console.log("play");
  897. 	
  898. 	document.getElementById("pause_button").visibility = "visible";
  899. 	document.getElementById("play_button").visibility = "hidden";
  900.  
  901. 	isPlaying = true;
  902. 	var t = currentTime;
  903. 	currentTime = new Date();
  904. 	initialTime = currentTime - (t-initialTime);
  905.  
  906. 	render();
  907. }
  908.  
  909. function ffPressed() {
  910. 	if (isPlaying == true) {
  911. 		frameMultiplier = frameMultiplier + 0.25;
  912. 		console.log(frameMultiplier);
  913. 	}
  914. 	else {
  915. 		currentTime = currentTime.setMilliseconds(currentTime.getMilliseconds() + 100);
  916. 		currentTime = new Date(currentTime);
  917. 		var diff = currentTime - initialTime;
  918. 		var frame = diff/100 * frameMultiplier;
  919. 		pct = frame - Math.floor(frame);
  920. 		frame = Math.floor(frame) % play_data.length;
  921. 		drawFrame(frame, pct);
  922. 	}
  923. }
  924.  
  925. function endPressed() {
  926. 	pausePressed();
  927. 	initialTime = null;
  928. 	currentTime = null;
  929. 	drawFrame(play_data.length-1,0);	
  930. }
  931.  
  932. function fixButtons() {
  933. 	var buttons = document.getElementsByClassName("button left");
  934. 	
  935. 	var begin = buttons[2];
  936. 	begin.addEventListener("click",beginPressed);
  937.  
  938. 	var rewind = buttons[3];
  939. 	rewind.addEventListener("click",rwPressed);
  940.  
  941. 	var pause = buttons[4];
  942. 	pause.addEventListener("click",playPressed);
  943.  
  944. 	var play = buttons[5];
  945. 	play.addEventListener("click",pausePressed);
  946.  
  947. 	var ff = buttons[6];
  948. 	ff.addEventListener("click",ffPressed);
  949.  
  950. 	var end = buttons[7];
  951. 	end.addEventListener("click",endPressed);
  952. }
  953.  
  954. function fixFrames() {
  955. 	var stime = new Date();
  956. 	var uwpd = new Array();
  957. 	for (var i=0; i<unsafeWindow.play_data.length; i++) {
  958. 		uwpd.push(new Array());
  959. 	}
  960.  
  961. 	var missing = 0;
  962. 	for (var p=0; p<unsafeWindow.play_data[0].length; p++) {
  963. 		var id = unsafeWindow.play_data[0][p].id;
  964.  
  965. 		for (var cf=0; cf<unsafeWindow.play_data.length; cf++) {
  966. 			var found = false;
  967. 			for (var i=0; i<unsafeWindow.play_data[cf].length; i++) {
  968. 				if (id == unsafeWindow.play_data[cf][i].id) {
  969. 					found = true;
  970. 					uwpd[cf].push(eval(uneval(unsafeWindow.play_data[cf][i])));
  971. 					break;
  972. 				}
  973. 			}
  974. 			if (!found) {
  975. 				uwpd[cf].push(eval(uneval(uwpd[cf-1][p])));
  976. 				missing++;
  977. 			}
  978. 		}
  979. 	}
  980. 	var time = new Date() - stime;
  981.     	console.log("uwpd copy ("+missing+" missing): "+time.toFixed(0)+"ms");
  982.  
  983. 	for (var p=1; p<uwpd[0].length; p++) {
  984. 		for (var f=uwpd.length-1; f>0; f--) {
  985. 			if (uwpd[f][p].icon != null) {
  986. 				for (var z=f+1; z<Math.min(uwpd.length, f+8); z++) {
  987. 					uwpd[z][p].icon = uwpd[f][p].icon;
  988. 				}
  989. 			}
  990. 		}
  991. 	}
  992. 	var time = new Date() - stime;
  993.     	console.log("uwpd icons: "+time.toFixed(0)+"ms");
  994.  
  995. 	prepareImages();
  996.  
  997. 	return uwpd;
  998. }
  999.  
  1000. var frameCounter = 0;
  1001. var lastTime = 0;
  1002. var fps = [];
  1003. function measureFps() {
  1004. 	frameCounter++;
  1005.         if (frameCounter > 300) {
  1006. 	    var now = new Date();
  1007. 	    var delta = now - lastTime;
  1008.             fps.push(frameCounter / delta);
  1009.  
  1010.             frameCounter = 0;
  1011. 	    lastTime = now;
  1012.         }
  1013.  
  1014. 	if (fps.length == 10) {
  1015. 		console.log(fps);
  1016. 		fps = [];
  1017. 	}
  1018.  
  1019. }