Compare commits

..

8 Commits

Author SHA1 Message Date
Neale Pickett 3d8c47d316 Integrate Ken's "monarch of the category" 2023-09-27 18:17:11 -06:00
Neale Pickett 5dfcb6324f Merge branch 'github/fork/knewbetter/scoreboard-js-dependency-loading' into 'libmoth'
Added responsive design elements and separated the scores from the te…

See merge request devs/moth!170
2023-09-28 00:01:06 +00:00
Neale Pickett 9071631353 more cleanup 2023-09-27 17:58:29 -06:00
Neale Pickett 43aec24d63 more cleanup 2023-09-27 17:57:30 -06:00
Neale Pickett b863955fdc Fully integrated 2023-09-27 17:56:40 -06:00
Neale Pickett b293a9f0e9 Add merged scoreboard.css 2023-09-27 17:15:51 -06:00
Neale Pickett 34e51848be Merge branch 'libmoth' into github/fork/knewbetter/scoreboard-js-dependency-loading 2023-09-27 17:15:37 -06:00
Ken Knudsen f7945fcf3b Added responsive design elements and separated the scores from the team names to reduce overlap. Use side-by-side view on large screens. 2021-08-13 00:22:15 +00:00
2 changed files with 40 additions and 65 deletions

View File

@ -5,48 +5,6 @@
}
}
#chart {
background-color: rgba(0, 0, 0, 0.8);
}
.logo {
text-align: center;
background-color: rgba(255, 255, 255, 0.2);
font-family: Montserrat, sans-serif;
font-weight: 500;
border-radius: 10px;
font-size: 1.2em;
}
.cyber {
color: black;
}
.fire {
color: #d94a1f;
}
.announcement.floating {
position: fixed;
bottom: 0;
width: 100hw;
max-width: inherit;
}
.announcement {
background-color: rgba(255,255,255,0.5);
color: black;
padding: 0.25em;
border-radius: 5px;
max-width: 20em;
text-align: center;
display: flex;
align-items: flex-end;
justify-content: space-around;
font-size: 1.3em;
flex-wrap: wrap;
}
.announcement div {
margin: 1em;
max-width: 45vw;
text-align: center;
}
.location {
color: #acf;
background-color: #0008;
@ -59,18 +17,6 @@
font-weight:bold;
text-decoration: underline;
}
.qrcode {
width: 30vw;
}
.examples {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.examples > div {
margin: 0.5em;
max-width: 40%;
}
/** Scoreboard */
#rankings {
@ -79,20 +25,23 @@
background-color: #000c;
}
#rankings div {
height: 1.4rem;
height: 1.2rem;
display: flex;
align-items: center;
}
#rankings div:nth-child(6n){
background-color: #ccc1;
background-color: #ccc3;
}
#rankings div:nth-child(6n+3) {
background-color: #0f01;
background-color: #0f03;
}
#rankings span {
font-size: 75%;
display: inline-block;
overflow: hidden;
height: 1.4em;
display: inline-block;
overflow: hidden;
}
#rankings span.category {
font-size: 80%;
}
#rankings span.teamname {
height: auto;
@ -103,6 +52,27 @@
position: absolute;
right: 0.2em;
}
#rankings span.teamname:hover,
#rankings span.category:hover {
width: inherit;
max-width: 100%;
}
.topscore::before {
content: "✩";
font-size: 75%;
vertical-align: top;
}
@media only screen and (max-width: 450px) {
#rankings span.teamname {
max-width: 6em;
text-overflow: ellipsis;
}
span.teampoints {
max-width: 80%;
}
}
#rankings div * {white-space: nowrap;}
.cat0, .cat8, .cat16 {background-color: #a6cee3; color: black;}
.cat1, .cat9, .cat17 {background-color: #1f78b4; color: white;}

View File

@ -61,17 +61,20 @@ async function update() {
let row = rankingsElement.appendChild(document.createElement("div"))
let heading = row.appendChild(document.createElement("span"))
heading.textContent = teamName
heading.classList.add("teamname")
let teamname = row.appendChild(document.createElement("span"))
teamname.textContent = teamName
teamname.classList.add("teamname")
let categoryNumber = 0
let teampoints = row.appendChild(document.createElement("span"))
teampoints.classList.add("teampoints")
for (let category of scores.Categories) {
let score = scores.CyFiCategoryScore(category, teamID)
if (!score) {
continue
}
// XXX: Figure out how to do this properly with flexbox
let block = row.appendChild(document.createElement("span"))
let points = scores.GetPoints(category, teamID)
let width = MaxScoreWidth * score / topScore
@ -79,7 +82,9 @@ async function update() {
block.textContent = category
block.title = `${points} points`
block.style.width = `${width}%`
block.classList.add(`cat${categoryNumber}`)
block.classList.add("category", `cat${categoryNumber}`)
block.classList.toggle("topscore", score == 1)
categoryNumber += 1
}
}