API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Aug 27th, 2015
128
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.87 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <link rel="stylesheet" href="css/stylesheet_scoreboard_default.css" type="text/css" charset="utf-8">
  4. <script src="js/jquery-2.0.2.min.js" type="text/javascript" charset="utf-8"></script>
  5. <script src="js/jstween-1.1.min.js" type="text/javascript" charset="utf-8"></script>
  6. <script src="js/countries.js" type="text/javascript" charset="utf-8"></script>
  7. <script type="text/javascript">
  8.  
  9. var timestampOld;
  10. var timestamp;
  11. var pName1;
  12. var pScore1;
  13. var pName2;
  14. var pScore2;
  15. var pName3;
  16. var pScore3;
  17. var pName4;
  18. var pScore4;
  19. var pCountry1;
  20. var pCountry2;
  21. var pCountry3;
  22. var pCountry4;
  23. var oldCountry1 = "";
  24. var oldCountry2 = "";
  25. var oldCountry3 = "";
  26. var oldCountry4= "";
  27. var mText3;
  28. var mText4;
  29.  
  30. var xmlDoc;
  31.  
  32. var xhr = new XMLHttpRequest();
  33.  
  34. var animating = false;
  35. var doUpdate = false;
  36.  
  37. function init() {
  38.  
  39. xhr.overrideMimeType('text/xml');
  40.  
  41. var timeout = this.window.setInterval(function() {
  42. pollHandler();
  43. }, 250);
  44.  
  45. $('#pFlag1').opacity(0);
  46. $('#pName1').html('');
  47. $('#pScore1').html('');
  48. $('#pFlag2').opacity(0);
  49. $('#pName2').html('');
  50. $('#pScore2').html('');
  51. $('#pFlag3').opacity(0);
  52. $('#pName3').html('');
  53. $('#pScore3').html('');
  54. $('#pFlag4').opacity(0);
  55. $('#pName4').html('');
  56. $('#pScore4').html('');
  57. $('#mText3').html('');
  58. $('#mText4').html('');
  59. $('#board').tween({
  60. top:{
  61. start: '-100',
  62. stop: '0',
  63. units: 'px',
  64. time: 0,
  65. duration: 0.8,
  66. effect:'easeOut'
  67. }
  68. });
  69. $('#board2').tween({
  70. top:{
  71. start: '-100',
  72. stop: '33',
  73. units: 'px',
  74. time: 0,
  75. duration: 0.8,
  76. effect:'easeOut'
  77. }
  78. });
  79.  
  80. $.play();
  81. }
  82.  
  83. function pollHandler()
  84. {
  85. loadData();
  86. if (timestamp != timestampOld) {
  87. doUpdate = true;
  88. }
  89. if (!animating && doUpdate) {
  90. updateBoard();
  91. }
  92. }
  93.  
  94. function loadData() {
  95. xhr.open('GET', 'streamcontrol.xml');
  96. xhr.send();
  97. xhr.onreadystatechange = function(){
  98. xmlDoc = xhr.responseXML;
  99.  
  100. pName1 = getValueFromTag(xmlDoc,'pName1');
  101. pName2 = getValueFromTag(xmlDoc,'pName2');
  102. pName3 = getValueFromTag(xmlDoc,'pName3');
  103. pName4 = getValueFromTag(xmlDoc,'pName4');
  104. pScore1 = getValueFromTag(xmlDoc,'pScore1');
  105. pScore2 = getValueFromTag(xmlDoc,'pScore2');
  106. pScore3 = getValueFromTag(xmlDoc,'pScore3');
  107. pScore4 = getValueFromTag(xmlDoc,'pScore4');
  108.  
  109. pCountry1 = getCountry(getValueFromTag(xmlDoc,'pCountry1'));
  110. pCountry2 = getCountry(getValueFromTag(xmlDoc,'pCountry2'));
  111. pCountry3 = getCountry(getValueFromTag(xmlDoc,'pCountry3'));
  112. pCountry4 = getCountry(getValueFromTag(xmlDoc,'pCountry4'));
  113. mText3 = getValueFromTag(xmlDoc,'mText3');
  114. mText4 = getValueFromTag(xmlDoc,'mText4');
  115. timestampOld = timestamp;
  116. timestamp = getValueFromTag(xmlDoc,'timestamp');
  117.  
  118. }
  119. }
  120.  
  121. function updateBoard() {
  122. if ($('#pName1').html() != pName1) {
  123. animating = true;
  124. $('#pName1').tween({
  125. left:{
  126. start: 175,
  127. stop: 275,
  128. units: 'px',
  129. time: 0,
  130. duration: 0.5,
  131. effect:'easeIn'
  132. },
  133. opacity: {
  134. start: 100,
  135. stop: 0,
  136. time: 0,
  137. duration: 0.5,
  138. effect: 'easeIn'
  139. },
  140. onStop: function(){
  141. $('#pName1').html(pName1);
  142. }
  143. });
  144.  
  145. $('#pName1').tween({
  146. left:{
  147. start: 275,
  148. stop: 175,
  149. units: 'px',
  150. time: 0.5,
  151. duration: 0.5,
  152. effect:'easeOut'
  153. },
  154. opacity: {
  155. start: 0,
  156. stop: 100,
  157. time: 0.5,
  158. duration: 0.5,
  159. effect: 'easeOut'
  160. },
  161. onStop: function(){
  162. animating = false;
  163. }
  164. });
  165. }
  166.  
  167. if ($('#pName2').html() != pName2) {
  168. animating = true;
  169. $('#pName2').tween({
  170. left:{
  171. start: 775,
  172. stop: 675,
  173. units: 'px',
  174. time: 0,
  175. duration: 0.5,
  176. effect:'easeIn'
  177. },
  178. opacity: {
  179. start: 100,
  180. stop: 0,
  181. time: 0,
  182. duration: 0.5,
  183. effect: 'easeIn'
  184. },
  185. onStop: function(){
  186. $('#pName2').html(pName2);
  187. }
  188. });
  189.  
  190. $('#pName2').tween({
  191. left:{
  192. start: 675,
  193. stop: 775,
  194. units: 'px',
  195. time: 0.5,
  196. duration: 0.5,
  197. effect:'easeOut'
  198. },
  199. opacity: {
  200. start: 0,
  201. stop: 100,
  202. time: 0.5,
  203. duration: 0.5,
  204. effect: 'easeOut'
  205. },
  206. onStop: function(){
  207. animating = false;
  208. }
  209. });
  210. }
  211.  
  212. if ($('#pName3').html() != pName3) {
  213. animating = true;
  214. $('#pName3').tween({
  215. left:{
  216. start: 175,
  217. stop: 275,
  218. units: 'px',
  219. time: 0,
  220. duration: 0.5,
  221. effect:'easeIn'
  222. },
  223. opacity: {
  224. start: 100,
  225. stop: 0,
  226. time: 0,
  227. duration: 0.5,
  228. effect: 'easeIn'
  229. },
  230. onStop: function(){
  231. $('#pName3').html(pName3);
  232. }
  233. });
  234.  
  235. $('#pName3').tween({
  236. left:{
  237. start: 275,
  238. stop: 175,
  239. units: 'px',
  240. time: 0.5,
  241. duration: 0.5,
  242. effect:'easeOut'
  243. },
  244. opacity: {
  245. start: 0,
  246. stop: 100,
  247. time: 0.5,
  248. duration: 0.5,
  249. effect: 'easeOut'
  250. },
  251. onStop: function(){
  252. animating = false;
  253. }
  254. });
  255. }
  256.  
  257. if ($('#pName4').html() != pName4) {
  258. animating = true;
  259. $('#pName4').tween({
  260. left:{
  261. start: 775,
  262. stop: 675,
  263. units: 'px',
  264. time: 0,
  265. duration: 0.5,
  266. effect:'easeIn'
  267. },
  268. opacity: {
  269. start: 100,
  270. stop: 0,
  271. time: 0,
  272. duration: 0.5,
  273. effect: 'easeIn'
  274. },
  275. onStop: function(){
  276. $('#pName4').html(pName2);
  277. }
  278. });
  279.  
  280. $('#pName4').tween({
  281. left:{
  282. start: 675,
  283. stop: 775,
  284. units: 'px',
  285. time: 0.5,
  286. duration: 0.5,
  287. effect:'easeOut'
  288. },
  289. opacity: {
  290. start: 0,
  291. stop: 100,
  292. time: 0.5,
  293. duration: 0.5,
  294. effect: 'easeOut'
  295. },
  296. onStop: function(){
  297. animating = false;
  298. }
  299. });
  300. }
  301.  
  302. if ($('#pScore1').html() != pScore1) {
  303. animating = true;
  304. $('#pScore1').tween({
  305. opacity: {
  306. start: 100,
  307. stop: 0,
  308. time: 0,
  309. duration: 0.5,
  310. effect: 'easeIn'
  311. },
  312. onStop: function(){
  313. $('#pScore1').html(pScore1);
  314. }
  315. });
  316.  
  317. $('#pScore1').tween({
  318. opacity: {
  319. start: 0,
  320. stop: 100,
  321. time: 0.5,
  322. duration: 0.5,
  323. effect: 'easeOut'
  324. },
  325. onStop: function(){
  326. animating = false;
  327. }
  328. });
  329. }
  330.  
  331. if ($('#pScore2').html() != pScore2) {
  332. animating = true;
  333. $('#pScore2').tween({
  334. opacity: {
  335. start: 100,
  336. stop: 0,
  337. time: 0,
  338. duration: 0.5,
  339. effect: 'easeIn'
  340. },
  341. onStop: function(){
  342. $('#pScore2').html(pScore2);
  343. }
  344. });
  345.  
  346. $('#pScore2').tween({
  347. opacity: {
  348. start: 0,
  349. stop: 100,
  350. time: 0.5,
  351. duration: 0.5,
  352. effect: 'easeOut'
  353. },
  354. onStop: function(){
  355. animating = false;
  356. }
  357. });
  358. }
  359.  
  360. if ($('#pScore3').html() != pScore3) {
  361. animating = true;
  362. $('#pScore3').tween({
  363. opacity: {
  364. start: 100,
  365. stop: 0,
  366. time: 0,
  367. duration: 0.5,
  368. effect: 'easeIn'
  369. },
  370. onStop: function(){
  371. $('#pScore3').html(pScore1);
  372. }
  373. });
  374.  
  375. $('#pScore3').tween({
  376. opacity: {
  377. start: 0,
  378. stop: 100,
  379. time: 0.5,
  380. duration: 0.5,
  381. effect: 'easeOut'
  382. },
  383. onStop: function(){
  384. animating = false;
  385. }
  386. });
  387. }
  388.  
  389. if ($('#pScore4').html() != pScore4) {
  390. animating = true;
  391. $('#pScore4').tween({
  392. opacity: {
  393. start: 100,
  394. stop: 0,
  395. time: 0,
  396. duration: 0.5,
  397. effect: 'easeIn'
  398. },
  399. onStop: function(){
  400. $('#pScore4').html(pScore2);
  401. }
  402. });
  403.  
  404. $('#pScore4').tween({
  405. opacity: {
  406. start: 0,
  407. stop: 100,
  408. time: 0.5,
  409. duration: 0.5,
  410. effect: 'easeOut'
  411. },
  412. onStop: function(){
  413. animating = false;
  414. }
  415. });
  416. }
  417.  
  418. if ($('#mText3').html() != mText3) {
  419. animating = true;
  420. $('#mText3').tween({
  421. opacity: {
  422. start: 100,
  423. stop: 0,
  424. time: 0,
  425. duration: 0.5,
  426. effect: 'easeIn'
  427. },
  428. onStop: function(){
  429. $('#mText3').html(mText3);
  430. }
  431. });
  432.  
  433. $('#mText3').tween({
  434. opacity: {
  435. start: 0,
  436. stop: 100,
  437. time: 0.5,
  438. duration: 0.5,
  439. effect: 'easeOut'
  440. },
  441. onStop: function(){
  442. animating = false;
  443. }
  444. });
  445. }
  446.  
  447. if ($('#mText4').html() != mText4) {
  448. animating = true;
  449. $('#mText4').tween({
  450. opacity: {
  451. start: 100,
  452. stop: 0,
  453. time: 0,
  454. duration: 0.5,
  455. effect: 'easeIn'
  456. },
  457. onStop: function(){
  458. $('#mText4').html(mText4);
  459. }
  460. });
  461.  
  462. $('#mText4').tween({
  463. opacity: {
  464. start: 0,
  465. stop: 100,
  466. time: 0.5,
  467. duration: 0.5,
  468. effect: 'easeOut'
  469. },
  470. onStop: function(){
  471. animating = false;
  472. }
  473. });
  474. }
  475.  
  476. if (oldCountry1 != pCountry1 || $('#pFlag1').opacity() == 0) {
  477. animating = true;
  478. $('#pFlag1').tween({
  479. opacity: {
  480. start: 100,
  481. stop: 0,
  482. time: 0,
  483. duration: 0.5,
  484. effect: 'easeIn'
  485. },
  486. onStop: function(){
  487. $('#pFlag1').html('<img src="GoSquared/cropped/iso/64shiny/'+ pCountry1 +'.png" width="43" height="28">');
  488. oldCountry1 = pCountry1;
  489. }
  490. });
  491.  
  492. $('#pFlag1').tween({
  493. opacity: {
  494. start: 0,
  495. stop: 100,
  496. time: 0.5,
  497. duration: 0.5,
  498. effect: 'easeOut'
  499. },
  500. onStop: function(){
  501. animating = false;
  502. }
  503. });
  504.  
  505. }
  506.  
  507. if (oldCountry2 != pCountry2 || $('#pFlag2').opacity() == 0) {
  508. animating = true;
  509. $('#pFlag2').tween({
  510. opacity: {
  511. start: 100,
  512. stop: 0,
  513. time: 0,
  514. duration: 0.5,
  515. effect: 'easeIn'
  516. },
  517. onStop: function(){
  518. $('#pFlag2').html('<img src="GoSquared/cropped/iso/64shiny/'+ pCountry2 +'.png" width="43" height="28">');
  519. oldCountry2 = pCountry2;
  520. }
  521. });
  522.  
  523. $('#pFlag2').tween({
  524. opacity: {
  525. start: 0,
  526. stop: 100,
  527. time: 0.5,
  528. duration: 0.5,
  529. effect: 'easeOut'
  530. },
  531. onStop: function(){
  532. animating = false;
  533. }
  534. });
  535.  
  536. }
  537.  
  538. if (oldCountry3 != pCountry3 || $('#pFlag3').opacity() == 0) {
  539. animating = true;
  540. $('#pFlag3').tween({
  541. opacity: {
  542. start: 100,
  543. stop: 0,
  544. time: 0,
  545. duration: 0.5,
  546. effect: 'easeIn'
  547. },
  548. onStop: function(){
  549. $('#pFlag3').html('<img src="GoSquared/cropped/iso/64shiny/'+ pCountry3 +'.png" width="43" height="28">');
  550. oldCountry3 = pCountry3;
  551. }
  552. });
  553.  
  554. $('#pFlag3').tween({
  555. opacity: {
  556. start: 0,
  557. stop: 100,
  558. time: 0.5,
  559. duration: 0.5,
  560. effect: 'easeOut'
  561. },
  562. onStop: function(){
  563. animating = false;
  564. }
  565. });
  566.  
  567. }
  568.  
  569. if (oldCountry4 != pCountry4 || $('#pFlag4').opacity() == 0) {
  570. animating = true;
  571. $('#pFlag4').tween({
  572. opacity: {
  573. start: 100,
  574. stop: 0,
  575. time: 0,
  576. duration: 0.5,
  577. effect: 'easeIn'
  578. },
  579. onStop: function(){
  580. $('#pFlag4').html('<img src="GoSquared/cropped/iso/64shiny/'+ pCountry4 +'.png" width="43" height="28">');
  581. oldCountry4 = pCountry4;
  582. }
  583. });
  584.  
  585. $('#pFlag4').tween({
  586. opacity: {
  587. start: 0,
  588. stop: 100,
  589. time: 0.5,
  590. duration: 0.5,
  591. effect: 'easeOut'
  592. },
  593. onStop: function(){
  594. animating = false;
  595. }
  596. });
  597.  
  598. }
  599.  
  600. $.play();
  601.  
  602. doUpdate = false;
  603. }
  604.  
  605. function getValueFromTag (xmlDoc,tag) {
  606. if (xmlDoc.getElementsByTagName(tag).length != 0 ) {
  607. if (xmlDoc.getElementsByTagName(tag)[0].childNodes.length == 0) {
  608. return '';
  609. } else {
  610. return xmlDoc.getElementsByTagName(tag)[0].childNodes[0].nodeValue;
  611. }
  612. } else {
  613. return '';
  614. }
  615. }
  616.  
  617. function getCountry (country) {
  618.  
  619. var count = iso.findCountryByName(country);
  620. if (!count)
  621. count = iso.findCountryByCode(country);
  622. if (!count) {
  623. var count = new Array();
  624. count['value'] = "unknown";
  625. }
  626.  
  627. return count['value'];
  628. }
  629. </script>
  630. </head>
  631. <body onLoad="init()">
  632. <div id="board">
  633. <div id="pFlag1"></div>
  634. <div id="pName1">Player 1</div>
  635. <div id="pScore1">99</div>
  636. <div id="pFlag2"></div>
  637. <div id="pName2">Player 2</div>
  638. <div id="pScore2">99</div>
  639. <div id="mText3">Test</div>
  640. <div id="mText4">Test2</div>
  641. </div>
  642. <div id="board2">
  643. <div id="pFlag3"></div>
  644. <div id="pName3">Player 3</div>
  645. <div id="pScore3">99</div>
  646. <div id="pFlag4"></div>
  647. <div id="pName4">Player 4</div>
  648. <div id="pScore4">99</div>
  649. </div>
  650. </body>
  651. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!