API tools faq
paste
Advertisement
cantichan

Melee_Scoreboard

cantichan
Aug 5th, 2018
116
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 10.36 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.     <link rel="stylesheet" href="css/stylesheet_melee.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 pCountry1;
  16.             var pCountry2;
  17.             var oldCountry1 = "";
  18.             var oldCountry2 = "";
  19.             var mText3;
  20.             var mText4;
  21.             var pPlayerPort1;
  22.             var pPlayerPort2;
  23.             var pPort1;
  24.             var pPort2;
  25.  
  26.             var xmlDoc;
  27.  
  28.             var xhr = new XMLHttpRequest();
  29.  
  30.             var animating = false;
  31.             var doUpdate = false;
  32.  
  33.             function init() {
  34.  
  35.                 xhr.overrideMimeType('text/xml');
  36.  
  37.                 var timeout = this.window.setInterval(function() {
  38.                     pollHandler();
  39.                 }, 250);
  40.  
  41.                 $('#pFlag1').opacity(0);
  42.                 $('#pName1').html('');
  43.                 $('#pScore1').html('');
  44.                 $('#pFlag2').opacity(0);
  45.                 $('#pName2').html('');
  46.                 $('#pScore2').html('');
  47.                 $('#mText3').html('');
  48.                 $('#mText4').html('');
  49.                 $('#pPlayerPort1').html('');
  50.                 $('#pPort1').html('');
  51.                 $('#pPlayerPort2').html('');
  52.                 $('#pPort2').html('');
  53.                 $('#board').tween({
  54.                    top:{
  55.                       start: '-200',
  56.                       stop: '0',
  57.                       units: 'px',
  58.                       time: 0,
  59.                       duration: 0.8,
  60.                       effect:'easeOut'
  61.                    }
  62.                 });
  63.  
  64.                 $.play();
  65.             }
  66.  
  67.             function pollHandler()
  68.             {
  69.               loadData();
  70.               if (timestamp != timestampOld) {
  71.                   doUpdate = true;
  72.               }
  73.               if (!animating && doUpdate) {
  74.                   updateBoard();
  75.               }
  76.             }
  77.  
  78.             function loadData() {
  79.                 xhr.open('GET', 'streamcontrol.xml');
  80.                 xhr.send();
  81.                 xhr.onreadystatechange = function(){
  82.                         xmlDoc = xhr.responseXML;
  83.  
  84.                         pName1 = getValueFromTag(xmlDoc,'pName1');
  85.                         pName2 = getValueFromTag(xmlDoc,'pName2');
  86.                         pScore1 = getValueFromTag(xmlDoc,'pScore1');
  87.                         pScore2 = getValueFromTag(xmlDoc,'pScore2');
  88.                         pCountry1 = getCountry(getValueFromTag(xmlDoc,'pCountry1'));
  89.                         pCountry2 = getCountry(getValueFromTag(xmlDoc,'pCountry2'));
  90.                         mText3 = getValueFromTag(xmlDoc,'mText3');
  91.                         mText4 = getValueFromTag(xmlDoc,'mText4');
  92.                         pPlayerPort1 = getValueFromTag(xmlDoc,'pPlayerPort1');
  93.                         pPlayerPort2 = getValueFromTag(xmlDoc,'pPlayerPort2');
  94.                         timestampOld = timestamp;
  95.                         timestamp = getValueFromTag(xmlDoc,'timestamp');
  96.  
  97.                 }
  98.             }
  99.  
  100.             function updateBoard() {
  101.                 if ($('#pName1').html() != pName1) {
  102.                     animating = true;
  103.                     $('#pName1').tween({
  104.                         left:{
  105.                           start: 55,
  106.                           stop: 25,
  107.                           units: 'px',
  108.                           time: 0,
  109.                           duration: 0.5,
  110.                           effect:'easeIn'
  111.                         },
  112.                         opacity: {
  113.                           start: 100,
  114.                           stop: 0,
  115.                           time: 0,
  116.                           duration: 0.5,
  117.                           effect: 'easeIn'
  118.                         },
  119.                         onStop: function(){
  120.                             $('#pName1').html(pName1);
  121.                         }
  122.                     });
  123.  
  124.                     $('#pName1').tween({
  125.                         left:{
  126.                           start: 55,
  127.                           stop: 25,
  128.                           units: 'px',
  129.                           time: 0.5,
  130.                           duration: 0.5,
  131.                           effect:'easeOut'
  132.                         },
  133.                         opacity: {
  134.                           start: 0,
  135.                           stop: 100,
  136.                           time: 0.5,
  137.                           duration: 0.5,
  138.                           effect: 'easeOut'
  139.                         },
  140.                         onStop: function(){
  141.                             animating = false;
  142.                         }
  143.                     });
  144.                 }
  145.  
  146.                 if ($('#pName2').html() != pName2) {
  147.                     animating = true;
  148.                     $('#pName2').tween({
  149.                         right:{
  150.                           start: 55,
  151.                           stop: 25,
  152.                           units: 'px',
  153.                           time: 0,
  154.                           duration: 0.5,
  155.                           effect:'easeIn'
  156.                         },
  157.                         opacity: {
  158.                           start: 100,
  159.                           stop: 0,
  160.                           time: 0,
  161.                           duration: 0.5,
  162.                           effect: 'easeIn'
  163.                         },
  164.                         onStop: function(){
  165.                             $('#pName2').html(pName2);
  166.                         }
  167.                     });
  168.  
  169.                     $('#pName2').tween({
  170.                         right:{
  171.                           start: 55,
  172.                           stop: 25,
  173.                           units: 'px',
  174.                           time: 0.5,
  175.                           duration: 0.5,
  176.                           effect:'easeOut'
  177.                         },
  178.                         opacity: {
  179.                           start: 0,
  180.                           stop: 100,
  181.                           time: 0.5,
  182.                           duration: 0.5,
  183.                           effect: 'easeOut'
  184.                         },
  185.                         onStop: function(){
  186.                             animating = false;
  187.                         }
  188.                     });
  189.                 }
  190.  
  191.                 if ($('#pScore1').html() != pScore1) {
  192.                     animating = true;
  193.                     $('#pScore1').tween({
  194.                         opacity: {
  195.                           start: 100,
  196.                           stop: 0,
  197.                           time: 0,
  198.                           duration: 0.5,
  199.                           effect: 'easeIn'
  200.                         },
  201.                         onStop: function(){
  202.                             $('#pScore1').html(pScore1);
  203.                         }
  204.                     });
  205.  
  206.                     $('#pScore1').tween({
  207.                         opacity: {
  208.                           start: 0,
  209.                           stop: 100,
  210.                           time: 0.5,
  211.                           duration: 0.5,
  212.                           effect: 'easeOut'
  213.                         },
  214.                         onStop: function(){
  215.                             animating = false;
  216.                         }
  217.                     });
  218.                 }
  219.  
  220.                 if ($('#pScore2').html() != pScore2) {
  221.                     animating = true;
  222.                     $('#pScore2').tween({
  223.                         opacity: {
  224.                           start: 100,
  225.                           stop: 0,
  226.                           time: 0,
  227.                           duration: 0.5,
  228.                           effect: 'easeIn'
  229.                         },
  230.                         onStop: function(){
  231.                             $('#pScore2').html(pScore2);
  232.                         }
  233.                     });
  234.  
  235.                     $('#pScore2').tween({
  236.                         opacity: {
  237.                           start: 0,
  238.                           stop: 100,
  239.                           time: 0.5,
  240.                           duration: 0.5,
  241.                           effect: 'easeOut'
  242.                         },
  243.                         onStop: function(){
  244.                             animating = false;
  245.                         }
  246.                     });
  247.                 }
  248.  
  249.                 if ($('#mText3').html() != mText3) {
  250.                     animating = true;
  251.                     $('#mText3').tween({
  252.                         opacity: {
  253.                           start: 100,
  254.                           stop: 0,
  255.                           time: 0,
  256.                           duration: 0.5,
  257.                           effect: 'easeIn'
  258.                         },
  259.                         onStop: function(){
  260.                             $('#mText3').html(mText3);
  261.                         }
  262.                     });
  263.  
  264.                     $('#mText3').tween({
  265.                         opacity: {
  266.                           start: 0,
  267.                           stop: 100,
  268.                           time: 0.5,
  269.                           duration: 0.5,
  270.                           effect: 'easeOut'
  271.                         },
  272.                         onStop: function(){
  273.                             animating = false;
  274.                         }
  275.                     });
  276.                 }
  277.  
  278.                 if ($('#mText4').html() != mText4) {
  279.                     animating = true;
  280.                     $('#mText4').tween({
  281.                         opacity: {
  282.                           start: 100,
  283.                           stop: 0,
  284.                           time: 0,
  285.                           duration: 0.5,
  286.                           effect: 'easeIn'
  287.                         },
  288.                         onStop: function(){
  289.                             $('#mText4').html(mText4);
  290.                         }
  291.                     });
  292.  
  293.                     $('#mText4').tween({
  294.                         opacity: {
  295.                           start: 0,
  296.                           stop: 100,
  297.                           time: 0.5,
  298.                           duration: 0.5,
  299.                           effect: 'easeOut'
  300.                         },
  301.                         onStop: function(){
  302.                             animating = false;
  303.                         }
  304.                     });
  305.                 }
  306.                
  307.                 if ($('#pPlayerPort1').html() != pPlayerPort1) {
  308.                     animating = true;
  309.                     $('#pPlayerPort1').tween({
  310.                         opacity: {
  311.                           start: 100,
  312.                           stop: 0,
  313.                           time: 0,
  314.                           duration: 0.5,
  315.                           effect: 'easeIn'
  316.                         },
  317.                         onStop: function(){
  318.                             $('#pPlayerPort1').html(pPlayerPort1);
  319.                         }
  320.                     });
  321.  
  322.                     $('#pPlayerPort1').tween({
  323.                         opacity: {
  324.                           start: 0,
  325.                           stop: 100,
  326.                           time: 0.5,
  327.                           duration: 0.5,
  328.                           effect: 'easeOut'
  329.                         },
  330.                         onStop: function(){
  331.                             animating = false;
  332.                         }
  333.                     });
  334.                 }
  335.                 /*
  336.                 if (#pPlayerPort1 === 1) {
  337.                     #pPort1 {
  338.                         $('#pPort1').html('<img src="../images/Port1.png">');
  339.                     } else {
  340.                         $('#pPort1').html('<img src="../images/test1.png">');
  341.                     });
  342.                 }
  343.                 //*/
  344.                
  345.                 if ($('#pPlayerPort2').html() != pPlayerPort2) {
  346.                     animating = true;
  347.                     $('#pPlayerPort2').tween({
  348.                         opacity: {
  349.                           start: 100,
  350.                           stop: 0,
  351.                           time: 0,
  352.                           duration: 0.5,
  353.                           effect: 'easeIn'
  354.                         },
  355.                         onStop: function(){
  356.                             $('#pPlayerPort2').html(pPlayerPort2);
  357.                         }
  358.                     });
  359.  
  360.                     $('#pPlayerPort2').tween({
  361.                         opacity: {
  362.                           start: 0,
  363.                           stop: 100,
  364.                           time: 0.5,
  365.                           duration: 0.5,
  366.                           effect: 'easeOut'
  367.                         },
  368.                         onStop: function(){
  369.                             animating = false;
  370.                         }
  371.                     });
  372.                 }
  373.  
  374.                 /*
  375.                 if (oldCountry1 != pCountry1 || $('#pFlag1').opacity() == 0) {
  376.                     animating = true;
  377.                     $('#pFlag1').tween({
  378.                         opacity: {
  379.                           start: 100,
  380.                           stop: 0,
  381.                           time: 0,
  382.                           duration: 0.5,
  383.                           effect: 'easeIn'
  384.                         },
  385.                         onStop: function(){
  386.                             $('#pFlag1').html('<img src="GoSquared/cropped/iso/64shiny/'+ pCountry1 +'.png" width="43" height="28">');
  387.                             oldCountry1 = pCountry1;
  388.                         }
  389.                     });
  390.  
  391.                     $('#pFlag1').tween({
  392.                         opacity: {
  393.                           start: 0,
  394.                           stop: 100,
  395.                           time: 0.5,
  396.                           duration: 0.5,
  397.                           effect: 'easeOut'
  398.                         },
  399.                         onStop: function(){
  400.                             animating = false;
  401.                         }
  402.                     });
  403.  
  404.                 }
  405.  
  406.  
  407.                 if (oldCountry2 != pCountry2 || $('#pFlag2').opacity() == 0) {
  408.                     animating = true;
  409.                     $('#pFlag2').tween({
  410.                         opacity: {
  411.                           start: 100,
  412.                           stop: 0,
  413.                           time: 0,
  414.                           duration: 0.5,
  415.                           effect: 'easeIn'
  416.                         },
  417.                         onStop: function(){
  418.                             $('#pFlag2').html('<img src="GoSquared/cropped/iso/64shiny/'+ pCountry2 +'.png" width="43" height="28">');
  419.                             oldCountry2 = pCountry2;
  420.                         }
  421.                     });
  422.  
  423.                     $('#pFlag2').tween({
  424.                         opacity: {
  425.                           start: 0,
  426.                           stop: 100,
  427.                           time: 0.5,
  428.                           duration: 0.5,
  429.                           effect: 'easeOut'
  430.                         },
  431.                         onStop: function(){
  432.                             animating = false;
  433.                         }
  434.                     });
  435.  
  436.                 }
  437.                 //*/
  438.  
  439.                 $.play();
  440.  
  441.                 doUpdate = false;
  442.             }
  443.  
  444.             function getValueFromTag (xmlDoc,tag) {
  445.                 if (xmlDoc.getElementsByTagName(tag).length != 0 ) {
  446.                     if (xmlDoc.getElementsByTagName(tag)[0].childNodes.length == 0) {
  447.                             return '';
  448.                         } else {
  449.                             return xmlDoc.getElementsByTagName(tag)[0].childNodes[0].nodeValue;
  450.                     }
  451.                 } else {
  452.                     return '';
  453.                 }
  454.             }
  455.  
  456.             function getCountry (country) {
  457.  
  458.             var count = iso.findCountryByName(country);
  459.             if (!count)
  460.             count = iso.findCountryByCode(country);
  461.             if (!count) {
  462.             var count = new Array();
  463.             count['value'] = "unknown";
  464.             }
  465.  
  466.             return count['value'];
  467.         }
  468.     </script>
  469. </head>
  470. <body onLoad="init()">
  471.     <div id="board">
  472.         <div id="pFlag1"></div>
  473.         <div id="pName1">Player 1</div>
  474.         <div id="pScore1">99</div>
  475.         <div id="pFlag2"></div>
  476.         <div id="pName2">Player 2</div>
  477.         <div id="pScore2">99</div>
  478.         <div id="mText3">Test</div>
  479.         <div id="mText4">Test2</div>
  480.         <div id="pPlayerPort1">1</div>
  481.         <div id="pPlayerPort2">2</div>
  482.         <div id="pPort1"></div>
  483.         <div id="pPort2"></div>
  484.         <div id="pChar1"></div>
  485.         <div id="pChar2"></div>
  486.     </div>
  487. </body>
  488. </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!