NowChess/NowChess-Frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Lala, Shahd
2026-05-05 22:14:45 +00:00
parent 6a79be45bf
commit 550db1401b
11 changed files with 781 additions and 841 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/challenge-create-dialog/challenge-create-dialog.component.html
+90 -122
View File
@@ -1,125 +1,93 @@
<div class="challenge-create-dialog-overlay" (click)="cancel()" [class.loading]="loading"> <div class="challenge-create-dialog-overlay" (click)="cancel()" [class.loading]="loading">
<div class="challenge-create-dialog" (click)="$event.stopPropagation()"> <div class="challenge-create-dialog" (click)="$event.stopPropagation()">
<div class="dialog-header"> <div class="dialog-header">
<h2>Create Challenge</h2> <h2>Create Challenge</h2>
<button type="button" class="close-btn" (click)="cancel()" [disabled]="loading">×</button> <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>
<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> </div>
src/app/components/challenge-create-dialog/challenge-create-dialog.component.ts
+124 -124
View File
@@ -11,149 +11,149 @@ import { PlayerColor } from '../../models/challenge.models';
type TimeMode = 'blitz' | 'rapid' | 'classical' | 'unlimited'; type TimeMode = 'blitz' | 'rapid' | 'classical' | 'unlimited';
interface TimePreset { interface TimePreset {
label: string; label: string;
limitSeconds: number; limitSeconds: number;
incrementSeconds: number; incrementSeconds: number;
} }
@Component({ @Component({
selector: 'app-challenge-create-dialog', selector: 'app-challenge-create-dialog',
standalone: true, standalone: true,
imports: [CommonModule, FormsModule, ReactiveFormsModule], imports: [CommonModule, FormsModule, ReactiveFormsModule],
templateUrl: './challenge-create-dialog.component.html', templateUrl: './challenge-create-dialog.component.html',
styleUrls: ['./challenge-create-dialog.component.css'] styleUrls: ['./challenge-create-dialog.component.css']
}) })
export class ChallengeCreateDialogComponent implements OnInit, OnDestroy { export class ChallengeCreateDialogComponent implements OnInit, OnDestroy {
private readonly challengeService = inject(ChallengeService); private readonly challengeService = inject(ChallengeService);
private readonly router = inject(Router); private readonly router = inject(Router);
private readonly fb = inject(FormBuilder); private readonly fb = inject(FormBuilder);
private readonly destroyRef = inject(DestroyRef); private readonly destroyRef = inject(DestroyRef);
@Output() closeChallengeDialog = new EventEmitter<void>(); @Output() closeChallengeDialog = new EventEmitter<void>();
form!: FormGroup; form!: FormGroup;
loading = false; loading = false;
errorMessage = ''; errorMessage = '';
selectedTimeMode: TimeMode = 'rapid'; selectedTimeMode: TimeMode = 'rapid';
timePresets: Record<TimeMode, TimePreset[]> = { timePresets: Record<TimeMode, TimePreset[]> = {
blitz: [ blitz: [
{ label: '1+0', limitSeconds: 60, incrementSeconds: 0 }, { label: '1+0', limitSeconds: 60, incrementSeconds: 0 },
{ label: '2+1', limitSeconds: 120, incrementSeconds: 1 }, { label: '2+1', limitSeconds: 120, incrementSeconds: 1 },
{ label: '3+0', limitSeconds: 180, incrementSeconds: 0 }, { label: '3+0', limitSeconds: 180, incrementSeconds: 0 },
{ label: '3+2', limitSeconds: 180, incrementSeconds: 2 }, { label: '3+2', limitSeconds: 180, incrementSeconds: 2 },
{ label: '5+0', limitSeconds: 300, incrementSeconds: 0 } { label: '5+0', limitSeconds: 300, incrementSeconds: 0 }
], ],
rapid: [ rapid: [
{ label: '10+0', limitSeconds: 600, incrementSeconds: 0 }, { label: '10+0', limitSeconds: 600, incrementSeconds: 0 },
{ label: '10+5', limitSeconds: 600, incrementSeconds: 5 }, { label: '10+5', limitSeconds: 600, incrementSeconds: 5 },
{ label: '15+10', limitSeconds: 900, incrementSeconds: 10 }, { label: '15+10', limitSeconds: 900, incrementSeconds: 10 },
{ label: '25+10', limitSeconds: 1500, incrementSeconds: 10 } { label: '25+10', limitSeconds: 1500, incrementSeconds: 10 }
], ],
classical: [ classical: [
{ label: '30+0', limitSeconds: 1800, incrementSeconds: 0 }, { label: '30+0', limitSeconds: 1800, incrementSeconds: 0 },
{ label: '30+20', limitSeconds: 1800, incrementSeconds: 20 }, { label: '30+20', limitSeconds: 1800, incrementSeconds: 20 },
{ label: '60+30', limitSeconds: 3600, incrementSeconds: 30 }, { label: '60+30', limitSeconds: 3600, incrementSeconds: 30 },
{ label: '90+30', limitSeconds: 5400, incrementSeconds: 30 } { label: '90+30', limitSeconds: 5400, incrementSeconds: 30 }
], ],
unlimited: [] unlimited: []
}; };
ttlOptions = [ ttlOptions = [
{ label: '5 minutes', seconds: 300 }, { label: '5 minutes', seconds: 300 },
{ label: '1 hour', seconds: 3600 }, { label: '1 hour', seconds: 3600 },
{ label: '1 day', seconds: 86400 }, { label: '1 day', seconds: 86400 },
{ label: 'No expiry', seconds: 0 } { label: 'No expiry', seconds: 0 }
]; ];
ngOnInit(): void { ngOnInit(): void {
this.initializeForm(); this.initializeForm();
} }
ngOnDestroy(): void { ngOnDestroy(): void {
} }
private initializeForm(): void { private initializeForm(): void {
this.form = this.fb.group({ this.form = this.fb.group({
targetUsername: ['', [Validators.required, Validators.minLength(1)]], targetUsername: ['', [Validators.required, Validators.minLength(1)]],
color: ['random', Validators.required], color: ['random', Validators.required],
timeMode: ['rapid'], timeMode: ['rapid'],
limitMinutes: [10, [Validators.required, Validators.min(1), Validators.max(1000)]], limitMinutes: [10, [Validators.required, Validators.min(1), Validators.max(1000)]],
incrementSeconds: [5, [Validators.required, Validators.min(0), Validators.max(300)]], incrementSeconds: [5, [Validators.required, Validators.min(0), Validators.max(300)]],
ttlSeconds: [3600, Validators.required] ttlSeconds: [3600, Validators.required]
}); });
this.form.get('timeMode')?.valueChanges this.form.get('timeMode')?.valueChanges
.pipe(takeUntilDestroyed(this.destroyRef)) .pipe(takeUntilDestroyed(this.destroyRef))
.subscribe((mode: unknown) => { .subscribe((mode: unknown) => {
const timeMode = mode as TimeMode; const timeMode = mode as TimeMode;
this.selectedTimeMode = timeMode; this.selectedTimeMode = timeMode;
if (timeMode !== 'unlimited') { if (timeMode !== 'unlimited') {
const firstPreset = this.timePresets[timeMode][0]; const firstPreset = this.timePresets[timeMode][0];
if (firstPreset) { if (firstPreset) {
this.form.patchValue({ this.form.patchValue({
limitMinutes: firstPreset.limitSeconds / 60, limitMinutes: firstPreset.limitSeconds / 60,
incrementSeconds: firstPreset.incrementSeconds 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(); selectPreset(preset: TimePreset): void {
if (!targetUsername) { this.form.patchValue({
this.errorMessage = 'Please enter a valid username'; limitMinutes: preset.limitSeconds / 60,
return; incrementSeconds: preset.incrementSeconds
});
} }
this.errorMessage = ''; getAvailablePresets(): TimePreset[] {
this.loading = true; return this.timePresets[this.selectedTimeMode] || [];
}
const limitSeconds = Math.round((this.form.get('limitMinutes')?.value || 0) * 60); submit(): void {
const incrementSeconds = this.form.get('incrementSeconds')?.value || 0; if (this.form.invalid || this.loading) {
const ttlSeconds = this.form.get('ttlSeconds')?.value; return;
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 { const targetUsername = this.form.get('targetUsername')?.value?.trim();
this.form.reset(); if (!targetUsername) {
this.closeChallengeDialog.emit(); 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.html
+31 -38
View File
@@ -1,45 +1,38 @@
<div class="challenge-notification" [class.error]="!!errorMessage"> <div class="challenge-notification" [class.error]="!!errorMessage">
<div class="notification-header"> <div class="notification-header">
<div class="notification-title"> <div class="notification-title">
<span class="badge">CHALLENGE</span> <span class="badge">CHALLENGE</span>
<span class="title">{{ getCreatedByDisplay() }} challenged you!</span> <span class="title">{{ getCreatedByDisplay() }} challenged you!</span>
</div> </div>
<button type="button" class="close-btn" (click)="onClose()" [disabled]="acceptingChallenge || decliningChallenge"> <button type="button" class="close-btn" (click)="onClose()"
× [disabled]="acceptingChallenge || decliningChallenge">
</button> ×
</div> </button>
<div class="notification-content">
<div class="time-control">
<span class="label">Time Control:</span>
<span class="value">{{ getTimeControlDisplay() }}</span>
</div> </div>
<div class="expiration"> <div class="notification-content">
<span class="label">{{ getExpirationInfo() }}</span> <div class="time-control">
</div> <span class="label">Time Control:</span>
<span class="value">{{ getTimeControlDisplay() }}</span>
</div>
<div *ngIf="errorMessage" class="error-message"> <div class="expiration">
{{ errorMessage }} <span class="label">{{ getExpirationInfo() }}</span>
</div> </div>
<div class="notification-actions"> <div *ngIf="errorMessage" class="error-message">
<button {{ errorMessage }}
type="button" </div>
class="btn btn-decline"
(click)="onDecline()" <div class="notification-actions">
[disabled]="acceptingChallenge || decliningChallenge" <button type="button" class="btn btn-decline" (click)="onDecline()"
> [disabled]="acceptingChallenge || decliningChallenge">
{{ decliningChallenge ? 'Declining...' : 'Decline' }} {{ decliningChallenge ? 'Declining...' : 'Decline' }}
</button> </button>
<button <button type="button" class="btn btn-accept" (click)="onAccept()"
type="button" [disabled]="acceptingChallenge || decliningChallenge">
class="btn btn-accept" {{ acceptingChallenge ? 'Accepting...' : 'Accept' }}
(click)="onAccept()" </button>
[disabled]="acceptingChallenge || decliningChallenge" </div>
>
{{ acceptingChallenge ? 'Accepting...' : 'Accept' }}
</button>
</div> </div>
</div>
</div> </div>
src/app/components/challenge-notification/challenge-notification.component.ts
+76 -76
View File
@@ -6,96 +6,96 @@ import { finalize } from 'rxjs';
import { getErrorMessage } from '../../core/http/error-message.util'; import { getErrorMessage } from '../../core/http/error-message.util';
@Component({ @Component({
selector: 'app-challenge-notification', selector: 'app-challenge-notification',
standalone: true, standalone: true,
imports: [CommonModule], imports: [CommonModule],
templateUrl: './challenge-notification.component.html', templateUrl: './challenge-notification.component.html',
styleUrls: ['./challenge-notification.component.css'] styleUrls: ['./challenge-notification.component.css']
}) })
export class ChallengeNotificationComponent { export class ChallengeNotificationComponent {
@Input() challenge!: Challenge; @Input() challenge!: Challenge;
@Output() accept = new EventEmitter<Challenge>(); @Output() accept = new EventEmitter<Challenge>();
@Output() decline = new EventEmitter<Challenge>(); @Output() decline = new EventEmitter<Challenge>();
@Output() close = new EventEmitter<void>(); @Output() close = new EventEmitter<void>();
private readonly challengeService = inject(ChallengeService); private readonly challengeService = inject(ChallengeService);
acceptingChallenge = false; acceptingChallenge = false;
decliningChallenge = false; decliningChallenge = false;
errorMessage = ''; errorMessage = '';
onAccept(): void { onAccept(): void {
if (this.acceptingChallenge || this.decliningChallenge) { if (this.acceptingChallenge || this.decliningChallenge) {
return; 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 { this.acceptingChallenge = true;
if (this.acceptingChallenge || this.decliningChallenge) { this.errorMessage = '';
return;
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');
}
});
} }
this.decliningChallenge = true; onDecline(): void {
this.errorMessage = ''; if (this.acceptingChallenge || this.decliningChallenge) {
return;
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.decliningChallenge = true;
this.close.emit(); this.errorMessage = '';
}
getTimeControlDisplay(): string { this.challengeService.declineChallenge(this.challenge.id, { reason: 'Not interested' })
const { limit, increment } = this.challenge.timeControl; .pipe(finalize(() => (this.decliningChallenge = false)))
if (!limit || !increment) { .subscribe({
return 'Unlimited'; next: () => {
} this.decline.emit(this.challenge);
const minutes = Math.floor(limit / 60); },
return `${minutes}+${increment}`; error: (error) => {
} this.errorMessage = getErrorMessage(error, 'Failed to decline challenge');
}
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); onClose(): void {
if (minutes > 60) { this.close.emit();
const hours = Math.floor(minutes / 60);
return `Expires in ${hours}h`;
} }
return `Expires in ${minutes}m`; 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.html
+4 -13
View File
@@ -5,13 +5,8 @@
<div class="d-flex align-items-center gap-2"> <div class="d-flex align-items-center gap-2">
<!-- Challenge Notification Badge --> <!-- Challenge Notification Badge -->
<div class="notification-container"> <div class="notification-container">
<button <button type="button" class="notification-badge" (click)="toggleNotificationMenu()"
type="button" [class.has-notifications]="incomingChallenges.length > 0" title="View challenges">
class="notification-badge"
(click)="toggleNotificationMenu()"
[class.has-notifications]="incomingChallenges.length > 0"
title="View challenges"
>
🔔 🔔
<span *ngIf="incomingChallenges.length > 0" class="badge"> <span *ngIf="incomingChallenges.length > 0" class="badge">
{{ incomingChallenges.length }} {{ incomingChallenges.length }}
@@ -67,12 +62,8 @@
<!-- Challenge Notification Popup --> <!-- Challenge Notification Popup -->
@if (displayedChallenge) { @if (displayedChallenge) {
<app-challenge-notification <app-challenge-notification [challenge]="displayedChallenge" (accept)="onChallengeAccepted($event)"
[challenge]="displayedChallenge" (decline)="onChallengeDeclined($event)" (close)="onNotificationClose()" />
(accept)="onChallengeAccepted($event)"
(decline)="onChallengeDeclined($event)"
(close)="onNotificationClose()"
/>
} }
@if (showLoginDialog) { @if (showLoginDialog) {
src/app/models/challenge.models.ts
+28 -28
View File
@@ -3,47 +3,47 @@ export type ChallengeStatus = 'created' | 'pending' | 'accepted' | 'declined' |
export type PlayerColor = 'white' | 'black' | 'random'; export type PlayerColor = 'white' | 'black' | 'random';
export interface Player { export interface Player {
id: string; id: string;
name: string; name: string;
rating: number; rating: number;
} }
export interface TimeControl { export interface TimeControl {
type: string | null; type: string | null;
limit: number | null; limit: number | null;
increment: number | null; increment: number | null;
} }
export interface Challenge { export interface Challenge {
id: string; id: string;
challenger: Player; challenger: Player;
destUser: Player; destUser: Player;
variant: string; variant: string;
color: PlayerColor; color: PlayerColor;
timeControl: TimeControl; timeControl: TimeControl;
status: ChallengeStatus; status: ChallengeStatus;
declineReason: string | null; declineReason: string | null;
gameId: string | null; gameId: string | null;
expiresAt: string; expiresAt: string;
createdAt: string; createdAt: string;
} }
export interface SendChallengeRequest { export interface SendChallengeRequest {
timeControl: { timeControl: {
limitSeconds: number; limitSeconds: number;
incrementSeconds: number; incrementSeconds: number;
}; };
color?: PlayerColor; color?: PlayerColor;
ttlSeconds?: number; ttlSeconds?: number;
} }
export interface ListChallengesResponse { export interface ListChallengesResponse {
'in'?: Challenge[]; 'in'?: Challenge[];
'out'?: Challenge[]; 'out'?: Challenge[];
incoming?: Challenge[]; incoming?: Challenge[];
outgoing?: Challenge[]; outgoing?: Challenge[];
} }
export interface DeclineChallengeRequest { export interface DeclineChallengeRequest {
reason?: string; reason?: string;
} }
src/app/pages/challenges/challenges.component.html
+85 -97
View File
@@ -1,102 +1,90 @@
<div class="challenges-container"> <div class="challenges-container">
<div class="challenges-header"> <div class="challenges-header">
<h1>Active Challenges</h1> <h1>Active Challenges</h1>
<button type="button" class="back-btn" (click)="goBack()">← Back</button> <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> </div>
<!-- Outgoing Challenges --> <div *ngIf="errorMessage" class="error-banner">
<div class="challenges-section"> {{ errorMessage }}
<h2>Outgoing Challenges</h2> </div>
<div *ngIf="!loading && outgoingChallenges.length === 0" class="empty-state"> <div class="challenges-grid">
<p>No outgoing challenges</p> <!-- Incoming Challenges -->
</div> <div class="challenges-section">
<h2>Incoming Challenges</h2>
<div *ngIf="!loading && outgoingChallenges.length > 0" class="challenge-list"> <div *ngIf="loading" class="loading-spinner">Loading...</div>
<div *ngFor="let challenge of outgoingChallenges" class="challenge-card">
<div class="challenge-header"> <div *ngIf="!loading && incomingChallenges.length === 0" class="empty-state">
<span class="challenger-name">→ {{ getOpponentDisplay(challenge) }}</span> <p>No incoming challenges</p>
<span class="time-control">{{ getTimeControlDisplay(challenge) }}</span> </div>
</div>
<div *ngIf="!loading && incomingChallenges.length > 0" class="challenge-list">
<div class="challenge-details"> <div *ngFor="let challenge of incomingChallenges" class="challenge-card">
<div class="detail"> <div class="challenge-header">
<span class="label">Status:</span> <span class="challenger-name">{{ getChallengerDisplay(challenge) }}</span>
<span class="value" [class]="'status-' + challenge.status"> <span class="time-control">{{ getTimeControlDisplay(challenge) }}</span>
{{ challenge.status | uppercase }} </div>
</span>
</div> <div class="challenge-details">
<div class="detail"> <div class="detail">
<span class="label">Expires in:</span> <span class="label">Status:</span>
<span class="value">{{ getExpirationInfo(challenge) }}</span> <span class="value" [class]="'status-' + challenge.status">
</div> {{ challenge.status | uppercase }}
</div> </span>
</div>
<div class="challenge-actions" *ngIf="challenge.status === 'created'"> <div class="detail">
<button <span class="label">Expires in:</span>
type="button" <span class="value">{{ getExpirationInfo(challenge) }}</span>
class="btn btn-cancel" </div>
(click)="cancelChallenge(challenge)" </div>
>
Cancel <div class="challenge-actions" *ngIf="challenge.status === 'created'">
</button> <button type="button" class="btn btn-decline" (click)="declineChallenge(challenge)">
</div> Decline
</div> </button>
</div> <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>
</div>
</div> </div>
src/app/pages/challenges/challenges.component.ts
+142 -142
View File
@@ -8,160 +8,160 @@ import { Challenge } from '../../models/challenge.models';
import { getErrorMessage } from '../../core/http/error-message.util'; import { getErrorMessage } from '../../core/http/error-message.util';
@Component({ @Component({
selector: 'app-challenges', selector: 'app-challenges',
standalone: true, standalone: true,
imports: [CommonModule], imports: [CommonModule],
templateUrl: './challenges.component.html', templateUrl: './challenges.component.html',
styleUrls: ['./challenges.component.css'] styleUrls: ['./challenges.component.css']
}) })
export class ChallengesComponent implements OnInit, OnDestroy { export class ChallengesComponent implements OnInit, OnDestroy {
private readonly challengeService = inject(ChallengeService); private readonly challengeService = inject(ChallengeService);
private readonly challengeEventService = inject(ChallengeEventService); private readonly challengeEventService = inject(ChallengeEventService);
private readonly router = inject(Router); private readonly router = inject(Router);
private readonly destroyRef = inject(DestroyRef); private readonly destroyRef = inject(DestroyRef);
incomingChallenges: Challenge[] = []; incomingChallenges: Challenge[] = [];
outgoingChallenges: Challenge[] = []; outgoingChallenges: Challenge[] = [];
loading = false; loading = false;
errorMessage = ''; errorMessage = '';
private pollInterval: any = null; private pollInterval: any = null;
private readonly pollIntervalMs = 5000; // Poll every 5 seconds private readonly pollIntervalMs = 5000; // Poll every 5 seconds
ngOnInit(): void { ngOnInit(): void {
this.loadChallenges(true); this.loadChallenges(true);
// Subscribe to challenge events // Subscribe to challenge events
this.challengeEventService.getChallengeReceived$() this.challengeEventService.getChallengeReceived$()
.pipe(takeUntilDestroyed(this.destroyRef)) .pipe(takeUntilDestroyed(this.destroyRef))
.subscribe(() => { .subscribe(() => {
this.loadChallenges(); this.loadChallenges();
}); });
// Start polling for challenge updates // Start polling for challenge updates
this.startPolling(); 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() ngOnDestroy(): void {
.pipe(takeUntilDestroyed(this.destroyRef)) this.stopPolling();
.subscribe({ }
next: (response) => {
this.incomingChallenges = response.in || response.incoming || []; private startPolling(): void {
this.outgoingChallenges = response.out || response.outgoing || []; this.pollInterval = setInterval(() => {
if (showLoader) { this.loadChallenges(false);
this.loading = false; }, this.pollIntervalMs);
} }
},
error: (error) => { private stopPolling(): void {
this.errorMessage = getErrorMessage(error, 'Failed to load challenges'); if (this.pollInterval) {
if (showLoader) { clearInterval(this.pollInterval);
this.loading = false; this.pollInterval = null;
}
} }
});
}
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); loadChallenges(showLoader = false): void {
if (minutes > 60) { if (showLoader) {
const hours = Math.floor(minutes / 60); this.loading = true;
return `${hours}h`; 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;
}
}
});
} }
return `${minutes}m`; 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/services/challenge-event.service.ts
+45 -45
View File
@@ -8,57 +8,57 @@ import { Challenge } from '../models/challenge.models';
*/ */
@Injectable({ providedIn: 'root' }) @Injectable({ providedIn: 'root' })
export class ChallengeEventService { export class ChallengeEventService {
private readonly incomingChallenges$ = new BehaviorSubject<Challenge[]>([]); private readonly incomingChallenges$ = new BehaviorSubject<Challenge[]>([]);
private readonly challengeReceived$ = new Subject<Challenge>(); private readonly challengeReceived$ = new Subject<Challenge>();
private readonly challengeAccepted$ = new Subject<Challenge>(); private readonly challengeAccepted$ = new Subject<Challenge>();
private readonly challengeDeclined$ = new Subject<Challenge>(); private readonly challengeDeclined$ = new Subject<Challenge>();
getIncomingChallenges$(): Observable<Challenge[]> { getIncomingChallenges$(): Observable<Challenge[]> {
return this.incomingChallenges$.asObservable(); return this.incomingChallenges$.asObservable();
} }
getChallengeReceived$(): Observable<Challenge> { getChallengeReceived$(): Observable<Challenge> {
return this.challengeReceived$.asObservable(); return this.challengeReceived$.asObservable();
} }
getChallengeAccepted$(): Observable<Challenge> { getChallengeAccepted$(): Observable<Challenge> {
return this.challengeAccepted$.asObservable(); return this.challengeAccepted$.asObservable();
} }
getChallengeDeclined$(): Observable<Challenge> { getChallengeDeclined$(): Observable<Challenge> {
return this.challengeDeclined$.asObservable(); return this.challengeDeclined$.asObservable();
} }
/** /**
* Called when a new challenge is received via WebSocket * Called when a new challenge is received via WebSocket
*/ */
onChallengeReceived(challenge: Challenge): void { onChallengeReceived(challenge: Challenge): void {
const current = this.incomingChallenges$.value; const current = this.incomingChallenges$.value;
this.incomingChallenges$.next([...current, challenge]); this.incomingChallenges$.next([...current, challenge]);
this.challengeReceived$.next(challenge); this.challengeReceived$.next(challenge);
} }
/** /**
* Called when a challenge is accepted * Called when a challenge is accepted
*/ */
onChallengeAccepted(challenge: Challenge): void { onChallengeAccepted(challenge: Challenge): void {
const current = this.incomingChallenges$.value; const current = this.incomingChallenges$.value;
this.incomingChallenges$.next(current.filter(c => c.id !== challenge.id)); this.incomingChallenges$.next(current.filter(c => c.id !== challenge.id));
this.challengeAccepted$.next(challenge); this.challengeAccepted$.next(challenge);
} }
/** /**
* Called when a challenge is declined or expires * Called when a challenge is declined or expires
*/ */
onChallengeRemoved(challengeId: string): void { onChallengeRemoved(challengeId: string): void {
const current = this.incomingChallenges$.value; const current = this.incomingChallenges$.value;
this.incomingChallenges$.next(current.filter(c => c.id !== challengeId)); this.incomingChallenges$.next(current.filter(c => c.id !== challengeId));
} }
/** /**
* Remove a challenge from the incoming list * Remove a challenge from the incoming list
*/ */
removeChallenge(challengeId: string): void { removeChallenge(challengeId: string): void {
this.onChallengeRemoved(challengeId); this.onChallengeRemoved(challengeId);
} }
} }
src/app/services/challenge-websocket.service.ts
+117 -117
View File
@@ -9,127 +9,127 @@ import { Challenge } from '../models/challenge.models';
*/ */
@Injectable({ providedIn: 'root' }) @Injectable({ providedIn: 'root' })
export class ChallengeWebSocketService { export class ChallengeWebSocketService {
private readonly challengeEventService = inject(ChallengeEventService); private readonly challengeEventService = inject(ChallengeEventService);
private ws: WebSocket | null = null; private ws: WebSocket | null = null;
private reconnectAttempts = 0; private reconnectAttempts = 0;
private readonly maxReconnectAttempts = 5; private readonly maxReconnectAttempts = 5;
private readonly reconnectDelay = 3000; private readonly reconnectDelay = 3000;
/** /**
* Initialize WebSocket connection for challenge events * Initialize WebSocket connection for challenge events
*/ */
connect(): void { connect(): void {
if (this.ws) { if (this.ws) {
return; // Already connected 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();
}
} }
const wsProtocol = window.location.protocol === 'https:' ? 'wss' : 'ws'; /**
const wsUrl = `${wsProtocol}://${window.location.host}/ws/challenges`; * Close the WebSocket connection
*/
try { disconnect(): void {
this.ws = new WebSocket(wsUrl); if (this.ws) {
this.ws.close();
this.ws.onopen = () => { this.ws = null;
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})...`); * Send a message through WebSocket
*/
send(message: any): void {
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
this.ws.send(JSON.stringify(message));
}
}
setTimeout(() => { /**
this.connect(); * Handle incoming WebSocket messages
}, this.reconnectDelay); */
} 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
+36 -36
View File
@@ -5,46 +5,46 @@ import { Challenge, DeclineChallengeRequest, ListChallengesResponse, SendChallen
@Injectable({ providedIn: 'root' }) @Injectable({ providedIn: 'root' })
export class ChallengeService { export class ChallengeService {
private readonly http = inject(HttpClient); private readonly http = inject(HttpClient);
private readonly challengeBaseUrl = '/api/challenge'; private readonly challengeBaseUrl = '/api/challenge';
sendChallenge(username: string, request: SendChallengeRequest): Observable<Challenge> { sendChallenge(username: string, request: SendChallengeRequest): Observable<Challenge> {
return this.http.post<Challenge>( return this.http.post<Challenge>(
`${this.challengeBaseUrl}/${username}`, `${this.challengeBaseUrl}/${username}`,
request request
); );
} }
listChallenges(): Observable<ListChallengesResponse> { listChallenges(): Observable<ListChallengesResponse> {
return this.http.get<ListChallengesResponse>( return this.http.get<ListChallengesResponse>(
`${this.challengeBaseUrl}` `${this.challengeBaseUrl}`
); );
} }
getChallenge(challengeId: string): Observable<Challenge> { getChallenge(challengeId: string): Observable<Challenge> {
return this.http.get<Challenge>( return this.http.get<Challenge>(
`${this.challengeBaseUrl}/${challengeId}` `${this.challengeBaseUrl}/${challengeId}`
); );
} }
acceptChallenge(challengeId: string): Observable<void> { acceptChallenge(challengeId: string): Observable<void> {
return this.http.post<void>( return this.http.post<void>(
`${this.challengeBaseUrl}/${challengeId}/accept`, `${this.challengeBaseUrl}/${challengeId}/accept`,
{} {}
); );
} }
declineChallenge(challengeId: string, request?: DeclineChallengeRequest): Observable<void> { declineChallenge(challengeId: string, request?: DeclineChallengeRequest): Observable<void> {
return this.http.post<void>( return this.http.post<void>(
`${this.challengeBaseUrl}/${challengeId}/decline`, `${this.challengeBaseUrl}/${challengeId}/decline`,
request || {} request || {}
); );
} }
cancelChallenge(challengeId: string): Observable<void> { cancelChallenge(challengeId: string): Observable<void> {
return this.http.post<void>( return this.http.post<void>(
`${this.challengeBaseUrl}/${challengeId}/cancel`, `${this.challengeBaseUrl}/${challengeId}/cancel`,
{} {}
); );
} }
} }