neale/moth
neale
/
moth
mirror of https://github.com/dirtbags/moth.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Made fixes to timeline and all scoreboard views

This commit is contained in:
osboxes.org 2017-11-15 00:26:27 -05:00
parent 23de87fe4c
commit c212b818aa
3 changed files with 73 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
www/points.json
View File

@ -309,6 +309,14 @@
[1429603308, "23", "codebreaking", 5], [1429603308, "23", "codebreaking", 5],
[1429603374, "23", "js", 1], [1429603374, "23", "js", 1],
[1429603607, "16", "net-re", 250], [1429603607, "16", "net-re", 250],
[1429603607, "16", "net-ra", 250],
[1429603607, "16", "net-ri", 250],
[1429603607, "16", "net-ro", 250],
[1429603607, "16", "net-ru", 250],
[1429603607, "16", "net-re", 250],
[1429603607, "16", "net-ry", 250],
[1429603607, "16", "net-rv", 250],
[1429603607, "16", "net-rz", 250],
[1429603931, "11", "net-re", 800] [1429603931, "11", "net-re", 800]
], ],
"teams": { "teams": {

20
www/scoreboard-llnl-timeline.html
View File

@ -35,6 +35,26 @@ function updateType(newType)
function init() { function init() {
var sb = document.getElementById("scoreboard"); var sb = document.getElementById("scoreboard");
scoreboard(sb, true, type, interval); scoreboard(sb, true, type, interval);
window.addEventListener("resize", reScoreboardCaller);
}
var resizeCallback;
function reScoreboardCaller()
{
if(resizeCallback)
{
clearInterval(resizeCallback);
}
resizeCallback = setInterval(reScoreboard, 400);
}
function reScoreboard()
{
clearInterval(resizeCallback);
console.log("resizing");
var sb = document.getElementById("scoreboard");
scoreboard(sb, true, type, interval);
} }
window.addEventListener("load", preinit); window.addEventListener("load", preinit);

67
www/scoreboard-llnl.js
View File

@ -24,7 +24,7 @@ function scoreboard(element, continuous, mode, interval) {
clearInterval(updateInterval); clearInterval(updateInterval);
} }
function update(state) { function update(state) {
console.log("Updating"); //console.log("Updating");
var teamnames = state["teams"]; var teamnames = state["teams"];
var pointslog = state["points"]; var pointslog = state["points"];
var highscore = {}; var highscore = {};
@ -130,7 +130,7 @@ function scoreboard(element, continuous, mode, interval) {
if(mode == "time") if(mode == "time")
{ {
var colorScale = d3.schemeCategory10; var colorScale = d3.schemeCategory20;
var teamLines = {}; var teamLines = {};
var reverseTeam = {}; var reverseTeam = {};
@ -161,7 +161,7 @@ function scoreboard(element, continuous, mode, interval) {
var graph = document.createElement("svg"); var graph = document.createElement("svg");
graph.id = "graph"; graph.id = "graph";
graph.style.width="90%"; graph.style.width="100%";
graph.style.height="40em"; graph.style.height="40em";
graph.style.backgroundColor = "white"; graph.style.backgroundColor = "white";
graph.style.display = "table"; graph.style.display = "table";
@ -172,6 +172,7 @@ function scoreboard(element, continuous, mode, interval) {
holdingDiv.appendChild(graph); holdingDiv.appendChild(graph);
var margins = 40; var margins = 40;
var marginsX = 120;
var width = graph.offsetWidth; var width = graph.offsetWidth;
var height = graph.offsetHeight; var height = graph.offsetHeight;
@ -179,7 +180,7 @@ function scoreboard(element, continuous, mode, interval) {
//var xScale = d3.scaleLinear().range([minTime, maxTime]); //var xScale = d3.scaleLinear().range([minTime, maxTime]);
//var yScale = d3.scaleLinear().range([0, topActualScore]); //var yScale = d3.scaleLinear().range([0, topActualScore]);
var originTime = (maxTime - minTime) / 60; var originTime = (maxTime - minTime) / 60;
var xScale = d3.scaleLinear().range([margins, width - margins]); var xScale = d3.scaleLinear().range([marginsX, width - margins]);
xScale.domain([0, originTime]); xScale.domain([0, originTime]);
var yScale = d3.scaleLinear().range([height - margins, margins]); var yScale = d3.scaleLinear().range([height - margins, margins]);
yScale.domain([0, topActualScore]); yScale.domain([0, topActualScore]);
@ -237,7 +238,7 @@ function scoreboard(element, continuous, mode, interval) {
.data(curTeam) .data(curTeam)
.enter() .enter()
.append("line") .append("line")
.style("stroke", colorScale[curEntry]) .style("stroke", colorScale[curEntry * 2])
.attr("stroke-width", 4) .attr("stroke-width", 4)
.attr("class", "team_" + entry) .attr("class", "team_" + entry)
.style("z-index", maxNumEntry - curEntry) .style("z-index", maxNumEntry - curEntry)
@ -268,7 +269,7 @@ function scoreboard(element, continuous, mode, interval) {
.data(curTeam) .data(curTeam)
.enter() .enter()
.append("circle") .append("circle")
.style("fill", colorScale[curEntry]) .style("fill", colorScale[curEntry * 2])
.style("z-index", maxNumEntry - curEntry) .style("z-index", maxNumEntry - curEntry)
.attr("class", "team_" + entry) .attr("class", "team_" + entry)
.attr("r", 5) .attr("r", 5)
@ -304,18 +305,18 @@ function scoreboard(element, continuous, mode, interval) {
.text("Time (minutes)"); .text("Time (minutes)");
var legend = graph.append("g"); var legend = graph.append("g");
var legendRowHeight = 40; var legendRowHeight = (height) / 10;
legend.selectAll("rect") legend.selectAll("rect")
.data(winningTeams) .data(winningTeams)
.enter() .enter()
.append("rect") .append("rect")
.attr("class", function(d){ return "team_" + d; }) .attr("class", function(d){ return "team_" + d; })
.attr("fill", function(d, i){ return colorScale[i]; }) .attr("fill", function(d, i){ return colorScale[i * 2 + 1]; })
.style("z-index", function(d, i){ return i; }) .style("z-index", function(d, i){ return i; })
.attr("x", margins) .attr("x", 0)
.attr("y", function(d, i){ return margins + legendRowHeight * i; }) .attr("y", function(d, i){ return legendRowHeight * i; })
.attr("height", legendRowHeight) .attr("height", legendRowHeight)
.attr("width", 150) .attr("width", marginsX)
.on("mouseover", handleMouseoverLegend) .on("mouseover", handleMouseoverLegend)
.on("mouseout", handleMouseoutLegend); .on("mouseout", handleMouseoutLegend);
@ -326,12 +327,25 @@ function scoreboard(element, continuous, mode, interval) {
//.attr("class", function(d){ return "team_" + d; }) //.attr("class", function(d){ return "team_" + d; })
.attr("fill", "black") .attr("fill", "black")
.style("z-index", function(d, i){ return i; }) .style("z-index", function(d, i){ return i; })
.attr("dx", margins) .attr("dx", 0)
.attr("dy", function(d, i){ return margins + legendRowHeight * (i + .5); }) .attr("dy", function(d, i){ return legendRowHeight * (i + .5); })
.text(function(d){ return d; }) .text(function(d, i){ return i + ": " + d; })
.attr("dominant-baseline", "central") .attr("dominant-baseline", "central")
.style("pointer-events", "none"); .style("pointer-events", "none");
//legend.append("g").selectAll("text")
// .data(winningTeams)
// .enter()
// .append("text")
// .attr("class", function(d){ return "team_" + d; })
// .attr("fill", function(d, i){ return colorScale[i]; })
// .style("z-index", function(d, i){ return i; })
// .attr("dx", margins)
// .attr("dy", function(d, i){ return margins + legendRowHeight * (i); })
// .text(function(d){ return d; });
//.attr("dominant-baseline", "central");
//.style("pointer-events", "none");
function handleMouseover(d, i) function handleMouseover(d, i)
{ {
@ -350,8 +364,11 @@ function scoreboard(element, continuous, mode, interval) {
var curClass = d3.select(this).attr("class"); var curClass = d3.select(this).attr("class");
var zIndex = d3.select(this).style("z-index"); var zIndex = d3.select(this).style("z-index");
d3.select("body").selectAll("." + curClass) d3.select("body").selectAll("." + curClass)
.style("stroke", colorScale[maxNumEntry - zIndex]) .style("stroke", colorScale[(maxNumEntry - zIndex) * 2])
.style("fill", colorScale[maxNumEntry - zIndex]); .style("fill", colorScale[(maxNumEntry - zIndex) * 2]);
legend.selectAll("." + curClass)
.style("stroke", colorScale[(maxNumEntry - zIndex) * 2 + 1])
.style("fill", colorScale[(maxNumEntry - zIndex) * 2 + 1]);
d3.select("body").selectAll("text") d3.select("body").selectAll("text")
.style("stroke-width", 0); .style("stroke-width", 0);
} }
@ -396,8 +413,11 @@ function scoreboard(element, continuous, mode, interval) {
var curClass = d3.select(this).attr("class"); var curClass = d3.select(this).attr("class");
var zIndex = d3.select(this).style("z-index"); var zIndex = d3.select(this).style("z-index");
d3.select("body").selectAll("." + curClass) d3.select("body").selectAll("." + curClass)
.style("stroke", colorScale[maxNumEntry - zIndex]) .style("stroke", colorScale[(maxNumEntry - zIndex) * 2])
.style("fill", colorScale[maxNumEntry - zIndex]); .style("fill", colorScale[(maxNumEntry - zIndex) * 2]);
legend.selectAll("." + curClass)
.style("stroke", colorScale[(maxNumEntry - zIndex) * 2 + 1])
.style("fill", colorScale[(maxNumEntry - zIndex) * 2 + 1]);
d3.select("body").selectAll("text") d3.select("body").selectAll("text")
.style("stroke-width", 0); .style("stroke-width", 0);
} }
@ -419,8 +439,11 @@ function scoreboard(element, continuous, mode, interval) {
var curClass = d3.select(this).attr("class"); var curClass = d3.select(this).attr("class");
var zIndex = d3.select(this).style("z-index"); var zIndex = d3.select(this).style("z-index");
d3.select("body").selectAll("." + curClass) d3.select("body").selectAll("." + curClass)
.style("stroke", colorScale[zIndex]) .style("stroke", colorScale[zIndex * 2])
.style("fill", colorScale[zIndex]); .style("fill", colorScale[zIndex * 2]);
legend.selectAll("." + curClass)
.style("stroke", colorScale[(zIndex) * 2 + 1])
.style("fill", colorScale[(zIndex) * 2 + 1]);
d3.select("body").selectAll("text") d3.select("body").selectAll("text")
.style("stroke-width", 0); .style("stroke-width", 0);
} }
@ -485,7 +508,7 @@ function scoreboard(element, continuous, mode, interval) {
var numLeft = catHigh["total"] - catTeam; var numLeft = catHigh["total"] - catTeam;
//bar.classList.add("cat" + ncat); //bar.classList.add("cat" + ncat);
bar.style.backgroundColor = colorScale[ncat]; bar.style.backgroundColor = colorScale[ncat % 20];
bar.style.color = "white"; bar.style.color = "white";
bar.style.width = width + "%"; bar.style.width = width + "%";
bar.textContent = category + ": " + catTeam; bar.textContent = category + ": " + catTeam;
@ -500,7 +523,7 @@ function scoreboard(element, continuous, mode, interval) {
{ {
var noBar = document.createElement("span"); var noBar = document.createElement("span");
//noBar.classList.add("cat" + ncat); //noBar.classList.add("cat" + ncat);
noBar.style.backgroundColor = colorScale[ncat]; noBar.style.backgroundColor = colorScale[ncat % 20];
noBar.style.width = width + "%"; noBar.style.width = width + "%";
noBar.textContent = numLeft; noBar.textContent = numLeft;
noBar.title = bar.textContent; noBar.title = bar.textContent;