Initial code for a mobile friendly scoreboard.

webapp/public/js/domjudge.js

@@ -246,9 +246,7 @@ function getHeartCol(row) {
 
 function getTeamname(row)
 {
-    var res = row.getAttribute("id");
-    if ( res === null ) return res;
-    return res.replace(/^team:/, '');
+    return row.getAttribute("data-team-id");
 }
 
 function toggle(id, show)
@@ -944,3 +942,54 @@ function initializeKeyboardShortcuts() {
         }
     });
 }
+
+// Make sure the items in the desktop scoreboard fit
+document.querySelectorAll(".desktop-scoreboard .forceWidth:not(.toolong)").forEach(el => {
+    if (el instanceof Element && el.scrollWidth > el.offsetWidth) {
+        el.classList.add("toolong");
+    }
+});
+
+/**
+ * Helper method to resize mobile team names and problem badges
+ */
+function resizeMobileTeamNamesAndProblemBadges() {
+    // Make team names fit on the screen, but only when the mobile
+    // scoreboard is visible
+    const mobileScoreboard = document.querySelector('.mobile-scoreboard');
+    if (mobileScoreboard.offsetWidth === 0) {
+        return;
+    }
+    const windowWidth = document.body.offsetWidth;
+    const teamNameMaxWidth = Math.max(10, windowWidth - 150);
+    const problemBadgesMaxWidth = Math.max(10, windowWidth - 78);
+    document.querySelectorAll(".mobile-scoreboard .forceWidth:not(.toolong)").forEach(el => {
+        el.classList.remove("toolong");
+        el.style.maxWidth = teamNameMaxWidth + 'px';
+        if (el instanceof Element && el.scrollWidth > el.offsetWidth) {
+            el.classList.add("toolong");
+        } else {
+            el.classList.remove("toolong");
+        }
+    });
+    document.querySelectorAll(".mobile-scoreboard .mobile-problem-badges:not(.toolong)").forEach(el => {
+        el.classList.remove("toolong");
+        el.style.maxWidth = problemBadgesMaxWidth + 'px';
+        if (el instanceof Element && el.scrollWidth > el.offsetWidth) {
+            el.classList.add("toolong");
+            const scale = el.offsetWidth / el.scrollWidth;
+            const offset = -1 * (el.scrollWidth - el.offsetWidth) / 2;
+            el.style.transform = `scale(${scale}) translateX(${offset}px)`;
+        } else {
+            el.classList.remove("toolong");
+            el.style.transform = null;
+        }
+    });
+}
+
+$(function() {
+    if (document.querySelector('.mobile-scoreboard')) {
+        window.addEventListener('resize', resizeMobileTeamNamesAndProblemBadges);
+        resizeMobileTeamNamesAndProblemBadges();
+    }
+});

webapp/public/style_domjudge.css

@@ -195,6 +195,9 @@ del {
     border-right: 1px solid silver;
     padding: 0;
 }
