91 lines
4.0 KiB
HTML
91 lines
4.0 KiB
HTML
<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" 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">
|
||
<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">
|
||
<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" />
|
||
</div>
|
||
<div class="form-col">
|
||
<label for="incrementSeconds">Increment (seconds)</label>
|
||
<input type="number" id="incrementSeconds" formControlName="incrementSeconds" min="0" max="300" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TTL (Time to Live) -->
|
||
<div class="form-group">
|
||
<label for="ttlSeconds">Challenge Expires In</label>
|
||
<select id="ttlSeconds" formControlName="ttlSeconds">
|
||
<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> |