Scoreboard changes:

* Consistent category colors
* Only show server URL when enabled
* HTML to display when there are no scores
This commit is contained in:
Neale Pickett 2023-11-16 22:18:16 -07:00
parent e4a8883f27
commit 610eb27430
5 changed files with 30 additions and 9 deletions

View File

@ -1,11 +1,12 @@
{ {
"TrackSolved": true, "TrackSolved": true,
"Scoreboard": { "Scoreboard": {
"DisplayServerURL": true, "DisplayServerURLWhenEnabled": true,
"ShowCategoryLeaders": true, "ShowCategoryLeaders": true,
"ReplayHistory": true, "ReplayHistory": true,
"ReplayFPS": 6, "ReplayFPS": 6,
"ReplayDurationMS": 2000, "ReplayDurationMS": 2000,
"NoScoresHtml": "<div class='notification'><h2>~ no scores ~</h2></div>",
"": "" "": ""
}, },
"Messages": "<!-- Messages can go here (HTML) -->", "Messages": "<!-- Messages can go here (HTML) -->",

View File

@ -367,8 +367,8 @@ class State {
Devel: obj.Config.Devel, Devel: obj.Config.Devel,
} }
/** True if the server is in enabled state */ /** True if the server is in enabled state, or if we don't know */
this.Enabled = obj.Enabled this.Enabled = obj.Enabled ?? true
/** Map from Team ID to Team Name /** Map from Team ID to Team Name
* @type {Object.<string,string>} * @type {Object.<string,string>}

View File

@ -18,6 +18,21 @@
text-decoration: underline; text-decoration: underline;
} }
.no-scores {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
min-height: calc(100vh - 2em);
}
.no-scores.hidden {
display: none;
}
.no-scores img {
object-fit: cover;
max-height: 60vh;
}
/** Scoreboard */ /** Scoreboard */
#rankings { #rankings {
width: 100%; width: 100%;

View File

@ -5,12 +5,11 @@
<link rel="stylesheet" href="basic.css"> <link rel="stylesheet" href="basic.css">
<link rel="stylesheet" href="scoreboard.css"> <link rel="stylesheet" href="scoreboard.css">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<script src="https://cdn.jsdelivr.net/npm/luxon@1.26.0"></script> <link rel="icon" href="luna-moth.svg">
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@0.2.1"></script>
<script type="module" src="scoreboard.mjs"></script> <script type="module" src="scoreboard.mjs"></script>
</head> </head>
<body> <body>
<div class="no-scores hidden"></div>
<div id="rankings"></div> <div id="rankings"></div>
<div class="location"></div> <div class="location"></div>
</body> </body>

View File

@ -42,17 +42,18 @@ async function update() {
console.warn("config.json has empty Scoreboard section") console.warn("config.json has empty Scoreboard section")
} }
let state = await server.GetState()
for (let e of document.querySelectorAll(".location")) { for (let e of document.querySelectorAll(".location")) {
e.textContent = common.BaseURL e.textContent = common.BaseURL
e.classList.toggle("hidden", !ScoreboardConfig.DisplayServerURL) e.classList.toggle("hidden", !(ScoreboardConfig.DisplayServerURLWhenEnabled && state.Enabled))
} }
let state = await server.GetState()
let rankingsElement = document.querySelector("#rankings") let rankingsElement = document.querySelector("#rankings")
let logSize = state.PointsLog.length let logSize = state.PointsLog.length
// Figure out the timing so that we can replay the scoreboard in about // Figure out the timing so that we can replay the scoreboard in about
// ReplayDurationMS, but no more than 24 frames per second. // ReplayDurationMS.
let frameModulo = 1 let frameModulo = 1
let delay = 0 let delay = 0
while (delay < (common.Second / ReplayFPS)) { while (delay < (common.Second / ReplayFPS)) {
@ -110,6 +111,11 @@ async function update() {
} }
await sleep(delay) await sleep(delay)
} }
for (let e of document.querySelectorAll(".no-scores")) {
e.innerHTML = ScoreboardConfig.NoScoresHtml
e.classList.toggle("hidden", frame > 0)
}
} }
function init() { function init() {