shosho996
bad7366bdb
- create challange window - challanges view page - decline and accept - notif tab (wip) - active game window (wip) --------- Co-authored-by: shahdlala66 <shahd.lala66@gmail.com> Co-authored-by: Lala, Shahd <Shahd.Lala@sybit.de> Reviewed-on: #3
102 lines
4.6 KiB
HTML
102 lines
4.6 KiB
HTML
<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 class="challenge-actions" *ngIf="challenge.status === 'accepted' && challenge.gameId">
|
|
<button type="button" class="btn btn-accept" (click)="openGame(challenge)">
|
|
Play
|
|
</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 class="challenge-actions" *ngIf="challenge.status === 'accepted' && challenge.gameId">
|
|
<button type="button" class="btn btn-accept" (click)="openGame(challenge)">
|
|
Play
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |