From 45845ab9ee3f1ee80a96051c4e97e42323ad33e3 Mon Sep 17 00:00:00 2001 From: Neale Pickett Date: Sat, 2 Nov 2013 14:35:21 -0600 Subject: [PATCH] Fixes for keydown events --- res/scoreboard.js | 701 ++++++++++++++++++++++++---------------------- 1 file changed, 364 insertions(+), 337 deletions(-) diff --git a/res/scoreboard.js b/res/scoreboard.js index 6edd635..82bdb5f 100644 --- a/res/scoreboard.js +++ b/res/scoreboard.js @@ -28,10 +28,10 @@ longnames = false; tenths = true; /* State names */ -var SETUP = 0; // !P 30:00 !J 2:00 -var JAM = 1; // P J 2:00 -var LINEUP = 2; // P J 1:00 -var TIMEOUT = 3; // !P J 1:00 +var SETUP = 0; // !P 30:00 !J 2:00 +var JAM = 1; // P J 2:00 +var LINEUP = 2; // P J 1:00 +var TIMEOUT = 3; // !P J 1:00 var periodtext = ["Period 1", "Halftime", "Period 2", "Break"]; var jamtext = ["Jam", "Lineup", "Timeout", "Setup"]; @@ -42,148 +42,148 @@ var state = SETUP; var timer_updates = []; function update() { - for (var i in timer_updates) { - var u = timer_updates[i]; + for (var i in timer_updates) { + var u = timer_updates[i]; - u(); - } + u(); + } } // Create a timer on [element]. // If [tenths] is true, show tenths of a second. // If [callback] is defined, call it when time runs out. function startTimer(element, tenths, callback) { - var startTime; - var running = false; - var set_duration = 0; - var duration = 0; - var className; + var startTime; + var running = false; + var set_duration = 0; + var duration = 0; + var className; - // Re-calculate and update displayed time - function refresh () { - var remain = element.remaining(); - var min = Math.floor(Math.abs(remain / 60000)); - var sec = (Math.floor(Math.abs(remain / 100)) / 10) % 60; + // Re-calculate and update displayed time + function refresh () { + var remain = element.remaining(); + var min = Math.floor(Math.abs(remain / 60000)); + var sec = (Math.floor(Math.abs(remain / 100)) / 10) % 60; - // Set classes - element.className = className; - if ((! className) && (remain <= 20000)) { - element.className += " lowtime"; - } - if (! running) { - element.className += " paused"; - } + // Set classes + element.className = className; + if ((! className) && (remain <= 20000)) { + element.className += " lowtime"; + } + if (! running) { + element.className += " paused"; + } - // Has the timer run out? - if ((set_duration > 0) && (remain <= 0)) { - duration = 0; - sec = 0; - running = false; - if (callback) { - callback(); - } - } + // Has the timer run out? + if ((set_duration > 0) && (remain <= 0)) { + duration = 0; + sec = 0; + running = false; + if (callback) { + callback(); + } + } - // .toFixed() rounds, we want to truncate - if (! tenths) { - sec = Math.floor(sec); - } else { - sec = sec.toFixed(1); - } - // Zero-pad - if (sec < 10) { - sec = "0" + sec; - } + // .toFixed() rounds, we want to truncate + if (! tenths) { + sec = Math.floor(sec); + } else { + sec = sec.toFixed(1); + } + // Zero-pad + if (sec < 10) { + sec = "0" + sec; + } - var t = min + ":" + sec; - if (t != element.innerHTML) { - element.innerHTML = t; - } - } + var t = min + ":" + sec; + if (t != element.innerHTML) { + element.innerHTML = t; + } + } - // Return remaining time in milliseconds - element.remaining = function() { - if (running) { - var now = (new Date()).getTime(); - return duration - (now - startTime); - } else { - return duration; - } - } + // Return remaining time in milliseconds + element.remaining = function() { + if (running) { + var now = (new Date()).getTime(); + return duration - (now - startTime); + } else { + return duration; + } + } - // Set timer to [d] milliseconds. - // Put element into class [cn], if set. - element.set = function(t, cn) { - startTime = (new Date()).getTime(); - set_duration = t; - duration = t; - className = cn; - refresh(); - } + // Set timer to [d] milliseconds. + // Put element into class [cn], if set. + element.set = function(t, cn) { + startTime = (new Date()).getTime(); + set_duration = t; + duration = t; + className = cn; + refresh(); + } - // Start timer - element.start = function() { - if (! running) { - startTime = (new Date()).getTime(); - running = true; - } - refresh(); - } + // Start timer + element.start = function() { + if (! running) { + startTime = (new Date()).getTime(); + running = true; + } + refresh(); + } - // Stop timer - element.stop = function() { - if (running) { - duration = element.remaining(); - running = false; - } - refresh(); - } + // Stop timer + element.stop = function() { + if (running) { + duration = element.remaining(); + running = false; + } + refresh(); + } - timer_updates.push(refresh); + timer_updates.push(refresh); } // Transition state machine based on state function transition(newstate) { - var jt = e("jam"); - var pt = e("period"); - var jtext = e("jamtext"); - var jno = e("jamno"); + var jt = e("jam"); + var pt = e("period"); + var jtext = e("jamtext"); + var jno = e("jamno"); - if ((newstate === undefined) || (newstate == state)) { - return; - } + if ((newstate === undefined) || (newstate == state)) { + return; + } - if ((state == SETUP) && window.penalties) { - penalties_duck(); - } + if ((state == SETUP) && window.penalties) { + penalties_duck(); + } - state = newstate; + state = newstate; - if (state == JAM) { - pt.start(); - jt.set(120000); - jt.start(); - jtext.innerHTML = jamtext[0]; - jamno += 1; - jno.innerHTML = jamno; - } else if (state == LINEUP) { - pt.start(); - jt.set(30000, "lineup"); - jt.start(); - jtext.innerHTML = jamtext[1]; - } else if (state == TIMEOUT) { - pt.stop(); - if (pt.remaining() <= 0) { - pt.set(1800000); - } - jt.set(0, "timeout"); - jt.start(); - jtext.innerHTML = jamtext[2]; - } + if (state == JAM) { + pt.start(); + jt.set(120000); + jt.start(); + jtext.innerHTML = jamtext[0]; + jamno += 1; + jno.innerHTML = jamno; + } else if (state == LINEUP) { + pt.start(); + jt.set(30000, "lineup"); + jt.start(); + jtext.innerHTML = jamtext[1]; + } else if (state == TIMEOUT) { + pt.stop(); + if (pt.remaining() <= 0) { + pt.set(1800000); + } + jt.set(0, "timeout"); + jt.start(); + jtext.innerHTML = jamtext[2]; + } - // Reset lead jammer indicators - e("jammer-a").className = ""; - e("jammer-b").className = ""; + // Reset lead jammer indicators + e("jammer-a").className = ""; + e("jammer-b").className = ""; } @@ -213,32 +213,32 @@ function notice_expire() { } function notice(n) { - var c = document.getElementById("notice"); + var c = document.getElementById("notice"); - c.style.display = "block"; - if (notices[n]) { - c.innerHTML = notices[n]; - clearTimeout(notice_timer); - notice_timer = setTimeout(function() {notice_expire()}, 8000); - } else { - notice_expire(); - } + c.style.display = "block"; + if (notices[n]) { + c.innerHTML = notices[n]; + clearTimeout(notice_timer); + notice_timer = setTimeout(function() {notice_expire()}, 8000); + } else { + notice_expire(); + } } function e(id) { - ret = document.getElementById(id); - if (! ret) { - return Array(); - } - return ret; + ret = document.getElementById(id); + if (! ret) { + return Array(); + } + return ret; } function score(team, points) { - var te = document.getElementById("score-" + team); - var ts = Number(te.innerHTML); + var te = document.getElementById("score-" + team); + var ts = Number(te.innerHTML); - ts += points; - te.innerHTML = ts; + ts += points; + te.innerHTML = ts; } /*********************************** @@ -248,131 +248,158 @@ function score(team, points) { var logo = {a:-1, b:-1}; function leadJammer(team) { - tgt = e("jammer-" + team); - var on = ! tgt.className; + tgt = e("jammer-" + team); + var on = ! tgt.className; - e("jammer-a").className = ""; - e("jammer-b").className = ""; - if (on) tgt.className = "lead"; + e("jammer-a").className = ""; + e("jammer-b").className = ""; + if (on) tgt.className = "lead"; } function handle(event) { - var tgt = event.target || window.event.srcElement; - var team = tgt.id.substr(tgt.id.length - 1); - var adj = event.shiftKey?-1:1; - var mod = (event.ctrlKey || event.altKey); - var newstate; + var tgt = event.target || window.event.srcElement; + var team = tgt.id.substr(tgt.id.length - 1); + var adj = event.shiftKey?-1:1; + var mod = (event.ctrlKey || event.altKey); + var newstate; - switch (tgt.id) { - case "logo-a": - case "logo-b": - if (state == SETUP) { - if (true) { - var t, name; + switch (tgt.id) { + case "logo-a": + case "logo-b": + if (state == SETUP) { + if (true) { + var t, name; - logo[team] = (teams.length + logo[team] + adj) % teams.length; - t = teams[logo[team]]; + logo[team] = (teams.length + logo[team] + adj) % teams.length; + t = teams[logo[team]]; - if (longnames) { - name = t[2]; - } else { - name = t[0]; - } + if (longnames) { + name = t[2]; + } else { + name = t[0]; + } - e("name-" + team).innerHTML = name; - tgt.src = "logos/" + t[1]; + e("name-" + team).innerHTML = name; + tgt.src = "logos/" + t[1]; - if (window.penalties) { - penalties_setTeamName(team, t[0]); - } - } - } else { - score(team, -adj); - } - break; - case "jammer-a": - case "jammer-b": - leadJammer(team); - break; - case "timeouts-a": - case "timeouts-b": - // Allow for timeouts > 3 - var v = Number(tgt.innerHTML); + if (window.penalties) { + penalties_setTeamName(team, t[0]); + } + } + } else { + score(team, -adj); + } + break; + case "jammer-a": + case "jammer-b": + leadJammer(team); + break; + case "timeouts-a": + case "timeouts-b": + // Allow for timeouts > 3 + var v = Number(tgt.innerHTML); - v -= adj; - if (v == -1) v = 3; - tgt.innerHTML = v; - break; - case "period": - if ((state == SETUP) || (state == TIMEOUT)) { - // Nothin' - } else { - newstate = TIMEOUT; - } - break; - case "periodtext": - var pt; + v -= adj; + if (v == -1) v = 3; + tgt.innerHTML = v; + break; + case "period": + if ((state == SETUP) || (state == TIMEOUT)) { + // Nothin' + } else { + newstate = TIMEOUT; + } + break; + case "periodtext": + var pt; - if (mod) { - pt = prompt("Enter new period indicator text", tgt.innerHTML); - } else { - var ptl = periodtext.length; + if (mod) { + pt = prompt("Enter new period indicator text", tgt.innerHTML); + } else { + var ptl = periodtext.length; - period = (period + ptl + adj) % ptl; - pt = periodtext[period]; - } - if (pt) { - tgt.innerHTML = pt; - if (state == TIMEOUT) { - jamno = 0; - e("jamno").innerHTML = jamno; - } - } - break; - case "jam": - if (state == JAM) { - newstate = LINEUP; - } else { - newstate = JAM; - } - break; - case "jamno": - jamno -= adj; - tgt.innerHTML = jamno; - break; - case "score-a": - case "score-b": - if (state == SETUP) { - var s = prompt("Enter score for team " + team, tgt.innerHTML); - if (s) { - tgt.innerHTML = s; - } - } else { - score(team, adj); - } - break; - } - transition(newstate); + period = (period + ptl + adj) % ptl; + pt = periodtext[period]; + } + if (pt) { + tgt.innerHTML = pt; + if (state == TIMEOUT) { + jamno = 0; + e("jamno").innerHTML = jamno; + } + } + break; + case "jam": + if (state == JAM) { + newstate = LINEUP; + } else { + newstate = JAM; + } + break; + case "jamno": + jamno -= adj; + tgt.innerHTML = jamno; + break; + case "score-a": + case "score-b": + if (state == SETUP) { + var s = prompt("Enter score for team " + team, tgt.innerHTML); + if (s) { + tgt.innerHTML = s; + } + } else { + score(team, adj); + } + break; + } + transition(newstate); } function key(event) { - var e = event || window.event; - var c; - var newstate; + var e = event || window.event; + var k = e.which || e.keyCode || 0; + var c; + var newstate; - switch (e.keyCode) { + switch (k) { + case 32: + c = " "; + break; case 38: c = "up"; break; case 40: c = "down"; break; + case 188: + c = ","; + break; + case 190: + c = "."; + break; + case 221: + c = e.shiftKey ? "}" : "]"; + break; + case 219: + c = e.shiftKey ? "{" : "["; + break; default: - c = String.fromCharCode(e.which || e.keyCode || 0); + if ((k >= 48) && (k <= 90)) { + c = String.fromCharCode(k); + if (! e.shiftKey) { + c = c.toLowerCase(); + } + } else { + c = null; + } break; } - switch (c) { + bige = e; + + console.log("Key " + k + " pressed: " + c + " === " + e.which); + + switch (c) { case "up": if ((state == TIMEOUT) || (state == SETUP)) { var pt = document.getElementById("period"); @@ -387,59 +414,59 @@ function key(event) { pt.set(rem - 1000); } break; - case " ": - if (state == JAM) { - newstate = LINEUP; - } else { - newstate = JAM; - } - break; - case "t": - newstate = TIMEOUT; - break; - case "a": - case "[": - score('a', 1); - break; - case "b": - case "]": - score('b', 1); - break; - case "A": - case "{": - score('a', -1); - break; - case "B": - case "}": - score('b', -1); - break; - case ",": - leadJammer('a'); - break; - case ".": - leadJammer('b'); - break; - case "1": - case "2": - case "3": - case "4": - case "5": - case "6": - case "7": - case "8": - case "9": - case "0": - var n = Number(c); + case " ": + if (state == JAM) { + newstate = LINEUP; + } else { + newstate = JAM; + } + break; + case "t": + newstate = TIMEOUT; + break; + case "a": + case "[": + score('a', 1); + break; + case "b": + case "]": + score('b', 1); + break; + case "A": + case "{": + score('a', -1); + break; + case "B": + case "}": + score('b', -1); + break; + case ",": + leadJammer('a'); + break; + case ".": + leadJammer('b'); + break; + case "1": + case "2": + case "3": + case "4": + case "5": + case "6": + case "7": + case "8": + case "9": + case "0": + var n = Number(c); - window.notice(n); - } + window.notice(n); + } - transition(newstate); + transition(newstate); } function save() { - chrome.storage.sync.set( + chrome.storage.local.set( { "period_clock": e("period").remaining(), "name_a": e("name-a").innerHTML, @@ -455,21 +482,21 @@ function save() { } ); } - + function iecheck() { - // If it's IE, it's got to be at least 7 - var ua = navigator.userAgent; - var ie = ua.indexOf("MSIE "); + // If it's IE, it's got to be at least 7 + var ua = navigator.userAgent; + var ie = ua.indexOf("MSIE "); - if (ie == -1) { - // Not IE - return; - } else { - var n = parseFloat(ua.substring(ie + 5, ua.indexOf(";", ie))); - if (n < 7) { - alert("Your browser is too old to run the Woozle scoreboard.\nYou can use Firefox, Chrome, Opera, or Internet Explorer 7 and up."); - } - } + if (ie == -1) { + // Not IE + return; + } else { + var n = parseFloat(ua.substring(ie + 5, ua.indexOf(";", ie))); + if (n < 7) { + alert("Your browser is too old to run the Woozle scoreboard.\nYou can use Firefox, Chrome, Opera, or Internet Explorer 7 and up."); + } + } } function ei(name) { @@ -481,12 +508,12 @@ function ei(name) { } function start() { - resize(); - iecheck(); + resize(); + iecheck(); - var p = document.getElementById("period"); - var j = document.getElementById("jam"); - var c; + var p = document.getElementById("period"); + var j = document.getElementById("jam"); + var c; // XXX: I think, instead of null, you can pass in a dictionary of defaults function load(state) { @@ -505,51 +532,51 @@ function start() { startTimer(p); p.set(c); } - chrome.storage.sync.get(null, load); + chrome.storage.local.get(null, load); - ei("jammer-a"); - ei("jammer-b"); - ei("period"); - ei("jam"); - - ei("periodtext").innerHTML = periodtext[period]; - ei("jamtext").innerHTML = jamtext[3]; - transition(); + ei("jammer-a"); + ei("jammer-b"); + ei("period"); + ei("jam"); + + ei("periodtext").innerHTML = periodtext[period]; + ei("jamtext").innerHTML = jamtext[3]; + transition(); - startTimer(j, window.tenths); - j.set(120000); + startTimer(j, window.tenths); + j.set(120000); - save_timer = setInterval(save, 1000); - update_itimer = setInterval(update, 33); + save_timer = setInterval(save, 10000); // Every 10 seconds + update_itimer = setInterval(update, 33); } function resize() { - var b = document.getElementsByTagName("body")[0]; - var w, h; - - // Internet Explorer makes everything a pain in the ass - if (window.innerWidth) { - w = window.innerWidth; - h = window.innerHeight; - } else if (document.documentElement && document.documentElement.clientWidth) { - w = document.documentElement.clientWidth; - h = document.documentElement.clientHeight; - } else if (document.body) { - w = document.body.clientWidth; - h = document.body.clientHeight; - } else { - // Punt - w = 800; - h = 600; - } + var b = document.getElementsByTagName("body")[0]; + var w, h; + + // Internet Explorer makes everything a pain in the ass + if (window.innerWidth) { + w = window.innerWidth; + h = window.innerHeight; + } else if (document.documentElement && document.documentElement.clientWidth) { + w = document.documentElement.clientWidth; + h = document.documentElement.clientHeight; + } else if (document.body) { + w = document.body.clientWidth; + h = document.body.clientHeight; + } else { + // Punt + w = 800; + h = 600; + } - w /= 7; - h /= 5; + w /= 7; + h /= 5; - var fs = Math.min(w, h); + var fs = Math.min(w, h); - b.style.fontSize = fs + 'px'; + b.style.fontSize = fs + 'px'; } window.onload = start;