From 15b3dabc20a51ae752126b2720a334076747de45 Mon Sep 17 00:00:00 2001
From: Dave <davepeck@gmail.com>
Date: Wed, 17 Apr 2024 12:27:28 -0700
Subject: [PATCH] More annoyances.

---
 .../vb/templates/components/countdown.dhtml   | 116 +++++++++---------
 server/vb/templates/school.dhtml              |  23 +++-
 2 files changed, 80 insertions(+), 59 deletions(-)

diff --git a/server/vb/templates/components/countdown.dhtml b/server/vb/templates/components/countdown.dhtml
index 505f4e7..a289453 100644
--- a/server/vb/templates/components/countdown.dhtml
+++ b/server/vb/templates/components/countdown.dhtml
@@ -14,9 +14,11 @@
     }
   </style>
   <p>{{ contest.name }} ends in</p>
-  <div class="countdown" data-end-at="{{ contest.end_at|date:'c' }}"
-    data-number-color="{{ school.logo.action_text_color }}" data-number-bg-color="{{ school.logo.action_color }}"
-    data-colon-color="{{ school.logo.bg_text_color }}">
+  <div class="countdown"
+       data-end-at="{{ contest.end_at|date:'c' }}"
+       data-number-color="{{ school.logo.action_text_color }}"
+       data-number-bg-color="{{ school.logo.action_color }}"
+       data-colon-color="{{ school.logo.bg_text_color }}">
     <style>
       me {
         --number-color: transparent;
@@ -53,67 +55,69 @@
       }
     </style>
     <script>
-      /**
-       * Countdown to a deadline.
-       * 
-       * @param {HTMLElement} self element containing the countdown.
-       * @returns {void}
-       */
-      function countdown(self) {
-        // compute the deadline
-        const deadline = new Date(self.dataset.endAt);
-        const deadlineTime = deadline.getTime();
+        (function() {
+            /**
+             * Countdown to a deadline.
+             * 
+             * @param {HTMLElement} self element containing the countdown.
+             * @returns {void}
+             */
+            function countdown(self) {
+                // compute the deadline
+                const deadline = new Date(self.dataset.endAt);
+                const deadlineTime = deadline.getTime();
 
-        // set the number and colon colors
-        self.style.setProperty('--number-color', self.dataset.numberColor);
-        self.style.setProperty('--number-bg-color', self.dataset.numberBgColor);
-        self.style.setProperty('--colon-color', self.dataset.colonColor);
+                // set the number and colon colors
+                self.style.setProperty('--number-color', self.dataset.numberColor);
+                self.style.setProperty('--number-bg-color', self.dataset.numberBgColor);
+                self.style.setProperty('--colon-color', self.dataset.colonColor);
 
-        // get the number elements
-        const h0 = self.querySelector('[data-number=h0]');
-        const h1 = self.querySelector('[data-number=h1]');
-        const m0 = self.querySelector('[data-number=m0]');
-        const m1 = self.querySelector('[data-number=m1]');
-        const s0 = self.querySelector('[data-number=s0]');
-        const s1 = self.querySelector('[data-number=s1]');
-        const numbers = [h0, h1, m0, m1, s0, s1];
+                // get the number elements
+                const h0 = self.querySelector('[data-number=h0]');
+                const h1 = self.querySelector('[data-number=h1]');
+                const m0 = self.querySelector('[data-number=m0]');
+                const m1 = self.querySelector('[data-number=m1]');
+                const s0 = self.querySelector('[data-number=s0]');
+                const s1 = self.querySelector('[data-number=s1]');
+                const numbers = [h0, h1, m0, m1, s0, s1];
 
-        /** Update the countdown. */
-        function updateCountdown() {
-          const now = new Date().getTime();
-          const diff = deadlineTime - now;
+                /** Update the countdown. */
+                function updateCountdown() {
+                    const now = new Date().getTime();
+                    const diff = deadlineTime - now;
 
-          if (diff <= 0) {
-            clearInterval(interval);
-            numbers.forEach(number => number.textContent = '0');
-            return;
-          }
+                    if (diff <= 0) {
+                        clearInterval(interval);
+                        numbers.forEach(number => number.textContent = '0');
+                        return;
+                    }
 
-          const hours = Math.floor(diff / (1000 * 60 * 60));
-          const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
-          const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+                    const hours = Math.floor(diff / (1000 * 60 * 60));
+                    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+                    const seconds = Math.floor((diff % (1000 * 60)) / 1000);
 
-          const h0digit = Math.floor(hours / 10);
-          const h1digit = hours % 10;
-          const m0digit = Math.floor(minutes / 10);
-          const m1digit = minutes % 10;
-          const s0digit = Math.floor(seconds / 10);
-          const s1digit = seconds % 10;
+                    const h0digit = Math.floor(hours / 10);
+                    const h1digit = hours % 10;
+                    const m0digit = Math.floor(minutes / 10);
+                    const m1digit = minutes % 10;
+                    const s0digit = Math.floor(seconds / 10);
+                    const s1digit = seconds % 10;
 
-          numbers[0].innerText = h0digit.toString();
-          numbers[1].innerText = h1digit.toString();
-          numbers[2].innerText = m0digit.toString();
-          numbers[3].innerText = m1digit.toString();
-          numbers[4].innerText = s0digit.toString();
-          numbers[5].innerText = s1digit.toString();
-        }
+                    numbers[0].innerText = h0digit.toString();
+                    numbers[1].innerText = h1digit.toString();
+                    numbers[2].innerText = m0digit.toString();
+                    numbers[3].innerText = m1digit.toString();
+                    numbers[4].innerText = s0digit.toString();
+                    numbers[5].innerText = s1digit.toString();
+                }
 
-        updateCountdown();
-        const interval = setInterval(updateCountdown, 1000);
-      }
+                updateCountdown();
+                const interval = setInterval(updateCountdown, 1000);
+            }
 
-      const self = me();
-      onloadAdd(() => countdown(self));
+            const self = me();
+            onloadAdd(() => countdown(self));
+        })();
     </script>
     <span class="number" data-number="h0">&nbsp;</span>
     <span class="number" data-number="h1">&nbsp;</span>
