feat: challange request, accept, decline, page, added (not complete, polling issues, and not stable, and too much code for nothing)

Co-authored-by: Copilot <copilot@github.com>

src/app/app.routes.ts

@@ -2,10 +2,12 @@ import { Routes } from '@angular/router';
 import { GameComponent } from './pages/game/game.component';
 import { WelcomeComponent } from './pages/welcome/welcome.component';
 import { ProfileComponent } from './pages/profile/profile.component';
+import { ChallengesComponent } from './pages/challenges/challenges.component';
 
 export const routes: Routes = [
   { path: '', component: WelcomeComponent },
   { path: 'profile', component: ProfileComponent },
+  { path: 'challenges', component: ChallengesComponent },
   { path: 'game/:gameId', component: GameComponent },
   { path: '**', redirectTo: '' }
 ];

src/app/app.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { ToolbarComponent } from './components/toolbar/toolbar.component';
 import { ThemeService } from './services/theme.service';
+import { ChallengeWebSocketService } from './services/challenge-websocket.service';
 
 @Component({
   selector: 'app-root',
@@ -10,9 +11,13 @@ import { ThemeService } from './services/theme.service';
   styleUrl: './app.css'
 })
 export class App implements OnInit {
-  constructor(private readonly themeService: ThemeService) { }
+  constructor(
+    private readonly themeService: ThemeService,
+    private readonly challengeWs: ChallengeWebSocketService
+  ) { }
 
   ngOnInit(): void {
     this.themeService.initTheme();
+    this.challengeWs.connect();
   }
 }

src/app/components/challenge-create-dialog/challenge-create-dialog.component.css

