style: more colors for windows

src/app/pages/welcome/welcome.component.html

@@ -38,8 +38,6 @@
             <div
               class="w"
               *ngFor="let win of windows['wA1']"
-              [class.lc]="win.state === 'lc'"
-              [class.lw]="win.state === 'lw'"
               [ngStyle]="win.style"
             ></div>
           </div>
@@ -49,8 +47,6 @@
             <div
               class="w"
               *ngFor="let win of windows['wA2']"
-              [class.lc]="win.state === 'lc'"
-              [class.lw]="win.state === 'lw'"
               [ngStyle]="win.style"
             ></div>
           </div>
@@ -69,8 +65,6 @@
             <div
               class="w"
               *ngFor="let win of windows['wA3']"
-              [class.lc]="win.state === 'lc'"
-              [class.lw]="win.state === 'lw'"
               [ngStyle]="win.style"
             ></div>
           </div>
@@ -83,8 +77,6 @@
             <div
               class="w"
               *ngFor="let win of windows['wB1']"
-              [class.lc]="win.state === 'lc'"
-              [class.lw]="win.state === 'lw'"
               [ngStyle]="win.style"
             ></div>
           </div>
@@ -106,8 +98,6 @@
             <div
               class="w"
               *ngFor="let win of windows['wB2']"
-              [class.lc]="win.state === 'lc'"
-              [class.lw]="win.state === 'lw'"
               [ngStyle]="win.style"
             ></div>
           </div>
@@ -124,8 +114,6 @@
             <div
               class="w"
               *ngFor="let win of windows['wC1']"
-              [class.lc]="win.state === 'lc'"
-              [class.lw]="win.state === 'lw'"
               [ngStyle]="win.style"
             ></div>
           </div>
@@ -135,8 +123,6 @@
             <div
               class="w"
               *ngFor="let win of windows['wC2']"
-              [class.lc]="win.state === 'lc'"
-              [class.lw]="win.state === 'lw'"
               [ngStyle]="win.style"
             ></div>
           </div>
@@ -156,8 +142,6 @@
             <div
               class="w"
               *ngFor="let win of windows['wC3']"
-              [class.lc]="win.state === 'lc'"
-              [class.lw]="win.state === 'lw'"
               [ngStyle]="win.style"
             ></div>
           </div>
@@ -171,8 +155,6 @@
             <div
               class="w"
               *ngFor="let win of windows['wD1']"
-              [class.lc]="win.state === 'lc'"
-              [class.lw]="win.state === 'lw'"
               [ngStyle]="win.style"
             ></div>
           </div>
@@ -192,8 +174,6 @@
             <div
               class="w"
               *ngFor="let win of windows['wD2']"
-              [class.lc]="win.state === 'lc'"
-              [class.lw]="win.state === 'lw'"
               [ngStyle]="win.style"
             ></div>
           </div>
@@ -206,8 +186,6 @@
             <div
               class="w"
               *ngFor="let win of windows['wE1']"
-              [class.lc]="win.state === 'lc'"
-              [class.lw]="win.state === 'lw'"
               [ngStyle]="win.style"
             ></div>
           </div>

src/app/pages/welcome/welcome.component.ts

@@ -18,7 +18,9 @@ interface BackgroundBuilding {
 }
 
 interface WindowCell {
-  state: 'off' | 'lc' | 'lw';
+  state: 'off' | 'on';
+  color?: string;
+  glowColor?: string;
   style: Record<string, string>;
 }
 
@@ -53,6 +55,12 @@ export class WelcomeComponent implements OnInit, OnDestroy {
 
   private flickerIntervalId: ReturnType<typeof setInterval> | undefined;
 
+  private coolColors = ['#7de8ff', '#00d5ff', '#5bc0de', '#31b0d5', '#4fc3f7', '#29b6f6'];
+  private coolGlowColors = ['#00d5ff', '#00d5ff', '#31b0d5', '#31b0d5', '#03a9f4', '#0288d1'];
+
+  private warmColors = ['#ffe88a', '#ffcc30', '#f0ad4e', '#ec971f', '#ffb74d', '#ffa726'];
+  private warmGlowColors = ['#ffcc30', '#ffcc30', '#ec971f', '#ec971f', '#ff9800', '#fb8c00'];
+
   constructor(
     private readonly router: Router,
     private readonly gameApi: GameApiService
@@ -330,20 +338,33 @@ export class WelcomeComponent implements OnInit, OnDestroy {
   private createWindowCell(litRate: number): WindowCell {
     const random = Math.random();
     let state: WindowCell['state'] = 'off';
-    if (random < litRate * 0.58) {
+    let color: string | undefined;
-      state = 'lc';
+    let glowColor: string | undefined;
-    } else if (random < litRate) {
+
-      state = 'lw';
+    if (random < litRate * 0.58) { // Cool color
+      state = 'on';
+      const coolIndex = Math.floor(Math.random() * this.coolColors.length);
+      color = this.coolColors[coolIndex];
+      glowColor = this.coolGlowColors[coolIndex];
+    } else if (random < litRate) { // Warm color
+      state = 'on';
+      const warmIndex = Math.floor(Math.random() * this.warmColors.length);
+      color = this.warmColors[warmIndex];
+      glowColor = this.warmGlowColors[warmIndex];
     }
 
     if (state === 'off') {
       return { state, style: {} };
     }
 
-    const baseDuration = state === 'lc' ? 3 : 4;
+    const baseDuration = (color && this.coolColors.includes(color)) ? 3 : 4;
     return {
       state,
+      color,
+      glowColor,
       style: {
+        'background-color': color || '',
+        'box-shadow': glowColor ? `0 0 6px ${glowColor}, 0 0 16px ${glowColor}35` : '',
         '--wd': `${(Math.random() * 4 + baseDuration).toFixed(1)}s`,
         '--wdl': `${-(Math.random() * 8).toFixed(1)}s`
       }
@@ -378,14 +399,24 @@ export class WelcomeComponent implements OnInit, OnDestroy {
       }
 
       if (target.state === 'off') {
-        const lit = Math.random() < 0.6 ? 'lc' : 'lw';
+        target.state = 'on';
-        target.state = lit;
+        const isCool = Math.random() < 0.5;
+        const colors = isCool ? this.coolColors : this.warmColors;
+        const glowColors = isCool ? this.coolGlowColors : this.warmGlowColors;
+        const index = Math.floor(Math.random() * colors.length);
+
+        target.color = colors[index];
+        target.glowColor = glowColors[index];
         target.style = {
-          '--wd': `${(Math.random() * 4 + (lit === 'lc' ? 3 : 4)).toFixed(1)}s`,
+          'background-color': target.color || '',
+          'box-shadow': target.glowColor ? `0 0 6px ${target.glowColor}, 0 0 16px ${target.glowColor}35` : '',
+          '--wd': `${(Math.random() * 4 + (isCool ? 3 : 4)).toFixed(1)}s`,
           '--wdl': `${-(Math.random() * 8).toFixed(1)}s`
         };
       } else {
         target.state = 'off';
+        target.color = undefined;
+        target.glowColor = undefined;
         target.style = {};
       }
     }