+.scoreboard td.no-border, .scoreboard th.no-border {
+    border: none;
+}
 .scoreboard td.score_cell {
     min-width: 4.2em;
     border-right: none;
@@ -219,6 +222,13 @@ del {
     display: block;
     overflow: hidden;
 }
+
+.mobile-problem-badges {
+    position: relative;
+    display: block;
+    white-space: nowrap;
+}
+
 .toolong:after {
     content: "";
     width: 30%;
@@ -274,7 +284,7 @@ img.affiliation-logo {
 .silver-medal { background-color: #aaa }
 .bronze-medal { background-color: #c08e55 }
 
-#scoresolv,#scoretotal { width: 2.5em; }
+#scoresolv,#scoretotal,#scoresolvmobile,#scoretotalmobile { width: 2.5em; }
 .scorenc,.scorett,.scorepl { text-align: center; width: 2ex; }
 .scorenc { font-weight: bold; }
 td.scorenc { border-color: silver; border-right: 0; }
@@ -699,3 +709,24 @@ blockquote {
     padding: 3px;
     border-radius: 5px;
 }
+
+.strike-diagonal {
+    position: relative;
+    text-align: center;
+}
+
+.strike-diagonal:before {
+    position: absolute;
+    content: "";
+    left: 0;
+    top: 50%;
+    right: 0;
+    border-top: 2px solid;
+    border-color: firebrick;
+
+    -webkit-transform:rotate(-35deg);
+    -moz-transform:rotate(-35deg);
+    -ms-transform:rotate(-35deg);
+    -o-transform:rotate(-35deg);
+    transform:rotate(-35deg);
+}

webapp/src/Twig/TwigExtension.php

@@ -23,6 +23,7 @@
 use App\Service\DOMJudgeService;
 use App\Service\EventLogService;
 use App\Service\SubmissionService;
+use App\Utils\Scoreboard\ScoreboardMatrixItem;
 use App\Utils\Utils;
 use Doctrine\Common\Collections\Collection;
 use Doctrine\ORM\EntityManagerInterface;
@@ -110,6 +111,7 @@ public function getFilters(): array
             new TwigFilter('fileTypeIcon', $this->fileTypeIcon(...)),
             new TwigFilter('problemBadge', $this->problemBadge(...), ['is_safe' => ['html']]),
             new TwigFilter('problemBadgeForContest', $this->problemBadgeForContest(...), ['is_safe' => ['html']]),
+            new TwigFilter('problemBadgeMaybe', $this->problemBadgeMaybe(...), ['is_safe' => ['html']]),
             new TwigFilter('printMetadata', $this->printMetadata(...), ['is_safe' => ['html']]),
             new TwigFilter('printWarningContent', $this->printWarningContent(...), ['is_safe' => ['html']]),
             new TwigFilter('entityIdBadge', $this->entityIdBadge(...), ['is_safe' => ['html']]),
@@ -1091,6 +1093,45 @@ public function problemBadge(ContestProblem $problem, bool $grayedOut = false):
         );
     }
 
+    public function problemBadgeMaybe(ContestProblem $problem, ScoreboardMatrixItem $matrixItem): string
+    {
+        $rgb        = Utils::convertToHex($problem->getColor() ?? '#ffffff');
+        if (!$matrixItem->isCorrect) {
+            $rgb = 'whitesmoke';
+        }
+        $background = Utils::parseHexColor($rgb);
+
+        // Pick a border that's a bit darker.
+        $darker = $background;
+        $darker[0] = max($darker[0] - 64, 0);
+        $darker[1] = max($darker[1] - 64, 0);
+        $darker[2] = max($darker[2] - 64, 0);
+        $border    = Utils::rgbToHex($darker);
+
+        // Pick the foreground text color based on the background color.
+        $foreground = ($background[0] + $background[1] + $background[2] > 450) ? '#000000' : '#ffffff';
+        if (!$matrixItem->isCorrect) {
+            $foreground = 'silver';
+            $border = 'linen';
+        }
+
+        $ret = sprintf(
+            '<span class="badge problem-badge" style="font-size: x-small; background-color: %s; min-width: 18px; border: 1px solid %s;"><span style="color: %s;">%s</span></span>',
+            $rgb,
+            $border,
+            $foreground,
+            $problem->getShortname()
+        );
+        if (!$matrixItem->isCorrect) {
+            if ($matrixItem->numSubmissionsPending > 0) {
+                $ret = '<span><span class="mobile-pending">' . $ret . '</span></span>';
+            } elseif ($matrixItem->numSubmissions > 0) {
+                $ret = '<span><span class="strike-diagonal">' . $ret . '</span></span>';
+            }
+        }
+        return $ret;
+    }
+
     public function problemBadgeForContest(Problem $problem, ?Contest $contest = null): string
     {
         $contest ??= $this->dj->getCurrentContest();

webapp/templates/partials/scoreboard.html.twig

@@ -18,31 +18,37 @@
     {% endif %}
 
     <div class="card" {% if refreshstop is defined %}data-ajax-refresh-stop="1"{% endif %}>
-        <div class="card-header" style="font-family: Roboto, sans-serif; display: flex;">
-            <span style="font-weight: bold;">{{ current_contest.name }}</span>
-            <span id="contesttimer">
-                {% if scoreboard is null %}
-                    {{ current_contest | printContestStart }}
-                {% elseif scoreboard.freezeData.showFinal(jury) %}
-                    {% if current_contest.finalizetime is empty %}
-                        preliminary results - not final
-                    {% else %}
-                        final standings
-                    {% endif %}
-                {% elseif scoreboard.freezeData.stopped %}
-                    contest over, waiting for results
-                {% elseif static %}
-                    {% set now = 'now'|date('U') %}
-                    {{ current_contest.starttime | printelapsedminutes(now) }}
-                {% else %}
-                    {% if current_contest.freezeData.started %}
-                        started:
+        <div class="card-header" style="font-family: Roboto, sans-serif;">
+            <div class="row">
+                <div class="col-md-6 col-12">
+                    <span style="font-weight: bold;">{{ current_contest.name }}</span>
+                </div>
+                <div class="col-md-6 col-12 text-md-end text-start">
+                    <span id="contesttimer">
+                    {% if scoreboard is null %}
+                        {{ current_contest | printContestStart }}
+                    {% elseif scoreboard.freezeData.showFinal(jury) %}
+                        {% if current_contest.finalizetime is empty %}
+                            preliminary results - not final
+                        {% else %}
+                            final standings
+                        {% endif %}
+                    {% elseif scoreboard.freezeData.stopped %}
+                        contest over, waiting for results
+                    {% elseif static %}
+                        {% set now = 'now'|date('U') %}
+                        {{ current_contest.starttime | printelapsedminutes(now) }}
                     {% else %}
-                        starts:
+                        {% if current_contest.freezeData.started %}
+                            started:
+                        {% else %}
+                            starts:
+                        {% endif %}
+                        {{ current_contest.starttime | printtime }} - ends: {{ current_contest.endtime | printtime }}
                     {% endif %}
-                    {{ current_contest.starttime | printtime }} - ends: {{ current_contest.endtime | printtime }}
-                {% endif %}
-            </span>
+                </span>
+                </div>
+            </div>
         </div>
 
         {% if static %}