Improve hearts on scoreboard by using separate column

Author: nickygerritsen

webapp/public/js/domjudge.js

@@ -301,30 +301,20 @@ function getScoreboards(mobile)
 
 function getRank(row)
 {
-    return row.getElementsByTagName("td")[0];
+    return row.querySelector('.rank');
 }
 
 function getHeartCol(row) {
-    var tds = row.getElementsByTagName("td");
-    var td = null;
-    // search for td before the team name
-    for (var i = 1; i < 4; i++) {
-        if (tds[i].classList.contains("scoretn")) {
-            td = tds[i - 1];
+    const tds = row.getElementsByTagName("td");
+    let td = null;
+    // search for td to store the hearts
+    for (let i = 1; i < 5; i++) {
+        if (tds[i] && tds[i].classList.contains("heart")) {
+            td = tds[i];
             break;
         }
     }
-    if (td === null) {
-        td = tds[1];
-    }
-    if (td !== null) {
-        if (td.children.length) {
-            return td.children[0];
-        }
-        return td;
-    }
-
-    return null;
+    return td;
 }
 
 function getTeamname(row)
@@ -397,11 +387,10 @@ function toggle(id, show, mobile)
     });
 }
 
-function addHeart(rank, row, id, isFav, mobile)
+function getHeart(rank, row, id, isFav, mobile)
 {
-    var heartCol = getHeartCol(row);
     var iconClass = isFav ? "fas fa-heart" : "far fa-heart";
-    return heartCol.innerHTML + "<span class=\"heart " + iconClass + "\" onclick=\"toggle(" + id + "," + (isFav ? "false" : "true") + "," + mobile + ")\"></span>";
+    return "<span class=\"heart " + iconClass + "\" onclick=\"toggle(" + id + "," + (isFav ? "false" : "true") + "," + mobile + ")\"></span>";
 }
 
 function initFavouriteTeams()
@@ -426,20 +415,32 @@ function initFavouriteTeams()
             if (teamname === null) {
                 continue;
             }
-            var firstCol = getRank(scoreboard[j]);
+            let rankElement;
+            if (mobile) {
+                rankElement = getRank(scoreboard[j + 1]);
+            } else {
+                rankElement = getRank(scoreboard[j]);
+            }
             var heartCol = getHeartCol(scoreboard[j]);
