feat: NCS-63 User account implementation (#2)

User Profile info, no game before login/register, menu bar --------- Co-authored-by: Lala, Shahd <Shahd.Lala@sybit.de> Co-authored-by: shahdlala66 <shahd.lala66@gmail.com> Reviewed-on: #2
2026-05-06 10:51:30 +02:00
parent 2de003e497
commit ff75c8ce2f
104 changed files with 4232 additions and 978 deletions
@@ -1,41 +1,342 @@
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, DestroyRef, OnDestroy, OnInit, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 import { finalize } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { getErrorMessage } from '../../core/http/error-message.util';
+import { CurrentUser } from '../../models/auth.models';
+import { AuthDialogService } from '../../services/auth-dialog.service';
+import { AuthService } from '../../services/auth.service';
 import { GameApiService } from '../../services/game-api.service';
+import { ThemeService } from '../../services/theme.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' | 'on';
+  color?: string;
+  glowColor?: string;
+  style: Record<string, string>;
+}

@Component({
  selector: 'app-welcome',
  standalone: true,
  imports: [CommonModule, FormsModule],
  templateUrl: './welcome.component.html',
-  styleUrl: './welcome.component.css'
+  styleUrls: ['./welcome.component.css']
 })
-export class WelcomeComponent {
+export class WelcomeComponent implements OnInit, OnDestroy {
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly authService = inject(AuthService);
+  private readonly authDialogService = inject(AuthDialogService);
+  private readonly themeService = inject(ThemeService);
+
  creating = false;
-  errorMessage = '';
-  showDifficultySelector = false;
-  showJoinGameForm = false;
-  gameIdInput = '';
  joiningGame = false;
+  importing = false;
+  errorMessage = '';
+
+  showDifficultyDialog = false;
+  showOptionsDialog = false;
+  showJoinDialog = false;
+  showImportDialog = false;
+
+  gameIdInput = '';
+  importMode: ImportMode = 'fen';
+  importText = '';
+
+  isSunsetMode = false;
+  modeBadge = 'NIGHT MODE';
+  currentUser: CurrentUser | null = null;
+  private authDialogState: 'login' | 'register' | null = null;
+  private pendingAction: (() => void) | null = null;
+
+  // Speech bubble and zoom features
+  showSpeechBubble = false;
+  isZoomedIn = false;
+  showSecondSpeechBubble = false;
+  showHappyBubble = false;
+  showMeatEmoji = false;
+  bubbleMessage = 'meow';
+
+  // Meat emoji drag state
+  meatX = 0;
+  meatY = 0;
+  isDraggingMeat = false;
+  meatDragOffsetX = 0;
+  meatDragOffsetY = 0;
+
+  stars: Star[] = [];
+  bgBuildings: BackgroundBuilding[] = [];
+  windows: Record<string, WindowCell[]> = {};
+
+  private flickerIntervalId: ReturnType<typeof setInterval> | undefined;
+  private speechBubbleTimeoutId: ReturnType<typeof setTimeout> | undefined;
+  private zoomTimeoutId: ReturnType<typeof setTimeout> | 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
  ) {
-    this.initTheme();
  }

-  private initTheme(): void {
-    const savedTheme = localStorage.getItem('theme');
-    if (savedTheme === 'dark') {
-      document.documentElement.setAttribute('data-theme', 'dark');
+  ngOnInit(): void {
+    this.themeService.darkMode$
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((isDarkMode) => {
+        this.isSunsetMode = !isDarkMode;
+        this.modeBadge = this.isSunsetMode ? 'SUNSET MODE' : 'NIGHT MODE';
+      });
+
+    this.authService.currentUser$
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((user) => {
+        this.currentUser = user;
+        this.maybeRunPendingAction();
+      });
+
+    this.authDialogService.dialogState$
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((state) => {
+        this.authDialogState = state;
+        this.maybeRunPendingAction();
+      });
+
+    this.generateStars(220);
+    this.generateBackgroundBuildings();
+    this.generateWindowsForAllBuildings();
+    this.startWindowFlicker();
+
+    // Show speech bubble after 5 seconds
+    this.speechBubbleTimeoutId = setTimeout(() => {
+      this.showSpeechBubble = true;
+    }, 5000);
+  }
+
+  ngOnDestroy(): void {
+    this.stopWindowFlicker();
+    if (this.speechBubbleTimeoutId) {
+      clearTimeout(this.speechBubbleTimeoutId);
+    }
+    if (this.zoomTimeoutId) {
+      clearTimeout(this.zoomTimeoutId);
    }
  }

+  openDifficultyDialog(): void {
+    if (!this.requireAuth(() => this.showDifficultyDialog = true)) {
+      return;
+    }
+
+    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 {
+    if (!this.requireAuth(() => this.showJoinDialog = true)) {
+      return;
+    }
+
+    this.closeAllDialogs();
+    this.showJoinDialog = true;
+  }
+
+  closeJoinDialog(): void {
+    if (this.joiningGame) {
+      return;
+    }
+    this.showJoinDialog = false;
+    this.gameIdInput = '';
+    this.errorMessage = '';
+  }
+
+  openImportDialog(): void {
+    if (!this.requireAuth(() => this.showImportDialog = true)) {
+      return;
+    }
+
+    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 {
+    if (!this.requireAuth(() => this.performStartOneVsOne())) {
+      return;
+    }
+
+    this.performStartOneVsOne();
+  }
+
+  startVsBot(difficulty: Difficulty): void {
+    if (!this.requireAuth(() => this.performStartVsBot(difficulty))) {
+      return;
+    }
+
+    this.performStartVsBot(difficulty);
+  }
+
+  submitJoinGame(): void {
+    if (!this.requireAuth(() => this.performSubmitJoinGame())) {
+      return;
+    }
+
+    this.performSubmitJoinGame();
+  }
+
+  submitImportGame(): void {
+    if (!this.requireAuth(() => this.performSubmitImportGame())) {
+      return;
+    }
+
+    this.performSubmitImportGame();
+  }
+
+  onSpeechBubbleClick(): void {
+    this.showSpeechBubble = false;
+    this.isZoomedIn = true;
+    this.bubbleMessage = 'meow';
+    this.showMeatEmoji = true;
+    this.showHappyBubble = false;
+    this.showSecondSpeechBubble = true;
+
+    // Reset meat position
+    this.meatX = window.innerWidth / 2 - 100;
+    this.meatY = window.innerHeight / 2 + 150;
+  }
+
+  onZoomedViewClick(): void {
+    this.isZoomedIn = false;
+    this.showSecondSpeechBubble = false;
+    this.showHappyBubble = false;
+    this.showMeatEmoji = false;
+    this.bubbleMessage = 'meow';
+
+    if (this.zoomTimeoutId) {
+      clearTimeout(this.zoomTimeoutId);
+    }
+  }
+
+  onMeatMouseDown(event: MouseEvent): void {
+    this.isDraggingMeat = true;
+    const rect = (event.target as HTMLElement).getBoundingClientRect();
+    this.meatDragOffsetX = event.clientX - rect.left;
+    this.meatDragOffsetY = event.clientY - rect.top;
+  }
+
+  onMouseMove(event: MouseEvent): void {
+    if (!this.isDraggingMeat) {
+      return;
+    }
+
+    this.meatX = event.clientX - this.meatDragOffsetX;
+    this.meatY = event.clientY - this.meatDragOffsetY;
+
+    const gifElement = document.querySelector('.player-2-gif') as HTMLElement;
+    if (!gifElement) {
+      return;
+    }
+
+    const gifRect = gifElement.getBoundingClientRect();
+    const gifCenterX = gifRect.left + gifRect.width / 2;
+    const gifCenterY = gifRect.top + gifRect.height / 2;
+
+    const meatElement = document.querySelector('.meat-emoji') as HTMLElement;
+    if (!meatElement) {
+      return;
+    }
+
+    const meatRect = meatElement.getBoundingClientRect();
+    const meatCenterX = meatRect.left + meatRect.width / 2;
+    const meatCenterY = meatRect.top + meatRect.height / 2;
+
+    const distance = Math.sqrt(
+      Math.pow(meatCenterX - gifCenterX, 2) + Math.pow(meatCenterY - gifCenterY, 2)
+    );
+
+    if (distance < 50) {
+      this.onMeatFed();
+    }
+  }
+
+  onMouseUp(): void {
+    this.isDraggingMeat = false;
+  }
+
+  onMeatFed(): void {
+    this.showMeatEmoji = false;
+    this.showSecondSpeechBubble = false;
+    this.showHappyBubble = true;
+    this.isDraggingMeat = false;
+  }
+
+  private requireAuth(action: () => void): boolean {
+    if (this.authService.isLoggedIn()) {
+      return true;
+    }
+
+    this.pendingAction = action;
+    this.authDialogService.openLogin();
+    return false;
+  }
+
+  private maybeRunPendingAction(): void {
+    if (!this.currentUser || this.authDialogState !== null || !this.pendingAction) {
+      return;
+    }
+
+    const action = this.pendingAction;
+    this.pendingAction = null;
+    action();
+  }
+
+  private performStartOneVsOne(): void {
    if (this.creating) {
      return;
    }
@@ -48,7 +349,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.');
@@ -56,21 +359,23 @@ export class WelcomeComponent {
      });
  }

-  startVsBot(difficulty: 'easy' | 'medium' | 'hard'): void {
+  private performStartVsBot(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.');
@@ -78,21 +383,9 @@ export class WelcomeComponent {
      });
  }

-  toggleDifficultySelector(): void {
-    this.showDifficultySelector = !this.showDifficultySelector;
-    this.showJoinGameForm = false;
-    this.errorMessage = '';
-  }
-
-  toggleJoinGameForm(): void {
-    this.showJoinGameForm = !this.showJoinGameForm;
-    this.showDifficultySelector = false;
-    this.errorMessage = '';
-    this.gameIdInput = '';
-  }
-
-  joinGame(): void {
-    if (this.joiningGame || !this.gameIdInput.trim()) {
+  private performSubmitJoinGame(): void {
+    const gameId = this.gameIdInput.trim();
+    if (this.joiningGame || !gameId) {
      return;
    }

@@ -100,11 +393,14 @@ export class WelcomeComponent {
    this.joiningGame = true;

    this.gameApi
-      .getGame(this.gameIdInput.trim())
+      .getGame(gameId)
      .pipe(finalize(() => (this.joiningGame = false)))
      .subscribe({
        next: (game) => {
-          void this.router.navigate(['/game', game.gameId]);
+          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.');
@@ -112,26 +408,193 @@ export class WelcomeComponent {
      });
  }

-  clearJoinGameForm(): void {
-    this.showJoinGameForm = false;
-    this.gameIdInput = '';
+  private performSubmitImportGame(): void {
+    const trimmedImport = this.importText.trim();
+    if (this.importing || !trimmedImport) {
+      return;
+    }
+
+    this.errorMessage = '';
+    this.importing = true;
+
+    const importRequest =
+      this.importMode === 'fen' ? this.gameApi.importFen(trimmedImport) : this.gameApi.importPgn(trimmedImport);
+
+    importRequest.pipe(finalize(() => (this.importing = false))).subscribe({
+      next: (game) => {
+        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.';
+        this.errorMessage = getErrorMessage(error, defaultMessage);
+      }
+    });
+  }
+
+  private closeAllDialogs(): void {
+    this.showDifficultyDialog = false;
+    this.showOptionsDialog = false;
+    this.showJoinDialog = false;
+    this.showImportDialog = false;
    this.errorMessage = '';
  }

-  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 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`
+        }
+      };
+    });
  }

-  isDarkMode(): boolean {
-    return document.documentElement.getAttribute('data-theme') === 'dark';
+  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 }
+    }));
+  }
+
+  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';
+    let color: string | undefined;
+    let glowColor: string | undefined;
+
+    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 = (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`
+      }
+    };
+  }
+
+  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') {
+        target.state = 'on';
+        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 = {
+          '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 = {};
+      }
+    }
  }
 }