();
+
+ 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`;
+ }
+}
diff --git a/src/app/models/challenge.models.ts b/src/app/models/challenge.models.ts
new file mode 100644
index 0000000..9683480
--- /dev/null
+++ b/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;
+}
diff --git a/src/app/pages/challenges/challenges.component.css b/src/app/pages/challenges/challenges.component.css
new file mode 100644
index 0000000..2e65fbc
--- /dev/null
+++ b/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;
+ }
+ }
+ }
+}
diff --git a/src/app/pages/challenges/challenges.component.html b/src/app/pages/challenges/challenges.component.html
new file mode 100644
index 0000000..7351234
--- /dev/null
+++ b/src/app/pages/challenges/challenges.component.html
@@ -0,0 +1,102 @@
+
+
+
+
+ {{ errorMessage }}
+
+
+
+
+
+
Incoming Challenges
+
Loading...
+
+
+
No incoming challenges
+
+
+
+
+
+
+
+
+ Status:
+
+ {{ challenge.status | uppercase }}
+
+
+
+ Expires in:
+ {{ getExpirationInfo(challenge) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Outgoing Challenges
+
+
+
No outgoing challenges
+
+
+
+
+
+
+
+
+ Status:
+
+ {{ challenge.status | uppercase }}
+
+
+
+ Expires in:
+ {{ getExpirationInfo(challenge) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 🍖
+
+ }
diff --git a/src/app/pages/welcome/welcome.component.ts b/src/app/pages/welcome/welcome.component.ts
index 749de98..3669d3b 100644
--- a/src/app/pages/welcome/welcome.component.ts
+++ b/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';
@@ -29,10 +30,25 @@ interface WindowCell {
style: Record;
}
+interface Star {
+ style: Record;
+}
+
+interface BackgroundBuilding {
+ style: Record;
+}
+
+interface WindowCell {
+ state: 'off' | 'on';
+ color?: string;
+ glowColor?: string;
+ style: Record;
+}
+
@Component({
selector: 'app-welcome',
standalone: true,
- imports: [CommonModule, FormsModule],
+ imports: [CommonModule, FormsModule, ChallengeCreateDialogComponent],
templateUrl: './welcome.component.html',
styleUrls: ['./welcome.component.css']
})
diff --git a/src/app/services/challenge-event.service.ts b/src/app/services/challenge-event.service.ts
new file mode 100644
index 0000000..fca0c7d
--- /dev/null
+++ b/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([]);
+ private readonly challengeReceived$ = new Subject();
+ private readonly challengeAccepted$ = new Subject();
+ private readonly challengeDeclined$ = new Subject();
+
+ getIncomingChallenges$(): Observable {
+ return this.incomingChallenges$.asObservable();
+ }
+
+ getChallengeReceived$(): Observable {
+ return this.challengeReceived$.asObservable();
+ }
+
+ getChallengeAccepted$(): Observable {
+ return this.challengeAccepted$.asObservable();
+ }
+
+ getChallengeDeclined$(): Observable {
+ 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);
+ }
+}
diff --git a/src/app/services/challenge-websocket.service.ts b/src/app/services/challenge-websocket.service.ts
new file mode 100644
index 0000000..d13131f
--- /dev/null
+++ b/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);
+ }
+}
diff --git a/src/app/services/challenge.service.ts b/src/app/services/challenge.service.ts
new file mode 100644
index 0000000..7859923
--- /dev/null
+++ b/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 {
+ return this.http.post(
+ `${this.challengeBaseUrl}/${username}`,
+ request
+ );
+ }
+
+ listChallenges(): Observable {
+ return this.http.get(
+ `${this.challengeBaseUrl}`
+ );
+ }
+
+ getChallenge(challengeId: string): Observable {
+ return this.http.get(
+ `${this.challengeBaseUrl}/${challengeId}`
+ );
+ }
+
+ acceptChallenge(challengeId: string): Observable {
+ return this.http.post(
+ `${this.challengeBaseUrl}/${challengeId}/accept`,
+ {}
+ );
+ }
+
+ declineChallenge(challengeId: string, request?: DeclineChallengeRequest): Observable {
+ return this.http.post(
+ `${this.challengeBaseUrl}/${challengeId}/decline`,
+ request || {}
+ );
+ }
+
+ cancelChallenge(challengeId: string): Observable {
+ return this.http.post(
+ `${this.challengeBaseUrl}/${challengeId}/cancel`,
+ {}
+ );
+ }
+}