From a0f9cd3f0ae397e27dcab63084b5ae34345a7d34 Mon Sep 17 00:00:00 2001
From: Michael Vasseur <14887731+vmcj@users.noreply.github.com>
Date: Sun, 8 Dec 2024 17:19:48 +0100
Subject: [PATCH] Move all inline style to dedicated endpoint

We rendered the <style> within the <body> which is not valid. By moving
it to a dedicated endpoint we also save a bit of bandwith as this is
content which stays static during the contest.
---
 .github/jobs/webstandard.sh                    |  2 +-
 webapp/src/Controller/PublicController.php     |  8 ++++++++
 webapp/src/Service/DOMJudgeService.php         | 10 ++++++++++
 webapp/templates/base.html.twig                |  1 +
 .../partials/scoreboard_table.html.twig        | 18 ------------------
 webapp/templates/public/dynamic.css.twig       | 18 ++++++++++++++++++
 6 files changed, 38 insertions(+), 19 deletions(-)
 create mode 100644 webapp/templates/public/dynamic.css.twig
diff --git a/.github/jobs/webstandard.sh b/.github/jobs/webstandard.sh
index 66d5641aa6..9eefc8d16d 100755
--- a/.github/jobs/webstandard.sh
+++ b/.github/jobs/webstandard.sh
@@ -113,7 +113,7 @@ if [ "$TEST" = "w3cval" ]; then
     unzip -q vnu.linux.zip
     section_end
 
-    FLTR='--filterpattern .*autocomplete.*|.*style.*|.*role=tab.*|.*descendant.*|.*Stray.*|.*attribute.*|.*Forbidden.*|.*stream.*|.*obsolete.*'
+    FLTR='--filterpattern .*autocomplete.*|.*role=tab.*|.*descendant.*|.*Stray.*|.*attribute.*|.*Forbidden.*|.*stream.*|.*obsolete.*'
     for typ in html css svg
     do
         section_start "Analyse with $typ"
diff --git a/webapp/src/Controller/PublicController.php b/webapp/src/Controller/PublicController.php
index f5581aa8d2..29deccc06a 100644
--- a/webapp/src/Controller/PublicController.php
+++ b/webapp/src/Controller/PublicController.php
@@ -100,6 +100,14 @@ public function scoreboardDataZipAction(
         return $this->dj->getScoreboardZip($request, $requestStack, $contest, $this->scoreboardService);
     }
 
+    #[Route(path: '/dynamic-css', name: 'get_dynamic_css')]
+    public function dynamicCSS(): Response {
+        $response = new Response();
+        $response->headers->set('Content-Type', 'text/css');
+        $response->setContent($this->renderView('public/dynamic.css.twig', $this->dj->getDynamicCSS()));
+	return $response;
+    }
+
     /**
      * Get the contest from the request, if any
      */
diff --git a/webapp/src/Service/DOMJudgeService.php b/webapp/src/Service/DOMJudgeService.php
index 8a442e6d25..b9780d453b 100644
--- a/webapp/src/Service/DOMJudgeService.php
+++ b/webapp/src/Service/DOMJudgeService.php
@@ -27,6 +27,7 @@
 use App\Entity\Submission;
 use App\Entity\Team;
 use App\Entity\TeamAffiliation;
+use App\Entity\TeamCategory;
 use App\Entity\Testcase;
 use App\Entity\User;
 use App\Utils\FreezeData;
@@ -1532,6 +1533,15 @@ public function getScoreboardZip(
         return Utils::streamZipFile($tempFilename, 'scoreboard.zip');
     }
 
+    /**
+     * @return array{'backgroundColors', array<TeamCategory>}
+     */
+    public function getDynamicCSS(): array {
+	$backgroundColors = array_map(fn($x) => ( $x->getColor() ?? '#FFFFFF' ), $this->em->getRepository(TeamCategory::class)->findAll());
+	$backgroundColors = array_merge($backgroundColors, ['#FFFF99']);
+	return ['backgroundColors' => $backgroundColors];
+    }
+
     private function allowJudge(ContestProblem $problem, Submission $submission, Language $language, bool $manualRequest): bool
     {
         if (!$problem->getAllowJudge() || !$language->getAllowJudge()) {
diff --git a/webapp/templates/base.html.twig b/webapp/templates/base.html.twig
index 895750ede8..07535ec5af 100644
--- a/webapp/templates/base.html.twig
+++ b/webapp/templates/base.html.twig
@@ -9,6 +9,7 @@
 
     <link rel="stylesheet" href="{{ asset("css/bootstrap.min.css") }}">
     <link rel="stylesheet" href="{{ asset("css/fontawesome-all.min.css") }}">
+    <link rel="stylesheet" href="{{ path('get_dynamic_css') }}">
     <script src="{{ asset("js/jquery.min.js") }}"></script>
     <script src="{{ asset("js/jquery.debounce.min.js") }}"></script>
     <script src="{{ asset("js/bootstrap.bundle.min.js") }}"></script>
diff --git a/webapp/templates/partials/scoreboard_table.html.twig b/webapp/templates/partials/scoreboard_table.html.twig
index 1d2591fc82..538971419d 100644
--- a/webapp/templates/partials/scoreboard_table.html.twig
+++ b/webapp/templates/partials/scoreboard_table.html.twig
@@ -578,24 +578,6 @@
     {% endif %}
 {% endif %}
 
-<style>
-    {% for color,i in backgroundColors %}
-        {% set colorClass = color | replace({"#": "_"}) %}
-
-        .cl{{ colorClass }} {
-            background-color: {{ color }};
-        }
-
-        {% set cMin = color|hexColorToRGBA(0) %}
-        {% set cMax = color|hexColorToRGBA(1) %}
-
-        .cl{{ colorClass }} .forceWidth.toolong:after {
-            background: linear-gradient(to right,
-                {{ cMin }} 0%,
-                {{ cMax }} 96%);
-        }
-    {% endfor %}
-</style>
 <script>
     document.querySelectorAll(".forceWidth:not(.toolong)").forEach(el => {
         if (el instanceof Element && el.scrollWidth > el.offsetWidth) {
diff --git a/webapp/templates/public/dynamic.css.twig b/webapp/templates/public/dynamic.css.twig
new file mode 100644
index 0000000000..9c3c85c63f
--- /dev/null
+++ b/webapp/templates/public/dynamic.css.twig
@@ -0,0 +1,18 @@
+{% autoescape false %}
+{% for i,color in backgroundColors %}
+    {% set colorClass = color | replace({"#": "_"}) %}
+
+    .cl{{ colorClass }} {
+        background-color: {{ color }};
+    }
+
+    {% set cMin = color|hexColorToRGBA(0) %}
+    {% set cMax = color|hexColorToRGBA(1) %}
+
+    .cl{{ colorClass }} .forceWidth.toolong:after {
+        background: linear-gradient(to right,
+            {{ cMin }} 0%,
+            {{ cMax }} 96%);
+    }
+{% endfor %}
+{% endautoescape %}