-            var rank = firstCol.innerHTML;
+            if (!heartCol) {
+                continue;
+            }
+            var rank = rankElement.innerHTML.trim();
             for (var i = 0; i < favTeams.length; i++) {
                 if (teamname === favTeams[i]) {
                     found = true;
-                    heartCol.innerHTML = addHeart(rank, scoreboard[j], teamIndex, found, mobile);
+                    heartCol.innerHTML = getHeart(rank, scoreboard[j], teamIndex, found, mobile);
                     toAdd[cntFound] = scoreboard[j].cloneNode(true);
                     if (mobile) {
                         toAddMobile[cntFound] = scoreboard[j + 1].cloneNode(true);
                     }
-                    if (rank.trim().length === 0) {
+                    if (rank.length === 0) {
                         // make rank explicit in case of tie
-                        getRank(toAdd[cntFound]).innerHTML += lastRank;
+                        if (mobile) {
+                            getRank(toAddMobile[cntFound]).innerHTML += lastRank;
+                        } else {
+                            getRank(toAdd[cntFound]).innerHTML += lastRank;
+                        }
                     }
                     scoreboard[j].style.background = "lightyellow";
                     const scoretn = scoreboard[j].querySelector('.scoretn');
@@ -455,7 +456,7 @@ function initFavouriteTeams()
                 }
             }
             if (!found) {
-                heartCol.innerHTML = addHeart(rank, scoreboard[j], teamIndex, found, mobile);
+                heartCol.innerHTML = getHeart(rank, scoreboard[j], teamIndex, found, mobile);
             }
             if (rank !== "") {
                 lastRank = rank;

webapp/public/style_domjudge.css

@@ -198,6 +198,10 @@ del {
 .scoreboard td.no-border, .scoreboard th.no-border {
     border: none;
 }
+.scoreboard td.heart {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+}
 .scoreboard td.rank {
     padding-left: 0.3em;
     padding-right: 0.3em;

webapp/src/Controller/Jury/TeamAffiliationController.php

@@ -142,6 +142,7 @@ public function viewAction(Request $request, ScoreboardService $scoreboardServic
                 'ajax' => true,
             ],
             'maxWidth' => $this->config->get('team_column_width'),
+            'public' => false,
         ];
 
         if ($currentContest = $this->dj->getCurrentContest()) {

webapp/src/Controller/Jury/TeamController.php

@@ -247,6 +247,7 @@ public function viewAction(
             'showFlags' => (bool)$this->config->get('show_flags'),
             'showContest' => count($this->dj->getCurrentContests()) > 1,
             'maxWidth' => $this->config->get("team_column_width"),
+            'public' => false,
         ];
 
         $currentContest = $this->dj->getCurrentContest();

webapp/templates/partials/scoreboard_summary.html.twig

@@ -11,6 +11,9 @@
                     {% set summaryColspan = summaryColspan + 1 %}
                 {% endif %}
             {% endif %}
+            {% if public %}
+                {% set summaryColspan = summaryColspan + 1 %}
+            {% endif %}
             <td class="scoresummary" title="Summary" colspan="{{ summaryColspan }}">Summary</td>
             {% if enable_ranking %}
                 {% if scoreboard.showPoints %}

webapp/templates/partials/scoreboard_table.html.twig

@@ -30,10 +30,13 @@
 
 <table class="d-none d-md-table scoreboard desktop-scoreboard center {% if jury %}scoreboard_jury{% endif %}">
 
-    {% set teamColspan = 2 %}
+    {% set teamColspan = 3 %}
     {% if showAffiliationLogos %}
         {% set teamColspan = teamColspan + 1 %}
     {% endif %}
+    {% if not public %}
+        {% set teamColspan = teamColspan - 1 %}
+    {% endif %}
 
     {# output table column groups (for the styles) #}
     <colgroup>
@@ -51,6 +54,9 @@
         {% if showAffiliationLogos %}
             <col id="scorelogos"/>
         {% endif %}
+        {% if public %}
+            <col id="scorehearts"/>
+        {% endif %}
         <col id="scoreteamname"/>
     </colgroup>
     {% if enable_ranking %}
@@ -190,6 +196,9 @@
                     {% endif %}
                 </td>
             {% endif %}
+            {% if public %}
+                <td class="scoreaf heart"></td>
+            {% endif %}
             {% if color is null %}
                 {% set color = "#FFFFFF" %}
                 {% set colorClass = "_FFFFFF" %}
@@ -339,6 +348,9 @@
         {% if showAffiliationLogos %}
             <col id="scorelogosmobile"/>
         {% endif %}
+        {% if public %}
+            <col id="scoreheartmobile"/>
+        {% endif %}
         <col id="scoreteamnamemobile"/>
     </colgroup>
     {% if enable_ranking %}
@@ -352,6 +364,9 @@
     {% if showAffiliationLogos %}
         {% set teamColspan = teamColspan + 1 %}
     {% endif %}
+    {% if public %}
+        {% set teamColspan = teamColspan + 1 %}
+    {% endif %}
 
     <tr class="scoreheader" data-static="{{ static }}" style="font-size: 75%;">
         {% if enable_ranking %}
@@ -430,6 +445,9 @@
                 {% endif %}
             </td>
         {% endif %}
+        {% if public %}
+            <td class="scoreaf heart"></td>
+        {% endif %}
         {% if color is null %}
             {% set color = "#FFFFFF" %}
             {% set colorClass = "_FFFFFF" %}
@@ -483,7 +501,7 @@
         <tr style="height: 32px;">
             <td>
                 {# Only print rank when score is different from the previous team #}
-                <span class="d-block me-2">
+                <span class="d-block me-2 rank">
                     {% if not displayRank %}
                         ?
                     {% elseif previousTeam is null or scoreboard.scores[previousTeam.teamid].rank != score.rank %}
@@ -496,7 +514,10 @@
             {% if showAffiliationLogos %}
                 {% set problemSpan = 3 %}
             {% else %}
-            {% set problemSpan = 2 %}
+                {% set problemSpan = 2 %}
+            {% endif %}
+            {% if public %}
+                {% set problemSpan = problemSpan + 1 %}
             {% endif %}
             <td colspan="{{ problemSpan }}">
                 {% for problem in problems %}