Merge pull request #96 from dirtbags/neale

Fix double-percentage scoreboard bug
This commit is contained in:
int00h5525 2019-11-17 18:19:19 -06:00 committed by GitHub
commit 17a63cab30
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 238 additions and 215 deletions

View File

@ -60,18 +60,18 @@ input:invalid {
min-height: 3em; min-height: 3em;
border: solid black 2px; border: solid black 2px;
} }
#scoreboard { #rankings {
width: 100%; width: 100%;
position: relative; position: relative;
} }
#scoreboard span { #rankings span {
font-size: 75%; font-size: 75%;
display: inline-block; display: inline-block;
overflow: hidden; overflow: hidden;
height: 1.7em; height: 1.7em;
} }
#scoreboard span.teamname { #rankings span.teamname {
font-size: inherit; font-size: inherit;
color: white; color: white;
text-shadow: 0 0 3px black; text-shadow: 0 0 3px black;
@ -79,7 +79,7 @@ input:invalid {
position: absolute; position: absolute;
right: 0.2em; right: 0.2em;
} }
#scoreboard div * {white-space: nowrap;} #rankings div * {white-space: nowrap;}
.cat0, .cat8, .cat16 {background-color: #a6cee3; color: black;} .cat0, .cat8, .cat16 {background-color: #a6cee3; color: black;}
.cat1, .cat9, .cat17 {background-color: #1f78b4; color: white;} .cat1, .cat9, .cat17 {background-color: #1f78b4; color: white;}
.cat2, .cat10, .cat18 {background-color: #b2df8a; color: black;} .cat2, .cat10, .cat18 {background-color: #b2df8a; color: black;}

View File

@ -11,9 +11,9 @@
</head> </head>
<body class="wide"> <body class="wide">
<h4 id="location"></h4> <h4 id="location"></h4>
<section> <section class="rotate">
<canvas id="chart"></canvas> <div id="chart"></div>
<div id="scoreboard"></div> <div id="rankings"></div>
</section> </section>
<nav> <nav>
<ul> <ul>

View File

@ -1,224 +1,247 @@
// jshint asi:true // jshint asi:true
chartColors = [ function scoreboardInit() {
"rgb(255, 99, 132)",
"rgb(255, 159, 64)",
"rgb(255, 205, 86)",
"rgb(75, 192, 192)",
"rgb(54, 162, 235)",
"rgb(153, 102, 255)",
"rgb(201, 203, 207)"
]
function update(state) {
let element = document.getElementById("scoreboard")
let teamNames = state.teams
let pointsLog = state.points
// Every machine that's displaying the scoreboard helpfully stores the last 20 values of
// points.json for us, in case of catastrophe. Thanks, y'all!
//
// We have been doing some variation on this "everybody backs up the server state" trick since 2009.
// We have needed it 0 times.
let pointsHistory = JSON.parse(localStorage.getItem("pointsHistory")) || []
if (pointsHistory.length >= 20) {
pointsHistory.shift()
}
pointsHistory.push(pointsLog)
localStorage.setItem("pointsHistory", JSON.stringify(pointsHistory))
let teams = {}
let highestCategoryScore = {} // map[string]int
// Initialize data structures
for (let teamId in teamNames) {
teams[teamId] = {
categoryScore: {}, // map[string]int
overallScore: 0, // int
historyLine: [], // []{x: int, y: int}
name: teamNames[teamId],
id: teamId
}
}
// Dole out points
for (let entry of pointsLog) {
let timestamp = entry[0]
let teamId = entry[1]
let category = entry[2]
let points = entry[3]
let team = teams[teamId]
let score = team.categoryScore[category] || 0
score += points
team.categoryScore[category] = score
let highest = highestCategoryScore[category] || 0
if (score > highest) {
highestCategoryScore[category] = score
}
}
for (let entry of pointsLog) { chartColors = [
let timestamp = entry[0] "rgb(255, 99, 132)",
let teamId = entry[1] "rgb(255, 159, 64)",
let category = entry[2] "rgb(255, 205, 86)",
let points = entry[3] "rgb(75, 192, 192)",
"rgb(54, 162, 235)",
let team = teams[teamId] "rgb(153, 102, 255)",
"rgb(201, 203, 207)"
let score = team.categoryScore[category] || 0 ]
score += points
team.categoryScore[category] = score
let overall = 0
for (let cat in team.categoryScore) {
overall += team.categoryScore[cat] / highestCategoryScore[cat]
}
team.historyLine.push({t: new Date(timestamp * 1000), y: overall})
}
// Compute overall scores based on current highest
for (let teamId in teams) {
let team = teams[teamId]
team.overallScore = 0
for (let cat in team.categoryScore) {
team.overallScore += team.categoryScore[cat] / highestCategoryScore[cat]
}
}
// Sort by team score
function teamCompare(a, b) {
return a.overallScore - b.overallScore
}
// Figure out how to order each team on the scoreboard
let winners = []
for (let teamId in teams) {
winners.push(teams[teamId])
}
winners.sort(teamCompare)
winners.reverse()
// Clear out the element we're about to populate
Array.from(element.childNodes).map(e => e.remove())
let maxWidth = 100 / Object.keys(highestCategoryScore).length
for (let team of winners) {
let row = document.createElement("div")
let ncat = 0
for (let category in highestCategoryScore) {
let catHigh = highestCategoryScore[category]
let catTeam = team.categoryScore[category] || 0
let catPct = catTeam / catHigh
let width = maxWidth * catPct
let bar = document.createElement("span")
bar.classList.add("category")
bar.classList.add("cat" + ncat)
bar.style.width = width + "%"
bar.textContent = category + ": " + catTeam
bar.title = bar.textContent
row.appendChild(bar)
ncat += 1
}
let te = document.createElement("span")
te.classList.add("teamname")
te.textContent = team.name
row.appendChild(te)
element.appendChild(row)
}
let datasets = [] function update(state) {
for (let i in winners) { for (let rotate of document.querySelectorAll(".rotate")) {
if (i > 5) { rotate.appendChild(rotate.firstElementChild)
break
} }
let team = winners[i]
let color = chartColors[i % chartColors.length] let element = document.getElementById("rankings")
datasets.push({ let teamNames = state.teams
label: team.name, let pointsLog = state.points
backgroundColor: color,
borderColor: color, // Every machine that's displaying the scoreboard helpfully stores the last 20 values of
data: team.historyLine, // points.json for us, in case of catastrophe. Thanks, y'all!
lineTension: 0, //
fill: false // We have been doing some variation on this "everybody backs up the server state" trick since 2009.
}) // We have needed it 0 times.
} let pointsHistory = JSON.parse(localStorage.getItem("pointsHistory")) || []
let config = { if (pointsHistory.length >= 20) {
type: "line", pointsHistory.shift()
data: { }
datasets: datasets pointsHistory.push(pointsLog)
}, localStorage.setItem("pointsHistory", JSON.stringify(pointsHistory))
options: {
responsive: true, let teams = {}
scales: { let highestCategoryScore = {} // map[string]int
xAxes: [{
display: true, // Initialize data structures
type: "time", for (let teamId in teamNames) {
time: { teams[teamId] = {
tooltipFormat: "ll HH:mm" categoryScore: {}, // map[string]int
}, overallScore: 0, // int
scaleLabel: { historyLine: [], // []{x: int, y: int}
display: true, name: teamNames[teamId],
labelString: "Time" id: teamId
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: "Points"
}
}]
},
tooltips: {
mode: "index",
intersect: false
},
hover: {
mode: "nearest",
intersect: true
} }
} }
// Dole out points
for (let entry of pointsLog) {
let timestamp = entry[0]
let teamId = entry[1]
let category = entry[2]
let points = entry[3]
let team = teams[teamId]
let score = team.categoryScore[category] || 0
score += points
team.categoryScore[category] = score
let highest = highestCategoryScore[category] || 0
if (score > highest) {
highestCategoryScore[category] = score
}
}
for (let teamId in teamNames) {
teams[teamId].categoryScore = {}
}
for (let entry of pointsLog) {
let timestamp = entry[0]
let teamId = entry[1]
let category = entry[2]
let points = entry[3]
let team = teams[teamId]
let score = team.categoryScore[category] || 0
score += points
team.categoryScore[category] = score
let overall = 0
for (let cat in team.categoryScore) {
overall += team.categoryScore[cat] / highestCategoryScore[cat]
}
team.historyLine.push({t: new Date(timestamp * 1000), y: overall})
}
// Compute overall scores based on current highest
for (let teamId in teams) {
let team = teams[teamId]
team.overallScore = 0
for (let cat in team.categoryScore) {
team.overallScore += team.categoryScore[cat] / highestCategoryScore[cat]
}
}
// Sort by team score
function teamCompare(a, b) {
return a.overallScore - b.overallScore
}
// Figure out how to order each team on the scoreboard
let winners = []
for (let teamId in teams) {
winners.push(teams[teamId])
}
winners.sort(teamCompare)
winners.reverse()
// Clear out the element we're about to populate
Array.from(element.childNodes).map(e => e.remove())
let maxWidth = 100 / Object.keys(highestCategoryScore).length
for (let team of winners) {
let row = document.createElement("div")
let ncat = 0
for (let category in highestCategoryScore) {
let catHigh = highestCategoryScore[category]
let catTeam = team.categoryScore[category] || 0
let catPct = catTeam / catHigh
let width = maxWidth * catPct
console.log(catHigh, catTeam, catPct)
let bar = document.createElement("span")
bar.classList.add("category")
bar.classList.add("cat" + ncat)
bar.style.width = width + "%"
bar.textContent = category + ": " + catTeam
bar.title = bar.textContent
row.appendChild(bar)
ncat += 1
}
let te = document.createElement("span")
te.classList.add("teamname")
te.textContent = team.name
row.appendChild(te)
element.appendChild(row)
}
let datasets = []
for (let i in winners) {
if (i > 5) {
break
}
let team = winners[i]
let color = chartColors[i % chartColors.length]
datasets.push({
label: team.name,
backgroundColor: color,
borderColor: color,
data: team.historyLine,
lineTension: 0,
fill: false
})
}
let config = {
type: "line",
data: {
datasets: datasets
},
options: {
responsive: true,
scales: {
xAxes: [{
display: true,
type: "time",
time: {
tooltipFormat: "ll HH:mm"
},
scaleLabel: {
display: true,
labelString: "Time"
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: "Points"
}
}]
},
tooltips: {
mode: "index",
intersect: false
},
hover: {
mode: "nearest",
intersect: true
}
}
}
let chart = document.querySelector("#chart")
if (chart) {
let canvas = chart.querySelector("canvas")
if (! canvas) {
canvas = document.createElement("canvas")
chart.appendChild(canvas)
}
let myline = new Chart(canvas.getContext("2d"), config)
myline.update()
}
} }
let ctx = document.getElementById("chart").getContext("2d") function refresh() {
window.myline = new Chart(ctx, config) fetch("points.json")
window.myline.update() .then(resp => {
} return resp.json()
})
function once() { .then(obj => {
fetch("points.json") update(obj)
.then(resp => { })
return resp.json() .catch(err => {
}) console.log(err)
.then(obj => { })
update(obj)
})
.catch(err => {
console.log(err)
})
}
function init() {
let base = window.location.href.replace("scoreboard.html", "")
let location = document.querySelector("#location")
if (location) {
location.textContent = base
} }
setInterval(once, 60000) function init() {
once() let base = window.location.href.replace("scoreboard.html", "")
let location = document.querySelector("#location")
if (location) {
location.textContent = base
}
setInterval(refresh, 60000)
refresh()
}
init()
} }
if (document.readyState === "loading") { if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", init) document.addEventListener("DOMContentLoaded", scoreboardInit)
} else { } else {
init() scoreboardInit()
} }