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 <link href="score.css" rel="stylesheet">
12 <table class="scorebug">
14 <td class="team1color" id="team1color"></td>
15 <td class="team1" id="team1">PCL</td>
16 <td class="score" id="score">17 – 11</td>
17 <td class="team2" id="team2">NMBUI</td>
18 <td class="team2color" id="team2color"></td>
21 <table class="clockbug clockbug-hidden" id="clockbug">
23 <td class="clock" id="clock">25:00</td>
26 <table class="commentbug commentbug-hidden" id="commentbug">
28 <td class="comment" id="comment">Pagacap: First to 9 points</td>
31 <div class="lowerthird-headline lowerthird-headline-hidden" id="lowerthird-headline"><div class="lowerthird-headline-content lowerthird-headline-content-hidden" id="lowerthird-headline-content">
32 John Doe<br>Ola Nordmann
34 <div class="lowerthird-subheading lowerthird-subheading-hidden" id="lowerthird-subheading"><div class="lowerthird-subheading-content lowerthird-subheading-content-hidden" id="lowerthird-subheading-content">
35 Commentators, Trøndisk 2016
40 <th colspan="5">Current standings, TrønDisk 2017<br />Group A</th>
43 <tr class="subfooter">
44 <th class="rank"></th>
45 <th class="team"></th>
46 <th class="nplayed">P</th>
47 <th class="gd">GD</th>
48 <th class="pts">Pts</th>
51 <div id="manualcontrols">
53 <a href="javascript:startclock()">start clock</a>
54 <a href="javascript:stopclock()">stop clock</a>
55 <a href="javascript:setclock(25*60)">reset clock</a>
56 <a href="javascript:showclock()">show clock</a>
57 <a href="javascript:hideclock()">hide clock</a>
60 <a href="javascript:goalA()">goal team A</a>
61 <a href="javascript:goalB()">goal team B</a>
62 <a href="javascript:ungoalA()">ungoal team A</a>
63 <a href="javascript:ungoalB()">ungoal team B</a>
64 <a href="javascript:resetscore()">reset score</a>
67 <a href="javascript:showcomment()">show comment</a>
68 <a href="javascript:hidecomment()">hide comment</a>
71 <a href="javascript:showlowerthird()">show lower third</a>
72 <a href="javascript:hidelowerthird()">hide lower third</a>
76 <script src="carousel.js" type="text/javascript" />
78 var clock_running = false;
79 var clock_visible = false;
80 var comment_visible = false;
81 var lowerthird_visible = false;
82 var clock_left = 25 * 60;
90 document.getElementById('team1').innerHTML = state['team1'];
91 document.getElementById('team2').innerHTML = state['team2'];
96 document.getElementById('team1color').style.backgroundColor = state['team1color'];
97 document.getElementById('team2color').style.backgroundColor = state['team2color'];
102 scoreA = state['score1'];
103 scoreB = state['score2'];
107 function startclock()
109 if (!clock_running) {
110 clock_origin = Date.now();
111 clock_running = true;
118 if (!clock_running) return;
119 clock_left = time_left();
120 clock_origin = Date.now();
121 clock_running = false;
124 function setclock(amount)
127 clock_origin = Date.now();
131 function setclockfromstate()
133 var amount = parseInt(state['clock_min']) * 60 + parseInt(state['clock_sec']);
139 if (clock_visible) return;
140 var clockbug = document.getElementById('clockbug');
141 clockbug.className = 'clockbug clockbug-animate-in';
142 clock_visible = true;
147 if (!clock_visible) return;
148 var clockbug = document.getElementById('clockbug');
149 clockbug.className = 'clockbug clockbug-animate-out';
150 clock_visible = false;
153 function setcomment()
155 document.getElementById('comment').innerHTML = state['comment'];
158 function showcomment()
160 if (comment_visible) return;
161 var commentbug = document.getElementById('commentbug');
162 commentbug.className = 'commentbug commentbug-animate-in';
163 comment_visible = true;
166 function hidecomment()
168 if (!comment_visible) return;
169 var commentbug = document.getElementById('commentbug');
170 commentbug.className = 'commentbug commentbug-animate-out';
171 comment_visible = false;
174 function showlowerthird()
176 if (lowerthird_visible) return;
178 // With no flexbox, this is how it has to be...
179 var f = document.getElementById('lowerthird-headline');
180 var g = document.getElementById('lowerthird-headline-content');
181 f.style.paddingTop = Math.round((f.clientHeight - g.clientHeight) / 2) + 'px';
183 f = document.getElementById('lowerthird-subheading');
184 g = document.getElementById('lowerthird-subheading-content');
185 f.style.paddingTop = Math.round((f.clientHeight - g.clientHeight) / 2) + 'px';
187 document.getElementById('lowerthird-headline').className = 'lowerthird-headline lowerthird-headline-animate-in';
188 document.getElementById('lowerthird-headline-content').className = 'lowerthird-headline-content lowerthird-headline-content-animate-in';
189 document.getElementById('lowerthird-subheading').className = 'lowerthird-subheading lowerthird-subheading-animate-in';
190 document.getElementById('lowerthird-subheading-content').className = 'lowerthird-subheading-content lowerthird-subheading-content-animate-in';
191 lowerthird_visible = true;
194 function setandshowlowerthird()
196 document.getElementById('lowerthird-headline-content').innerHTML = state['text1'];
197 document.getElementById('lowerthird-subheading-content').innerHTML = state['text2'];
201 function hidelowerthird()
203 if (!lowerthird_visible) return;
204 document.getElementById('lowerthird-headline').className = 'lowerthird-headline lowerthird-headline-hidden lowerthird-headline-animate-out';
205 document.getElementById('lowerthird-headline-content').className = 'lowerthird-headline-content lowerthird-headline-content-animate-out';
206 document.getElementById('lowerthird-subheading').className = 'lowerthird-subheading lowerthird-subheading-animate-out';
207 document.getElementById('lowerthird-subheading-content').className = 'lowerthird-subheading-content lowerthird-subheading-content-animate-out';
208 lowerthird_visible = false;
213 var elapsed = (Date.now() - clock_origin) * 1e-3;
214 if (elapsed > clock_left) return 0;
215 return Math.ceil(clock_left - elapsed);
218 function update_clock()
220 var left = time_left();
221 var min = Math.floor(left / 60);
224 if (sec < 10) sec = "0" + sec;
225 document.getElementById('clock').innerHTML = min + ":" + sec;
242 if (scoreA > 0) --scoreA;
248 if (scoreB > 0) --scoreB;
252 function resetscore()
258 function update_score()
260 document.getElementById('score').innerHTML = scoreA + " – " + scoreB;
263 /* called by caspar only */
266 document.getElementById('manualcontrols').style.display = 'none';
267 document.getElementById('area').style.display = 'none';
269 // Old CEF workaround
270 document.getElementById('lowerthird-subheading').style.top = '638px';
275 console.log('[[[' + v + ']]]');
276 var j = JSON.parse(v);
277 for(var key in j) state[key] = j[key];
280 setInterval(function() {