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

feat: NCS-69 Challenge request (#3)

Browse Source 
- 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
This commit was merged in pull request #3.
This commit is contained in:
Shahd Lala
2026-05-12 22:38:57 +02:00
parent 3c1f5c76e0
commit bad7366bdb
16 changed files with 1683 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/challenge-create-dialog/challenge-create-dialog.component.html
+93
View File
@@ -0,0 +1,93 @@
<div class="challenge-create-dialog-overlay" (click)="cancel()" [class.loading]="loading">
<div class="challenge-create-dialog" (click)="$event.stopPropagation()">
<div class="dialog-header">
<h2>Create Challenge</h2>
<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>