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 #carousel {
 218   z-index: 3;
 219   position: fixed;
 220   top: 250px;
 221   font-size: 50px;
 222   /* background: rgba(0, 0, 170, 0.8); */
 223   background: transparent;
 224   top: 20px;
 225   left: 50px;
 226   right: 50px;
 227   width: 1180px;
 228   border-spacing: 0px 7px;
 229   text-align: left;
 230   border-collapse: separate;
 231   text-transform: uppercase;
 232   display: none;
 233 }
 234 #carousel thead tr {
 235   text-transform: none;
 236   text-align: center;
 237 }
 238 #carousel thead th {
 239   text-transform: none;
 240   text-align: center;
 241   font-size: 50px;
 242   -webkit-animation: fade-in 1.0s ease;
 243   -webkit-animation-delay: 0.0s;
 244   -webkit-animation-fill-mode: both;
 245 }
 246 #carousel tr.subfooter {
 247   -webkit-animation: fade-in 1.0s ease;
 248   -webkit-animation-delay: 0.25s;
 249   -webkit-animation-fill-mode: both;
 250 }
 251 #carousel tr {
 252   /* background: rgba(0, 0, 170, 0.8); */
 253   background: linear-gradient(to bottom, rgba(0, 0, 170, 0.8), rgba(0, 0, 130, 0.8));
 254   /* -webkit-animation: fade-in calc(counter(rowNumber) * 1.0)s ease; */
 255   -webkit-animation: fade-in calc(counter-value(rowNumber) * 1.0s) ease;
 256 }
 257 #carousel tr.footer {
 258   -webkit-animation: fade-in 2.0s ease;
 259   -webkit-animation-delay: 0.5s;
 260   -webkit-animation-fill-mode: both;
 261 }
 262 #carousel td, #carousel th {
 263   padding: 8px;
 264   font-size: 40px;
 265 }
 266 #carousel tr.footer td {
 267   font-size: 20px;
 268   text-transform: none;
 269   text-align: center;
 270 }
 271 #carousel th.rank {
 272   padding-left: 20px;
 273 }
 274 #carousel td.team {
 275   width: auto;
 276 }
 277 .nplayed, .gd, .pts {
 278   text-align: center;
 279 }
 280
 281 #manualcontrols {
 282   z-index: 4;
 283   position: fixed;
 284   top: 250px;
 285 }
 286
 287 /* Animations */
 288 @-webkit-keyframes from-left {
 289   0% {
 290     -webkit-transform:translateX(-200%);
 291   }
 292   100% {
 293     -webkit-transform:translateX(0);
 294   }
 295 }
 296 @-webkit-keyframes to-left {
 297   0% {
 298     -webkit-transform:translateX(0);
 299   }
 300   100% {
 301     -webkit-transform:translateX(-200%);
 302   }
 303 }
 304 @-webkit-keyframes from-top {
 305   0% {
 306     -webkit-transform:translateY(-40px);
 307   }
 308   100% {
 309     -webkit-transform:translateY(0);
 310   }
 311 }
 312 @-webkit-keyframes to-top {
 313   0% {
 314     -webkit-transform:translateY(0);
 315   }
 316   100% {
 317     -webkit-transform:translateY(-40px);
 318   }
 319 }
 320
 321 @-webkit-keyframes scale-out {
 322   0% {
 323     width: 0px;
 324   }
 325   100% {
 326     width: 1050px;
 327   }
 328 }
 329 @-webkit-keyframes scale-in {
 330   0% {
 331     width: 1050px;
 332     border: 2px solid #ccc;
 333   }
 334   100% {
 335     width: 0px;
 336     border: 2px solid #ccc;
 337   }
 338 }
 339 @-webkit-keyframes scale-out-small {
 340   0% {
 341     width: 0px;
 342     border: 0px;
 343   }
 344   19.99% {
 345     border: 0px;
 346   }
 347   20% {
 348     width: 0px;
 349     border: 1px solid black;
 350   }
 351   100% {
 352     width: 500px;
 353   }
 354 }
 355 @-webkit-keyframes scale-in-small {
 356   0% {
 357     width: 500px;
 358     border: 1px solid black;
 359   }
 360   80% {
 361     width: 0px;
 362     border: 1px solid black;
 363   }
 364   80.01% {
 365     border: 0px;
 366   }
 367   100% {
 368     width: 0px;
 369     border: 0px;
 370   }
 371 }
 372 @-webkit-keyframes wipe-out {
 373   0% {
 374     clip: rect(0px,0px,200px,0px);
 375   }
 376   20% {
 377     clip: rect(0px,0px,200px,0px);
 378   }
 379   100% {
 380     clip: rect(0px,1050px,200px,0px);
 381   }
 382 }
 383 @-webkit-keyframes wipe-in {
 384   0% {
 385     clip: rect(0px,1050px,200px,0px);
 386   }
 387   20% {  /* Not symmetrical! */
 388     clip: rect(0px,0px,200px,0px);
 389   }
 390   100% {
 391     clip: rect(0px,0px,200px,0px);
 392   }
 393 }
 394 @-webkit-keyframes fade-in {
 395   0% {
 396     opacity: 0.0001;
 397   }
 398   100% {
 399     opacity: 1;
 400   }
 401 }
 402    </style>
 403   </head>
 404   <body>
 405     <div id="area"></div>
 406     <table class="scorebug">
 407       <tr>
 408         <td class="team1color" id="team1color"></td>
 409         <td class="team1" id="team1">PCL</td>
 410         <td class="score" id="score">17&nbsp;–&nbsp;11</td>
 411         <td class="team2" id="team2">NMBUI</td>
 412         <td class="team2color" id="team2color"></td>
 413       </tr>
 414     </table>
 415     <table class="clockbug clockbug-hidden" id="clockbug">
 416       <tr>
 417         <td class="clock" id="clock">25:00</td>
 418       </tr>
 419     </table>
 420     <table class="commentbug commentbug-hidden" id="commentbug">
 421       <tr>
 422         <td class="comment" id="comment">Pagacap: First to 9 points</td>
 423       </tr>
 424     </table>
 425     <div class="lowerthird-headline lowerthird-headline-hidden" id="lowerthird-headline"><div class="lowerthird-headline-content lowerthird-headline-content-hidden" id="lowerthird-headline-content">
 426       John Doe<br>Ola Nordmann
 427     </div></div>
 428     <div class="lowerthird-subheading lowerthird-subheading-hidden" id="lowerthird-subheading"><div class="lowerthird-subheading-content lowerthird-subheading-content-hidden" id="lowerthird-subheading-content">
 429       Commentators, Trøndisk 2016
 430     </div></div>
 431     <table id="carousel">
 432       <thead>
 433         <tr>
 434           <th colspan="5">Current standings, TrønDisk 2017<br />Group A</th>
 435         </tr>
 436       </thead>
 437       <tr class="subfooter">
 438         <th class="rank"></th>
 439         <th class="team"></th>
 440         <th class="nplayed">P</th>
 441         <th class="gd">GD</th>
 442         <th class="pts">Pts</th>
 443       </tr>
 444 <!--
 445       <tr>
 446         <th class="rank">1</th>
 447         <td class="team">Trondheim Frisbeeklubb</td>
 448         <td class="nplayed">3</td>
 449         <td class="gd">+7</td>
 450         <td class="pts">6</td>
 451       </tr>
 452       <tr>
 453         <th class="rank">2</th>
 454         <td class="team">Pancake Circle Ltd.</td>
 455         <td class="nplayed">2</td>
 456         <td class="gd">+2</td>
 457         <td class="pts">4</td>
 458       </tr>
 459       <tr>
 460         <th class="rank">3</th>
 461         <td class="team">Norges Handelshøyskole 1</td>
 462         <td class="nplayed">2</td>
 463         <td class="gd">-2</td>
 464         <td class="pts">2</td>
 465       </tr>
 466       <tr>
 467         <th class="rank">3</th>
 468         <td class="team">Pick-up Team</td>
 469         <td class="nplayed">2</td>
 470         <td class="gd">-2</td>
 471         <td class="pts">2</td>
 472       </tr>
 473       <tr>
 474         <th class="rank">5</th>
 475         <td class="team">Whatever Team</td>
 476         <td class="nplayed">3</td>
 477         <td class="gd">-11</td>
 478         <td class="pts">0</td>
 479       </tr>
 480       <tr class="footer">
 481         <td colspan="5">www.trondheimfrisbeeklubb.no | #trøndisk</td>
 482       </tr>
 483 -->
 484     </table>
 485     <div id="manualcontrols">
 486       <p>
 487         <a href="javascript:startclock()">start clock</a>
 488         <a href="javascript:stopclock()">stop clock</a>
 489         <a href="javascript:setclock(25*60)">reset clock</a>
 490         <a href="javascript:showclock()">show clock</a>
 491         <a href="javascript:hideclock()">hide clock</a>
 492       </p>
 493       <p>
 494         <a href="javascript:goalA()">goal team A</a>
 495         <a href="javascript:goalB()">goal team B</a>
 496         <a href="javascript:ungoalA()">ungoal team A</a>
 497         <a href="javascript:ungoalB()">ungoal team B</a>
 498         <a href="javascript:resetscore()">reset score</a>
 499       </p>
 500       <p>
 501         <a href="javascript:showcomment()">show comment</a>
 502         <a href="javascript:hidecomment()">hide comment</a>
 503       </p>
 504       <p>
 505         <a href="javascript:showlowerthird()">show lower third</a>
 506         <a href="javascript:hidelowerthird()">hide lower third</a>
 507       </p>
 508     </div>
 509
 510 <script src="carousel.js" type="text/javascript" />
 511 <script>
 512 var clock_running = false;
 513 var clock_visible = false;
 514 var comment_visible = false;
 515 var lowerthird_visible = false;
 516 var clock_left = 25 * 60;
 517 var scoreA = 0;
 518 var scoreB = 0;
 519 var clock_origin;
 520 var state = {};
 521
 522 function setteams()
 523 {
 524         document.getElementById('team1').innerHTML = state['team1'];
 525         document.getElementById('team2').innerHTML = state['team2'];
 526 }
 527
 528 function setcolors()
 529 {
 530         document.getElementById('team1color').style.backgroundColor = state['team1color'];
 531         document.getElementById('team2color').style.backgroundColor = state['team2color'];
 532 }
 533
 534 function setscore()
 535 {
 536         scoreA = state['score1'];
 537         scoreB = state['score2'];
 538         update_score();
 539 }
 540
 541 function startclock()
 542 {
 543         if (!clock_running) {
 544                 clock_origin = Date.now();
 545                 clock_running = true;
 546         }
 547         showclock();
 548 }
 549
 550 function stopclock()
 551 {
 552         if (!clock_running) return;
 553         clock_left = time_left();
 554         clock_origin = Date.now();
 555         clock_running = false;
 556 }
 557
 558 function setclock(amount)
 559 {
 560         clock_left = amount;
 561         clock_origin = Date.now();
 562         update_clock();
 563 }
 564
 565 function setclockfromstate()
 566 {
 567         var amount = parseInt(state['clock_min']) * 60 + parseInt(state['clock_sec']);
 568         setclock(amount);
 569 }
 570
 571 function showclock()
 572 {
 573         if (clock_visible) return;
 574         var clockbug = document.getElementById('clockbug');
 575         clockbug.className = 'clockbug clockbug-animate-in';
 576         clock_visible = true;
 577 }
 578
 579 function hideclock()
 580 {
 581         if (!clock_visible) return;
 582         var clockbug = document.getElementById('clockbug');
 583         clockbug.className = 'clockbug clockbug-animate-out';
 584         clock_visible = false;
 585 }
 586
 587 function setcomment()
 588 {
 589         document.getElementById('comment').innerHTML = state['comment'];
 590 }
 591
 592 function showcomment()
 593 {
 594         if (comment_visible) return;
 595         var commentbug = document.getElementById('commentbug');
 596         commentbug.className = 'commentbug commentbug-animate-in';
 597         comment_visible = true;
 598 }
 599
 600 function hidecomment()
 601 {
 602         if (!comment_visible) return;
 603         var commentbug = document.getElementById('commentbug');
 604         commentbug.className = 'commentbug commentbug-animate-out';
 605         comment_visible = false;
 606 }
 607
 608 function showlowerthird()
 609 {
 610         if (lowerthird_visible) return;
 611
 612         // With no flexbox, this is how it has to be...
 613         var f = document.getElementById('lowerthird-headline');
 614         var g = document.getElementById('lowerthird-headline-content');
 615         f.style.paddingTop = Math.round((f.clientHeight - g.clientHeight) / 2) + 'px';
 616
 617         f = document.getElementById('lowerthird-subheading');
 618         g = document.getElementById('lowerthird-subheading-content');
 619         f.style.paddingTop = Math.round((f.clientHeight - g.clientHeight) / 2) + 'px';
 620
 621         document.getElementById('lowerthird-headline').className = 'lowerthird-headline lowerthird-headline-animate-in';
 622         document.getElementById('lowerthird-headline-content').className = 'lowerthird-headline-content lowerthird-headline-content-animate-in';
 623         document.getElementById('lowerthird-subheading').className = 'lowerthird-subheading lowerthird-subheading-animate-in';
 624         document.getElementById('lowerthird-subheading-content').className = 'lowerthird-subheading-content lowerthird-subheading-content-animate-in';
 625         lowerthird_visible = true;
 626 }
 627
 628 function setandshowlowerthird()
 629 {
 630         document.getElementById('lowerthird-headline-content').innerHTML = state['text1'];
 631         document.getElementById('lowerthird-subheading-content').innerHTML = state['text2'];
 632         showlowerthird();
 633 }
 634
 635 function hidelowerthird()
 636 {
 637         if (!lowerthird_visible) return;
 638         document.getElementById('lowerthird-headline').className = 'lowerthird-headline lowerthird-headline-hidden lowerthird-headline-animate-out';
 639         document.getElementById('lowerthird-headline-content').className = 'lowerthird-headline-content lowerthird-headline-content-animate-out';
 640         document.getElementById('lowerthird-subheading').className = 'lowerthird-subheading lowerthird-subheading-animate-out';
 641         document.getElementById('lowerthird-subheading-content').className = 'lowerthird-subheading-content lowerthird-subheading-content-animate-out';
 642         lowerthird_visible = false;
 643 }
 644
 645 function time_left()
 646 {
 647         var elapsed = (Date.now() - clock_origin) * 1e-3;
 648         if (elapsed > clock_left) return 0;
 649         return Math.ceil(clock_left - elapsed);
 650 }
 651
 652 function update_clock()
 653 {
 654         var left = time_left();
 655         var min = Math.floor(left / 60);
 656         var sec = left % 60;
 657
 658         if (sec < 10) sec = "0" + sec;
 659         document.getElementById('clock').innerHTML = min + ":" + sec;
 660 }
 661
 662 function goalA()
 663 {
 664         ++scoreA;
 665         update_score();
 666 }
 667
 668 function goalB()
 669 {
 670         ++scoreB;
 671         update_score();
 672 }
 673
 674 function ungoalA()
 675 {
 676         if (scoreA > 0) --scoreA;
 677         update_score();
 678 }
 679
 680 function ungoalB()
 681 {
 682         if (scoreB > 0) --scoreB;
 683         update_score();
 684 }
 685
 686 function resetscore()
 687 {
 688         scoreA = scoreB = 0;
 689         update_score();
 690 }
 691
 692 function update_score()
 693 {
 694         document.getElementById('score').innerHTML = scoreA + "&nbsp;–&nbsp;" + scoreB;
 695 }
 696
 697 /* called by caspar only */
 698 function play()
 699 {
 700         document.getElementById('manualcontrols').style.display = 'none';
 701         document.getElementById('area').style.display = 'none';
 702
 703         // Old CEF workaround
 704         document.getElementById('lowerthird-subheading').style.top = '638px';
 705 }
 706
 707 function update(v)
 708 {
 709         console.log('[[[' + v + ']]]');
 710         var j = JSON.parse(v);
 711         for(var key in j) state[key] = j[key];
 712 }
 713
 714 setInterval(function() {
 715         if (clock_running) {
 716                 update_clock();
 717         }
 718 }, 100);
 719 update_score();
 720
 721 //play();
 722 //startclock();
 723
 724 </script>
 725   </body>
 726 </html>