From fec44f9757e97d098539a602dff064b41d3cd289 Mon Sep 17 00:00:00 2001
From: Josh Knapp <jknapp85@gmail.com>
Date: Fri, 26 Dec 2025 10:11:13 -0800
Subject: [PATCH] Support unlimited users with dynamic color generation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaced fixed 6-color palette with dynamic HSL color generation
using the golden ratio for optimal color distribution.

Changes:
- Removed static CSS color classes (user-0 through user-5)
- Added getUserColor() function using golden ratio
- Colors generated as HSL(hue, 85%, 65%)
- Each user gets a unique, visually distinct color
- Supports unlimited users (20+)

How it works:
- Golden ratio (φ ≈ 0.618) distributes hues evenly across color wheel
- User 1: hue 0°
- User 2: hue 222° (0.618 * 360)
- User 3: hue 85° ((0.618 * 2 * 360) % 360)
- etc.

Benefits:
- No color repetition for any number of users
- Maximum visual distinction between consecutive users
- Consistent brightness/saturation for readability
- Colors are vibrant and stand out on dark backgrounds

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 server/php/display.php | 34 +++++++++++++++++++---------------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/server/php/display.php b/server/php/display.php
index 6645158..92ba676 100644
--- a/server/php/display.php
+++ b/server/php/display.php
@@ -35,14 +35,8 @@
         .user {
             font-weight: bold;
             margin-right: 10px;
+            /* Color set dynamically via inline style */
         }
-        /* Different colors for different users */
-        .user-0 { color: #4CAF50; }
-        .user-1 { color: #2196F3; }
-        .user-2 { color: #FF9800; }
-        .user-3 { color: #E91E63; }
-        .user-4 { color: #9C27B0; }
-        .user-5 { color: #00BCD4; }
         .text {
             color: white;
         }
@@ -83,9 +77,23 @@
 
         const container = document.getElementById('transcriptions');
         const statusEl = document.getElementById('status');
-        const userColors = new Map(); // Map user names to color indices
+        const userColors = new Map(); // Map user names to HSL colors
         let colorIndex = 0;
 
+        // Generate distinct color for each user using golden ratio
+        function getUserColor(userName) {
+            if (!userColors.has(userName)) {
+                // Use golden ratio for evenly distributed hues
+                const goldenRatio = 0.618033988749895;
+                const hue = (colorIndex * goldenRatio * 360) % 360;
+                // High saturation and medium lightness for vibrant, readable colors
+                const color = `hsl(${hue}, 85%, 65%)`;
+                userColors.set(userName, color);
+                colorIndex++;
+            }
+            return userColors.get(userName);
+        }
+
         // Connect to Server-Sent Events
         function connect() {
             const url = `server.php?action=stream&room=${encodeURIComponent(room)}&passphrase=${encodeURIComponent(passphrase)}`;
@@ -115,19 +123,15 @@
             const div = document.createElement('div');
             div.className = 'transcription';
 
-            // Assign color to user
-            if (!userColors.has(data.user_name)) {
-                userColors.set(data.user_name, colorIndex % 6);
-                colorIndex++;
-            }
-            const userColorClass = `user-${userColors.get(data.user_name)}`;
+            // Get user color (generates new color if first time)
+            const userColor = getUserColor(data.user_name);
 
             let html = '';
             if (showTimestamps && data.timestamp) {
                 html += `<span class="timestamp">[${data.timestamp}]</span>`;
             }
             if (data.user_name) {
-                html += `<span class="user ${userColorClass}">${data.user_name}:</span>`;
+                html += `<span class="user" style="color: ${userColor}">${data.user_name}:</span>`;
             }
             html += `<span class="text">${data.text}</span>`;