neale
/
woozle-scoreboard
mirror of https://github.com/nealey/woozle-scoreboard
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Seems to work

This commit is contained in:
Neale Pickett 2014-02-15 11:32:00 -07:00
parent 01df4571d0
commit 1f8dd3e48c
7 changed files with 56 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
TODO
View File

@ -1,7 +1,2 @@
* User-Provided Logos * chrome.fileSystem.retainEntry?
* Default to Kitty
* Add Color Picker
* chrome.fileSystem.retainEntry
* onload handler: check if width=0 and height=0
* use chrome.power to keep the display on * use chrome.power to keep the display on

2
manifest.json
View File

@ -4,7 +4,7 @@
"short_name": "__MSG_appShortName__", "short_name": "__MSG_appShortName__",
"description": "__MSG_appDesc__", "description": "__MSG_appDesc__",
"author": "Neale Pickett <neale@woozle.org>", "author": "Neale Pickett <neale@woozle.org>",
"version": "6.2.1", "version": "7.0β1",
"app": { "app": {
"background": { "background": {
"scripts": ["res/background.js"] "scripts": ["res/background.js"]

BIN
res/ic_picture.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 544 B

2
res/kitty.js
View File

@ -3,7 +3,7 @@
// If you are reading this, there's probably a nicer converter out now. // If you are reading this, there's probably a nicer converter out now.
// But this seems to work okay so it may not be worth the effort. // But this seems to work okay so it may not be worth the effort.
var kitty = function(ctx, kittyColor) { function kitty(ctx, kittyColor) {
var scaleBase = 0.1098503139616503 var scaleBase = 0.1098503139616503
var scaleX = scaleBase * ctx.canvas.width / 100 var scaleX = scaleBase * ctx.canvas.width / 100

17
res/scoreboard.css
View File

@ -61,21 +61,29 @@ input[readonly] {
text-align: center; text-align: center;
} }
.logo {
text-align: center;
}
.logo img { .logo img {
max-width: 1.8em; max-width: 1.8em;
max-height: 2em; max-height: 2em;
display: none;
} }
.logo input { .logo input {
position: absolute; top: 30%;
top: 0;
font-size: 10pt; font-size: 10pt;
vertical-align: top;
max-height: 15pt;
border: none;
} }
.logo img { .setup {
display: none; background: rgba(0, 255,0, 0.3);
} }
.timeouts { .timeouts {
position: absolute; position: absolute;
font-size: 50%; font-size: 50%;
@ -147,7 +155,6 @@ input[readonly] {
#preset { #preset {
top: 40%; top: 40%;
color: cyan;
} }
#jamtext { #jamtext {

30
res/scoreboard.html
View File

@ -26,35 +26,37 @@
</head> </head>
<body> <body>
<div id="scoreboard"> <div id="scoreboard">
<p class="left"> <div class="left">
<span class="logo" id="logo-a"> <div class="logo" id="logo-a">
<canvas class="kitty" id="kitty-a"></canvas>
<input type="button" class="setup" id="load-a" value="Load...">
<img class="img" id="img-a" src="" alt="A"> <img class="img" id="img-a" src="" alt="A">
</span> <canvas class="kitty" id="kitty-a"></canvas>
<input type="color" class="setup color" id="color-a" value="#666666">
<input type="image" class="setup load" id="load-a" src="ic_picture.png">
</div>
<span class="timeouts" id="timeouts-a">3</span> <span class="timeouts" id="timeouts-a">3</span>
<span class="jammer" id="jammer-a">★</span> <span class="jammer" id="jammer-a">★</span>
<span class="score" id="score-a">-</span> <span class="score" id="score-a">-</span>
</p> </div>
<p class="right"> <div class="right">
<span class="logo" id="logo-b"> <div class="logo" id="logo-b">
<canvas class="kitty" id="kitty-b"></canvas>
<input type="button" class="setup" id="load-b" value="Load...">
<img class="img" id="img-b" src="" alt="B"> <img class="img" id="img-b" src="" alt="B">
</span> <canvas class="kitty" id="kitty-b"></canvas>
<input type="color" class="setup color" id="color-b" value="#ffffff">
<input type="image" class="setup load" id="load-b" src="ic_picture.png">
</div>
<span class="timeouts" id="timeouts-b">3</span> <span class="timeouts" id="timeouts-b">3</span>
<span class="jammer" id="jammer-b">★</span> <span class="jammer" id="jammer-b">★</span>
<span class="score" id="score-b">-</span> <span class="score" id="score-b">-</span>
</p> </div>
<p class="center"> <div class="center">
<input id="period" value="--:--"> <input id="period" value="--:--">
<span id="periodtext"></span> <span id="periodtext"></span>
<span class="setup" id="preset">-</span> <span class="setup" id="preset">-</span>
<input id="jam" value="-:--"> <input id="jam" value="-:--">
<span id="jamtext"></span> <span id="jamtext"></span>
</p> </div>
</div> </div>
<div id="notice"> <div id="notice">

34
res/scoreboard.js
View File

@ -58,8 +58,6 @@ var jamtext = [
var period = 0; var period = 0;
var jamno = 0; var jamno = 0;
var colors = ["#666", "#ffffff"];
var state = SETUP; var state = SETUP;
var timer_updates = []; var timer_updates = [];
@ -229,7 +227,13 @@ function transition(newstate) {
// Reset lead jammer indicators // Reset lead jammer indicators
e("jammer-a").className = ""; e("jammer-a").className = "";
e("jammer-b").className = ""; e("jammer-b").className = "";
e("preset").style.display = "none";
var setupElements = document.getElementsByClassName("setup")
for (var i = 0; i < setupElements.length; i += 1) {
var el = setupElements[i]
el.style.display = "none"
}
save(); save();
} }
@ -301,7 +305,7 @@ function changeLogo(team) {
function loaded(entry) { function loaded(entry) {
entry.file(setURL); entry.file(setURL);
e("kitty-" + team).style.display = "none" e("kitty-" + team).style.display = "none"
element.style.display = "block" element.style.display = "inline"
} }
chrome.fileSystem.chooseEntry( chrome.fileSystem.chooseEntry(
@ -320,7 +324,6 @@ function handle(event) {
var adj = event.shiftKey?-1:1; var adj = event.shiftKey?-1:1;
var mod = (event.ctrlKey || event.altKey); var mod = (event.ctrlKey || event.altKey);
var newstate; var newstate;
console.log(tgt.id)
switch (tgt.id) { switch (tgt.id) {
case "load-a": case "load-a":
@ -506,7 +509,6 @@ function save() {
chrome.storage.local.set( chrome.storage.local.set(
{ {
"preset": e("preset").innerHTML, "preset": e("preset").innerHTML,
"score_a": e("score-a").innerHTML, "score_a": e("score-a").innerHTML,
"score_b": e("score-b").innerHTML, "score_b": e("score-b").innerHTML,
"timeouts_a": e("timeouts-a").innerHTML, "timeouts_a": e("timeouts-a").innerHTML,
@ -600,6 +602,9 @@ function start() {
ei("close"); ei("close");
ei("preset"); ei("preset");
e("color-a").addEventListener("change", function() {rekitty("a")}, false);
e("color-b").addEventListener("change", function() {rekitty("b")}, false);
ei("periodtext").innerHTML = periodtext[period]; ei("periodtext").innerHTML = periodtext[period];
ei("jamtext").innerHTML = jamtext[3]; ei("jamtext").innerHTML = jamtext[3];
transition(); transition();
@ -617,6 +622,16 @@ function start() {
} }
function rekitty(team) {
var i = e("img-" + team)
var k = e("kitty-" + team)
var color = e("color-" + team).value
i.style.display = "none"
k.style.display = "inline"
kitty(k.getContext("2d"), color)
}
function resize() { function resize() {
var w = window.innerWidth / 7 var w = window.innerWidth / 7
var h = window.innerHeight / 5 var h = window.innerHeight / 5
@ -625,16 +640,17 @@ function resize() {
document.body.style.fontSize = Math.min(w, h) + 'px' document.body.style.fontSize = Math.min(w, h) + 'px'
// Now do kitty canvases // Now do kitty canvases
var kw = fs * 2 var kw = fs * 1.8
var kh = fs * 1.8 var kh = kw * 0.6883
var kitties = document.getElementsByClassName("kitty") var kitties = document.getElementsByClassName("kitty")
for (var i = 0; i < kitties.length; i += 1) { for (var i = 0; i < kitties.length; i += 1) {
k = kitties[i] k = kitties[i]
k.width = kw k.width = kw
k.height = kh k.height = kh
kitty(k.getContext("2d"), colors[i])
} }
rekitty("a")
rekitty("b")
} }
window.onload = start; window.onload = start;