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         document.getElementById('lowerthird-headline').className = 'lowerthird-headline lowerthird-headline-animate-in';
 114         document.getElementById('lowerthird-headline-content').className = 'lowerthird-headline-content lowerthird-headline-content-animate-in';
 115         document.getElementById('lowerthird-subheading').className = 'lowerthird-subheading lowerthird-subheading-animate-in';
 116         document.getElementById('lowerthird-subheading-content').className = 'lowerthird-subheading-content lowerthird-subheading-content-animate-in';
 117         document.getElementById('lowerthird-picture').className = 'lowerthird-picture lowerthird-picture-animate-in';
 118         document.getElementById('lowerthird-picture-content').className = 'lowerthird-picture-content lowerthird-picture-content-animate-in';
 119         lowerthird_visible = true;
 120 }
 121
 122 function setandshowlowerthird()
 123 {
 124         document.getElementById('lowerthird-headline-content').innerHTML = state['text1'];
 125         document.getElementById('lowerthird-subheading-content').innerHTML = state['text2'];
 126         let img = document.getElementById('lowerthird-img');
 127         if (state['image'] === undefined) {
 128                 img.style.display = 'none';
 129         } else {
 130                 img.src = state['image'];
 131                 img.style.display = 'inline';
 132         }
 133         showlowerthird();
 134 }
 135
 136 function hidelowerthird()
 137 {
 138         if (!lowerthird_visible) return;
 139         document.getElementById('lowerthird-headline').className = 'lowerthird-headline lowerthird-headline-hidden lowerthird-headline-animate-out';
 140         document.getElementById('lowerthird-headline-content').className = 'lowerthird-headline-content lowerthird-headline-content-animate-out';
 141         document.getElementById('lowerthird-subheading').className = 'lowerthird-subheading lowerthird-subheading-animate-out';
 142         document.getElementById('lowerthird-subheading-content').className = 'lowerthird-subheading-content lowerthird-subheading-content-animate-out';
 143         document.getElementById('lowerthird-picture').className = 'lowerthird-picture lowerthird-picture-animate-out';
 144         document.getElementById('lowerthird-picture-content').className = 'lowerthird-picture-content lowerthird-picture-content-animate-out';
 145         lowerthird_visible = false;
 146 }
 147
 148 function time_elapsed()
 149 {
 150         let elapsed = (Date.now() - clock_origin) * 1e-3;
 151         if (clock_elapsed + elapsed >= clock_limit) {
 152                 clock_elapsed = clock_limit;
 153                 clock_origin = Date.now();
 154                 clock_running = false;
 155                 return clock_limit;
 156         }
 157         return Math.floor(clock_elapsed + elapsed);
 158 }
 159
 160 function update_clock()
 161 {
 162         let elapsed = time_elapsed();
 163         let min = Math.floor(elapsed / 60);
 164         let sec = elapsed % 60;
 165
 166         if (sec < 10) sec = "0" + sec;
 167         let text = min + ":" + sec;
 168
 169         // This is a hack around the fact that Exo has variable-width numerals.
 170         // It doesn't look fantastic, but for the clock, it's better not to have
 171         // the text jumping around.
 172         let html = "";
 173         for (let i = 0; i < text.length; ++i) {
 174                 if (text.charAt(i) === ':') {
 175                         html += ':';
 176                 } else {
 177                         html += "<div style='display: inline-block; width: 15px'>" + text.charAt(i) + "</div>";
 178                 }
 179         }
 180         document.getElementById('clock').innerHTML = html;
 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 the Nageru theme only */
 219 function play()
 220 {
 221         document.getElementById('manualcontrols').style.display = 'none';
 222         document.getElementById('area').style.display = 'none';
 223 }
 224
 225 function update(v)
 226 {
 227         console.log('[[[' + v + ']]]');
 228         let j = JSON.parse(v);
 229         for(let key in j) state[key] = j[key];
 230 }
 231
 232 setInterval(function() {
 233         if (clock_running) {
 234                 update_clock();
 235         }
 236 }, 100);
 237 update_score();
 238
 239 //play();
 240 //startclock();
 241
 242 let websocket = null;
 243
 244 function open_ws()
 245 {
 246         console.log("Connecting...");
 247         try {
 248                 if (websocket)
 249                         websocket.close();
 250                 websocket = new WebSocket("ws://127.0.0.1:5250/");
 251                 websocket.onopen = function(evt) {
 252                         console.log("Connected to client.");
 253                 };
 254                 websocket.onclose = function(evt) {
 255                         console.log("Disconnected from client.");
 256                         setTimeout(open_ws, 100);
 257                 };
 258                 websocket.onmessage = function(evt) {
 259                         let msg = evt.data;
 260                         let m = msg.match(/^update (.*)/);
 261                         if (m !== null) {
 262                                 update(m[1]);
 263                         }
 264                         m = msg.match(/^eval (.*)/);
 265                         if (m !== null) {
 266                                 eval(m[1]);
 267                         }
 268                 };
 269                 websocket.onerror = function(evt) {
 270                         console.log('Error: ' + evt.data);
 271                 };
 272         } catch (exception) {
 273                 console.log('Error: ' + exception);
 274                 setTimeout(open_ws, 100);
 275         }
 276 };
 277 open_ws();