feat: double TimeIndicator size and add day counter

client/src/ui/TimeIndicator.ts

@@ -7,7 +7,9 @@ export class TimeIndicator {
   private nightSection: HTMLDivElement;
   private sunIcon: HTMLDivElement;
   private moonIcon: HTMLDivElement;
+  private dayLabel: HTMLDivElement;
   private lastTimeKey = '';
+  private lastDayNumber = 0;
 
   constructor() {
     // Outer container — top center of screen
@@ -20,18 +22,28 @@ export class TimeIndicator {
       z-index: 1001;
       display: flex;
       align-items: center;
-      gap: 5px;
+      gap: 10px;
       font-family: 'Press Start 2P', monospace;
       pointer-events: none;
       opacity: 0.85;
     `;
 
+    // Day label
+    this.dayLabel = document.createElement('div');
+    this.dayLabel.style.cssText = `
+      font-size: 10px;
+      color: #e0d0b0;
+      text-shadow: 0 0 4px #00000088;
+      white-space: nowrap;
+    `;
+    this.dayLabel.textContent = 'Day 1';
+
     // Sun icon
     this.sunIcon = document.createElement('div');
     this.sunIcon.style.cssText = `
-      font-size: 10px;
+      font-size: 20px;
       color: #f0d060;
-      text-shadow: 0 0 4px #f0d06088;
+      text-shadow: 0 0 8px #f0d06088;
       line-height: 1;
     `;
     this.sunIcon.textContent = '☀';
@@ -40,19 +52,19 @@ export class TimeIndicator {
     const track = document.createElement('div');
     track.style.cssText = `
       display: flex;
-      height: 8px;
-      border: 2px solid #e0d0b0;
+      height: 16px;
+      border: 4px solid #e0d0b0;
       border-radius: 1px;
       overflow: hidden;
       position: relative;
-      box-shadow: 0 0 6px #00000066, inset 0 1px 2px #00000044;
+      box-shadow: 0 0 12px #00000066, inset 0 1px 2px #00000044;
     `;
 
     // Day section (proportional width)
     const dayFraction = DAY_HOURS / TOTAL_HOURS;
     this.daySection = document.createElement('div');
     this.daySection.style.cssText = `
-      width: ${dayFraction * 120}px;
+      width: ${dayFraction * 240}px;
       height: 100%;
       background: linear-gradient(180deg, #5c8abf 0%, #3a6a9f 100%);
       position: relative;
@@ -61,7 +73,7 @@ export class TimeIndicator {
     // Divider line between day/night
     const divider = document.createElement('div');
     divider.style.cssText = `
-      width: 1px;
+      width: 2px;
       height: 100%;
       background: #e0d0b0;
       flex-shrink: 0;
@@ -71,7 +83,7 @@ export class TimeIndicator {
     // Night section
     this.nightSection = document.createElement('div');
     this.nightSection.style.cssText = `
-      width: ${(1 - dayFraction) * 120}px;
+      width: ${(1 - dayFraction) * 240}px;
       height: 100%;
       background: linear-gradient(180deg, #1a1a3e 0%, #0e0e28 100%);
       position: relative;
@@ -81,11 +93,11 @@ export class TimeIndicator {
     this.marker = document.createElement('div');
     this.marker.style.cssText = `
       position: absolute;
-      top: -1px;
-      width: 3px;
-      height: calc(100% + 2px);
+      top: -2px;
+      width: 6px;
+      height: calc(100% + 4px);
       background: #f0d060;
-      box-shadow: 0 0 4px #f0d060aa;
+      box-shadow: 0 0 8px #f0d060aa;
       border-radius: 1px;
       z-index: 2;
       transition: left 0.5s linear;
@@ -100,13 +112,14 @@ export class TimeIndicator {
     // Moon icon
     this.moonIcon = document.createElement('div');
     this.moonIcon.style.cssText = `
-      font-size: 9px;
+      font-size: 18px;
       color: #b8c8e8;
-      text-shadow: 0 0 4px #b8c8e866;
+      text-shadow: 0 0 8px #b8c8e866;
       line-height: 1;
     `;
     this.moonIcon.textContent = '☾';
 
+    this.container.appendChild(this.dayLabel);
     this.container.appendChild(this.sunIcon);
     this.container.appendChild(track);
     this.container.appendChild(this.moonIcon);
@@ -115,15 +128,21 @@ export class TimeIndicator {
   }
 
   /** @param gameTime normalized 0-1 through the full day/night cycle */
-  update(gameTime: number): void {
+  update(gameTime: number, dayNumber: number): void {
     // Only update when visually changed (quantize to avoid thrash)
     const key = Math.round(gameTime * 200).toString();
     if (key === this.lastTimeKey) return;
     this.lastTimeKey = key;
 
+    // Update day label when day changes
+    if (dayNumber !== this.lastDayNumber) {
+      this.lastDayNumber = dayNumber;
+      this.dayLabel.textContent = `Day ${dayNumber}`;
+    }
+
     // gameTime 0-1 maps linearly across the track
-    // Track total inner width = daySection + 1px divider + nightSection
-    const totalWidth = 120 + 1; // 120px sections + 1px divider
+    // Track total inner width = daySection + 2px divider + nightSection
+    const totalWidth = 240 + 2; // 240px sections + 2px divider
     const px = gameTime * totalWidth;
 
     this.marker.style.left = `${px}px`;