@@ -124,4 +128,4 @@
     <span class="number" data-number="s0">&nbsp;</span>
     <span class="number" data-number="s1">&nbsp;</span>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/server/vb/templates/school.dhtml b/server/vb/templates/school.dhtml
index 3bcefd9..0194e38 100644
--- a/server/vb/templates/school.dhtml
+++ b/server/vb/templates/school.dhtml
@@ -50,8 +50,25 @@
         margin: 1.5rem 0;
       }
     </style>
-    <main style="background-color: {{ school.logo.bg_color }};
-                 color: {{ school.logo.bg_text_color }}">
+    <main data-bg-color="{{ school.logo.bg_color }}"
+          data-color="{{ school.logo.bg_text_color }}">
+      <style>
+        me {
+          --main-color: transparent;
+          --main-bg-color: transparent;
+          color: var(--main-color);
+          background-color: var(--main-bg-color);
+        }
+      </style>
+      <script>
+          (function() {
+              const self = me();
+              onloadAdd(() => {
+                  self.style.setProperty('--main-color', self.dataset.color);
+                  self.style.setProperty('--main-bg-color', self.dataset.bgColor);
+              });
+          })();
+      </script>
       <div class="container">
         {% if current_contest %}
           {% include "components/countdown.dhtml" with contest=current_contest %}
@@ -65,7 +82,7 @@
           <p>There is no contest at this time. TODO: show something useful in this state?</p>
         {% endif %}
         <div class="button-holder">
-          {% include "components/button.dhtml" with text="Check my voter status" bg_color=school.logo.action_color color=school.logo.action_text_color %}
+          {% include "components/button.dhtml" with text="Check my voter status" href="./check/" bg_color=school.logo.action_color color=school.logo.action_text_color %}
         </div>
       </div>
     </main>