Move the score code out into a separate file, too.

diff --git a/score.html b/score.html
index f988fac27c53c84c99285df34e7bc1780aa4e093..106690d61dc5cda039784adb19b2043805545170 100644 (file)
--- a/score.html
+++ b/score.html
@@ -73,220 +73,7 @@
       </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>
+<script src="carousel.js" type="text/javascript"></script>
+<script src="score.js" type="text/javascript"></script>
   </body>
 </html>

diff --git a/score.js b/score.js
new file mode 100644 (file)
index 0000000..a479778
--- /dev/null
+++ b/score.js
@@ -0,0 +1,211 @@
+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();