what am i even doing

Author: mlc

src/Promo.tsx

@@ -1,4 +1,5 @@
 import type { FunctionComponent } from 'preact';
+import { useEffect, useState } from 'preact/compat';
 
 const dayLeftString = (days: number): string => {
   if (days === 0) {
@@ -10,15 +11,29 @@ const dayLeftString = (days: number): string => {
   }
 };
 
-const Promo: FunctionComponent = () => {
+const computeDaysLeft = () => {
   const now = Date.now();
-  const daysLeft = Math.floor((1752735600000 - now) / (86400 * 1000));
+  return Math.floor((1752735600000 - now) / 86_400_000);
+};
+
+const Promo: FunctionComponent = () => {
+  const [daysLeft, setDaysLeft] = useState(computeDaysLeft);
+  useEffect(() => {
+    const intervalId = setInterval(
+      () => setDaysLeft(computeDaysLeft()),
+      60_000
+    );
+    return () => clearInterval(intervalId);
+  }, []);
   if (daysLeft < 0) {
     return null;
   } else {
     return (
       <p class="votenote">
-        <strong>{dayLeftString(daysLeft)}</strong> Please consider{' '}
+        <strong class={daysLeft < 2 ? 'verystrong' : undefined}>
+          {dayLeftString(daysLeft)}
+        </strong>
+        {' Please consider '}
         <a target="_blank" href="https://www.youtube.com/shorts/4h8mYt6qnlw">
           voting for Jaspinko in the GeoGuessr Remix challenge
         </a>

src/style.css

@@ -59,6 +59,7 @@
   --main-bg-color: #222;
   --main-text-color: #ffe;
   --error-color: #e77;
+  --secondary-text-color: #cca;
   font-family: 'Inter', sans-serif;
   font-optical-sizing: auto;
   font-weight: 300;
@@ -101,6 +102,10 @@ b {
   font-weight: 550;
 }
 
+strong.verystrong {
+  font-weight: 800;
+}
+
 .selector {
   display: flex;
   flex-direction: row;
@@ -121,7 +126,7 @@ b {
 
 .hint {
   font-size: 0.75em;
-  color: #cca;
+  color: var(--secondary-text-color);
 }
 
 #game-params input:not([type]),