git.sesse.net Git - ultimatescore/blob - 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 = 30 * 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         f = document.getElementById('lowerthird-picture');
 111         g = document.getElementById('lowerthird-picture-content');
 112         f.style.paddingTop = Math.round((f.clientHeight - g.clientHeight) / 2) + 'px';
 113
 114         document.getElementById('lowerthird-headline').className = 'lowerthird-headline lowerthird-headline-animate-in';
 115         document.getElementById('lowerthird-headline-content').className = 'lowerthird-headline-content lowerthird-headline-content-animate-in';
 116         document.getElementById('lowerthird-subheading').className = 'lowerthird-subheading lowerthird-subheading-animate-in';
 117         document.getElementById('lowerthird-subheading-content').className = 'lowerthird-subheading-content lowerthird-subheading-content-animate-in';
 118         document.getElementById('lowerthird-picture').className = 'lowerthird-picture lowerthird-picture-animate-in';
 119         document.getElementById('lowerthird-picture-content').className = 'lowerthird-picture-content lowerthird-picture-content-animate-in';
 120         lowerthird_visible = true;
 121 }
 122
 123 function setandshowlowerthird()
 124 {
 125         document.getElementById('lowerthird-headline-content').innerHTML = state['text1'];
 126         document.getElementById('lowerthird-subheading-content').innerHTML = state['text2'];
 127         var img = document.getElementById('lowerthird-img');
 128         if (state['image'] === undefined) {
 129                 img.style.display = 'none';
 130         } else {
 131                 img.src = state['image'];
 132                 img.style.display = 'inline';
 133         }
 134         showlowerthird();
 135 }
 136
 137 function hidelowerthird()
 138 {
 139         if (!lowerthird_visible) return;
 140         document.getElementById('lowerthird-headline').className = 'lowerthird-headline lowerthird-headline-hidden lowerthird-headline-animate-out';
 141         document.getElementById('lowerthird-headline-content').className = 'lowerthird-headline-content lowerthird-headline-content-animate-out';
 142         document.getElementById('lowerthird-subheading').className = 'lowerthird-subheading lowerthird-subheading-animate-out';
 143         document.getElementById('lowerthird-subheading-content').className = 'lowerthird-subheading-content lowerthird-subheading-content-animate-out';
 144         document.getElementById('lowerthird-picture').className = 'lowerthird-picture lowerthird-picture-hidden lowerthird-picture-animate-out';
 145         document.getElementById('lowerthird-picture-content').className = 'lowerthird-picture-content lowerthird-picture-content-animate-out';
 146         lowerthird_visible = false;
 147 }
 148
 149 function time_left()
 150 {
 151         var elapsed = (Date.now() - clock_origin) * 1e-3;
 152         if (elapsed > clock_left) return 0;
 153         return Math.ceil(clock_left - elapsed);
 154 }
 155
 156 function update_clock()
 157 {
 158         var left = time_left();
 159         var min = Math.floor(left / 60);
 160         var sec = left % 60;
 161
 162         if (sec < 10) sec = "0" + sec;
 163         document.getElementById('clock').innerHTML = min + ":" + sec;
 164 }
 165
 166 function goalA()
 167 {
 168         ++scoreA;
 169         update_score();
 170 }
 171
 172 function goalB()
 173 {
 174         ++scoreB;
 175         update_score();
 176 }
 177
 178 function ungoalA()
 179 {
 180         if (scoreA > 0) --scoreA;
 181         update_score();
 182 }
 183
 184 function ungoalB()
 185 {
 186         if (scoreB > 0) --scoreB;
 187         update_score();
 188 }
 189
 190 function resetscore()
 191 {
 192         scoreA = scoreB = 0;
 193         update_score();
 194 }
 195
 196 function update_score()
 197 {
 198         document.getElementById('score').innerHTML = scoreA + "&nbsp;–&nbsp;" + scoreB;
 199 }
 200
 201 /* called by caspar only */
 202 function play()
 203 {
 204         document.getElementById('manualcontrols').style.display = 'none';
 205         document.getElementById('area').style.display = 'none';
 206
 207         // Old CEF workaround
 208         document.getElementById('lowerthird-subheading').style.top = '638px';
 209 }
 210
 211 function update(v)
 212 {
 213         console.log('[[[' + v + ']]]');
 214         var j = JSON.parse(v);
 215         for(var key in j) state[key] = j[key];
 216 }
 217
 218 setInterval(function() {
 219         if (clock_running) {
 220                 update_clock();
 221         }
 222 }, 100);
 223 update_score();
 224
 225 //play();
 226 //startclock();