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