]> git.sesse.net Git - ultimatescore/blob - score.js
Move the score code out into a separate file, too.
[ultimatescore] / score.js
1 var clock_running = false;
2 var clock_visible = false;
3 var comment_visible = false;
4 var lowerthird_visible = false;
5 var clock_left = 25 * 60;
6 var scoreA = 0;
7 var scoreB = 0;
8 var clock_origin;
9 var state = {};
10
11 function setteams()
12 {
13         document.getElementById('team1').innerHTML = state['team1'];
14         document.getElementById('team2').innerHTML = state['team2'];
15 }
16
17 function setcolors()
18 {
19         document.getElementById('team1color').style.backgroundColor = state['team1color'];
20         document.getElementById('team2color').style.backgroundColor = state['team2color'];
21 }
22
23 function setscore()
24 {
25         scoreA = state['score1'];
26         scoreB = state['score2'];
27         update_score();
28 }
29
30 function startclock()
31 {
32         if (!clock_running) {
33                 clock_origin = Date.now();
34                 clock_running = true;
35         }
36         showclock();
37 }
38
39 function stopclock()
40 {
41         if (!clock_running) return;
42         clock_left = time_left();
43         clock_origin = Date.now();
44         clock_running = false;
45 }
46
47 function setclock(amount)
48 {
49         clock_left = amount;
50         clock_origin = Date.now();
51         update_clock();
52 }
53
54 function setclockfromstate()
55 {
56         var amount = parseInt(state['clock_min']) * 60 + parseInt(state['clock_sec']);
57         setclock(amount);
58 }
59
60 function showclock()
61 {
62         if (clock_visible) return;
63         var clockbug = document.getElementById('clockbug');
64         clockbug.className = 'clockbug clockbug-animate-in';
65         clock_visible = true;
66 }
67
68 function hideclock()
69 {
70         if (!clock_visible) return;
71         var clockbug = document.getElementById('clockbug');
72         clockbug.className = 'clockbug clockbug-animate-out';
73         clock_visible = false;
74 }
75
76 function setcomment()
77 {
78         document.getElementById('comment').innerHTML = state['comment'];
79 }
80
81 function showcomment()
82 {
83         if (comment_visible) return;
84         var commentbug = document.getElementById('commentbug');
85         commentbug.className = 'commentbug commentbug-animate-in';
86         comment_visible = true;
87 }
88
89 function hidecomment()
90 {
91         if (!comment_visible) return;
92         var commentbug = document.getElementById('commentbug');
93         commentbug.className = 'commentbug commentbug-animate-out';
94         comment_visible = false;
95 }
96
97 function showlowerthird()
98 {
99         if (lowerthird_visible) return;
100
101         // With no flexbox, this is how it has to be...
102         var f = document.getElementById('lowerthird-headline');
103         var g = document.getElementById('lowerthird-headline-content');
104         f.style.paddingTop = Math.round((f.clientHeight - g.clientHeight) / 2) + 'px';
105
106         f = document.getElementById('lowerthird-subheading');
107         g = document.getElementById('lowerthird-subheading-content');
108         f.style.paddingTop = Math.round((f.clientHeight - g.clientHeight) / 2) + 'px';
109
110         document.getElementById('lowerthird-headline').className = 'lowerthird-headline lowerthird-headline-animate-in';
111         document.getElementById('lowerthird-headline-content').className = 'lowerthird-headline-content lowerthird-headline-content-animate-in';
112         document.getElementById('lowerthird-subheading').className = 'lowerthird-subheading lowerthird-subheading-animate-in';
113         document.getElementById('lowerthird-subheading-content').className = 'lowerthird-subheading-content lowerthird-subheading-content-animate-in';
114         lowerthird_visible = true;
115 }
116
117 function setandshowlowerthird()
118 {
119         document.getElementById('lowerthird-headline-content').innerHTML = state['text1'];
120         document.getElementById('lowerthird-subheading-content').innerHTML = state['text2'];
121         showlowerthird();
122 }
123
124 function hidelowerthird()
125 {
126         if (!lowerthird_visible) return;
127         document.getElementById('lowerthird-headline').className = 'lowerthird-headline lowerthird-headline-hidden lowerthird-headline-animate-out';
128         document.getElementById('lowerthird-headline-content').className = 'lowerthird-headline-content lowerthird-headline-content-animate-out';
129         document.getElementById('lowerthird-subheading').className = 'lowerthird-subheading lowerthird-subheading-animate-out';
130         document.getElementById('lowerthird-subheading-content').className = 'lowerthird-subheading-content lowerthird-subheading-content-animate-out';
131         lowerthird_visible = false;
132 }
133
134 function time_left()
135 {
136         var elapsed = (Date.now() - clock_origin) * 1e-3;
137         if (elapsed > clock_left) return 0;
138         return Math.ceil(clock_left - elapsed);
139 }
140
141 function update_clock()
142 {
143         var left = time_left();
144         var min = Math.floor(left / 60);
145         var sec = left % 60;
146
147         if (sec < 10) sec = "0" + sec;
148         document.getElementById('clock').innerHTML = min + ":" + sec;
149 }
150
151 function goalA()
152 {
153         ++scoreA;
154         update_score();
155 }
156
157 function goalB()
158 {
159         ++scoreB;
160         update_score();
161 }
162
163 function ungoalA()
164 {
165         if (scoreA > 0) --scoreA;
166         update_score();
167 }
168
169 function ungoalB()
170 {
171         if (scoreB > 0) --scoreB;
172         update_score();
173 }
174
175 function resetscore()
176 {
177         scoreA = scoreB = 0;
178         update_score();
179 }
180
181 function update_score()
182 {
183         document.getElementById('score').innerHTML = scoreA + "&nbsp;–&nbsp;" + scoreB;
184 }
185
186 /* called by caspar only */
187 function play()
188 {
189         document.getElementById('manualcontrols').style.display = 'none';
190         document.getElementById('area').style.display = 'none';
191
192         // Old CEF workaround
193         document.getElementById('lowerthird-subheading').style.top = '638px';
194 }
195
196 function update(v)
197 {
198         console.log('[[[' + v + ']]]');
199         var j = JSON.parse(v);
200         for(var key in j) state[key] = j[key];
201 }
202
203 setInterval(function() {
204         if (clock_running) {
205                 update_clock();
206         }
207 }, 100);
208 update_score();
209
210 //play();
211 //startclock();