favicon

server.py

@@ -62,6 +62,7 @@ for _z in ZONES:
 ZONES[-1]["remaining_to_ms"] = 0
 
 STATIC_FILES = {
+    **{f"/favicon-{zone['name']}.svg": (f"favicon-{zone['name']}.svg", "image/svg+xml") for zone in ZONES},
     "/": ("index.html", "text/html; charset=utf-8"),
     "/index.html": ("index.html", "text/html; charset=utf-8"),
     "/app.js": ("app.js", "text/javascript; charset=utf-8"),

static/app.js

@@ -336,6 +336,14 @@ function formatDuration(ms) {
   return `${Math.round(ms / 1000)}s`;
 }
 
+let faviconZone = "green";
+
+function updateFavicon(zoneName) {
+  if (zoneName === faviconZone) return;
+  $("zone-favicon").href = `/favicon-${zoneName}.svg`;
+  faviconZone = zoneName;
+}
+
 function setZoneClass(el, zoneName) {
   el.className = el.className.replace(/\bzone-\w+/g, "").trim();
   el.classList.add(`zone-${zoneName}`);
@@ -432,6 +440,7 @@ function tick() {
     cd.textContent = formatMs(remaining);
     setZoneClass(cd, zone.name);
     setZoneClass($("the-button"), zone.name);
+    updateFavicon(zone.name);
     $("zone-label").textContent = game.ended ? "season finished" : `${zone.name} zone \u00b7 ${zone.points} pt${zone.points === 1 ? "" : "s"}`;
     const pct = Math.min(100, Math.max(0, ((game.duration_ms - remaining) / game.duration_ms) * 100));
     $("zone-marker").style.left = `${pct}%`;

static/favicon-black.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="8" fill="#1e1e2e"/>
+  <circle cx="16" cy="18" r="11" fill="#11111b"/>
+  <circle cx="16" cy="15" r="11" fill="#181825" stroke="#6c7086" stroke-width="1.5"/>
+  <path d="M10 9a9 9 0 0 1 12 0" fill="none" stroke="#fff" stroke-opacity=".35" stroke-width="2" stroke-linecap="round"/>
+</svg>

static/favicon-blue.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="8" fill="#1e1e2e"/>
+  <circle cx="16" cy="18" r="11" fill="#11111b"/>
+  <circle cx="16" cy="15" r="11" fill="#89b4fa" stroke="#6c7086" stroke-width="1.5"/>
+  <path d="M10 9a9 9 0 0 1 12 0" fill="none" stroke="#fff" stroke-opacity=".35" stroke-width="2" stroke-linecap="round"/>
+</svg>

static/favicon-green.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="8" fill="#1e1e2e"/>
+  <circle cx="16" cy="18" r="11" fill="#11111b"/>
+  <circle cx="16" cy="15" r="11" fill="#a6e3a1" stroke="#6c7086" stroke-width="1.5"/>
+  <path d="M10 9a9 9 0 0 1 12 0" fill="none" stroke="#fff" stroke-opacity=".35" stroke-width="2" stroke-linecap="round"/>
+</svg>

static/favicon-red.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="8" fill="#1e1e2e"/>
+  <circle cx="16" cy="18" r="11" fill="#11111b"/>
+  <circle cx="16" cy="15" r="11" fill="#f38ba8" stroke="#6c7086" stroke-width="1.5"/>
+  <path d="M10 9a9 9 0 0 1 12 0" fill="none" stroke="#fff" stroke-opacity=".35" stroke-width="2" stroke-linecap="round"/>
+</svg>

static/favicon-white.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="8" fill="#1e1e2e"/>
+  <circle cx="16" cy="18" r="11" fill="#11111b"/>
+  <circle cx="16" cy="15" r="11" fill="#cdd6f4" stroke="#6c7086" stroke-width="1.5"/>
+  <path d="M10 9a9 9 0 0 1 12 0" fill="none" stroke="#fff" stroke-opacity=".35" stroke-width="2" stroke-linecap="round"/>
+</svg>

static/favicon-yellow.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="8" fill="#1e1e2e"/>
+  <circle cx="16" cy="18" r="11" fill="#11111b"/>
+  <circle cx="16" cy="15" r="11" fill="#f9e2af" stroke="#6c7086" stroke-width="1.5"/>
+  <path d="M10 9a9 9 0 0 1 12 0" fill="none" stroke="#fff" stroke-opacity=".35" stroke-width="2" stroke-linecap="round"/>
+</svg>

static/index.html

@@ -12,7 +12,7 @@
   <meta property="og:site_name" content="The Button">
   <meta property="og:locale" content="en_US">
   <link rel="stylesheet" href="/style.css">
-  <link rel="icon" type="image/x-icon" href="/favicon.ico">
+  <link id="zone-favicon" rel="icon" type="image/svg+xml" sizes="any" href="/favicon-green.svg">
 </head>
 <body>
   <main>