Bapc2024

webapp/composer.json

@@ -8,9 +8,9 @@
 			"type": "package",
 			"package": {
 				"name": "fortawesome/font-awesome",
-				"version": "6.5.2",
+				"version": "6.6.0",
 				"dist": {
-					"url": "https://github.com/FortAwesome/Font-Awesome/releases/download/6.5.2/fontawesome-free-6.5.2-web.zip",
+					"url": "https://github.com/FortAwesome/Font-Awesome/releases/download/6.6.0/fontawesome-free-6.6.0-web.zip",
 					"type": "zip"
 				}
 			}

webapp/public/js/domjudge.js

@@ -944,3 +944,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%;
@@ -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 @@
             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 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>';
+            } else if ($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/jury/analysis/contest_overview.html.twig

@@ -345,6 +345,15 @@ nv.addGraph(function() {
   d3.select('#graph_problems svg')
       .datum(problem_stats)
       .call(chart);
+  // Hide bars with 0 height after rendering
+  chart.dispatch.on('renderEnd', function() {
+    d3.selectAll('#graph_problems .nv-bar').each(function(d) {
+      if (d.value === 0) {
+        d3.select(this).attr('height', 0);
+        d3.select(this).attr('y', chart.yAxis.scale()(0)); 
+      }
+    });
+  });
   nv.utils.windowResize(chart.update);
   return chart;
 });

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