Integrate Ken's "monarch of the category"

Added responsive design elements and separated the scores from the te…

See merge request devs/moth!170

theme/scoreboard.css

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

theme/scoreboard.mjs

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