NowChess-Frontend/src/app/pages/profile/profile.component.ts

import { Component, OnInit, DestroyRef, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Router } from '@angular/router';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { AuthService } from '../../services/auth.service';
import { ThemeService } from '../../services/theme.service';
import { CurrentUser } from '../../models/auth.models';

interface Star {
  style: Record<string, string>;
}

interface BackgroundBuilding {
  style: Record<string, string>;
}

@Component({
  selector: 'app-profile',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './profile.component.html',
  styleUrl: './profile.component.css'
})
export class ProfileComponent implements OnInit {
  private readonly destroyRef = inject(DestroyRef);
  private readonly authService = inject(AuthService);
  private readonly themeService = inject(ThemeService);
  private readonly router = inject(Router);

  currentUser: CurrentUser | null = null;
  isSunsetMode = false;
  idCopied = false;
  usernameCopied = false;

  stars: Star[] = [];
  bgBuildings: BackgroundBuilding[] = [];

  ngOnInit(): void {
    this.authService.currentUser$
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe((user) => {
        this.currentUser = user;
        if (!user) {
          this.router.navigate(['']);
        }
      });

    this.themeService.darkMode$
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe((isDarkMode) => {
        this.isSunsetMode = !isDarkMode;
      });

    this.generateStars(220);
    this.generateBackgroundBuildings();
  }

  goBack(): void {
    this.router.navigate(['']);
  }

  copyPlayerId(id: string): void {
    navigator.clipboard.writeText(id).then(() => {
      this.idCopied = true;
      setTimeout(() => {
        this.idCopied = false;
      }, 2000);
    });
  }

  copyUsername(username: string): void {
    navigator.clipboard.writeText(username).then(() => {
      this.usernameCopied = true;
      setTimeout(() => {
        this.usernameCopied = false;
      }, 2000);
    });
  }

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

  private generateBackgroundBuildings(): void {
    const specs = [
      { l: '0%', w: '7%', h: '30vh' },
      { l: '3%', w: '4%', h: '18vh' },
      { 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' },
      { 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' },
      { l: '94%', w: '6%', h: '27vh' }
    ];

    this.bgBuildings = specs.map((spec) => ({
      style: { left: spec.l, width: spec.w, height: spec.h }
    }));
  }
}