@@ -0,0 +1,261 @@
+@import '../../button-template.css';
+
+.challenge-create-dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  backdrop-filter: blur(3px);
+
+  &.loading {
+    pointer-events: none;
+    opacity: 0.7;
+  }
+}
+
+.challenge-create-dialog {
+  background: linear-gradient(135deg, #0a0e27 0%, #1a1a3e 100%);
+  border: 2px solid #00d5ff;
+  border-radius: 8px;
+  box-shadow: 0 0 20px rgba(0, 213, 255, 0.3), inset 0 0 10px rgba(0, 213, 255, 0.05);
+  width: 90%;
+  max-width: 500px;
+  max-height: 90vh;
+  overflow-y: auto;
+  padding: 24px;
+  color: #e0e0e0;
+}
+
+.dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid rgba(0, 213, 255, 0.2);
+
+  h2 {
+    margin: 0;
+    color: #00d5ff;
+    font-size: 24px;
+    font-weight: 600;
+    letter-spacing: 1px;
+  }
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 28px;
+  color: #00d5ff;
+  cursor: pointer;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+
+  &:hover:not(:disabled) {
+    color: #ffffff;
+    transform: scale(1.1);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.dialog-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  label {
+    color: #b0b0d0;
+    font-size: 13px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  input,
+  select {
+    background-color: rgba(15, 20, 50, 0.8);
+    border: 1px solid rgba(0, 213, 255, 0.3);
+    border-radius: 4px;
+    color: #e0e0e0;
+    padding: 10px 12px;
+    font-size: 14px;
+    font-family: 'Space Mono', monospace;
+    transition: all 0.2s ease;
+
+    &:focus {
+      outline: none;
+      border-color: #00d5ff;
+      box-shadow: 0 0 10px rgba(0, 213, 255, 0.3);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    option {
+      background-color: #0a0e27;
+      color: #e0e0e0;
+    }
+  }
+
+  small {
+    color: #ff6b6b;
+    font-size: 12px;
+    margin-top: 4px;
+  }
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.form-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  label {
+    color: #b0b0d0;
+    font-size: 13px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  input {
+    background-color: rgba(15, 20, 50, 0.8);
+    border: 1px solid rgba(0, 213, 255, 0.3);
+    border-radius: 4px;
+    color: #e0e0e0;
+    padding: 10px 12px;
+    font-size: 14px;
+    font-family: 'Space Mono', monospace;
+    transition: all 0.2s ease;
+
+    &:focus {
+      outline: none;
+      border-color: #00d5ff;
+      box-shadow: 0 0 10px rgba(0, 213, 255, 0.3);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.preset-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.preset-btn {
+  padding: 8px 16px;
+  background-color: rgba(0, 213, 255, 0.1);
+  border: 1px solid #00d5ff;
+  border-radius: 4px;
+  color: #00d5ff;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover:not(:disabled) {
+    background-color: rgba(0, 213, 255, 0.2);
+    box-shadow: 0 0 10px rgba(0, 213, 255, 0.3);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.error-message {
+  background-color: rgba(255, 107, 107, 0.1);
+  border: 1px solid #ff6b6b;
+  border-radius: 4px;
+  padding: 12px;
+  color: #ff9999;
+  font-size: 13px;
+  margin-bottom: 8px;
+}
+
+.dialog-buttons {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+  margin-top: 20px;
+  padding-top: 15px;
+  border-top: 1px solid rgba(0, 213, 255, 0.2);
+
+  button {
+    padding: 10px 24px;
+    font-size: 13px;
+    font-weight: 600;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+
+    &.btn-secondary {
+      background-color: transparent;
+      border: 1px solid rgba(0, 213, 255, 0.3);
+      color: #00d5ff;
+
+      &:hover:not(:disabled) {
+        background-color: rgba(0, 213, 255, 0.1);
+        border-color: #00d5ff;
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+
+    &.btn-primary {
+      background-color: #00d5ff;
+      border: none;
+      color: #0a0e27;
+
+      &:hover:not(:disabled) {
+        box-shadow: 0 0 20px rgba(0, 213, 255, 0.6);
+        transform: translateY(-2px);
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+  }
+}

src/app/components/challenge-create-dialog/challenge-create-dialog.component.html

@@ -0,0 +1,125 @@
+<div class="challenge-create-dialog-overlay" (click)="cancel()" [class.loading]="loading">
+  <div class="challenge-create-dialog" (click)="$event.stopPropagation()">
+    <div class="dialog-header">
+      <h2>Create Challenge</h2>
+      <button type="button" class="close-btn" (click)="cancel()" [disabled]="loading">×</button>
+    </div>
+
+    <form [formGroup]="form" (ngSubmit)="submit()" class="dialog-form">
+      <!-- Error Message -->
+      <div *ngIf="errorMessage" class="error-message">
+        {{ errorMessage }}
+      </div>
+
+      <!-- Target Username -->
+      <div class="form-group">
+        <label for="targetUsername">Opponent Username</label>
+        <input
+          type="text"
+          id="targetUsername"
+          formControlName="targetUsername"
+          placeholder="Enter opponent's username"
+          [disabled]="loading"
+          required
+        />
+        <small *ngIf="form.get('targetUsername')?.hasError('required') && form.get('targetUsername')?.touched">
+          Username is required
+        </small>
+      </div>
+
+      <!-- Player Color Selection -->
+      <div class="form-group">
+        <label for="color">Play as</label>
+        <select id="color" formControlName="color" [disabled]="loading">
+          <option value="white">White</option>
+          <option value="black">Black</option>
+          <option value="random">Random</option>
+        </select>
+      </div>
+
+      <!-- Time Control Mode Selection -->
+      <div class="form-group">
+        <label for="timeMode">Time Control</label>
+        <select id="timeMode" formControlName="timeMode" [disabled]="loading">
+          <option value="blitz">Blitz</option>
+          <option value="rapid">Rapid</option>
+          <option value="classical">Classical</option>
+          <option value="unlimited">Unlimited</option>
+        </select>
+      </div>
+
+      <!-- Time Presets -->
+      <div class="form-group" *ngIf="selectedTimeMode !== 'unlimited'">
+        <label>Presets</label>
+        <div class="preset-buttons">
+          <button
+            type="button"
+            *ngFor="let preset of getAvailablePresets()"
+            class="preset-btn"
+            (click)="selectPreset(preset)"
+            [disabled]="loading"
+          >
+            {{ preset.label }}
+          </button>
+        </div>
+      </div>
+
+      <!-- Custom Time Control -->
+      <div class="form-group" *ngIf="selectedTimeMode !== 'unlimited'">
+        <div class="form-row">
+          <div class="form-col">
+            <label for="limitMinutes">Time (minutes)</label>
+            <input
+              type="number"
+              id="limitMinutes"
+              formControlName="limitMinutes"
+              min="1"
+              max="1000"
+              [disabled]="loading"
+            />
+          </div>
+          <div class="form-col">
+            <label for="incrementSeconds">Increment (seconds)</label>
+            <input
+              type="number"
+              id="incrementSeconds"
+              formControlName="incrementSeconds"
+              min="0"
+              max="300"
+              [disabled]="loading"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- TTL (Time to Live) -->
+      <div class="form-group">
+        <label for="ttlSeconds">Challenge Expires In</label>
+        <select id="ttlSeconds" formControlName="ttlSeconds" [disabled]="loading">
+          <option *ngFor="let ttl of ttlOptions" [value]="ttl.seconds">
+            {{ ttl.label }}
+          </option>
+        </select>
+      </div>
+
+      <!-- Buttons -->
+      <div class="dialog-buttons">
+        <button
+          type="button"
+          class="btn btn-secondary"
+          (click)="cancel()"
+          [disabled]="loading"
+        >
+          Cancel
+        </button>
+        <button
+          type="submit"
+          class="btn btn-primary"
+          [disabled]="form.invalid || loading"
+        >
+          {{ loading ? 'Sending...' : 'Send Challenge' }}
+        </button>
+      </div>
+    </form>
+  </div>
+</div>

src/app/components/challenge-create-dialog/challenge-create-dialog.component.ts

@@ -0,0 +1,159 @@
+import { Component, inject, OnInit, OnDestroy, DestroyRef, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { finalize } from 'rxjs';
+import { ChallengeService } from '../../services/challenge.service';
+import { Router } from '@angular/router';
+import { getErrorMessage } from '../../core/http/error-message.util';
+import { PlayerColor } from '../../models/challenge.models';
+
+type TimeMode = 'blitz' | 'rapid' | 'classical' | 'unlimited';
+
+interface TimePreset {
+  label: string;
+  limitSeconds: number;
+  incrementSeconds: number;
+}
+
+@Component({
+  selector: 'app-challenge-create-dialog',
+  standalone: true,
+  imports: [CommonModule, FormsModule, ReactiveFormsModule],
+  templateUrl: './challenge-create-dialog.component.html',
+  styleUrls: ['./challenge-create-dialog.component.css']
+})
+export class ChallengeCreateDialogComponent implements OnInit, OnDestroy {
+  private readonly challengeService = inject(ChallengeService);
+  private readonly router = inject(Router);
+  private readonly fb = inject(FormBuilder);
+  private readonly destroyRef = inject(DestroyRef);
+
+  @Output() closeChallengeDialog = new EventEmitter<void>();
+
+  form!: FormGroup;
+  loading = false;
+  errorMessage = '';
+  selectedTimeMode: TimeMode = 'rapid';
+
+  timePresets: Record<TimeMode, TimePreset[]> = {
+    blitz: [
+      { label: '1+0', limitSeconds: 60, incrementSeconds: 0 },
+      { label: '2+1', limitSeconds: 120, incrementSeconds: 1 },
+      { label: '3+0', limitSeconds: 180, incrementSeconds: 0 },
+      { label: '3+2', limitSeconds: 180, incrementSeconds: 2 },
+      { label: '5+0', limitSeconds: 300, incrementSeconds: 0 }
+    ],
+    rapid: [
+      { label: '10+0', limitSeconds: 600, incrementSeconds: 0 },
+      { label: '10+5', limitSeconds: 600, incrementSeconds: 5 },
+      { label: '15+10', limitSeconds: 900, incrementSeconds: 10 },
+      { label: '25+10', limitSeconds: 1500, incrementSeconds: 10 }
+    ],
+    classical: [
+      { label: '30+0', limitSeconds: 1800, incrementSeconds: 0 },
+      { label: '30+20', limitSeconds: 1800, incrementSeconds: 20 },
+      { label: '60+30', limitSeconds: 3600, incrementSeconds: 30 },
+      { label: '90+30', limitSeconds: 5400, incrementSeconds: 30 }
+    ],
+    unlimited: []
+  };
+
+  ttlOptions = [
+    { label: '5 minutes', seconds: 300 },
+    { label: '1 hour', seconds: 3600 },
+    { label: '1 day', seconds: 86400 },
+    { label: 'No expiry', seconds: 0 }
+  ];
+
+  ngOnInit(): void {
+    this.initializeForm();
+  }
+
+  ngOnDestroy(): void {
+  }
+
+  private initializeForm(): void {
+    this.form = this.fb.group({
+      targetUsername: ['', [Validators.required, Validators.minLength(1)]],
+      color: ['random', Validators.required],
+      timeMode: ['rapid'],
+      limitMinutes: [10, [Validators.required, Validators.min(1), Validators.max(1000)]],
+      incrementSeconds: [5, [Validators.required, Validators.min(0), Validators.max(300)]],
+      ttlSeconds: [3600, Validators.required]
+    });
+
+    this.form.get('timeMode')?.valueChanges
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((mode: unknown) => {
+        const timeMode = mode as TimeMode;
+        this.selectedTimeMode = timeMode;
+        if (timeMode !== 'unlimited') {
+          const firstPreset = this.timePresets[timeMode][0];
+          if (firstPreset) {
+            this.form.patchValue({
+              limitMinutes: firstPreset.limitSeconds / 60,
+              incrementSeconds: firstPreset.incrementSeconds
+            });
+          }
+        }
+      });
+  }
+
+  selectPreset(preset: TimePreset): void {
+    this.form.patchValue({
+      limitMinutes: preset.limitSeconds / 60,
+      incrementSeconds: preset.incrementSeconds
+    });
+  }
+
+  getAvailablePresets(): TimePreset[] {
+    return this.timePresets[this.selectedTimeMode] || [];
+  }
+
+  submit(): void {
+    if (this.form.invalid || this.loading) {
+      return;
+    }
+
+    const targetUsername = this.form.get('targetUsername')?.value?.trim();
+    if (!targetUsername) {
+      this.errorMessage = 'Please enter a valid username';
+      return;
+    }
+
+    this.errorMessage = '';
+    this.loading = true;
+
+    const limitSeconds = Math.round((this.form.get('limitMinutes')?.value || 0) * 60);
+    const incrementSeconds = this.form.get('incrementSeconds')?.value || 0;
+    const ttlSeconds = this.form.get('ttlSeconds')?.value;
+    const color = (this.form.get('color')?.value || 'random') as PlayerColor;
+
+    this.challengeService.sendChallenge(targetUsername, {
+      timeControl: {
+        limitSeconds,
+        incrementSeconds
+      },
+      color,
+      ttlSeconds: ttlSeconds > 0 ? ttlSeconds : undefined
+    })
+      .pipe(finalize(() => (this.loading = false)))
+      .subscribe({
+        next: (challenge) => {
+          // Challenge sent successfully - navigate to challenges page to view status
+          this.form.reset();
+          this.closeChallengeDialog.emit();
+          void this.router.navigate(['/challenges']);
+        },
+        error: (error) => {
+          this.errorMessage = getErrorMessage(error, 'Failed to send challenge. Please try again.');
+        }
+      });
+  }
+
+  cancel(): void {
+    this.form.reset();
+    this.closeChallengeDialog.emit();
+  }
+}

src/app/components/challenge-notification/challenge-notification.component.css

@@ -0,0 +1,194 @@
+@import '../../button-template.css';
+
+.challenge-notification {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  max-width: 400px;
+  background: linear-gradient(135deg, #0a0e27 0%, #1a1a3e 100%);
+  border: 2px solid #00d5ff;
+  border-radius: 8px;
+  box-shadow: 0 0 20px rgba(0, 213, 255, 0.4), inset 0 0 10px rgba(0, 213, 255, 0.05);
+  padding: 16px;
+  color: #e0e0e0;
+  z-index: 2000;
+  animation: slideInRight 0.3s ease-out;
+
+  &.error {
+    border-color: #ff6b6b;
+    box-shadow: 0 0 20px rgba(255, 107, 107, 0.4), inset 0 0 10px rgba(255, 107, 107, 0.05);
+  }
+
+  @media (max-width: 768px) {
+    top: 10px;
+    right: 10px;
+    left: 10px;
+    max-width: none;
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(450px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.notification-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(0, 213, 255, 0.2);
+}
+
+.notification-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+
+  .badge {
+    background-color: rgba(0, 213, 255, 0.2);
+    border: 1px solid #00d5ff;
+    border-radius: 3px;
+    padding: 4px 8px;
+    font-size: 10px;
+    font-weight: 700;
+    color: #00d5ff;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    white-space: nowrap;
+  }
+
+  .title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #d4f4ff;
+  }
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 24px;
+  color: #00d5ff;
+  cursor: pointer;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+
+  &:hover:not(:disabled) {
+    color: #ffffff;
+    transform: scale(1.15);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.notification-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.time-control {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 13px;
+
+  .label {
+    color: #b0b0d0;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  .value {
+    background-color: rgba(0, 213, 255, 0.1);
+    border: 1px solid rgba(0, 213, 255, 0.3);
+    border-radius: 3px;
+    padding: 4px 12px;
+    color: #00d5ff;
+    font-family: 'Space Mono', monospace;
+    font-weight: 600;
+  }
+}
+
+.expiration {
+  font-size: 12px;
+  color: #b0b0d0;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.error-message {
+  background-color: rgba(255, 107, 107, 0.1);
+  border: 1px solid #ff6b6b;
+  border-radius: 3px;
+  padding: 8px 10px;
+  color: #ff9999;
+  font-size: 12px;
+}
+
+.notification-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+
+  button {
+    padding: 8px 16px;
+    font-size: 12px;
+    font-weight: 600;
+    border-radius: 3px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    border: none;
+
+    &.btn-decline {
+      background-color: transparent;
+      border: 1px solid rgba(0, 213, 255, 0.3);
+      color: #00d5ff;
+
+      &:hover:not(:disabled) {
+        background-color: rgba(0, 213, 255, 0.1);
+        border-color: #00d5ff;
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+
+    &.btn-accept {
+      background-color: #00d5ff;
+      color: #0a0e27;
+
+      &:hover:not(:disabled) {
+        box-shadow: 0 0 15px rgba(0, 213, 255, 0.6);
+        transform: translateY(-1px);
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+  }
+}

src/app/components/challenge-notification/challenge-notification.component.html

@@ -0,0 +1,45 @@
+<div class="challenge-notification" [class.error]="!!errorMessage">
+  <div class="notification-header">
+    <div class="notification-title">
+      <span class="badge">CHALLENGE</span>
+      <span class="title">{{ getCreatedByDisplay() }} challenged you!</span>
+    </div>
+    <button type="button" class="close-btn" (click)="onClose()" [disabled]="acceptingChallenge || decliningChallenge">
+      ×
+    </button>
+  </div>
+
+  <div class="notification-content">
+    <div class="time-control">
+      <span class="label">Time Control:</span>
+      <span class="value">{{ getTimeControlDisplay() }}</span>
+    </div>
+
+    <div class="expiration">
+      <span class="label">{{ getExpirationInfo() }}</span>
+    </div>
+
+    <div *ngIf="errorMessage" class="error-message">
+      {{ errorMessage }}
+    </div>
+
+    <div class="notification-actions">
+      <button
+        type="button"
+        class="btn btn-decline"
+        (click)="onDecline()"
+        [disabled]="acceptingChallenge || decliningChallenge"
+      >
+        {{ decliningChallenge ? 'Declining...' : 'Decline' }}
+      </button>
+      <button
+        type="button"
+        class="btn btn-accept"
+        (click)="onAccept()"
+        [disabled]="acceptingChallenge || decliningChallenge"
+      >
+        {{ acceptingChallenge ? 'Accepting...' : 'Accept' }}
+      </button>
+    </div>
+  </div>
+</div>

src/app/components/challenge-notification/challenge-notification.component.ts

@@ -0,0 +1,101 @@
+import { Component, Input, Output, EventEmitter, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Challenge } from '../../models/challenge.models';
+import { ChallengeService } from '../../services/challenge.service';
+import { finalize } from 'rxjs';
+import { getErrorMessage } from '../../core/http/error-message.util';
+
+@Component({
+  selector: 'app-challenge-notification',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './challenge-notification.component.html',
+  styleUrls: ['./challenge-notification.component.css']
+})
+export class ChallengeNotificationComponent {
+  @Input() challenge!: Challenge;
+  @Output() accept = new EventEmitter<Challenge>();
+  @Output() decline = new EventEmitter<Challenge>();
+  @Output() close = new EventEmitter<void>();
+
+  private readonly challengeService = inject(ChallengeService);
+
+  acceptingChallenge = false;
+  decliningChallenge = false;
+  errorMessage = '';
+
+  onAccept(): void {
+    if (this.acceptingChallenge || this.decliningChallenge) {
+      return;
+    }
+
+    this.acceptingChallenge = true;
+    this.errorMessage = '';
+
+    this.challengeService.acceptChallenge(this.challenge.id)
+      .pipe(finalize(() => (this.acceptingChallenge = false)))
+      .subscribe({
+        next: () => {
+          this.accept.emit(this.challenge);
+        },
+        error: (error) => {
+          this.errorMessage = getErrorMessage(error, 'Failed to accept challenge');
+        }
+      });
+  }
+
+  onDecline(): void {
+    if (this.acceptingChallenge || this.decliningChallenge) {
+      return;
+    }
+
+    this.decliningChallenge = true;
+    this.errorMessage = '';
+
+    this.challengeService.declineChallenge(this.challenge.id, { reason: 'Not interested' })
+      .pipe(finalize(() => (this.decliningChallenge = false)))
+      .subscribe({
+        next: () => {
+          this.decline.emit(this.challenge);
+        },
+        error: (error) => {
+          this.errorMessage = getErrorMessage(error, 'Failed to decline challenge');
+        }
+      });
+  }
+
+  onClose(): void {
+    this.close.emit();
+  }
+
+  getTimeControlDisplay(): string {
+    const { limit, increment } = this.challenge.timeControl;
+    if (!limit || !increment) {
+      return 'Unlimited';
+    }
+    const minutes = Math.floor(limit / 60);
+    return `${minutes}+${increment}`;
+  }
+
+  getCreatedByDisplay(): string {
+    return this.challenge.challenger.name;
+  }
+
+  getExpirationInfo(): string {
+    const expiresAt = new Date(this.challenge.expiresAt);
+    const now = new Date();
+    const diffMs = expiresAt.getTime() - now.getTime();
+
+    if (diffMs <= 0) {
+      return 'Expired';
+    }
+
+    const minutes = Math.floor(diffMs / 60000);
+    if (minutes > 60) {
+      const hours = Math.floor(minutes / 60);
+      return `Expires in ${hours}h`;
+    }
+
+    return `Expires in ${minutes}m`;
+  }
+}

src/app/components/toolbar/toolbar.component.css

@@ -82,3 +82,148 @@
 .ms-auto {
   margin-left: auto;
 }
+
+.notification-container {
+  position: relative;
+}
+
+.notification-badge {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  position: relative;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+
+  &:hover {
+    transform: scale(1.1);
+  }
+
+  &.has-notifications {
+    animation: pulse 2s infinite;
+  }
+
+  .badge {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    background-color: #ff6b6b;
+    color: white;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 10px;
+    font-weight: bold;
+    box-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
+  }
+}
+
+@keyframes pulse {
+  0% {
+    filter: drop-shadow(0 0 3px rgba(0, 213, 255, 0.3));
+  }
+  50% {
+    filter: drop-shadow(0 0 8px rgba(0, 213, 255, 0.6));
+  }
+  100% {
+    filter: drop-shadow(0 0 3px rgba(0, 213, 255, 0.3));
+  }
+}
+
+.notification-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  background: linear-gradient(135deg, #0a0e27 0%, #1a1a3e 100%);
+  border: 1px solid rgba(0, 213, 255, 0.3);
+  border-radius: 8px;
+  min-width: 250px;
+  max-height: 300px;
+  overflow-y: auto;
+  z-index: 1001;
+  box-shadow: 0 0 20px rgba(0, 213, 255, 0.3);
+  margin-top: 10px;
+
+  .notification-menu-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px;
+    border-bottom: 1px solid rgba(0, 213, 255, 0.2);
+    color: #00d5ff;
+    font-size: 13px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+
+    .close-btn {
+      background: none;
+      border: none;
+      color: #00d5ff;
+      font-size: 20px;
+      cursor: pointer;
+      padding: 0;
+      transition: all 0.2s ease;
+
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
+  }
+
+  .notification-list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 8px;
+  }
+
+  .notification-item {
+    padding: 10px 12px;
+    background-color: rgba(0, 213, 255, 0.05);
+    border: 1px solid rgba(0, 213, 255, 0.1);
+    border-radius: 4px;
+    font-size: 12px;
+    color: #b0b0d0;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background-color: rgba(0, 213, 255, 0.1);
+      border-color: rgba(0, 213, 255, 0.3);
+    }
+  }
+
+  .notification-menu-footer {
+    padding: 8px 8px 0;
+    border-top: 1px solid rgba(0, 213, 255, 0.2);
+  }
+
+  .view-all-btn {
+    width: 100%;
+    padding: 8px 12px;
+    background-color: rgba(0, 213, 255, 0.1);
+    border: 1px solid rgba(0, 213, 255, 0.3);
+    border-radius: 4px;
+    color: #00d5ff;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background-color: rgba(0, 213, 255, 0.2);
+      border-color: #00d5ff;
+    }
+  }
+}

src/app/components/toolbar/toolbar.component.html

@@ -3,6 +3,42 @@
     <span class="navbar-brand">NowChess</span>
     <div class="ms-auto">
       <div class="d-flex align-items-center gap-2">
+        <!-- Challenge Notification Badge -->
+        <div class="notification-container">
+          <button
+            type="button"
+            class="notification-badge"
+            (click)="toggleNotificationMenu()"
+            [class.has-notifications]="incomingChallenges.length > 0"
+            title="View challenges"
+          >
+            🔔
+            <span *ngIf="incomingChallenges.length > 0" class="badge">
+              {{ incomingChallenges.length }}
+            </span>
+          </button>
+
+          <!-- Notification Menu Dropdown -->
+          @if (showNotificationMenu && incomingChallenges.length > 0) {
+          <div class="notification-menu" (click)="$event.stopPropagation()">
+            <div class="notification-menu-header">
+              Challenges
+              <button type="button" class="close-btn" (click)="closeNotificationMenu()">×</button>
+            </div>
+            <div class="notification-list">
+              <div *ngFor="let challenge of incomingChallenges" class="notification-item">
+                {{ challenge.challenger.name }}
+              </div>
+            </div>
+            <div class="notification-menu-footer">
+              <button type="button" class="view-all-btn" (click)="goToChallenges()">
+                View All Challenges →
+              </button>
+            </div>
+          </div>
+          }
+        </div>
+
         <button type="button" class="app-btn" (click)="toggleTheme()">
           {{ isDarkMode ? 'Light mode' : 'Dark mode' }}
         </button>
@@ -11,6 +47,9 @@
           <button type="button" class="me-btn" (click)="goToProfile()">
             👤 {{ user.username }}
           </button>
+          <button type="button" class="app-btn" (click)="goToChallenges()">
+            Challenges
+          </button>
           <button type="button" class="app-btn" (click)="logout()">Logout</button>
         </div>
         } @else {
@@ -26,6 +65,16 @@
   </div>
 </nav>
 
+<!-- Challenge Notification Popup -->
+@if (displayedChallenge) {
+<app-challenge-notification
+  [challenge]="displayedChallenge"
+  (accept)="onChallengeAccepted($event)"
+  (decline)="onChallengeDeclined($event)"
+  (close)="onNotificationClose()"
+/>
+}
+
 @if (showLoginDialog) {
 <app-login-dialog (onClose)="closeLoginDialog()" (onSuccess)="onLoginSuccess()" />
 }

src/app/components/toolbar/toolbar.component.ts

@@ -8,11 +8,14 @@ import { CurrentUser } from '../../models/auth.models';
 import { LoginDialogComponent } from '../login-dialog/login-dialog.component';
 import { RegisterDialogComponent } from '../register-dialog/register-dialog.component';
 import { ThemeService } from '../../services/theme.service';
+import { ChallengeEventService } from '../../services/challenge-event.service';
+import { ChallengeNotificationComponent } from '../challenge-notification/challenge-notification.component';
+import { Challenge } from '../../models/challenge.models';
 
 @Component({
   selector: 'app-toolbar',
   standalone: true,
-  imports: [CommonModule, LoginDialogComponent, RegisterDialogComponent],
+  imports: [CommonModule, LoginDialogComponent, RegisterDialogComponent, ChallengeNotificationComponent],
   templateUrl: './toolbar.component.html',
   styleUrl: './toolbar.component.css'
 })
@@ -21,12 +24,16 @@ export class ToolbarComponent implements OnInit {
   private readonly authService = inject(AuthService);
   private readonly authDialogService = inject(AuthDialogService);
   private readonly themeService = inject(ThemeService);
+  private readonly challengeEventService = inject(ChallengeEventService);
   private readonly router = inject(Router);
 
   currentUser: CurrentUser | null = null;
   showLoginDialog = false;
   showRegisterDialog = false;
   isDarkMode = false;
+  incomingChallenges: Challenge[] = [];
+  showNotificationMenu = false;
+  displayedChallenge: Challenge | null = null;
 
   ngOnInit(): void {
     this.authService.currentUser$
@@ -47,6 +54,22 @@ export class ToolbarComponent implements OnInit {
       .subscribe((isDarkMode) => {
         this.isDarkMode = isDarkMode;
       });
+
+    this.challengeEventService.getIncomingChallenges$()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((challenges) => {
+        this.incomingChallenges = challenges;
+        // Show the most recent challenge as notification
+        if (challenges.length > 0) {
+          this.displayedChallenge = challenges[0];
+        }
+      });
+
+    this.challengeEventService.getChallengeReceived$()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((challenge) => {
+        this.displayedChallenge = challenge;
+      });
   }
 
   openLoginDialog(): void {
@@ -84,4 +107,34 @@ export class ToolbarComponent implements OnInit {
   onRegisterSuccess(): void {
     this.closeRegisterDialog();
   }
+
+  toggleNotificationMenu(): void {
+    this.showNotificationMenu = !this.showNotificationMenu;
+  }
+
+  closeNotificationMenu(): void {
+    this.showNotificationMenu = false;
+  }
+
+  onChallengeAccepted(challenge: Challenge): void {
+    this.challengeEventService.onChallengeAccepted(challenge);
+    this.displayedChallenge = null;
+    this.closeNotificationMenu();
+    // Navigate to the game (once game creation is handled by backend)
+  }
+
+  onChallengeDeclined(challenge: Challenge): void {
+    this.challengeEventService.removeChallenge(challenge.id);
+    this.displayedChallenge = null;
+    this.closeNotificationMenu();
+  }
+
+  onNotificationClose(): void {
+    this.displayedChallenge = null;
+  }
+
+  goToChallenges(): void {
+    this.closeNotificationMenu();
+    void this.router.navigate(['/challenges']);
+  }
 }

src/app/models/challenge.models.ts

@@ -0,0 +1,49 @@
+export type ChallengeStatus = 'created' | 'pending' | 'accepted' | 'declined' | 'cancelled' | 'expired';
+
+export type PlayerColor = 'white' | 'black' | 'random';
+
+export interface Player {
+  id: string;
+  name: string;
+  rating: number;
+}
+
+export interface TimeControl {
+  type: string | null;
+  limit: number | null;
+  increment: number | null;
+}
+
+export interface Challenge {
+  id: string;
+  challenger: Player;
+  destUser: Player;
+  variant: string;
+  color: PlayerColor;
+  timeControl: TimeControl;
+  status: ChallengeStatus;
+  declineReason: string | null;
+  gameId: string | null;
+  expiresAt: string;
+  createdAt: string;
+}
+
+export interface SendChallengeRequest {
+  timeControl: {
+    limitSeconds: number;
+    incrementSeconds: number;
+  };
+  color?: PlayerColor;
+  ttlSeconds?: number;
+}
+
+export interface ListChallengesResponse {
+  'in'?: Challenge[];
+  'out'?: Challenge[];
+  incoming?: Challenge[];
+  outgoing?: Challenge[];
+}
+
+export interface DeclineChallengeRequest {
+  reason?: string;
+}

src/app/pages/challenges/challenges.component.css

@@ -0,0 +1,222 @@
+@import '../../button-template.css';
+
+.challenges-container {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #04000f 0%, #0e0235 25%, #2d0860 50%, #0e0235 75%, #04000f 100%);
+  color: #e0e0e0;
+  padding: 20px;
+  font-family: 'Space Mono', 'Courier New', monospace;
+}
+
+.challenges-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30px;
+  padding-bottom: 20px;
+  border-bottom: 2px solid rgba(0, 213, 255, 0.3);
+
+  h1 {
+    margin: 0;
+    color: #00d5ff;
+    font-size: 32px;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+  }
+}
+
+.back-btn {
+  background: transparent;
+  border: 1px solid rgba(0, 213, 255, 0.3);
+  color: #00d5ff;
+  padding: 10px 20px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: rgba(0, 213, 255, 0.1);
+    border-color: #00d5ff;
+  }
+}
+
+.error-banner {
+  background-color: rgba(255, 107, 107, 0.1);
+  border: 1px solid #ff6b6b;
+  border-radius: 4px;
+  padding: 15px;
+  color: #ff9999;
+  margin-bottom: 20px;
+}
+
+.challenges-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 30px;
+
+  @media (max-width: 1024px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.challenges-section {
+  h2 {
+    color: #00d5ff;
+    font-size: 20px;
+    margin: 0 0 20px 0;
+    padding-bottom: 10px;
+    border-bottom: 1px solid rgba(0, 213, 255, 0.2);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
+}
+
+.loading-spinner {
+  text-align: center;
+  padding: 40px;
+  color: #00d5ff;
+  font-size: 16px;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 40px;
+  color: #b0b0d0;
+  font-size: 14px;
+  background-color: rgba(0, 213, 255, 0.05);
+  border: 1px dashed rgba(0, 213, 255, 0.2);
+  border-radius: 4px;
+}
+
+.challenge-list {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.challenge-card {
+  background: linear-gradient(135deg, rgba(10, 14, 39, 0.8) 0%, rgba(26, 26, 62, 0.8) 100%);
+  border: 1px solid rgba(0, 213, 255, 0.3);
+  border-radius: 8px;
+  padding: 16px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: rgba(0, 213, 255, 0.6);
+    box-shadow: 0 0 15px rgba(0, 213, 255, 0.2);
+  }
+}
+
+.challenge-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(0, 213, 255, 0.1);
+
+  .challenger-name {
+    color: #d4f4ff;
+    font-weight: 600;
+    font-size: 14px;
+  }
+
+  .time-control {
+    background-color: rgba(0, 213, 255, 0.15);
+    border: 1px solid rgba(0, 213, 255, 0.3);
+    color: #00d5ff;
+    padding: 4px 12px;
+    border-radius: 3px;
+    font-weight: 600;
+    font-size: 12px;
+  }
+}
+
+.challenge-details {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 12px;
+
+  .detail {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 12px;
+
+    .label {
+      color: #b0b0d0;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .value {
+      color: #00d5ff;
+      font-weight: 600;
+
+      &.status-pending {
+        color: #ffcc30;
+      }
+
+      &.status-accepted {
+        color: #4ade80;
+      }
+
+      &.status-declined {
+        color: #ff6b6b;
+      }
+
+      &.status-expired {
+        color: #b0b0d0;
+      }
+    }
+  }
+}
+
+.challenge-actions {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+
+  .btn {
+    padding: 8px 16px;
+    border: 1px solid rgba(0, 213, 255, 0.3);
+    border-radius: 4px;
+    background-color: transparent;
+    color: #00d5ff;
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background-color: rgba(0, 213, 255, 0.1);
+      border-color: #00d5ff;
+    }
+
+    &.btn-accept {
+      background-color: #00d5ff;
+      color: #04000f;
+      border: none;
+
+      &:hover {
+        box-shadow: 0 0 15px rgba(0, 213, 255, 0.6);
+      }
+    }
+
+    &.btn-decline,
+    &.btn-cancel {
+      color: #ff6b6b;
+      border-color: rgba(255, 107, 107, 0.3);
+
+      &:hover {
+        background-color: rgba(255, 107, 107, 0.1);
+        border-color: #ff6b6b;
+      }
+    }
+  }
+}

src/app/pages/challenges/challenges.component.html

@@ -0,0 +1,102 @@
+<div class="challenges-container">
+  <div class="challenges-header">
+    <h1>Active Challenges</h1>
+    <button type="button" class="back-btn" (click)="goBack()">← Back</button>
+  </div>
+
+  <div *ngIf="errorMessage" class="error-banner">
+    {{ errorMessage }}
+  </div>
+
+  <div class="challenges-grid">
+    <!-- Incoming Challenges -->
+    <div class="challenges-section">
+      <h2>Incoming Challenges</h2>
+      <div *ngIf="loading" class="loading-spinner">Loading...</div>
+
+      <div *ngIf="!loading && incomingChallenges.length === 0" class="empty-state">
+        <p>No incoming challenges</p>
+      </div>
+
+      <div *ngIf="!loading && incomingChallenges.length > 0" class="challenge-list">
+        <div *ngFor="let challenge of incomingChallenges" class="challenge-card">
+          <div class="challenge-header">
+            <span class="challenger-name">{{ getChallengerDisplay(challenge) }}</span>
+            <span class="time-control">{{ getTimeControlDisplay(challenge) }}</span>
+          </div>
+
+          <div class="challenge-details">
+            <div class="detail">
+              <span class="label">Status:</span>
+              <span class="value" [class]="'status-' + challenge.status">
+                {{ challenge.status | uppercase }}
+              </span>
+            </div>
+            <div class="detail">
+              <span class="label">Expires in:</span>
+              <span class="value">{{ getExpirationInfo(challenge) }}</span>
+            </div>
+          </div>
+
+          <div class="challenge-actions" *ngIf="challenge.status === 'created'">
+            <button
+              type="button"
+              class="btn btn-decline"
+              (click)="declineChallenge(challenge)"
+            >
+              Decline
+            </button>
+            <button
+              type="button"
+              class="btn btn-accept"
+              (click)="acceptChallenge(challenge)"
+            >
+              Accept
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Outgoing Challenges -->
+    <div class="challenges-section">
+      <h2>Outgoing Challenges</h2>
+
+      <div *ngIf="!loading && outgoingChallenges.length === 0" class="empty-state">
+        <p>No outgoing challenges</p>
+      </div>
+
+      <div *ngIf="!loading && outgoingChallenges.length > 0" class="challenge-list">
+        <div *ngFor="let challenge of outgoingChallenges" class="challenge-card">
+          <div class="challenge-header">
+            <span class="challenger-name">→ {{ getOpponentDisplay(challenge) }}</span>
+            <span class="time-control">{{ getTimeControlDisplay(challenge) }}</span>
+          </div>
+
+          <div class="challenge-details">
+            <div class="detail">
+              <span class="label">Status:</span>
+              <span class="value" [class]="'status-' + challenge.status">
+                {{ challenge.status | uppercase }}
+              </span>
+            </div>
+            <div class="detail">
+              <span class="label">Expires in:</span>
+              <span class="value">{{ getExpirationInfo(challenge) }}</span>
+            </div>
+          </div>
+
+          <div class="challenge-actions" *ngIf="challenge.status === 'created'">
+            <button
+              type="button"
+              class="btn btn-cancel"
+              (click)="cancelChallenge(challenge)"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/pages/challenges/challenges.component.ts

@@ -0,0 +1,167 @@
+import { Component, inject, OnInit, OnDestroy, DestroyRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ChallengeService } from '../../services/challenge.service';
+import { ChallengeEventService } from '../../services/challenge-event.service';
+import { Challenge } from '../../models/challenge.models';
+import { getErrorMessage } from '../../core/http/error-message.util';
+
+@Component({
+  selector: 'app-challenges',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './challenges.component.html',
+  styleUrls: ['./challenges.component.css']
+})
+export class ChallengesComponent implements OnInit, OnDestroy {
+  private readonly challengeService = inject(ChallengeService);
+  private readonly challengeEventService = inject(ChallengeEventService);
+  private readonly router = inject(Router);
+  private readonly destroyRef = inject(DestroyRef);
+
+  incomingChallenges: Challenge[] = [];
+  outgoingChallenges: Challenge[] = [];
+  loading = false;
+  errorMessage = '';
+
+  private pollInterval: any = null;
+  private readonly pollIntervalMs = 5000; // Poll every 5 seconds
+
+  ngOnInit(): void {
+    this.loadChallenges(true);
+
+    // Subscribe to challenge events
+    this.challengeEventService.getChallengeReceived$()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => {
+        this.loadChallenges();
+      });
+
+    // Start polling for challenge updates
+    this.startPolling();
+  }
+
+  ngOnDestroy(): void {
+    this.stopPolling();
+  }
+
+  private startPolling(): void {
+    this.pollInterval = setInterval(() => {
+      this.loadChallenges(false);
+    }, this.pollIntervalMs);
+  }
+
+  private stopPolling(): void {
+    if (this.pollInterval) {
+      clearInterval(this.pollInterval);
+      this.pollInterval = null;
+    }
+  }
+
+  loadChallenges(showLoader = false): void {
+    if (showLoader) {
+      this.loading = true;
+      this.errorMessage = '';
+    }
+
+    this.challengeService.listChallenges()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (response) => {
+          this.incomingChallenges = response.in || response.incoming || [];
+          this.outgoingChallenges = response.out || response.outgoing || [];
+          if (showLoader) {
+            this.loading = false;
+          }
+        },
+        error: (error) => {
+          this.errorMessage = getErrorMessage(error, 'Failed to load challenges');
+          if (showLoader) {
+            this.loading = false;
+          }
+        }
+      });
+  }
+
+  acceptChallenge(challenge: Challenge): void {
+    this.challengeService.acceptChallenge(challenge.id)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: () => {
+          this.challengeEventService.onChallengeAccepted(challenge);
+          this.loadChallenges();
+          // Navigate to game (if backend creates game automatically)
+        },
+        error: (error) => {
+          this.errorMessage = getErrorMessage(error, 'Failed to accept challenge');
+        }
+      });
+  }
+
+  declineChallenge(challenge: Challenge): void {
+    this.challengeService.declineChallenge(challenge.id, { reason: 'Not interested' })
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: () => {
+          this.challengeEventService.removeChallenge(challenge.id);
+          this.loadChallenges();
+        },
+        error: (error) => {
+          this.errorMessage = getErrorMessage(error, 'Failed to decline challenge');
+        }
+      });
+  }
+
+  cancelChallenge(challenge: Challenge): void {
+    this.challengeService.cancelChallenge(challenge.id)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: () => {
+          this.loadChallenges();
+        },
+        error: (error) => {
+          this.errorMessage = getErrorMessage(error, 'Failed to cancel challenge');
+        }
+      });
+  }
+
+  goBack(): void {
+    void this.router.navigate(['/']);
+  }
+
+  getTimeControlDisplay(challenge: Challenge): string {
+    const { limit, increment } = challenge.timeControl;
+    if (!limit || !increment) {
+      return 'Unlimited';
+    }
+    const minutes = Math.floor(limit / 60);
+    return `${minutes}+${increment}`;
+  }
+
+  getChallengerDisplay(challenge: Challenge): string {
+    return challenge.challenger.name;
+  }
+
+  getOpponentDisplay(challenge: Challenge): string {
+    return challenge.destUser.name;
+  }
+
+  getExpirationInfo(challenge: Challenge): string {
+    const expiresAt = new Date(challenge.expiresAt);
+    const now = new Date();
+    const diffMs = expiresAt.getTime() - now.getTime();
+
+    if (diffMs <= 0 || challenge.status === 'expired') {
+      return 'Expired';
+    }
+
+    const minutes = Math.floor(diffMs / 60000);
+    if (minutes > 60) {
+      const hours = Math.floor(minutes / 60);
+      return `${hours}h`;
+    }
+
+    return `${minutes}m`;
+  }
+}

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

@@ -94,8 +94,8 @@
               <div class="bb-tag">WELCOME</div>
               <div class="bb-title" style="font-size:clamp(16px,1.8vw,26px);">WELCOME TO<br />NOWCHESS</div>
               <div class="bb-subtitle">Play your next move from the skyline.</div>
-              <button type="button" class="app-btn" (click)="startOneVsOne()" [disabled]="creating">
+              <button type="button" class="app-btn" (click)="openChallengeDialog()" [disabled]="creating">
-                {{ creating ? 'CREATING...' : 'START NOW →' }}
+                {{ creating ? 'CREATING...' : 'CREATE GAME →' }}
               </button>
             </div>
           </div>
@@ -204,6 +204,7 @@
     <div class="dialog-card" (click)="$event.stopPropagation()">
       <div class="dialog-title">MORE OPTIONS</div>
       <div class="dialog-actions">
+        <button type="button" class="app-btn" (click)="openChallengeDialog()">START GAME</button>
         <button type="button" class="app-btn" (click)="openImportDialog()">IMPORT GAME</button>
       </div>
     </div>
@@ -256,6 +257,10 @@
   </div>
   }
 
+  @if (showChallengeDialog) {
+  <app-challenge-create-dialog (closeChallengeDialog)="closeChallengeDialog()"></app-challenge-create-dialog>
+  }
+
   @if (errorMessage) {
   <p class="error-banner">{{ errorMessage }}</p>
   }

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

@@ -10,6 +10,7 @@ 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';
+import { ChallengeCreateDialogComponent } from '../../components/challenge-create-dialog/challenge-create-dialog.component';
 
 type Difficulty = 'easy' | 'medium' | 'hard';
 type ImportMode = 'fen' | 'pgn';
@@ -32,7 +33,7 @@ interface WindowCell {
 @Component({
   selector: 'app-welcome',
   standalone: true,
-  imports: [CommonModule, FormsModule],
+  imports: [CommonModule, FormsModule, ChallengeCreateDialogComponent],
   templateUrl: './welcome.component.html',
   styleUrls: ['./welcome.component.css']
 })
@@ -45,6 +46,7 @@ export class WelcomeComponent implements OnInit, OnDestroy {
   creating = false;
   joiningGame = false;
   importing = false;
+  showChallengeDialog = false;
   errorMessage = '';
 
   showDifficultyDialog = false;
@@ -154,6 +156,20 @@ export class WelcomeComponent implements OnInit, OnDestroy {
     this.errorMessage = '';
   }
 
+  openChallengeDialog(): void {
+    if (!this.requireAuth(() => this.showChallengeDialog = true)) {
+      return;
+    }
+
+    this.closeAllDialogs();
+    this.showChallengeDialog = true;
+  }
+
+  closeChallengeDialog(): void {
+    this.showChallengeDialog = false;
+    this.errorMessage = '';
+  }
+
   openOptionsDialog(): void {
     this.closeAllDialogs();
     this.showOptionsDialog = true;
@@ -439,6 +455,7 @@ export class WelcomeComponent implements OnInit, OnDestroy {
     this.showOptionsDialog = false;
     this.showJoinDialog = false;
     this.showImportDialog = false;
+    this.showChallengeDialog = false;
     this.errorMessage = '';
   }
 

src/app/services/challenge-event.service.ts

@@ -0,0 +1,64 @@
+import { Injectable, inject } from '@angular/core';
+import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import { Challenge } from '../models/challenge.models';
+
+/**
+ * Service to manage challenge events via WebSocket
+ * Listens for incoming challenges and emits them to subscribers
+ */
+@Injectable({ providedIn: 'root' })
+export class ChallengeEventService {
+  private readonly incomingChallenges$ = new BehaviorSubject<Challenge[]>([]);
+  private readonly challengeReceived$ = new Subject<Challenge>();
+  private readonly challengeAccepted$ = new Subject<Challenge>();
+  private readonly challengeDeclined$ = new Subject<Challenge>();
+
+  getIncomingChallenges$(): Observable<Challenge[]> {
+    return this.incomingChallenges$.asObservable();
+  }
+
+  getChallengeReceived$(): Observable<Challenge> {
+    return this.challengeReceived$.asObservable();
+  }
+
+  getChallengeAccepted$(): Observable<Challenge> {
+    return this.challengeAccepted$.asObservable();
+  }
+
+  getChallengeDeclined$(): Observable<Challenge> {
+    return this.challengeDeclined$.asObservable();
+  }
+
+  /**
+   * Called when a new challenge is received via WebSocket
+   */
+  onChallengeReceived(challenge: Challenge): void {
+    const current = this.incomingChallenges$.value;
+    this.incomingChallenges$.next([...current, challenge]);
+    this.challengeReceived$.next(challenge);
+  }
+
+  /**
+   * Called when a challenge is accepted
+   */
+  onChallengeAccepted(challenge: Challenge): void {
+    const current = this.incomingChallenges$.value;
+    this.incomingChallenges$.next(current.filter(c => c.id !== challenge.id));
+    this.challengeAccepted$.next(challenge);
+  }
+
+  /**
+   * Called when a challenge is declined or expires
+   */
+  onChallengeRemoved(challengeId: string): void {
+    const current = this.incomingChallenges$.value;
+    this.incomingChallenges$.next(current.filter(c => c.id !== challengeId));
+  }
+
+  /**
+   * Remove a challenge from the incoming list
+   */
+  removeChallenge(challengeId: string): void {
+    this.onChallengeRemoved(challengeId);
+  }
+}

src/app/services/challenge-websocket.service.ts

@@ -0,0 +1,135 @@
+import { Injectable, inject } from '@angular/core';
+import { Subject } from 'rxjs';
+import { ChallengeEventService } from './challenge-event.service';
+import { Challenge } from '../models/challenge.models';
+
+/**
+ * Service to handle WebSocket connections for challenge events
+ * Listens for incoming challenge notifications and emits them to ChallengeEventService
+ */
+@Injectable({ providedIn: 'root' })
+export class ChallengeWebSocketService {
+  private readonly challengeEventService = inject(ChallengeEventService);
+  private ws: WebSocket | null = null;
+  private reconnectAttempts = 0;
+  private readonly maxReconnectAttempts = 5;
+  private readonly reconnectDelay = 3000;
+
+  /**
+   * Initialize WebSocket connection for challenge events
+   */
+  connect(): void {
+    if (this.ws) {
+      return; // Already connected
+    }
+
+    const wsProtocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
+    const wsUrl = `${wsProtocol}://${window.location.host}/ws/challenges`;
+
+    try {
+      this.ws = new WebSocket(wsUrl);
+
+      this.ws.onopen = () => {
+        console.log('Challenge WebSocket connected');
+        this.reconnectAttempts = 0;
+      };
+
+      this.ws.onmessage = (event) => {
+        this.handleMessage(event.data);
+      };
+
+      this.ws.onerror = (error) => {
+        console.error('Challenge WebSocket error:', error);
+      };
+
+      this.ws.onclose = () => {
+        console.log('Challenge WebSocket disconnected');
+        this.ws = null;
+        this.attemptReconnect();
+      };
+    } catch (error) {
+      console.error('Failed to create WebSocket:', error);
+      this.attemptReconnect();
+    }
+  }
+
+  /**
+   * Close the WebSocket connection
+   */
+  disconnect(): void {
+    if (this.ws) {
+      this.ws.close();
+      this.ws = null;
+    }
+  }
+
+  /**
+   * Send a message through WebSocket
+   */
+  send(message: any): void {
+    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+      this.ws.send(JSON.stringify(message));
+    }
+  }
+
+  /**
+   * Handle incoming WebSocket messages
+   */
+  private handleMessage(data: string): void {
+    try {
+      const message = JSON.parse(data);
+
+      if (!message.type) {
+        return;
+      }
+
+      switch (message.type) {
+        case 'challenge.received':
+          if (message.challenge) {
+            this.challengeEventService.onChallengeReceived(message.challenge as Challenge);
+          }
+          break;
+
+        case 'challenge.accepted':
+          if (message.challenge) {
+            this.challengeEventService.onChallengeAccepted(message.challenge as Challenge);
+          }
+          break;
+
+        case 'challenge.declined':
+          if (message.challengeId) {
+            this.challengeEventService.removeChallenge(message.challengeId);
+          }
+          break;
+
+        case 'challenge.expired':
+          if (message.challengeId) {
+            this.challengeEventService.removeChallenge(message.challengeId);
+          }
+          break;
+
+        default:
+          console.debug('Unknown challenge message type:', message.type);
+      }
+    } catch (error) {
+      console.error('Failed to parse WebSocket message:', error);
+    }
+  }
+
+  /**
+   * Attempt to reconnect to WebSocket
+   */
+  private attemptReconnect(): void {
+    if (this.reconnectAttempts >= this.maxReconnectAttempts) {
+      console.error('Max WebSocket reconnection attempts reached');
+      return;
+    }
+
+    this.reconnectAttempts++;
+    console.log(`Attempting WebSocket reconnect (${this.reconnectAttempts}/${this.maxReconnectAttempts})...`);
+
+    setTimeout(() => {
+      this.connect();
+    }, this.reconnectDelay);
+  }
+}

src/app/services/challenge.service.ts

@@ -0,0 +1,50 @@
+import { Injectable, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Challenge, DeclineChallengeRequest, ListChallengesResponse, SendChallengeRequest } from '../models/challenge.models';
+
+@Injectable({ providedIn: 'root' })
+export class ChallengeService {
+  private readonly http = inject(HttpClient);
+  private readonly challengeBaseUrl = '/api/challenge';
+
+  sendChallenge(username: string, request: SendChallengeRequest): Observable<Challenge> {
+    return this.http.post<Challenge>(
+      `${this.challengeBaseUrl}/${username}`,
+      request
+    );
+  }
+
+  listChallenges(): Observable<ListChallengesResponse> {
+    return this.http.get<ListChallengesResponse>(
+      `${this.challengeBaseUrl}`
+    );
+  }
+
+  getChallenge(challengeId: string): Observable<Challenge> {
+    return this.http.get<Challenge>(
+      `${this.challengeBaseUrl}/${challengeId}`
+    );
+  }
+
+  acceptChallenge(challengeId: string): Observable<void> {
+    return this.http.post<void>(
+      `${this.challengeBaseUrl}/${challengeId}/accept`,
+      {}
+    );
+  }
+
+  declineChallenge(challengeId: string, request?: DeclineChallengeRequest): Observable<void> {
+    return this.http.post<void>(
+      `${this.challengeBaseUrl}/${challengeId}/decline`,
+      request || {}
+    );
+  }
+
+  cancelChallenge(challengeId: string): Observable<void> {
+    return this.http.post<void>(
+      `${this.challengeBaseUrl}/${challengeId}/cancel`,
+      {}
+    );
+  }
+}