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; 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

@ -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>

View File

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