Added clock to Setup, Config, and Settings pages

Author: skrodahl

CHANGELOG.md

@@ -1,3 +1,17 @@
+# 2025-11-21
+
+## **v4.0.16** - Header Clock
+
+### New Features
+- **Added clock to main header**
+  - Clock displayed in upper right corner, aligned with title/logo
+  - Styled identically to Match Controls clock (border, shadow, monospace font)
+  - Visible on all pages (Setup, Registration, Tournament, Config)
+  - Updates every 10 seconds to catch minute changes
+  - **Files modified**: `tournament.html`, `css/styles.css`, `js/tournament-management.js`
+
+---
+
 # 2025-11-19
 
 ## **v4.0.15** - JSDoc Type Definitions & Function Annotations

css/styles.css

@@ -196,6 +196,17 @@ body {
   font-weight: 400;
 }
 
+/* Header clock - matches Match Controls clock styling */
+.header-clock {
+  font-family: var(--font-clock);
+  font-size: 18px;
+  font-weight: normal;
+  border: 1px solid #ccc;
+  padding: 8px 16px;
+  border-radius: 6px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.24);
+}
+
 .header-tournament-status {
   position: absolute;
   right: 0;

js/main.js

@@ -7,7 +7,7 @@ let matches = [];
 let currentStatsPlayer = null;
 
 // Application version
-	const APP_VERSION = '4.0.15';
+const APP_VERSION = '4.0.16';
 
 // Application identity (encoded)
 const _0x4e = [78,101,119,84,111,110,32,68,67,32,84,111,117,114];

js/tournament-management.js

@@ -1550,20 +1550,32 @@ function updateTournamentWatermark() {
     }
 }
 
-// Update clock in Status Panel every minute
+// Update clocks in Status Panel and header
 function updateClock() {
-    const clockElement = document.getElementById('cad-clock');
-    if (clockElement) {
-        const now = new Date();
-        const hours = String(now.getHours()).padStart(2, '0');
-        const minutes = String(now.getMinutes()).padStart(2, '0');
-        clockElement.textContent = `${hours}:${minutes}`;
+    const now = new Date();
+    const hours = String(now.getHours()).padStart(2, '0');
+    const minutes = String(now.getMinutes()).padStart(2, '0');
+    const timeString = `${hours}:${minutes}`;
+
+    // Update Status Panel clock (CAD modal)
+    const cadClockElement = document.getElementById('cad-clock');
+    if (cadClockElement) {
+        cadClockElement.textContent = timeString;
+    }
+
+    // Update header clock (visible on all pages)
+    const headerClockElement = document.getElementById('headerClock');
+    if (headerClockElement) {
+        headerClockElement.textContent = timeString;
     }
 }
 
 // Start clock update interval (every 10 seconds to catch minute changes quickly)
 setInterval(updateClock, 10000);
 
+// Initialize clock immediately when script loads
+updateClock();
+
 /**
  * Get storage color class based on percentage thresholds
  * @param {number} percentage - Storage usage percentage

tournament.html

@@ -52,13 +52,13 @@ <h1>
                     </div>
                     NewTon DC - Tournament Manager
                 </h1>
+                <div id="headerClock" class="header-clock"></div>
             </div>
             <div class="nav">
                 <button class="nav-btn active" data-page="setup">Tournament Setup</button>
                 <button class="nav-btn" data-page="registration">Player Registration</button>
                 <button class="nav-btn" data-page="tournament">Tournament Bracket</button>
                 <button class="nav-btn" data-page="config">Global Settings</button>
-                <!-- NEW: Tournament status moved to bottom right of header -->
                 <div id="headerTournamentStatus" class="header-tournament-status">
                     Active Tournament: <strong>None</strong>
                 </div>