diff --git a/res/background.js b/res/background.js index 549f4e2..3f679b0 100644 --- a/res/background.js +++ b/res/background.js @@ -1,5 +1,8 @@ chrome.app.runtime.onLaunched.addListener(function() { chrome.app.window.create('res/scoreboard.html', { - 'state': 'fullscreen' + "bounds": { + "height": 100, + "width": 450 + } }) }) diff --git a/res/scoreboard.css b/res/scoreboard.css index 84ad196..503b16a 100644 --- a/res/scoreboard.css +++ b/res/scoreboard.css @@ -34,11 +34,21 @@ input { display: inline; } -.kitty, .img { +.team .logo { position: absolute; - left: -10000px; + left: 10%; } +.team .logo * { + display: none; +} + +.team .color { + display: inline; + width: 0.5em; + margin-top: 0.60em; +} + .team { position: absolute; left: 0; @@ -56,12 +66,10 @@ input { #team-a { top: 0; - background: #6c6; } #team-b { top: 50%; - background: #c44; } .name { @@ -94,12 +102,16 @@ input { } -#clocks * { +.clocks * { position: absolute; right: 0.1em; text-align: right; } +.setup { + background-color: rgba(0, 255, 0, 0.2); +} + #period { top: -0.2em; } @@ -109,6 +121,7 @@ input { } #jamtext { + display: none; color: #cc0; bottom: 0.1em; right: 3em; @@ -121,8 +134,10 @@ input { } #preset { - top: 1em; - right: 3em; + font-size: 40%; + bottom: 45%; + left: 5%; + right: auto; } #close { diff --git a/res/scoreboard.html b/res/scoreboard.html index 394b811..1dc4922 100644 --- a/res/scoreboard.html +++ b/res/scoreboard.html @@ -24,14 +24,12 @@ - +
★ @@ -41,10 +39,8 @@
★ - + diff --git a/res/scoreboard.js b/res/scoreboard.js index 2ff56c9..9489fbb 100644 --- a/res/scoreboard.js +++ b/res/scoreboard.js @@ -225,8 +225,8 @@ function transition(newstate) { } // Reset lead jammer indicators - e("jammer-a").className = ""; - e("jammer-b").className = ""; + e("jammer-a").className = "jammer"; + e("jammer-b").className = "jammer"; var setupElements = document.getElementsByClassName("setup") for (var i = 0; i < setupElements.length; i += 1) { @@ -287,11 +287,11 @@ function score(team, points) { function leadJammer(team) { tgt = e("jammer-" + team); - var on = ! tgt.className; + var on = (tgt.className.indexOf("lead") == -1); - e("jammer-a").className = ""; - e("jammer-b").className = ""; - if (on) tgt.className = "lead"; + e("jammer-a").className = "jammer"; + e("jammer-b").className = "jammer"; + if (on) tgt.className = "lead jammer"; } function changeLogo(team) { @@ -622,21 +622,38 @@ function start() { } +function fgColor(color) { + var v = 0 + + for (var i = 0; i < 3; i += 1) { + v += parseInt(color.substr(1+i*2, 2), 16) + } + if (v / 3 >= 0x88) { + return "#000000" + } else { + return "#ffffff" + } +} + function recolor(team) { var i = e("img-" + team) var k = e("kitty-" + team) - var n = e("name-" + team) + var t = e("team-" + team) var color = e("color-" + team).value - i.style.display = "none" - k.style.display = "inline" - n.style.backgroundColor = color - kitty(k.getContext("2d"), color) + if (k.style) { + i.style.display = "none" + k.style.display = "inline" + kitty(k.getContext("2d"), color) + } else { + t.style.backgroundColor = color + t.style.color = fgColor(color) + } } function resize() { - var w = window.innerWidth / 7 - var h = window.innerHeight / 5 + var w = window.innerWidth / Number(document.body.getAttribute("data-x") || 7) + var h = window.innerHeight / Number(document.body.getAttribute("data-y") || 5) var fs = Math.min(w, h) document.body.style.fontSize = Math.min(w, h) + 'px'