feat: challange request, accept, decline, page, added (not complete, polling issues, and not stable, and too much code for nothing)
This commit is contained in:
Lala, Shahd
@@ -1,102 +1,90 @@
|
||||
<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 class="challenges-header">
|
||||
<h1>Active Challenges</h1>
|
||||
<button type="button" class="back-btn" (click)="goBack()">← Back</button>
|
||||
</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 *ngIf="errorMessage" class="error-banner">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
@@ -8,160 +8,160 @@ 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']
|
||||
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);
|
||||
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 = '';
|
||||
incomingChallenges: Challenge[] = [];
|
||||
outgoingChallenges: Challenge[] = [];
|
||||
loading = false;
|
||||
errorMessage = '';
|
||||
|
||||
private pollInterval: any = null;
|
||||
private readonly pollIntervalMs = 5000; // Poll every 5 seconds
|
||||
private pollInterval: any = null;
|
||||
private readonly pollIntervalMs = 5000; // Poll every 5 seconds
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loadChallenges(true);
|
||||
ngOnInit(): void {
|
||||
this.loadChallenges(true);
|
||||
|
||||
// Subscribe to challenge events
|
||||
this.challengeEventService.getChallengeReceived$()
|
||||
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||
.subscribe(() => {
|
||||
this.loadChallenges();
|
||||
});
|
||||
// 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 = '';
|
||||
// Start polling for challenge updates
|
||||
this.startPolling();
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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`;
|
||||
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;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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`;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user