feat: challange request, accept, decline, page, added (not complete, polling issues, and not stable, and too much code for nothing)

Co-authored-by: Copilot <copilot@github.com>
2026-05-05 22:14:20 +00:00
parent 82bf006f18
commit 6a79be45bf
20 changed files with 1955 additions and 5 deletions
@@ -0,0 +1,125 @@
+<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>