Fix double-percentage scoreboard bug

This commit is contained in:
Neale Pickett 2019-11-15 13:40:05 -08:00
parent 78802261c9
commit 7fd55cc904
3 changed files with 238 additions and 215 deletions

View File

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

View File

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

View File

@ -1,6 +1,8 @@
// jshint asi:true
chartColors = [
function scoreboardInit() {
chartColors = [
"rgb(255, 99, 132)",
"rgb(255, 159, 64)",
"rgb(255, 205, 86)",
@ -8,10 +10,14 @@ chartColors = [
"rgb(54, 162, 235)",
"rgb(153, 102, 255)",
"rgb(201, 203, 207)"
]
]
function update(state) {
let element = document.getElementById("scoreboard")
function update(state) {
for (let rotate of document.querySelectorAll(".rotate")) {
rotate.appendChild(rotate.firstElementChild)
}
let element = document.getElementById("rankings")
let teamNames = state.teams
let pointsLog = state.points
@ -60,6 +66,10 @@ function update(state) {
}
}
for (let teamId in teamNames) {
teams[teamId].categoryScore = {}
}
for (let entry of pointsLog) {
let timestamp = entry[0]
let teamId = entry[1]
@ -115,6 +125,8 @@ function update(state) {
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)
@ -188,12 +200,20 @@ function update(state) {
}
}
let ctx = document.getElementById("chart").getContext("2d")
window.myline = new Chart(ctx, config)
window.myline.update()
}
let chart = document.querySelector("#chart")
if (chart) {
let canvas = chart.querySelector("canvas")
if (! canvas) {
canvas = document.createElement("canvas")
chart.appendChild(canvas)
}
function once() {
let myline = new Chart(canvas.getContext("2d"), config)
myline.update()
}
}
function refresh() {
fetch("points.json")
.then(resp => {
return resp.json()
@ -204,21 +224,24 @@ function once() {
.catch(err => {
console.log(err)
})
}
}
function init() {
function init() {
let base = window.location.href.replace("scoreboard.html", "")
let location = document.querySelector("#location")
if (location) {
location.textContent = base
}
setInterval(once, 60000)
once()
setInterval(refresh, 60000)
refresh()
}
init()
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", init)
document.addEventListener("DOMContentLoaded", scoreboardInit)
} else {
init()
scoreboardInit()
}