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 <!--
  51       <tr>
  52         <th class="rank">1</th>
  53         <td class="team">Trondheim Frisbeeklubb</td>
  54         <td class="nplayed">3</td>
  55         <td class="gd">+7</td>
  56         <td class="pts">6</td>
  57       </tr>
  58       <tr>
  59         <th class="rank">2</th>
  60         <td class="team">Pancake Circle Ltd.</td>
  61         <td class="nplayed">2</td>
  62         <td class="gd">+2</td>
  63         <td class="pts">4</td>
  64       </tr>
  65       <tr>
  66         <th class="rank">3</th>
  67         <td class="team">Norges Handelshøyskole 1</td>
  68         <td class="nplayed">2</td>
  69         <td class="gd">-2</td>
  70         <td class="pts">2</td>
  71       </tr>
  72       <tr>
  73         <th class="rank">3</th>
  74         <td class="team">Pick-up Team</td>
  75         <td class="nplayed">2</td>
  76         <td class="gd">-2</td>
  77         <td class="pts">2</td>
  78       </tr>
  79       <tr>
  80         <th class="rank">5</th>
  81         <td class="team">Whatever Team</td>
  82         <td class="nplayed">3</td>
  83         <td class="gd">-11</td>
  84         <td class="pts">0</td>
  85       </tr>
  86       <tr class="footer">
  87         <td colspan="5">www.trondheimfrisbeeklubb.no | #trøndisk</td>
  88       </tr>
  89 -->
  90     </table>
  91     <div id="manualcontrols">
  92       <p>
  93         <a href="javascript:startclock()">start clock</a>
  94         <a href="javascript:stopclock()">stop clock</a>
  95         <a href="javascript:setclock(25*60)">reset clock</a>
  96         <a href="javascript:showclock()">show clock</a>
  97         <a href="javascript:hideclock()">hide clock</a>
  98       </p>
  99       <p>
 100         <a href="javascript:goalA()">goal team A</a>
 101         <a href="javascript:goalB()">goal team B</a>
 102         <a href="javascript:ungoalA()">ungoal team A</a>
 103         <a href="javascript:ungoalB()">ungoal team B</a>
 104         <a href="javascript:resetscore()">reset score</a>
 105       </p>
 106       <p>
 107         <a href="javascript:showcomment()">show comment</a>
 108         <a href="javascript:hidecomment()">hide comment</a>
 109       </p>
 110       <p>
 111         <a href="javascript:showlowerthird()">show lower third</a>
 112         <a href="javascript:hidelowerthird()">hide lower third</a>
 113       </p>
 114     </div>
 115
 116 <script src="carousel.js" type="text/javascript" />
 117 <script>
 118 var clock_running = false;
 119 var clock_visible = false;
 120 var comment_visible = false;
 121 var lowerthird_visible = false;
 122 var clock_left = 25 * 60;
 123 var scoreA = 0;
 124 var scoreB = 0;
 125 var clock_origin;
 126 var state = {};
 127
 128 function setteams()
 129 {
 130         document.getElementById('team1').innerHTML = state['team1'];
 131         document.getElementById('team2').innerHTML = state['team2'];
 132 }
 133
 134 function setcolors()
 135 {
 136         document.getElementById('team1color').style.backgroundColor = state['team1color'];
 137         document.getElementById('team2color').style.backgroundColor = state['team2color'];
 138 }
 139
 140 function setscore()
 141 {
 142         scoreA = state['score1'];
 143         scoreB = state['score2'];
 144         update_score();
 145 }
 146
 147 function startclock()
 148 {
 149         if (!clock_running) {
 150                 clock_origin = Date.now();
 151                 clock_running = true;
 152         }
 153         showclock();
 154 }
 155
 156 function stopclock()
 157 {
 158         if (!clock_running) return;
 159         clock_left = time_left();
 160         clock_origin = Date.now();
 161         clock_running = false;
 162 }
 163
 164 function setclock(amount)
 165 {
 166         clock_left = amount;
 167         clock_origin = Date.now();
 168         update_clock();
 169 }
 170
 171 function setclockfromstate()
 172 {
 173         var amount = parseInt(state['clock_min']) * 60 + parseInt(state['clock_sec']);
 174         setclock(amount);
 175 }
 176
 177 function showclock()
 178 {
 179         if (clock_visible) return;
 180         var clockbug = document.getElementById('clockbug');
 181         clockbug.className = 'clockbug clockbug-animate-in';
 182         clock_visible = true;
 183 }
 184
 185 function hideclock()
 186 {
 187         if (!clock_visible) return;
 188         var clockbug = document.getElementById('clockbug');
 189         clockbug.className = 'clockbug clockbug-animate-out';
 190         clock_visible = false;
 191 }
 192
 193 function setcomment()
 194 {
 195         document.getElementById('comment').innerHTML = state['comment'];
 196 }
 197
 198 function showcomment()
 199 {
 200         if (comment_visible) return;
 201         var commentbug = document.getElementById('commentbug');
 202         commentbug.className = 'commentbug commentbug-animate-in';
 203         comment_visible = true;
 204 }
 205
 206 function hidecomment()
 207 {
 208         if (!comment_visible) return;
 209         var commentbug = document.getElementById('commentbug');
 210         commentbug.className = 'commentbug commentbug-animate-out';
 211         comment_visible = false;
 212 }
 213
 214 function showlowerthird()
 215 {
 216         if (lowerthird_visible) return;
 217
 218         // With no flexbox, this is how it has to be...
 219         var f = document.getElementById('lowerthird-headline');
 220         var g = document.getElementById('lowerthird-headline-content');
 221         f.style.paddingTop = Math.round((f.clientHeight - g.clientHeight) / 2) + 'px';
 222
 223         f = document.getElementById('lowerthird-subheading');
 224         g = document.getElementById('lowerthird-subheading-content');
 225         f.style.paddingTop = Math.round((f.clientHeight - g.clientHeight) / 2) + 'px';
 226
 227         document.getElementById('lowerthird-headline').className = 'lowerthird-headline lowerthird-headline-animate-in';
 228         document.getElementById('lowerthird-headline-content').className = 'lowerthird-headline-content lowerthird-headline-content-animate-in';
 229         document.getElementById('lowerthird-subheading').className = 'lowerthird-subheading lowerthird-subheading-animate-in';
 230         document.getElementById('lowerthird-subheading-content').className = 'lowerthird-subheading-content lowerthird-subheading-content-animate-in';
 231         lowerthird_visible = true;
 232 }
 233
 234 function setandshowlowerthird()
 235 {
 236         document.getElementById('lowerthird-headline-content').innerHTML = state['text1'];
 237         document.getElementById('lowerthird-subheading-content').innerHTML = state['text2'];
 238         showlowerthird();
 239 }
 240
 241 function hidelowerthird()
 242 {
 243         if (!lowerthird_visible) return;
 244         document.getElementById('lowerthird-headline').className = 'lowerthird-headline lowerthird-headline-hidden lowerthird-headline-animate-out';
 245         document.getElementById('lowerthird-headline-content').className = 'lowerthird-headline-content lowerthird-headline-content-animate-out';
 246         document.getElementById('lowerthird-subheading').className = 'lowerthird-subheading lowerthird-subheading-animate-out';
 247         document.getElementById('lowerthird-subheading-content').className = 'lowerthird-subheading-content lowerthird-subheading-content-animate-out';
 248         lowerthird_visible = false;
 249 }
 250
 251 function time_left()
 252 {
 253         var elapsed = (Date.now() - clock_origin) * 1e-3;
 254         if (elapsed > clock_left) return 0;
 255         return Math.ceil(clock_left - elapsed);
 256 }
 257
 258 function update_clock()
 259 {
 260         var left = time_left();
 261         var min = Math.floor(left / 60);
 262         var sec = left % 60;
 263
 264         if (sec < 10) sec = "0" + sec;
 265         document.getElementById('clock').innerHTML = min + ":" + sec;
 266 }
 267
 268 function goalA()
 269 {
 270         ++scoreA;
 271         update_score();
 272 }
 273
 274 function goalB()
 275 {
 276         ++scoreB;
 277         update_score();
 278 }
 279
 280 function ungoalA()
 281 {
 282         if (scoreA > 0) --scoreA;
 283         update_score();
 284 }
 285
 286 function ungoalB()
 287 {
 288         if (scoreB > 0) --scoreB;
 289         update_score();
 290 }
 291
 292 function resetscore()
 293 {
 294         scoreA = scoreB = 0;
 295         update_score();
 296 }
 297
 298 function update_score()
 299 {
 300         document.getElementById('score').innerHTML = scoreA + "&nbsp;–&nbsp;" + scoreB;
 301 }
 302
 303 /* called by caspar only */
 304 function play()
 305 {
 306         document.getElementById('manualcontrols').style.display = 'none';
 307         document.getElementById('area').style.display = 'none';
 308
 309         // Old CEF workaround
 310         document.getElementById('lowerthird-subheading').style.top = '638px';
 311 }
 312
 313 function update(v)
 314 {
 315         console.log('[[[' + v + ']]]');
 316         var j = JSON.parse(v);
 317         for(var key in j) state[key] = j[key];
 318 }
 319
 320 setInterval(function() {
 321         if (clock_running) {
 322                 update_clock();
 323         }
 324 }, 100);
 325 update_score();
 326
 327 //play();
 328 //startclock();
 329
 330 </script>
 331   </body>
 332 </html>