style: changed colors etc

2026-04-26 22:13:26 +02:00
parent 671886781e
commit d676288315
9 changed files with 1179 additions and 604 deletions
@@ -1,11 +1,27 @@
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 import { finalize } from 'rxjs';
 import { getErrorMessage } from '../../core/http/error-message.util';
 import { GameApiService } from '../../services/game-api.service';

+type Difficulty = 'easy' | 'medium' | 'hard';
+type ImportMode = 'fen' | 'pgn';
+
+interface Star {
+  style: Record<string, string>;
+}
+
+interface BackgroundBuilding {
+  style: Record<string, string>;
+}
+
+interface WindowCell {
+  state: 'off' | 'lc' | 'lw';
+  style: Record<string, string>;
+}
+
@Component({
  selector: 'app-welcome',
  standalone: true,
@@ -13,18 +29,30 @@ import { GameApiService } from '../../services/game-api.service';
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.css']
 })
-export class WelcomeComponent {
+export class WelcomeComponent implements OnInit, OnDestroy {
  creating = false;
-  errorMessage = '';
-  showDifficultySelector = false;
-  showJoinGameForm = false;
-  showImportGameForm = false;
-  gameIdInput = '';
  joiningGame = false;
  importing = false;
-  importMode: 'fen' | 'pgn' = 'fen';
+  errorMessage = '';
+
+  showDifficultyDialog = false;
+  showOptionsDialog = false;
+  showJoinDialog = false;
+  showImportDialog = false;
+
+  gameIdInput = '';
+  importMode: ImportMode = 'fen';
  importText = '';

+  isSunsetMode = false;
+  modeBadge = 'NIGHT MODE';
+
+  stars: Star[] = [];
+  bgBuildings: BackgroundBuilding[] = [];
+  windows: Record<string, WindowCell[]> = {};
+
+  private flickerIntervalId: ReturnType<typeof setInterval> | undefined;
+
  constructor(
    private readonly router: Router,
    private readonly gameApi: GameApiService
@@ -32,11 +60,83 @@ export class WelcomeComponent {
    this.initTheme();
  }

-  private initTheme(): void {
-    const savedTheme = localStorage.getItem('theme');
-    if (savedTheme === 'dark') {
+  ngOnInit(): void {
+    this.generateStars(220);
+    this.generateBackgroundBuildings();
+    this.generateWindowsForAllBuildings();
+    this.startWindowFlicker();
+  }
+
+  ngOnDestroy(): void {
+    this.stopWindowFlicker();
+  }
+
+  toggleTheme(): void {
+    this.isSunsetMode = !this.isSunsetMode;
+    this.modeBadge = this.isSunsetMode ? 'SUNSET MODE' : 'NIGHT MODE';
+
+    if (!this.isSunsetMode) {
      document.documentElement.setAttribute('data-theme', 'dark');
+      localStorage.setItem('theme', 'dark');
+      return;
    }
+
+    document.documentElement.removeAttribute('data-theme');
+    localStorage.removeItem('theme');
+  }
+
+  openDifficultyDialog(): void {
+    this.closeAllDialogs();
+    this.showDifficultyDialog = true;
+  }
+
+  closeDifficultyDialog(): void {
+    this.showDifficultyDialog = false;
+    this.errorMessage = '';
+  }
+
+  openOptionsDialog(): void {
+    this.closeAllDialogs();
+    this.showOptionsDialog = true;
+  }
+
+  closeOptionsDialog(): void {
+    this.showOptionsDialog = false;
+    this.errorMessage = '';
+  }
+
+  openJoinDialog(): void {
+    this.closeAllDialogs();
+    this.showJoinDialog = true;
+  }
+
+  closeJoinDialog(): void {
+    if (this.joiningGame) {
+      return;
+    }
+    this.showJoinDialog = false;
+    this.gameIdInput = '';
+    this.errorMessage = '';
+  }
+
+  openImportDialog(): void {
+    this.closeAllDialogs();
+    this.showImportDialog = true;
+  }
+
+  closeImportDialog(): void {
+    if (this.importing) {
+      return;
+    }
+    this.showImportDialog = false;
+    this.importText = '';
+    this.importMode = 'fen';
+    this.errorMessage = '';
+  }
+
+  setImportMode(mode: ImportMode): void {
+    this.importMode = mode;
+    this.errorMessage = '';
  }

  startOneVsOne(): void {
@@ -52,7 +152,9 @@ export class WelcomeComponent {
      .pipe(finalize(() => (this.creating = false)))
      .subscribe({
        next: (game) => {
-          void this.router.navigate(['/game', game.gameId]);
+          void this.router.navigate(['/game', game.gameId], {
+            state: { theme: this.isSunsetMode ? 'light' : 'dark' }
+          });
        },
        error: (error) => {
          this.errorMessage = getErrorMessage(error, 'Unable to create a game.');
@@ -60,21 +162,23 @@ export class WelcomeComponent {
      });
  }

-  startVsBot(difficulty: 'easy' | 'medium' | 'hard'): void {
+  startVsBot(difficulty: Difficulty): void {
    if (this.creating) {
      return;
    }

    this.errorMessage = '';
    this.creating = true;
-    this.showDifficultySelector = false;
+    this.showDifficultyDialog = false;

    this.gameApi
      .createGameVsBot(difficulty)
      .pipe(finalize(() => (this.creating = false)))
      .subscribe({
        next: (game) => {
-          void this.router.navigate(['/game', game.gameId]);
+          void this.router.navigate(['/game', game.gameId], {
+            state: { theme: this.isSunsetMode ? 'light' : 'dark' }
+          });
        },
        error: (error) => {
          this.errorMessage = getErrorMessage(error, 'Unable to create a game against bot.');
@@ -82,39 +186,32 @@ export class WelcomeComponent {
      });
  }

-  toggleDifficultySelector(): void {
-    this.showDifficultySelector = !this.showDifficultySelector;
-    this.showJoinGameForm = false;
-    this.showImportGameForm = false;
-    this.errorMessage = '';
-  }
-
-  toggleJoinGameForm(): void {
-    this.showJoinGameForm = !this.showJoinGameForm;
-    this.showDifficultySelector = false;
-    this.showImportGameForm = false;
-    this.errorMessage = '';
-    this.gameIdInput = '';
-  }
-
-  toggleImportGameForm(): void {
-    this.showImportGameForm = !this.showImportGameForm;
-    this.showDifficultySelector = false;
-    this.showJoinGameForm = false;
-    this.errorMessage = '';
-
-    if (!this.showImportGameForm) {
-      this.importText = '';
-      this.importMode = 'fen';
+  submitJoinGame(): void {
+    const gameId = this.gameIdInput.trim();
+    if (this.joiningGame || !gameId) {
+      return;
    }
-  }

-  setImportMode(mode: 'fen' | 'pgn'): void {
-    this.importMode = mode;
    this.errorMessage = '';
+    this.joiningGame = true;
+
+    this.gameApi
+      .getGame(gameId)
+      .pipe(finalize(() => (this.joiningGame = false)))
+      .subscribe({
+        next: (game) => {
+          this.closeJoinDialog();
+          void this.router.navigate(['/game', game.gameId], {
+            state: { theme: this.isSunsetMode ? 'light' : 'dark' }
+          });
+        },
+        error: (error) => {
+          this.errorMessage = getErrorMessage(error, 'Unable to find or join the game.');
+        }
+      });
  }

-  submitImportedGame(): void {
+  submitImportGame(): void {
    const trimmedImport = this.importText.trim();
    if (this.importing || !trimmedImport) {
      return;
@@ -128,9 +225,10 @@ export class WelcomeComponent {

    importRequest.pipe(finalize(() => (this.importing = false))).subscribe({
      next: (game) => {
-        this.importText = '';
-        this.showImportGameForm = false;
-        void this.router.navigate(['/game', game.gameId]);
+        this.closeImportDialog();
+        void this.router.navigate(['/game', game.gameId], {
+          state: { theme: this.isSunsetMode ? 'light' : 'dark' }
+        });
      },
      error: (error) => {
        const defaultMessage = this.importMode === 'fen' ? 'Unable to import FEN.' : 'Unable to import PGN.';
@@ -139,47 +237,157 @@ export class WelcomeComponent {
    });
  }

-  joinGame(): void {
-    if (this.joiningGame || !this.gameIdInput.trim()) {
+  private closeAllDialogs(): void {
+    this.showDifficultyDialog = false;
+    this.showOptionsDialog = false;
+    this.showJoinDialog = false;
+    this.showImportDialog = false;
+    this.errorMessage = '';
+  }
+
+  private initTheme(): void {
+    const savedTheme = localStorage.getItem('theme');
+    this.isSunsetMode = savedTheme !== 'dark';
+    this.modeBadge = this.isSunsetMode ? 'SUNSET MODE' : 'NIGHT MODE';
+
+    if (!this.isSunsetMode) {
+      document.documentElement.setAttribute('data-theme', 'dark');
      return;
    }

-    this.errorMessage = '';
-    this.joiningGame = true;
+    document.documentElement.removeAttribute('data-theme');
+  }

-    this.gameApi
-      .getGame(this.gameIdInput.trim())
-      .pipe(finalize(() => (this.joiningGame = false)))
-      .subscribe({
-        next: (game) => {
-          void this.router.navigate(['/game', game.gameId]);
-        },
-        error: (error) => {
-          this.errorMessage = getErrorMessage(error, 'Unable to find or join the game.');
+  private generateStars(count: number): void {
+    this.stars = Array.from({ length: count }, () => {
+      const size = Math.random() * 2 + 0.5;
+      return {
+        style: {
+          width: `${size}px`,
+          height: `${size}px`,
+          left: `${Math.random() * 100}%`,
+          top: `${Math.random() * 62}%`,
+          '--d': `${(Math.random() * 3 + 1.5).toFixed(1)}s`,
+          '--dl': `${-(Math.random() * 6).toFixed(1)}s`
        }
-      });
+      };
+    });
  }

-  clearJoinGameForm(): void {
-    this.showJoinGameForm = false;
-    this.gameIdInput = '';
-    this.errorMessage = '';
+  private generateBackgroundBuildings(): void {
+    const specs = [
+      { l: '0%', w: '7%', h: '30vh' },
+      { l: '3%', w: '4%', h: '18vh' }, // New building
+      { l: '7%', w: '5%', h: '22vh' },
+      { l: '11%', w: '8%', h: '28vh' },
+      { l: '15%', w: '6%', h: '20vh' },
+      { l: '18.5%', w: '4%', h: '18vh' },
+      { l: '22.5%', w: '6%', h: '26vh' },
+      { l: '28%', w: '5%', h: '25vh' },
+      { l: '32%', w: '4%', h: '15vh' },
+      { l: '35.5%', w: '4.5%', h: '20vh' },
+      { l: '42%', w: '5%', h: '28vh' },
+      { l: '47%', w: '5%', h: '22vh' }, // New building
+      { l: '50%', w: '7%', h: '30vh' },
+      { l: '55%', w: '6%', h: '27vh' },
+      { l: '60.5%', w: '5%', h: '24vh' },
+      { l: '64.5%', w: '3.5%', h: '17vh' },
+      { l: '70%', w: '6%', h: '23vh' },
+      { l: '75%', w: '4%', h: '19vh' },
+      { l: '80.5%', w: '4%', h: '21vh' },
+      { l: '85.5%', w: '9%', h: '32vh' },
+      { l: '88%', w: '5%', h: '20vh' },
+      { l: '91%', w: '3%', h: '16vh' }, // New building
+      { l: '94%', w: '6%', h: '27vh' }
+    ];
+
+    this.bgBuildings = specs.map((spec) => ({
+      style: { left: spec.l, width: spec.w, height: spec.h }
+    }));
  }

-  toggleDarkMode(): void {
-    const htmlElement = document.documentElement;
-    const isDarkMode = htmlElement.getAttribute('data-theme') === 'dark';
-    
-    if (isDarkMode) {
-      htmlElement.removeAttribute('data-theme');
-      localStorage.removeItem('theme');
-    } else {
-      htmlElement.setAttribute('data-theme', 'dark');
-      localStorage.setItem('theme', 'dark');
+  private generateWindowsForAllBuildings(): void {
+    this.windows = {
+      wA1: this.generateWindows(3, 4, 0.6),
+      wA2: this.generateWindows(4, 5, 0.55),
+      wA3: this.generateWindows(5, 18, 0.5),
+      wB1: this.generateWindows(4, 3, 0.6),
+      wB2: this.generateWindows(5, 20, 0.55),
+      wC1: this.generateWindows(5, 3, 0.7),
+      wC2: this.generateWindows(6, 5, 0.65),
+      wC3: this.generateWindows(7, 24, 0.6),
+      wD1: this.generateWindows(6, 3, 0.6),
+      wD2: this.generateWindows(6, 20, 0.5),
+      wE1: this.generateWindows(3, 16, 0.45)
+    };
+  }
+
+  private generateWindows(cols: number, rows: number, litRate: number): WindowCell[] {
+    const total = cols * rows;
+    return Array.from({ length: total }, () => this.createWindowCell(litRate));
+  }
+
+  private createWindowCell(litRate: number): WindowCell {
+    const random = Math.random();
+    let state: WindowCell['state'] = 'off';
+    if (random < litRate * 0.58) {
+      state = 'lc';
+    } else if (random < litRate) {
+      state = 'lw';
+    }
+
+    if (state === 'off') {
+      return { state, style: {} };
+    }
+
+    const baseDuration = state === 'lc' ? 3 : 4;
+    return {
+      state,
+      style: {
+        '--wd': `${(Math.random() * 4 + baseDuration).toFixed(1)}s`,
+        '--wdl': `${-(Math.random() * 8).toFixed(1)}s`
+      }
+    };
+  }
+
+  private startWindowFlicker(): void {
+    this.flickerIntervalId = setInterval(() => {
+      this.randomFlicker();
+    }, 2800);
+  }
+
+  private stopWindowFlicker(): void {
+    if (this.flickerIntervalId === undefined) {
+      return;
+    }
+    clearInterval(this.flickerIntervalId);
+    this.flickerIntervalId = undefined;
+  }
+
+  private randomFlicker(): void {
+    const allWindows = Object.values(this.windows).flat();
+    if (allWindows.length === 0) {
+      return;
+    }
+
+    const pickCount = Math.floor(Math.random() * 6) + 1;
+    for (let i = 0; i < pickCount; i += 1) {
+      const target = allWindows[Math.floor(Math.random() * allWindows.length)];
+      if (!target) {
+        continue;
+      }
+
+      if (target.state === 'off') {
+        const lit = Math.random() < 0.6 ? 'lc' : 'lw';
+        target.state = lit;
+        target.style = {
+          '--wd': `${(Math.random() * 4 + (lit === 'lc' ? 3 : 4)).toFixed(1)}s`,
+          '--wdl': `${-(Math.random() * 8).toFixed(1)}s`
+        };
+      } else {
+        target.state = 'off';
+        target.style = {};
+      }
    }
  }
-
-  isDarkMode(): boolean {
-    return document.documentElement.getAttribute('data-theme') === 'dark';
-  }
 }