mirror of https://github.com/dirtbags/moth.git
Fix double-percentage scoreboard bug
This commit is contained in:
parent
78802261c9
commit
7fd55cc904
|
|
@ -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;}
|
||||||
|
|
|
||||||
|
|
@ -10,9 +10,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>
|
||||||
|
|
|
||||||
|
|
@ -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()
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue