X-Git-Url: https://git.sesse.net/?a=blobdiff_plain;f=score.html;h=3985d78fc62bb5d99ed70fbd1345aafd244aca95;hb=fe24af7266193f4908d73c49403387af8c819acc;hp=9e6a01a9a69dfb1836dfd20e3aa4dc00548322de;hpb=a0097e194760de44a2ed1789b7a1a695c071f791;p=ultimatescore

diff --git a/score.html b/score.html
index 9e6a01a..3985d78 100644
--- a/score.html
+++ b/score.html
@@ -5,488 +5,59 @@
    <meta charset="utf-8" />
 <!--   <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> -->
    <link href="fonts/lato.css" rel="stylesheet">
-   <style>
-* {
-  -webkit-box-sizing: border-box;
-  Box-Sizing: border-box;
-  -webkit-backface-visibility: hidden;
-  -webkit-transition: translate3d(0,0,0);
-}
-html, body {
-  width: 1280px;
-  height: 720px;
-  margin: 0;
-  padding: 0;
-  background: transparent;
-  overflow: hidden;
-  -webkit-font-smoothing: antialiased !important;
-}
-body {
-  font-family: 'Lato', sans-serif;
-  color: white;
-}
-
-/* Score */
-.scorebug {
-  position: fixed;
-  font-size: 25px;
-  left: 10px;
-  top: 10px;
-  border-collapse: collapse;
-  white-space: nowrap;
-  border: 3px solid black;
-  z-index: 1;
-}
-.scorebug td {
-  border: 3px solid #008;
-}
-.team1color, .team2color {
-  width: 15px;
-  margin: 5px;
-}
-.team1color {
-  background: red;
-}
-.team2color {
-  background: green;
-}
-.team1, .team2 {
-  font-weight: bold;
-  width: 100px;
-  text-align: center;
-  height: 35px;
-  background: #00a;
-}
-.score {
-  text-align: center;
-  background: #00c;
-  width: 110px;
-  height: 35px;
-}
-
-/* Clock, to the right of score */
-.clockbug {
-  position: fixed;
-  font-size: 25px;
-  left: 360px;
-  top: 10px;
-  border-collapse: collapse;
-  white-space: nowrap;
-  border: 3px solid black;
-}
-.clock {
-  border: 3px solid #008;
-  background: #00a;
-  text-align: center;
-  height: 35px;
-  width: 90px;
-}
-.clockbug-hidden {
-  -webkit-transform:translateX(-200%);
-}
-.clockbug-animate-in {
-  -webkit-animation: from-left 1s ease;
-}
-.clockbug-animate-out {
-  -webkit-animation: to-left 1s ease;
-  -webkit-transform:translateX(-200%);
-}
-
-/* Comment, below score */
-.commentbug {
-  position: fixed;
-  font-size: 20px;
-  left: 10px;
-  top: 52px;
-  border-collapse: collapse;
-  white-space: nowrap;
-  border: 3px solid black;
-}
-.comment {
-  border: 3px solid #008;
-  background: #00a;
-  text-align: center;
-  height: 30px;
-  width: 340px;
-}
-
-.commentbug-hidden {
-  -webkit-transform:translateY(-40px);
-}
-.commentbug-animate-in {
-  -webkit-animation: from-top 0.5s ease;
-}
-.commentbug-animate-out {
-  -webkit-animation: to-top 0.5s ease;
-  -webkit-transform:translateY(-40px);
-}
-
-/* Lower third */
-.lowerthird-headline {
-  position: fixed;
-  font-size: 40px;
-  left: 10px;
-  top: 520px;
-  border-collapse: collapse;
-  white-space: nowrap;
-  border: 2px solid #ccc;
-  height: 118px;
-  font-weight: bold;
-  width: 1050px;
-  /*background: linear-gradient(to right, #ccc, #fff 15px); */
-  background-image: url(lowerthird-bg.png);
-  color: black;
-  /* padding-top: 20px; */
-}
-.lowerthird-headline-hidden {
-  width: 0px;
-  border-left: 0px;
-  border-right: 0px;
-}
-.lowerthird-headline-animate-in {
-  -webkit-animation: scale-out 1.0s;
-}
-.lowerthird-headline-animate-out {
-  -webkit-animation: scale-in 1.0s;
-}
-.lowerthird-headline-content {
-  padding-left: 20px;
-  position: absolute;
-}
-.lowerthird-headline-content-hidden {
-  clip: rect(0px,0px,200px,0px);
-}
-.lowerthird-headline-content-animate-in {
-  -webkit-animation: wipe-out 2.0s ease;
-}
-.lowerthird-headline-content-animate-out {
-  -webkit-animation: wipe-in 2.0s ease;
-  clip: rect(0px,0px,200px,0px);
-}
-.lowerthird-subheading {
-  position: fixed;
-  font-size: 24px;
-  left: 40px;
-  top: 637px;
-  height: 40px;
-  width: 500px;
-  border-collapse: collapse;
-  white-space: nowrap;
-  border: 1px solid black;
-  /*display: flex;
-  align-items: center; */
-  /*background: linear-gradient(to right, #44c, #33a 15px); */
-  background-image: url(lowerthird-bg2.png);
-}
-.lowerthird-subheading-hidden {
-  clip: rect(0px,0px,200px,0px);
-}
-.lowerthird-subheading-animate-in {
-  -webkit-animation: scale-out-small 1.6s ease;
-}
-.lowerthird-subheading-animate-out {
-  -webkit-animation: scale-in-small 1.6s ease;
-  width: 0px;
-  border-left: 0px;
-}
-.lowerthird-subheading-content {
-  position: absolute;
-  padding-left: 20px;
-}
-.lowerthird-subheading-content-hidden {
-  width: 0px;
-  border: 0px;
-}
-.lowerthird-subheading-content-animate-in {
-  -webkit-animation: wipe-out 2.2s ease;
-}
-.lowerthird-subheading-content-animate-out {
-  -webkit-animation: wipe-in 2.2s ease;
-  clip: rect(0px,0px,200px,0px);
-}
-
-/* these are hidden when actually run in casparcg */
-#area {
-  position: fixed;
-  left: 0px;
-  top: 0px;
-  width: 1280px;
-  height: 720px;
-  background: cyan;
-}
-#carousel {
-  z-index: 3;
-  position: fixed;
-  top: 250px;
-  font-size: 50px;
-  /* background: rgba(0, 0, 170, 0.8); */
-  background: transparent;
-  top: 20px;
-  left: 50px;
-  right: 50px;
-  width: 1180px;
-  border-spacing: 0px 7px;
-  text-align: left;
-  border-collapse: separate;
-  text-transform: uppercase;
-  display: none;
-}
-#carousel thead tr {
-  text-transform: none;
-  text-align: center;
-}
-#carousel thead th {
-  text-transform: none;
-  text-align: center;
-  font-size: 50px;
-  -webkit-animation: fade-in 1.0s ease;
-  -webkit-animation-delay: 0.0s;
-  -webkit-animation-fill-mode: both;
-}
-#carousel tr.subfooter {
-  -webkit-animation: fade-in 1.0s ease;
-  -webkit-animation-delay: 0.25s;
-  -webkit-animation-fill-mode: both;
-}
-#carousel tr {
-  /* background: rgba(0, 0, 170, 0.8); */
-  background: linear-gradient(to bottom, rgba(0, 0, 170, 0.8), rgba(0, 0, 130, 0.8));
-  /* -webkit-animation: fade-in calc(counter(rowNumber) * 1.0)s ease; */
-  -webkit-animation: fade-in calc(counter-value(rowNumber) * 1.0s) ease;
-}
-#carousel tr.footer {
-  -webkit-animation: fade-in 2.0s ease;
-  -webkit-animation-delay: 0.5s;
-  -webkit-animation-fill-mode: both;
-}
-#carousel td, #carousel th {
-  padding: 8px;
-  font-size: 40px;
-}
-#carousel tr.footer td {
-  font-size: 20px;
-  text-transform: none;
-  text-align: center;
-}
-#carousel th.rank {
-  padding-left: 20px;
-}
-#carousel td.team {
-  width: auto;
-}
-.nplayed, .gd, .pts {
-  text-align: center;
-}
-
-#manualcontrols {
-  z-index: 4;
-  position: fixed;
-  top: 250px;
-}
-
-/* Animations */
-@-webkit-keyframes from-left {
-  0% {
-    -webkit-transform:translateX(-200%);
-  }
-  100% {
-    -webkit-transform:translateX(0);
-  }
-}
-@-webkit-keyframes to-left {
-  0% {
-    -webkit-transform:translateX(0);
-  }
-  100% {
-    -webkit-transform:translateX(-200%);
-  }
-}
-@-webkit-keyframes from-top {
-  0% {
-    -webkit-transform:translateY(-40px);
-  }
-  100% {
-    -webkit-transform:translateY(0);
-  }
-}
-@-webkit-keyframes to-top {
-  0% {
-    -webkit-transform:translateY(0);
-  }
-  100% {
-    -webkit-transform:translateY(-40px);
-  }
-}
-
-@-webkit-keyframes scale-out {
-  0% {
-    width: 0px;
-  }
-  100% {
-    width: 1050px;
-  }
-}
-@-webkit-keyframes scale-in {
-  0% {
-    width: 1050px;
-    border: 2px solid #ccc;
-  }
-  100% {
-    width: 0px;
-    border: 2px solid #ccc;
-  }
-}
-@-webkit-keyframes scale-out-small {
-  0% {
-    width: 0px;
-    border: 0px;
-  }
-  19.99% {
-    border: 0px;
-  }
-  20% {
-    width: 0px;
-    border: 1px solid black;
-  }
-  100% {
-    width: 500px;
-  }
-}
-@-webkit-keyframes scale-in-small {
-  0% {
-    width: 500px;
-    border: 1px solid black;
-  }
-  80% {
-    width: 0px;
-    border: 1px solid black;
-  }
-  80.01% {
-    border: 0px;
-  }
-  100% {
-    width: 0px;
-    border: 0px;
-  }
-}
-@-webkit-keyframes wipe-out {
-  0% {
-    clip: rect(0px,0px,200px,0px);
-  }
-  20% {
-    clip: rect(0px,0px,200px,0px);
-  }
-  100% {
-    clip: rect(0px,1050px,200px,0px);
-  }
-}
-@-webkit-keyframes wipe-in {
-  0% {
-    clip: rect(0px,1050px,200px,0px);
-  }
-  20% {  /* Not symmetrical! */
-    clip: rect(0px,0px,200px,0px);
-  }
-  100% {
-    clip: rect(0px,0px,200px,0px);
-  }
-}
-@-webkit-keyframes fade-in {
-  0% {
-    opacity: 0.0001;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-   </style>
+   <link href="score.css" rel="stylesheet">
   </head>
   <body>
     <div id="area"></div>
-    <table class="scorebug">
-      <tr>
-        <td class="team1color" id="team1color"></td>
-        <td class="team1" id="team1">PCL</td>
-        <td class="score" id="score">17&nbsp;–&nbsp;11</td>
-        <td class="team2" id="team2">NMBUI</td>
-        <td class="team2color" id="team2color"></td>
-      </tr>
-    </table>
-    <table class="clockbug clockbug-hidden" id="clockbug">
-      <tr>
-        <td class="clock" id="clock">25:00</td>
-      </tr>
-    </table>
-    <table class="commentbug commentbug-hidden" id="commentbug">
-      <tr>
-        <td class="comment" id="comment">Pagacap: First to 9 points</td>
-      </tr>
-    </table>
+    <div id="entire-bug">
+      <table class="scorebug">
+        <tr>
+          <td class="team1color" id="team1color"></td>
+          <td class="team1" id="team1">TM1</td>
+          <td class="score" id="score">0&nbsp;–&nbsp;0</td>
+          <td class="team2" id="team2">TM2</td>
+          <td class="team2color" id="team2color"></td>
+        </tr>
+      </table>
+      <table class="clockbug clockbug-hidden" id="clockbug">
+        <tr>
+          <td class="clock" id="clock">0:00</td>
+        </tr>
+      </table>
+      <table class="commentbug commentbug-hidden" id="commentbug">
+        <tr>
+          <td class="comment" id="comment">Pagacap: First to 9 points</td>
+        </tr>
+      </table>
+      <table class="scorebug scorebug2" id="scorebug2" style="display: none">
+        <tr>
+          <td class="team1" id="score2_team1">TM3</td>
+          <td class="score" id="score2_score">0&nbsp;–&nbsp;0</td>
+          <td class="team2" id="score2_team2">TM4</td>
+        </tr>
+      </table>
+      <table class="clockbug2 clockbug-hidden" id="clockbug2" style="display: none">
+        <tr>
+          <td class="clock" id="clock2">0:00</td>
+        </tr>
+      </table>
+    </div>
     <div class="lowerthird-headline lowerthird-headline-hidden" id="lowerthird-headline"><div class="lowerthird-headline-content lowerthird-headline-content-hidden" id="lowerthird-headline-content">
-      John Doe<br>Ola Nordmann
+      Call on the field: Foul
     </div></div>
     <div class="lowerthird-subheading lowerthird-subheading-hidden" id="lowerthird-subheading"><div class="lowerthird-subheading-content lowerthird-subheading-content-hidden" id="lowerthird-subheading-content">
-      Commentators, Trøndisk 2016
+      Commentators, Trøndisk 2018
+    </div></div>
+    <div class="lowerthird-picture lowerthird-picture-hidden" id="lowerthird-picture"><div class="lowerthird-picture-content lowerthird-picture-content-hidden" id="lowerthird-picture-content">
+      <img src="foul.png" id="lowerthird-img" style="display: none">
     </div></div>
     <table id="carousel">
-      <thead>
-        <tr>
-          <th colspan="5">Current standings, TrønDisk 2017<br />Group A</th>
-        </tr> 
-      </thead>
-      <tr class="subfooter">
-        <th class="rank"></th>
-        <th class="team"></th>
-        <th class="nplayed">P</th>
-        <th class="gd">GD</th>
-        <th class="pts">Pts</th>
-      </tr>
-<!--
-      <tr>
-        <th class="rank">1</th>
-        <td class="team">Trondheim Frisbeeklubb</td>
-        <td class="nplayed">3</td>
-        <td class="gd">+7</td>
-        <td class="pts">6</td>
-      </tr>
-      <tr>
-        <th class="rank">2</th>
-        <td class="team">Pancake Circle Ltd.</td>
-        <td class="nplayed">2</td>
-        <td class="gd">+2</td>
-        <td class="pts">4</td>
-      </tr>
-      <tr>
-        <th class="rank">3</th>
-        <td class="team">Norges Handelshøyskole 1</td>
-        <td class="nplayed">2</td>
-        <td class="gd">-2</td>
-        <td class="pts">2</td>
-      </tr>
-      <tr>
-        <th class="rank">3</th>
-        <td class="team">Pick-up Team</td>
-        <td class="nplayed">2</td>
-        <td class="gd">-2</td>
-        <td class="pts">2</td>
-      </tr>
-      <tr>
-        <th class="rank">5</th>
-        <td class="team">Whatever Team</td>
-        <td class="nplayed">3</td>
-        <td class="gd">-11</td>
-        <td class="pts">0</td>
-      </tr>
-      <tr class="footer">
-        <td colspan="5">www.trondheimfrisbeeklubb.no | #trøndisk</td>
-      </tr>
--->
     </table>
     <div id="manualcontrols">
       <p>
         <a href="javascript:startclock()">start clock</a>
         <a href="javascript:stopclock()">stop clock</a>
-        <a href="javascript:setclock(25*60)">reset clock</a>
+        <a href="javascript:setclock(0)">reset clock</a>
         <a href="javascript:showclock()">show clock</a>
         <a href="javascript:hideclock()">hide clock</a>
       </p>
@@ -504,223 +75,28 @@ body {
       <p>
         <a href="javascript:showlowerthird()">show lower third</a>
         <a href="javascript:hidelowerthird()">hide lower third</a>
+        <a href="javascript:showmatch2()">show match 2</a>
+        <a href="javascript:hidematch2()">hide match 2</a>
+      </p>
+      <p>
+        <a href="javascript:stopcarousel();hidetable();showscorebug()">show scorebug</a>
+        <a href="javascript:stopcarousel();showroster('TFK')">show roster 1</a>
+        <a href="javascript:stopcarousel();showroster('ESK')">show roster 2</a>
+        <a href="javascript:stopcarousel();showrostercarousel('TFK', 'ESK')">show roster 1+2</a>
+        <a href="javascript:stopcarousel();showgroup('Group A')">show group A</a>
+        <a href="javascript:stopcarousel();showgroup('Group B')">show group B</a>
+        <a href="javascript:stopcarousel();showschedule()">show schedule</a>
+        <a href="javascript:stopcarousel();showcarousel()">show carousel</a>
+        <a href="javascript:stopcarousel();hidetable()">table out</a>
       </p>
     </div>
 
-<script src="carousel.js" type="text/javascript" />
-<script>
-var clock_running = false;
-var clock_visible = false;
-var comment_visible = false;
-var lowerthird_visible = false;
-var clock_left = 25 * 60;
-var scoreA = 0;
-var scoreB = 0;
-var clock_origin;
-var state = {};
-
-function setteams()
-{
-	document.getElementById('team1').innerHTML = state['team1'];
-	document.getElementById('team2').innerHTML = state['team2'];
-}
-
-function setcolors()
-{
-	document.getElementById('team1color').style.backgroundColor = state['team1color'];
-	document.getElementById('team2color').style.backgroundColor = state['team2color'];
-}
-
-function setscore()
-{
-	scoreA = state['score1'];
-	scoreB = state['score2'];
-	update_score();
-}
-
-function startclock()
-{
-	if (!clock_running) {
-		clock_origin = Date.now();
-		clock_running = true;
-	}
-	showclock();
-}
-
-function stopclock()
-{
-	if (!clock_running) return;
-	clock_left = time_left();
-	clock_origin = Date.now();
-	clock_running = false;
-}
-
-function setclock(amount)
-{
-	clock_left = amount;
-	clock_origin = Date.now();
-	update_clock();
-}
-
-function setclockfromstate()
-{
-	var amount = parseInt(state['clock_min']) * 60 + parseInt(state['clock_sec']);
-	setclock(amount);
-}
-
-function showclock()
-{
-	if (clock_visible) return;
-	var clockbug = document.getElementById('clockbug');
-	clockbug.className = 'clockbug clockbug-animate-in';
-	clock_visible = true;
-}
-
-function hideclock()
-{
-	if (!clock_visible) return;
-	var clockbug = document.getElementById('clockbug');
-	clockbug.className = 'clockbug clockbug-animate-out';
-	clock_visible = false;
-}
-
-function setcomment()
-{
-	document.getElementById('comment').innerHTML = state['comment'];
-}
-
-function showcomment()
-{
-	if (comment_visible) return;
-	var commentbug = document.getElementById('commentbug');
-	commentbug.className = 'commentbug commentbug-animate-in';
-	comment_visible = true;
-}
-
-function hidecomment()
-{
-	if (!comment_visible) return;
-	var commentbug = document.getElementById('commentbug');
-	commentbug.className = 'commentbug commentbug-animate-out';
-	comment_visible = false;
-}
-
-function showlowerthird()
-{
-	if (lowerthird_visible) return;
-
-	// With no flexbox, this is how it has to be...
-	var f = document.getElementById('lowerthird-headline');
-	var g = document.getElementById('lowerthird-headline-content');
-	f.style.paddingTop = Math.round((f.clientHeight - g.clientHeight) / 2) + 'px';
-
-	f = document.getElementById('lowerthird-subheading');
-	g = document.getElementById('lowerthird-subheading-content');
-	f.style.paddingTop = Math.round((f.clientHeight - g.clientHeight) / 2) + 'px';
-
-	document.getElementById('lowerthird-headline').className = 'lowerthird-headline lowerthird-headline-animate-in';
-	document.getElementById('lowerthird-headline-content').className = 'lowerthird-headline-content lowerthird-headline-content-animate-in';
-	document.getElementById('lowerthird-subheading').className = 'lowerthird-subheading lowerthird-subheading-animate-in';
-	document.getElementById('lowerthird-subheading-content').className = 'lowerthird-subheading-content lowerthird-subheading-content-animate-in';
-	lowerthird_visible = true;
-}
-
-function setandshowlowerthird()
-{
-	document.getElementById('lowerthird-headline-content').innerHTML = state['text1'];
-	document.getElementById('lowerthird-subheading-content').innerHTML = state['text2'];
-	showlowerthird();
-}
-
-function hidelowerthird()
-{
-	if (!lowerthird_visible) return;
-	document.getElementById('lowerthird-headline').className = 'lowerthird-headline lowerthird-headline-hidden lowerthird-headline-animate-out';
-	document.getElementById('lowerthird-headline-content').className = 'lowerthird-headline-content lowerthird-headline-content-animate-out';
-	document.getElementById('lowerthird-subheading').className = 'lowerthird-subheading lowerthird-subheading-animate-out';
-	document.getElementById('lowerthird-subheading-content').className = 'lowerthird-subheading-content lowerthird-subheading-content-animate-out';
-	lowerthird_visible = false;
-}
-
-function time_left()
-{
-	var elapsed = (Date.now() - clock_origin) * 1e-3;
-	if (elapsed > clock_left) return 0;
-	return Math.ceil(clock_left - elapsed);
-}
-
-function update_clock()
-{
-	var left = time_left();
-	var min = Math.floor(left / 60);
-	var sec = left % 60;
-
-	if (sec < 10) sec = "0" + sec;
-	document.getElementById('clock').innerHTML = min + ":" + sec;
-}
-
-function goalA()
-{
-	++scoreA;
-	update_score();
-}
-
-function goalB()
-{
-	++scoreB;
-	update_score();
-}
-
-function ungoalA()
-{
-	if (scoreA > 0) --scoreA;
-	update_score();
-}
-
-function ungoalB()
-{
-	if (scoreB > 0) --scoreB;
-	update_score();
-}
-
-function resetscore()
-{
-	scoreA = scoreB = 0;
-	update_score();
-}
-
-function update_score()
-{
-	document.getElementById('score').innerHTML = scoreA + "&nbsp;–&nbsp;" + scoreB;
-}
-
-/* called by caspar only */
-function play()
-{
-	document.getElementById('manualcontrols').style.display = 'none';
-	document.getElementById('area').style.display = 'none';
-
-	// Old CEF workaround
-	document.getElementById('lowerthird-subheading').style.top = '638px';
-}
-
-function update(v)
-{
-	console.log('[[[' + v + ']]]');
-	var j = JSON.parse(v);
-	for(var key in j) state[key] = j[key];
-}
-
-setInterval(function() {
-	if (clock_running) {
-		update_clock();
-	}
-}, 100);
-update_score();
-
-//play();
-//startclock();
+<script src="jsrsasign-all-min.js" type="text/javascript"></script>
 
-</script>
+<script src="carousel.js" type="text/javascript"></script>
+<script src="score.js" type="text/javascript"></script>
+<script src="quickl3.js" type="text/javascript"></script>
+<script src="roster.js" type="text/javascript"></script>
+<script src="update_sheets.js" type="text/javascript"></script>
   </body>
 </html>