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    <style>
   8 * {
   9   -webkit-box-sizing: border-box;
  10   Box-Sizing: border-box;
  11   -webkit-backface-visibility: hidden;
  12   -webkit-transition: translate3d(0,0,0);
  13 }
  14 html, body {
  15   width: 1280px;
  16   height: 720px;
  17   margin: 0;
  18   padding: 0;
  19   background: transparent;
  20   overflow: hidden;
  21   -webkit-font-smoothing: antialiased !important;
  22 }
  23 body {
  24   font-family: 'Lato', sans-serif;
  25   color: white;
  26 }
  27
  28 /* Score */
  29 .scorebug {
  30   position: fixed;
  31   font-size: 25px;
  32   left: 10px;
  33   top: 10px;
  34   border-collapse: collapse;
  35   white-space: nowrap;
  36   border: 3px solid black;
  37   z-index: 1;
  38 }
  39 .scorebug td {
  40   border: 3px solid #008;
  41 }
  42 .team1color, .team2color {
  43   width: 15px;
  44   margin: 5px;
  45 }
  46 .team1color {
  47   background: red;
  48 }
  49 .team2color {
  50   background: green;
  51 }
  52 .team1, .team2 {
  53   font-weight: bold;
  54   width: 100px;
  55   text-align: center;
  56   height: 35px;
  57   background: #00a;
  58 }
  59 .score {
  60   text-align: center;
  61   background: #00c;
  62   width: 110px;
  63   height: 35px;
  64 }
  65
  66 /* Clock, to the right of score */
  67 .clockbug {
  68   position: fixed;
  69   font-size: 25px;
  70   left: 360px;
  71   top: 10px;
  72   border-collapse: collapse;
  73   white-space: nowrap;
  74   border: 3px solid black;
  75 }
  76 .clock {
  77   border: 3px solid #008;
  78   background: #00a;
  79   text-align: center;
  80   height: 35px;
  81   width: 90px;
  82 }
  83 .clockbug-hidden {
  84   -webkit-transform:translateX(-200%);
  85 }
  86 .clockbug-animate-in {
  87   -webkit-animation: from-left 1s ease;
  88 }
  89 .clockbug-animate-out {
  90   -webkit-animation: to-left 1s ease;
  91   -webkit-transform:translateX(-200%);
  92 }
  93
  94 /* Comment, below score */
  95 .commentbug {
  96   position: fixed;
  97   font-size: 20px;
  98   left: 10px;
  99   top: 52px;
 100   border-collapse: collapse;
 101   white-space: nowrap;
 102   border: 3px solid black;
 103 }
 104 .comment {
 105   border: 3px solid #008;
 106   background: #00a;
 107   text-align: center;
 108   height: 30px;
 109   width: 340px;
 110 }
 111
 112 .commentbug-hidden {
 113   -webkit-transform:translateY(-40px);
 114 }
 115 .commentbug-animate-in {
 116   -webkit-animation: from-top 0.5s ease;
 117 }
 118 .commentbug-animate-out {
 119   -webkit-animation: to-top 0.5s ease;
 120   -webkit-transform:translateY(-40px);
 121 }
 122
 123 /* Lower third */
 124 .lowerthird-headline {
 125   position: fixed;
 126   font-size: 40px;
 127   left: 10px;
 128   top: 520px;
 129   border-collapse: collapse;
 130   white-space: nowrap;
 131   border: 2px solid #ccc;
 132   height: 118px;
 133   font-weight: bold;
 134   width: 1050px;
 135   /*background: linear-gradient(to right, #ccc, #fff 15px); */
 136   background-image: url(lowerthird-bg.png);
 137   color: black;
 138   /* padding-top: 20px; */
 139 }
 140 .lowerthird-headline-hidden {
 141   width: 0px;
 142   border-left: 0px;
 143   border-right: 0px;
 144 }
 145 .lowerthird-headline-animate-in {
 146   -webkit-animation: scale-out 1.0s;
 147 }
 148 .lowerthird-headline-animate-out {
 149   -webkit-animation: scale-in 1.0s;
 150 }
 151 .lowerthird-headline-content {
 152   padding-left: 20px;
 153   position: absolute;
 154 }
 155 .lowerthird-headline-content-hidden {
 156   clip: rect(0px,0px,200px,0px);
 157 }
 158 .lowerthird-headline-content-animate-in {
 159   -webkit-animation: wipe-out 2.0s ease;
 160 }
 161 .lowerthird-headline-content-animate-out {
 162   -webkit-animation: wipe-in 2.0s ease;
 163   clip: rect(0px,0px,200px,0px);
 164 }
 165 .lowerthird-subheading {
 166   position: fixed;
 167   font-size: 24px;
 168   left: 40px;
 169   top: 637px;
 170   height: 40px;
 171   width: 500px;
 172   border-collapse: collapse;
 173   white-space: nowrap;
 174   border: 1px solid black;
 175   /*display: flex;
 176   align-items: center; */
 177   /*background: linear-gradient(to right, #44c, #33a 15px); */
 178   background-image: url(lowerthird-bg2.png);
 179 }
 180 .lowerthird-subheading-hidden {
 181   clip: rect(0px,0px,200px,0px);
 182 }
 183 .lowerthird-subheading-animate-in {
 184   -webkit-animation: scale-out-small 1.6s ease;
 185 }
 186 .lowerthird-subheading-animate-out {
 187   -webkit-animation: scale-in-small 1.6s ease;
 188   width: 0px;
 189   border-left: 0px;
 190 }
 191 .lowerthird-subheading-content {
 192   position: absolute;
 193   padding-left: 20px;
 194 }
 195 .lowerthird-subheading-content-hidden {
 196   width: 0px;
 197   border: 0px;
 198 }
 199 .lowerthird-subheading-content-animate-in {
 200   -webkit-animation: wipe-out 2.2s ease;
 201 }
 202 .lowerthird-subheading-content-animate-out {
 203   -webkit-animation: wipe-in 2.2s ease;
 204   clip: rect(0px,0px,200px,0px);
 205 }
 206
 207 /* these are hidden when actually run in casparcg */
 208 #area {
 209   position: fixed;
 210   left: 0px;
 211   top: 0px;
 212   width: 1280px;
 213   height: 720px;
 214   background: cyan;
 215 }
 216 #manualcontrols {
 217   z-index: 3;
 218   position: fixed;
 219   top: 250px;
 220 }
 221
 222 /* Animations */
 223 @-webkit-keyframes from-left {
 224   0% {
 225     -webkit-transform:translateX(-200%);
 226   }
 227   100% {
 228     -webkit-transform:translateX(0);
 229   }
 230 }
 231 @-webkit-keyframes to-left {
 232   0% {
 233     -webkit-transform:translateX(0);
 234   }
 235   100% {
 236     -webkit-transform:translateX(-200%);
 237   }
 238 }
 239 @-webkit-keyframes from-top {
 240   0% {
 241     -webkit-transform:translateY(-40px);
 242   }
 243   100% {
 244     -webkit-transform:translateY(0);
 245   }
 246 }
 247 @-webkit-keyframes to-top {
 248   0% {
 249     -webkit-transform:translateY(0);
 250   }
 251   100% {
 252     -webkit-transform:translateY(-40px);
 253   }
 254 }
 255
 256 @-webkit-keyframes scale-out {
 257   0% {
 258     width: 0px;
 259   }
 260   100% {
 261     width: 1050px;
 262   }
 263 }
 264 @-webkit-keyframes scale-in {
 265   0% {
 266     width: 1050px;
 267     border: 2px solid #ccc;
 268   }
 269   100% {
 270     width: 0px;
 271     border: 2px solid #ccc;
 272   }
 273 }
 274 @-webkit-keyframes scale-out-small {
 275   0% {
 276     width: 0px;
 277     border: 0px;
 278   }
 279   19.99% {
 280     border: 0px;
 281   }
 282   20% {
 283     width: 0px;
 284     border: 1px solid black;
 285   }
 286   100% {
 287     width: 500px;
 288   }
 289 }
 290 @-webkit-keyframes scale-in-small {
 291   0% {
 292     width: 500px;
 293     border: 1px solid black;
 294   }
 295   80% {
 296     width: 0px;
 297     border: 1px solid black;
 298   }
 299   80.01% {
 300     border: 0px;
 301   }
 302   100% {
 303     width: 0px;
 304     border: 0px;
 305   }
 306 }
 307 @-webkit-keyframes wipe-out {
 308   0% {
 309     clip: rect(0px,0px,200px,0px);
 310   }
 311   20% {
 312     clip: rect(0px,0px,200px,0px);
 313   }
 314   100% {
 315     clip: rect(0px,1050px,200px,0px);
 316   }
 317 }
 318 @-webkit-keyframes wipe-in {
 319   0% {
 320     clip: rect(0px,1050px,200px,0px);
 321   }
 322   20% {  /* Not symmetrical! */
 323     clip: rect(0px,0px,200px,0px);
 324   }
 325   100% {
 326     clip: rect(0px,0px,200px,0px);
 327   }
 328 }
 329    </style>
 330   </head>
 331   <body>
 332     <div id="area"></div>
 333     <table class="scorebug">
 334       <tr>
 335         <td class="team1color" id="team1color"></td>
 336         <td class="team1" id="team1">PCL</td>
 337         <td class="score" id="score">17&nbsp;–&nbsp;11</td>
 338         <td class="team2" id="team2">NMBUI</td>
 339         <td class="team2color" id="team2color"></td>
 340       </tr>
 341     </table>
 342     <table class="clockbug clockbug-hidden" id="clockbug">
 343       <tr>
 344         <td class="clock" id="clock">25:00</td>
 345       </tr>
 346     </table>
 347     <table class="commentbug commentbug-hidden" id="commentbug">
 348       <tr>
 349         <td class="comment" id="comment">Pagacap: First to 9 points</td>
 350       </tr>
 351     </table>
 352     <div class="lowerthird-headline lowerthird-headline-hidden" id="lowerthird-headline"><div class="lowerthird-headline-content lowerthird-headline-content-hidden" id="lowerthird-headline-content">
 353       John Doe<br>Ola Nordmann
 354     </div></div>
 355     <div class="lowerthird-subheading lowerthird-subheading-hidden" id="lowerthird-subheading"><div class="lowerthird-subheading-content lowerthird-subheading-content-hidden" id="lowerthird-subheading-content">
 356       Commentators, Trøndisk 2016
 357     </div></div>
 358    <div id="manualcontrols">
 359     <p>
 360       <a href="javascript:startclock()">start clock</a>
 361       <a href="javascript:stopclock()">stop clock</a>
 362       <a href="javascript:setclock(25*60)">reset clock</a>
 363       <a href="javascript:showclock()">show clock</a>
 364       <a href="javascript:hideclock()">hide clock</a>
 365     </p>
 366     <p>
 367       <a href="javascript:goalA()">goal team A</a>
 368       <a href="javascript:goalB()">goal team B</a>
 369       <a href="javascript:ungoalA()">ungoal team A</a>
 370       <a href="javascript:ungoalB()">ungoal team B</a>
 371       <a href="javascript:resetscore()">reset score</a>
 372     </p>
 373     <p>
 374       <a href="javascript:showcomment()">show comment</a>
 375       <a href="javascript:hidecomment()">hide comment</a>
 376     </p>
 377     <p>
 378       <a href="javascript:showlowerthird()">show lower third</a>
 379       <a href="javascript:hidelowerthird()">hide lower third</a>
 380     </p>
 381    </div>
 382
 383 <script>
 384 var clock_running = false;
 385 var clock_visible = false;
 386 var comment_visible = false;
 387 var lowerthird_visible = false;
 388 var clock_left = 25 * 60;
 389 var scoreA = 0;
 390 var scoreB = 0;
 391 var clock_origin;
 392 var state = {};
 393
 394 function setteams()
 395 {
 396         document.getElementById('team1').innerHTML = state['team1'];
 397         document.getElementById('team2').innerHTML = state['team2'];
 398 }
 399
 400 function setcolors()
 401 {
 402         document.getElementById('team1color').style.backgroundColor = state['team1color'];
 403         document.getElementById('team2color').style.backgroundColor = state['team2color'];
 404 }
 405
 406 function setscore()
 407 {
 408         scoreA = state['score1'];
 409         scoreB = state['score2'];
 410         update_score();
 411 }
 412
 413 function startclock()
 414 {
 415         if (!clock_running) {
 416                 clock_origin = Date.now();
 417                 clock_running = true;
 418         }
 419         showclock();
 420 }
 421
 422 function stopclock()
 423 {
 424         if (!clock_running) return;
 425         clock_left = time_left();
 426         clock_origin = Date.now();
 427         clock_running = false;
 428 }
 429
 430 function setclock(amount)
 431 {
 432         clock_left = amount;
 433         clock_origin = Date.now();
 434         update_clock();
 435 }
 436
 437 function setclockfromstate()
 438 {
 439         var amount = parseInt(state['clock_min']) * 60 + parseInt(state['clock_sec']);
 440         setclock(amount);
 441 }
 442
 443 function showclock()
 444 {
 445         if (clock_visible) return;
 446         var clockbug = document.getElementById('clockbug');
 447         clockbug.className = 'clockbug clockbug-animate-in';
 448         clock_visible = true;
 449 }
 450
 451 function hideclock()
 452 {
 453         if (!clock_visible) return;
 454         var clockbug = document.getElementById('clockbug');
 455         clockbug.className = 'clockbug clockbug-animate-out';
 456         clock_visible = false;
 457 }
 458
 459 function setcomment()
 460 {
 461         document.getElementById('comment').innerHTML = state['comment'];
 462 }
 463
 464 function showcomment()
 465 {
 466         if (comment_visible) return;
 467         var commentbug = document.getElementById('commentbug');
 468         commentbug.className = 'commentbug commentbug-animate-in';
 469         comment_visible = true;
 470 }
 471
 472 function hidecomment()
 473 {
 474         if (!comment_visible) return;
 475         var commentbug = document.getElementById('commentbug');
 476         commentbug.className = 'commentbug commentbug-animate-out';
 477         comment_visible = false;
 478 }
 479
 480 function showlowerthird()
 481 {
 482         if (lowerthird_visible) return;
 483
 484         // With no flexbox, this is how it has to be...
 485         var f = document.getElementById('lowerthird-headline');
 486         var g = document.getElementById('lowerthird-headline-content');
 487         f.style.paddingTop = Math.round((f.clientHeight - g.clientHeight) / 2) + 'px';
 488
 489         f = document.getElementById('lowerthird-subheading');
 490         g = document.getElementById('lowerthird-subheading-content');
 491         f.style.paddingTop = Math.round((f.clientHeight - g.clientHeight) / 2) + 'px';
 492
 493         document.getElementById('lowerthird-headline').className = 'lowerthird-headline lowerthird-headline-animate-in';
 494         document.getElementById('lowerthird-headline-content').className = 'lowerthird-headline-content lowerthird-headline-content-animate-in';
 495         document.getElementById('lowerthird-subheading').className = 'lowerthird-subheading lowerthird-subheading-animate-in';
 496         document.getElementById('lowerthird-subheading-content').className = 'lowerthird-subheading-content lowerthird-subheading-content-animate-in';
 497         lowerthird_visible = true;
 498 }
 499
 500 function setandshowlowerthird()
 501 {
 502         document.getElementById('lowerthird-headline-content').innerHTML = state['text1'];
 503         document.getElementById('lowerthird-subheading-content').innerHTML = state['text2'];
 504         showlowerthird();
 505 }
 506
 507 function hidelowerthird()
 508 {
 509         if (!lowerthird_visible) return;
 510         document.getElementById('lowerthird-headline').className = 'lowerthird-headline lowerthird-headline-hidden lowerthird-headline-animate-out';
 511         document.getElementById('lowerthird-headline-content').className = 'lowerthird-headline-content lowerthird-headline-content-animate-out';
 512         document.getElementById('lowerthird-subheading').className = 'lowerthird-subheading lowerthird-subheading-animate-out';
 513         document.getElementById('lowerthird-subheading-content').className = 'lowerthird-subheading-content lowerthird-subheading-content-animate-out';
 514         lowerthird_visible = false;
 515 }
 516
 517 function time_left()
 518 {
 519         var elapsed = (Date.now() - clock_origin) * 1e-3;
 520         if (elapsed > clock_left) return 0;
 521         return Math.ceil(clock_left - elapsed);
 522 }
 523
 524 function update_clock()
 525 {
 526         var left = time_left();
 527         var min = Math.floor(left / 60);
 528         var sec = left % 60;
 529
 530         if (sec < 10) sec = "0" + sec;
 531         document.getElementById('clock').innerHTML = min + ":" + sec;
 532 }
 533
 534 function goalA()
 535 {
 536         ++scoreA;
 537         update_score();
 538 }
 539
 540 function goalB()
 541 {
 542         ++scoreB;
 543         update_score();
 544 }
 545
 546 function ungoalA()
 547 {
 548         if (scoreA > 0) --scoreA;
 549         update_score();
 550 }
 551
 552 function ungoalB()
 553 {
 554         if (scoreB > 0) --scoreB;
 555         update_score();
 556 }
 557
 558 function resetscore()
 559 {
 560         scoreA = scoreB = 0;
 561         update_score();
 562 }
 563
 564 function update_score()
 565 {
 566         document.getElementById('score').innerHTML = scoreA + "&nbsp;–&nbsp;" + scoreB;
 567 }
 568
 569 /* called by caspar only */
 570 function play()
 571 {
 572         document.getElementById('manualcontrols').style.display = 'none';
 573         document.getElementById('area').style.display = 'none';
 574
 575         // Old CEF workaround
 576         document.getElementById('lowerthird-subheading').style.top = '638px';
 577 }
 578
 579 function update(v)
 580 {
 581         console.log('[[[' + v + ']]]');
 582         var j = JSON.parse(v);
 583         for(var key in j) state[key] = j[key];
 584 }
 585
 586 setInterval(function() {
 587         if (clock_running) {
 588                 update_clock();
 589         }
 590 }, 100);
 591 update_score();
 592
 593 //play();
 594 //startclock();
 595 </script>
 596   </body>
 597 </html>