git.sesse.net Git - ultimatescore/blob - score.js

   1 'use strict';
   2
   3 let clock_running = false;
   4 let clock_visible = false;
   5 let comment_visible = false;
   6 let lowerthird_visible = false;
   7 let clock_elapsed = 0;
   8 let clock_limit = 30 * 60;
   9 let scoreA = 0;
  10 let scoreB = 0;
  11 let clock_origin;
  12 let state = {};
  13
  14 function setteams()
  15 {
  16         document.getElementById('team1').innerHTML = state['team1'];
  17         document.getElementById('team2').innerHTML = state['team2'];
  18
  19         let sheets = { 'A': state['team1'], 'B': state['team2'] };
  20         loadquickl3s(sheets);
  21 }
  22
  23 function setcolors()
  24 {
  25         document.getElementById('team1color').style.backgroundColor = state['team1color'];
  26         document.getElementById('team2color').style.backgroundColor = state['team2color'];
  27 }
  28
  29 function setscore()
  30 {
  31         scoreA = state['score1'];
  32         scoreB = state['score2'];
  33         update_score();
  34 }
  35
  36 function startclock()
  37 {
  38         if (!clock_running) {
  39                 clock_origin = Date.now();
  40                 clock_running = true;
  41         }
  42         showclock();
  43 }
  44
  45 function stopclock()
  46 {
  47         if (!clock_running) return;
  48         clock_elapsed = time_elapsed();
  49         clock_origin = Date.now();
  50         clock_running = false;
  51 }
  52
  53 function setclock(amount)
  54 {
  55         clock_elapsed = amount;
  56         clock_origin = Date.now();
  57         update_clock();
  58 }
  59
  60 function setclockfromstate()
  61 {
  62         let amount = parseInt(state['clock_min']) * 60 + parseInt(state['clock_sec']);
  63         setclock(amount);
  64 }
  65
  66 function setclocklimitfromstate()
  67 {
  68         let amount = parseInt(state['clock_limit_min']) * 60 + parseInt(state['clock_limit_sec']);
  69         clock_limit = amount;
  70 }
  71
  72 function showclock()
  73 {
  74         if (clock_visible) return;
  75         let clockbug = document.getElementById('clockbug');
  76         clockbug.className = 'clockbug clockbug-animate-in';
  77         clock_visible = true;
  78 }
  79
  80 function hideclock()
  81 {
  82         if (!clock_visible) return;
  83         let clockbug = document.getElementById('clockbug');
  84         clockbug.className = 'clockbug clockbug-animate-out';
  85         clock_visible = false;
  86 }
  87
  88 function setcomment()
  89 {
  90         document.getElementById('comment').innerHTML = state['comment'];
  91 }
  92
  93 function showcomment()
  94 {
  95         if (comment_visible) return;
  96         let commentbug = document.getElementById('commentbug');
  97         commentbug.className = 'commentbug commentbug-animate-in';
  98         comment_visible = true;
  99 }
 100
 101 function hidecomment()
 102 {
 103         if (!comment_visible) return;
 104         let commentbug = document.getElementById('commentbug');
 105         commentbug.className = 'commentbug commentbug-animate-out';
 106         comment_visible = false;
 107 }
 108
 109 function showlowerthird()
 110 {
 111         if (lowerthird_visible) return;
 112
 113         // With no flexbox, this is how it has to be...
 114         let f = document.getElementById('lowerthird-headline');
 115         let g = document.getElementById('lowerthird-headline-content');
 116         f.style.paddingTop = Math.round((f.clientHeight - g.clientHeight) / 2) + 'px';
 117
 118         f = document.getElementById('lowerthird-subheading');
 119         g = document.getElementById('lowerthird-subheading-content');
 120         f.style.paddingTop = Math.round((f.clientHeight - g.clientHeight) / 2) + 'px';
 121
 122         f = document.getElementById('lowerthird-picture');
 123         g = document.getElementById('lowerthird-picture-content');
 124         f.style.paddingTop = Math.round((f.clientHeight - g.clientHeight) / 2) + 'px';
 125
 126         document.getElementById('lowerthird-headline').className = 'lowerthird-headline lowerthird-headline-animate-in';
 127         document.getElementById('lowerthird-headline-content').className = 'lowerthird-headline-content lowerthird-headline-content-animate-in';
 128         document.getElementById('lowerthird-subheading').className = 'lowerthird-subheading lowerthird-subheading-animate-in';
 129         document.getElementById('lowerthird-subheading-content').className = 'lowerthird-subheading-content lowerthird-subheading-content-animate-in';
 130         document.getElementById('lowerthird-picture').className = 'lowerthird-picture lowerthird-picture-animate-in';
 131         document.getElementById('lowerthird-picture-content').className = 'lowerthird-picture-content lowerthird-picture-content-animate-in';
 132         lowerthird_visible = true;
 133 }
 134
 135 function setandshowlowerthird()
 136 {
 137         document.getElementById('lowerthird-headline-content').innerHTML = state['text1'];
 138         document.getElementById('lowerthird-subheading-content').innerHTML = state['text2'];
 139         let img = document.getElementById('lowerthird-img');
 140         if (state['image'] === undefined) {
 141                 img.style.display = 'none';
 142         } else {
 143                 img.src = state['image'];
 144                 img.style.display = 'inline';
 145         }
 146         showlowerthird();
 147 }
 148
 149 function hidelowerthird()
 150 {
 151         if (!lowerthird_visible) return;
 152         document.getElementById('lowerthird-headline').className = 'lowerthird-headline lowerthird-headline-hidden lowerthird-headline-animate-out';
 153         document.getElementById('lowerthird-headline-content').className = 'lowerthird-headline-content lowerthird-headline-content-animate-out';
 154         document.getElementById('lowerthird-subheading').className = 'lowerthird-subheading lowerthird-subheading-animate-out';
 155         document.getElementById('lowerthird-subheading-content').className = 'lowerthird-subheading-content lowerthird-subheading-content-animate-out';
 156         document.getElementById('lowerthird-picture').className = 'lowerthird-picture lowerthird-picture-hidden lowerthird-picture-animate-out';
 157         document.getElementById('lowerthird-picture-content').className = 'lowerthird-picture-content lowerthird-picture-content-animate-out';
 158         lowerthird_visible = false;
 159 }
 160
 161 function time_elapsed()
 162 {
 163         let elapsed = (Date.now() - clock_origin) * 1e-3;
 164         if (clock_elapsed + elapsed >= clock_limit) {
 165                 clock_elapsed = clock_limit;
 166                 clock_origin = Date.now();
 167                 clock_running = false;
 168                 return clock_limit;
 169         }
 170         return Math.floor(clock_elapsed + elapsed);
 171 }
 172
 173 function update_clock()
 174 {
 175         let elapsed = time_elapsed();
 176         let min = Math.floor(elapsed / 60);
 177         let sec = elapsed % 60;
 178
 179         if (sec < 10) sec = "0" + sec;
 180         document.getElementById('clock').innerHTML = min + ":" + sec;
 181 }
 182
 183 function goalA()
 184 {
 185         ++scoreA;
 186         update_score();
 187 }
 188
 189 function goalB()
 190 {
 191         ++scoreB;
 192         update_score();
 193 }
 194
 195 function ungoalA()
 196 {
 197         if (scoreA > 0) --scoreA;
 198         update_score();
 199 }
 200
 201 function ungoalB()
 202 {
 203         if (scoreB > 0) --scoreB;
 204         update_score();
 205 }
 206
 207 function resetscore()
 208 {
 209         scoreA = scoreB = 0;
 210         update_score();
 211 }
 212
 213 function update_score()
 214 {
 215         document.getElementById('score').innerHTML = scoreA + "&nbsp;–&nbsp;" + scoreB;
 216 }
 217
 218 /* called by caspar only */
 219 function play()
 220 {
 221         document.getElementById('manualcontrols').style.display = 'none';
 222         document.getElementById('area').style.display = 'none';
 223
 224         // Old CEF workaround
 225         document.getElementById('lowerthird-subheading').style.top = '638px';
 226 }
 227
 228 function update(v)
 229 {
 230         console.log('[[[' + v + ']]]');
 231         let j = JSON.parse(v);
 232         for(let key in j) state[key] = j[key];
 233 }
 234
 235 setInterval(function() {
 236         if (clock_running) {
 237                 update_clock();
 238         }
 239 }, 100);
 240 update_score();
 241
 242 //play();
 243 //startclock();
 244
 245 let websocket = null;
 246
 247 function open_ws()
 248 {
 249         console.log("Connecting...");
 250         try {
 251                 if (websocket)
 252                         websocket.close();
 253                 websocket = new WebSocket("ws://127.0.0.1:5250/");
 254                 websocket.onopen = function(evt) {
 255                         console.log("Connected to client.");
 256                 };
 257                 websocket.onclose = function(evt) {
 258                         console.log("Disconnected from client.");
 259                         setTimeout(open_ws, 100);
 260                 };
 261                 websocket.onmessage = function(evt) {
 262                         let msg = evt.data;
 263                         let m = msg.match(/^update (.*)/);
 264                         if (m !== null) {
 265                                 update(m[1]);
 266                         }
 267                         m = msg.match(/^eval (.*)/);
 268                         if (m !== null) {
 269                                 eval(m[1]);
 270                         }
 271                 };
 272                 websocket.onerror = function(evt) {
 273                         console.log('Error: ' + evt.data);
 274                 };
 275         } catch (exception) {
 276                 console.log('Error: ' + exception);
 277                 setTimeout(open_ws, 100);
 278         }
 279 };
 280 open_ws();