git.sesse.net Git - ultimatescore/blob - score.html

   1 <!DOCTYPE html>
   2 <html>
   3  <head>
   4    <meta http-equiv="content-type" value="text/html; charset=utf-8" />
   5    <meta charset="utf-8" />
   6 <!--   <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> -->
   7    <link href="fonts/lato.css" rel="stylesheet">
   8    <link href="score.css" rel="stylesheet">
   9   </head>
  10   <body>
  11     <div id="area"></div>
  12     <table class="scorebug">
  13       <tr>
  14         <td class="team1color" id="team1color"></td>
  15         <td class="team1" id="team1">PCL</td>
  16         <td class="score" id="score">17&nbsp;–&nbsp;11</td>
  17         <td class="team2" id="team2">NMBUI</td>
  18         <td class="team2color" id="team2color"></td>
  19       </tr>
  20     </table>
  21     <table class="clockbug clockbug-hidden" id="clockbug">
  22       <tr>
  23         <td class="clock" id="clock">25:00</td>
  24       </tr>
  25     </table>
  26     <table class="commentbug commentbug-hidden" id="commentbug">
  27       <tr>
  28         <td class="comment" id="comment">Pagacap: First to 9 points</td>
  29       </tr>
  30     </table>
  31     <div class="lowerthird-headline lowerthird-headline-hidden" id="lowerthird-headline"><div class="lowerthird-headline-content lowerthird-headline-content-hidden" id="lowerthird-headline-content">
  32       John Doe<br>Ola Nordmann
  33     </div></div>
  34     <div class="lowerthird-subheading lowerthird-subheading-hidden" id="lowerthird-subheading"><div class="lowerthird-subheading-content lowerthird-subheading-content-hidden" id="lowerthird-subheading-content">
  35       Commentators, Trøndisk 2016
  36     </div></div>
  37     <table id="carousel">
  38       <thead>
  39         <tr>
  40           <th colspan="5">Current standings, TrønDisk 2017<br />Group A</th>
  41         </tr>
  42       </thead>
  43       <tr class="subfooter">
  44         <th class="rank"></th>
  45         <th class="team"></th>
  46         <th class="nplayed">P</th>
  47         <th class="gd">GD</th>
  48         <th class="pts">Pts</th>
  49       </tr>
  50     </table>
  51     <div id="manualcontrols">
  52       <p>
  53         <a href="javascript:startclock()">start clock</a>
  54         <a href="javascript:stopclock()">stop clock</a>
  55         <a href="javascript:setclock(25*60)">reset clock</a>
  56         <a href="javascript:showclock()">show clock</a>
  57         <a href="javascript:hideclock()">hide clock</a>
  58       </p>
  59       <p>
  60         <a href="javascript:goalA()">goal team A</a>
  61         <a href="javascript:goalB()">goal team B</a>
  62         <a href="javascript:ungoalA()">ungoal team A</a>
  63         <a href="javascript:ungoalB()">ungoal team B</a>
  64         <a href="javascript:resetscore()">reset score</a>
  65       </p>
  66       <p>
  67         <a href="javascript:showcomment()">show comment</a>
  68         <a href="javascript:hidecomment()">hide comment</a>
  69       </p>
  70       <p>
  71         <a href="javascript:showlowerthird()">show lower third</a>
  72         <a href="javascript:hidelowerthird()">hide lower third</a>
  73       </p>
  74     </div>
  75
  76 <script src="carousel.js" type="text/javascript" />
  77 <script>
  78 var clock_running = false;
  79 var clock_visible = false;
  80 var comment_visible = false;
  81 var lowerthird_visible = false;
  82 var clock_left = 25 * 60;
  83 var scoreA = 0;
  84 var scoreB = 0;
  85 var clock_origin;
  86 var state = {};
  87
  88 function setteams()
  89 {
  90         document.getElementById('team1').innerHTML = state['team1'];
  91         document.getElementById('team2').innerHTML = state['team2'];
  92 }
  93
  94 function setcolors()
  95 {
  96         document.getElementById('team1color').style.backgroundColor = state['team1color'];
  97         document.getElementById('team2color').style.backgroundColor = state['team2color'];
  98 }
  99
 100 function setscore()
 101 {
 102         scoreA = state['score1'];
 103         scoreB = state['score2'];
 104         update_score();
 105 }
 106
 107 function startclock()
 108 {
 109         if (!clock_running) {
 110                 clock_origin = Date.now();
 111                 clock_running = true;
 112         }
 113         showclock();
 114 }
 115
 116 function stopclock()
 117 {
 118         if (!clock_running) return;
 119         clock_left = time_left();
 120         clock_origin = Date.now();
 121         clock_running = false;
 122 }
 123
 124 function setclock(amount)
 125 {
 126         clock_left = amount;
 127         clock_origin = Date.now();
 128         update_clock();
 129 }
 130
 131 function setclockfromstate()
 132 {
 133         var amount = parseInt(state['clock_min']) * 60 + parseInt(state['clock_sec']);
 134         setclock(amount);
 135 }
 136
 137 function showclock()
 138 {
 139         if (clock_visible) return;
 140         var clockbug = document.getElementById('clockbug');
 141         clockbug.className = 'clockbug clockbug-animate-in';
 142         clock_visible = true;
 143 }
 144
 145 function hideclock()
 146 {
 147         if (!clock_visible) return;
 148         var clockbug = document.getElementById('clockbug');
 149         clockbug.className = 'clockbug clockbug-animate-out';
 150         clock_visible = false;
 151 }
 152
 153 function setcomment()
 154 {
 155         document.getElementById('comment').innerHTML = state['comment'];
 156 }
 157
 158 function showcomment()
 159 {
 160         if (comment_visible) return;
 161         var commentbug = document.getElementById('commentbug');
 162         commentbug.className = 'commentbug commentbug-animate-in';
 163         comment_visible = true;
 164 }
 165
 166 function hidecomment()
 167 {
 168         if (!comment_visible) return;
 169         var commentbug = document.getElementById('commentbug');
 170         commentbug.className = 'commentbug commentbug-animate-out';
 171         comment_visible = false;
 172 }
 173
 174 function showlowerthird()
 175 {
 176         if (lowerthird_visible) return;
 177
 178         // With no flexbox, this is how it has to be...
 179         var f = document.getElementById('lowerthird-headline');
 180         var g = document.getElementById('lowerthird-headline-content');
 181         f.style.paddingTop = Math.round((f.clientHeight - g.clientHeight) / 2) + 'px';
 182
 183         f = document.getElementById('lowerthird-subheading');
 184         g = document.getElementById('lowerthird-subheading-content');
 185         f.style.paddingTop = Math.round((f.clientHeight - g.clientHeight) / 2) + 'px';
 186
 187         document.getElementById('lowerthird-headline').className = 'lowerthird-headline lowerthird-headline-animate-in';
 188         document.getElementById('lowerthird-headline-content').className = 'lowerthird-headline-content lowerthird-headline-content-animate-in';
 189         document.getElementById('lowerthird-subheading').className = 'lowerthird-subheading lowerthird-subheading-animate-in';
 190         document.getElementById('lowerthird-subheading-content').className = 'lowerthird-subheading-content lowerthird-subheading-content-animate-in';
 191         lowerthird_visible = true;
 192 }
 193
 194 function setandshowlowerthird()
 195 {
 196         document.getElementById('lowerthird-headline-content').innerHTML = state['text1'];
 197         document.getElementById('lowerthird-subheading-content').innerHTML = state['text2'];
 198         showlowerthird();
 199 }
 200
 201 function hidelowerthird()
 202 {
 203         if (!lowerthird_visible) return;
 204         document.getElementById('lowerthird-headline').className = 'lowerthird-headline lowerthird-headline-hidden lowerthird-headline-animate-out';
 205         document.getElementById('lowerthird-headline-content').className = 'lowerthird-headline-content lowerthird-headline-content-animate-out';
 206         document.getElementById('lowerthird-subheading').className = 'lowerthird-subheading lowerthird-subheading-animate-out';
 207         document.getElementById('lowerthird-subheading-content').className = 'lowerthird-subheading-content lowerthird-subheading-content-animate-out';
 208         lowerthird_visible = false;
 209 }
 210
 211 function time_left()
 212 {
 213         var elapsed = (Date.now() - clock_origin) * 1e-3;
 214         if (elapsed > clock_left) return 0;
 215         return Math.ceil(clock_left - elapsed);
 216 }
 217
 218 function update_clock()
 219 {
 220         var left = time_left();
 221         var min = Math.floor(left / 60);
 222         var sec = left % 60;
 223
 224         if (sec < 10) sec = "0" + sec;
 225         document.getElementById('clock').innerHTML = min + ":" + sec;
 226 }
 227
 228 function goalA()
 229 {
 230         ++scoreA;
 231         update_score();
 232 }
 233
 234 function goalB()
 235 {
 236         ++scoreB;
 237         update_score();
 238 }
 239
 240 function ungoalA()
 241 {
 242         if (scoreA > 0) --scoreA;
 243         update_score();
 244 }
 245
 246 function ungoalB()
 247 {
 248         if (scoreB > 0) --scoreB;
 249         update_score();
 250 }
 251
 252 function resetscore()
 253 {
 254         scoreA = scoreB = 0;
 255         update_score();
 256 }
 257
 258 function update_score()
 259 {
 260         document.getElementById('score').innerHTML = scoreA + "&nbsp;–&nbsp;" + scoreB;
 261 }
 262
 263 /* called by caspar only */
 264 function play()
 265 {
 266         document.getElementById('manualcontrols').style.display = 'none';
 267         document.getElementById('area').style.display = 'none';
 268
 269         // Old CEF workaround
 270         document.getElementById('lowerthird-subheading').style.top = '638px';
 271 }
 272
 273 function update(v)
 274 {
 275         console.log('[[[' + v + ']]]');
 276         var j = JSON.parse(v);
 277         for(var key in j) state[key] = j[key];
 278 }
 279
 280 setInterval(function() {
 281         if (clock_running) {
 282                 update_clock();
 283         }
 284 }, 100);
 285 update_score();
 286
 287 //play();
 288 //startclock();
 289
 290 </script>
 291   </body>
 292 </html>