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
+10 -42
View File
@@ -14,14 +14,8 @@
<!-- 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
/>
<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>
@@ -52,13 +46,8 @@
<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"
>
<button type="button" *ngFor="let preset of getAvailablePresets()" class="preset-btn"
(click)="selectPreset(preset)" [disabled]="loading">
{{ preset.label }}
</button>
</div>
@@ -69,25 +58,13 @@
<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"
/>
<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"
/>
<input type="number" id="incrementSeconds" formControlName="incrementSeconds" min="0" max="300"
[disabled]="loading" />
</div>
</div>
</div>
@@ -104,19 +81,10 @@
<!-- Buttons -->
<div class="dialog-buttons">
<button
type="button"
class="btn btn-secondary"
(click)="cancel()"
[disabled]="loading"
>
<button type="button" class="btn btn-secondary" (click)="cancel()" [disabled]="loading">
Cancel
</button>
<button
type="submit"
class="btn btn-primary"
[disabled]="form.invalid || loading"
>
<button type="submit" class="btn btn-primary" [disabled]="form.invalid || loading">
{{ loading ? 'Sending...' : 'Send Challenge' }}
</button>
</div>
src/app/components/challenge-notification/challenge-notification.component.html
+6 -13
View File
@@ -4,7 +4,8 @@
<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 type="button" class="close-btn" (click)="onClose()"
[disabled]="acceptingChallenge || decliningChallenge">
×
</button>
</div>
@@ -24,20 +25,12 @@
</div>
<div class="notification-actions">
<button
type="button"
class="btn btn-decline"
(click)="onDecline()"
[disabled]="acceptingChallenge || decliningChallenge"
>
<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"
>
<button type="button" class="btn btn-accept" (click)="onAccept()"
[disabled]="acceptingChallenge || decliningChallenge">
{{ acceptingChallenge ? 'Accepting...' : 'Accept' }}
</button>
</div>
src/app/components/toolbar/toolbar.component.html
+4 -13
View File
@@ -5,13 +5,8 @@
<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"
>
<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 }}
@@ -67,12 +62,8 @@
<!-- Challenge Notification Popup -->
@if (displayedChallenge) {
<app-challenge-notification
[challenge]="displayedChallenge"
(accept)="onChallengeAccepted($event)"
(decline)="onChallengeDeclined($event)"
(close)="onNotificationClose()"
/>
<app-challenge-notification [challenge]="displayedChallenge" (accept)="onChallengeAccepted($event)"
(decline)="onChallengeDeclined($event)" (close)="onNotificationClose()" />
}
@if (showLoginDialog) {
src/app/pages/challenges/challenges.component.html
+3 -15
View File
@@ -39,18 +39,10 @@
</div>
<div class="challenge-actions" *ngIf="challenge.status === 'created'">
<button
type="button"
class="btn btn-decline"
(click)="declineChallenge(challenge)"
>
<button type="button" class="btn btn-decline" (click)="declineChallenge(challenge)">
Decline
</button>
<button
type="button"
class="btn btn-accept"
(click)="acceptChallenge(challenge)"
>
<button type="button" class="btn btn-accept" (click)="acceptChallenge(challenge)">
Accept
</button>
</div>
@@ -87,11 +79,7 @@
</div>
<div class="challenge-actions" *ngIf="challenge.status === 'created'">
<button
type="button"
class="btn btn-cancel"
(click)="cancelChallenge(challenge)"
>
<button type="button" class="btn btn-cancel" (click)="cancelChallenge(challenge)">
Cancel
</button>
</div>