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