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