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
@@ -0,0 +1,127 @@
+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 }
+    }));
+  }
+}