feat: NCS-69 Challenge request (#3)
- 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:
@@ -0,0 +1,261 @@
|
||||
@import '../../button-template.css';
|
||||
|
||||
.challenge-create-dialog-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
backdrop-filter: blur(3px);
|
||||
|
||||
&.loading {
|
||||
pointer-events: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.challenge-create-dialog {
|
||||
background: linear-gradient(135deg, #0a0e27 0%, #1a1a3e 100%);
|
||||
border: 2px solid #00d5ff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 20px rgba(0, 213, 255, 0.3), inset 0 0 10px rgba(0, 213, 255, 0.05);
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
padding: 24px;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid rgba(0, 213, 255, 0.2);
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
color: #00d5ff;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 28px;
|
||||
color: #00d5ff;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
color: #ffffff;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
label {
|
||||
color: #b0b0d0;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
background-color: rgba(15, 20, 50, 0.8);
|
||||
border: 1px solid rgba(0, 213, 255, 0.3);
|
||||
border-radius: 4px;
|
||||
color: #e0e0e0;
|
||||
padding: 10px 12px;
|
||||
font-size: 14px;
|
||||
font-family: 'Space Mono', monospace;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #00d5ff;
|
||||
box-shadow: 0 0 10px rgba(0, 213, 255, 0.3);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
option {
|
||||
background-color: #0a0e27;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
}
|
||||
|
||||
small {
|
||||
color: #ff6b6b;
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.form-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
label {
|
||||
color: #b0b0d0;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: rgba(15, 20, 50, 0.8);
|
||||
border: 1px solid rgba(0, 213, 255, 0.3);
|
||||
border-radius: 4px;
|
||||
color: #e0e0e0;
|
||||
padding: 10px 12px;
|
||||
font-size: 14px;
|
||||
font-family: 'Space Mono', monospace;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #00d5ff;
|
||||
box-shadow: 0 0 10px rgba(0, 213, 255, 0.3);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preset-buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.preset-btn {
|
||||
padding: 8px 16px;
|
||||
background-color: rgba(0, 213, 255, 0.1);
|
||||
border: 1px solid #00d5ff;
|
||||
border-radius: 4px;
|
||||
color: #00d5ff;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: rgba(0, 213, 255, 0.2);
|
||||
box-shadow: 0 0 10px rgba(0, 213, 255, 0.3);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background-color: rgba(255, 107, 107, 0.1);
|
||||
border: 1px solid #ff6b6b;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
color: #ff9999;
|
||||
font-size: 13px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.dialog-buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid rgba(0, 213, 255, 0.2);
|
||||
|
||||
button {
|
||||
padding: 10px 24px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
|
||||
&.btn-secondary {
|
||||
background-color: transparent;
|
||||
border: 1px solid rgba(0, 213, 255, 0.3);
|
||||
color: #00d5ff;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: rgba(0, 213, 255, 0.1);
|
||||
border-color: #00d5ff;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-primary {
|
||||
background-color: #00d5ff;
|
||||
border: none;
|
||||
color: #0a0e27;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
box-shadow: 0 0 20px rgba(0, 213, 255, 0.6);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -0,0 +1,159 @@
|
||||
import { Component, inject, OnInit, OnDestroy, DestroyRef, Output, EventEmitter } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule, ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
||||
import { finalize } from 'rxjs';
|
||||
import { ChallengeService } from '../../services/challenge.service';
|
||||
import { Router } from '@angular/router';
|
||||
import { getErrorMessage } from '../../core/http/error-message.util';
|
||||
import { PlayerColor } from '../../models/challenge.models';
|
||||
|
||||
type TimeMode = 'blitz' | 'rapid' | 'classical' | 'unlimited';
|
||||
|
||||
interface TimePreset {
|
||||
label: string;
|
||||
limitSeconds: number;
|
||||
incrementSeconds: number;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-challenge-create-dialog',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule, ReactiveFormsModule],
|
||||
templateUrl: './challenge-create-dialog.component.html',
|
||||
styleUrls: ['./challenge-create-dialog.component.css']
|
||||
})
|
||||
export class ChallengeCreateDialogComponent implements OnInit, OnDestroy {
|
||||
private readonly challengeService = inject(ChallengeService);
|
||||
private readonly router = inject(Router);
|
||||
private readonly fb = inject(FormBuilder);
|
||||
private readonly destroyRef = inject(DestroyRef);
|
||||
|
||||
@Output() closeChallengeDialog = new EventEmitter<void>();
|
||||
|
||||
form!: FormGroup;
|
||||
loading = false;
|
||||
errorMessage = '';
|
||||
selectedTimeMode: TimeMode = 'rapid';
|
||||
|
||||
timePresets: Record<TimeMode, TimePreset[]> = {
|
||||
blitz: [
|
||||
{ label: '1+0', limitSeconds: 60, incrementSeconds: 0 },
|
||||
{ label: '2+1', limitSeconds: 120, incrementSeconds: 1 },
|
||||
{ label: '3+0', limitSeconds: 180, incrementSeconds: 0 },
|
||||
{ label: '3+2', limitSeconds: 180, incrementSeconds: 2 },
|
||||
{ label: '5+0', limitSeconds: 300, incrementSeconds: 0 }
|
||||
],
|
||||
rapid: [
|
||||
{ label: '10+0', limitSeconds: 600, incrementSeconds: 0 },
|
||||
{ label: '10+5', limitSeconds: 600, incrementSeconds: 5 },
|
||||
{ label: '15+10', limitSeconds: 900, incrementSeconds: 10 },
|
||||
{ label: '25+10', limitSeconds: 1500, incrementSeconds: 10 }
|
||||
],
|
||||
classical: [
|
||||
{ label: '30+0', limitSeconds: 1800, incrementSeconds: 0 },
|
||||
{ label: '30+20', limitSeconds: 1800, incrementSeconds: 20 },
|
||||
{ label: '60+30', limitSeconds: 3600, incrementSeconds: 30 },
|
||||
{ label: '90+30', limitSeconds: 5400, incrementSeconds: 30 }
|
||||
],
|
||||
unlimited: []
|
||||
};
|
||||
|
||||
ttlOptions = [
|
||||
{ label: '5 minutes', seconds: 300 },
|
||||
{ label: '1 hour', seconds: 3600 },
|
||||
{ label: '1 day', seconds: 86400 },
|
||||
{ label: 'No expiry', seconds: 0 }
|
||||
];
|
||||
|
||||
ngOnInit(): void {
|
||||
this.initializeForm();
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
}
|
||||
|
||||
private initializeForm(): void {
|
||||
this.form = this.fb.group({
|
||||
targetUsername: ['', [Validators.required, Validators.minLength(1)]],
|
||||
color: ['random', Validators.required],
|
||||
timeMode: ['rapid'],
|
||||
limitMinutes: [10, [Validators.required, Validators.min(1), Validators.max(1000)]],
|
||||
incrementSeconds: [5, [Validators.required, Validators.min(0), Validators.max(300)]],
|
||||
ttlSeconds: [3600, Validators.required]
|
||||
});
|
||||
|
||||
this.form.get('timeMode')?.valueChanges
|
||||
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||
.subscribe((mode: unknown) => {
|
||||
const timeMode = mode as TimeMode;
|
||||
this.selectedTimeMode = timeMode;
|
||||
if (timeMode !== 'unlimited') {
|
||||
const firstPreset = this.timePresets[timeMode][0];
|
||||
if (firstPreset) {
|
||||
this.form.patchValue({
|
||||
limitMinutes: firstPreset.limitSeconds / 60,
|
||||
incrementSeconds: firstPreset.incrementSeconds
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
selectPreset(preset: TimePreset): void {
|
||||
this.form.patchValue({
|
||||
limitMinutes: preset.limitSeconds / 60,
|
||||
incrementSeconds: preset.incrementSeconds
|
||||
});
|
||||
}
|
||||
|
||||
getAvailablePresets(): TimePreset[] {
|
||||
return this.timePresets[this.selectedTimeMode] || [];
|
||||
}
|
||||
|
||||
submit(): void {
|
||||
if (this.form.invalid || this.loading) {
|
||||
return;
|
||||
}
|
||||
|
||||
const targetUsername = this.form.get('targetUsername')?.value?.trim();
|
||||
if (!targetUsername) {
|
||||
this.errorMessage = 'Please enter a valid username';
|
||||
return;
|
||||
}
|
||||
|
||||
this.errorMessage = '';
|
||||
this.loading = true;
|
||||
|
||||
const limitSeconds = Math.round((this.form.get('limitMinutes')?.value || 0) * 60);
|
||||
const incrementSeconds = this.form.get('incrementSeconds')?.value || 0;
|
||||
const ttlSeconds = this.form.get('ttlSeconds')?.value;
|
||||
const color = (this.form.get('color')?.value || 'random') as PlayerColor;
|
||||
|
||||
this.challengeService.sendChallenge(targetUsername, {
|
||||
timeControl: {
|
||||
limitSeconds,
|
||||
incrementSeconds
|
||||
},
|
||||
color,
|
||||
ttlSeconds: ttlSeconds > 0 ? ttlSeconds : undefined
|
||||
})
|
||||
.pipe(finalize(() => (this.loading = false)))
|
||||
.subscribe({
|
||||
next: (challenge) => {
|
||||
// Challenge sent successfully - navigate to challenges page to view status
|
||||
this.form.reset();
|
||||
this.closeChallengeDialog.emit();
|
||||
void this.router.navigate(['/challenges']);
|
||||
},
|
||||
error: (error) => {
|
||||
this.errorMessage = getErrorMessage(error, 'Failed to send challenge. Please try again.');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
cancel(): void {
|
||||
this.form.reset();
|
||||
this.closeChallengeDialog.emit();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,194 @@
|
||||
@import '../../button-template.css';
|
||||
|
||||
.challenge-notification {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
max-width: 400px;
|
||||
background: linear-gradient(135deg, #0a0e27 0%, #1a1a3e 100%);
|
||||
border: 2px solid #00d5ff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 20px rgba(0, 213, 255, 0.4), inset 0 0 10px rgba(0, 213, 255, 0.05);
|
||||
padding: 16px;
|
||||
color: #e0e0e0;
|
||||
z-index: 2000;
|
||||
animation: slideInRight 0.3s ease-out;
|
||||
|
||||
&.error {
|
||||
border-color: #ff6b6b;
|
||||
box-shadow: 0 0 20px rgba(255, 107, 107, 0.4), inset 0 0 10px rgba(255, 107, 107, 0.05);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
left: 10px;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
transform: translateX(450px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid rgba(0, 213, 255, 0.2);
|
||||
}
|
||||
|
||||
.notification-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
|
||||
.badge {
|
||||
background-color: rgba(0, 213, 255, 0.2);
|
||||
border: 1px solid #00d5ff;
|
||||
border-radius: 3px;
|
||||
padding: 4px 8px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: #00d5ff;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #d4f4ff;
|
||||
}
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
color: #00d5ff;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
color: #ffffff;
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.time-control {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
|
||||
.label {
|
||||
color: #b0b0d0;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.value {
|
||||
background-color: rgba(0, 213, 255, 0.1);
|
||||
border: 1px solid rgba(0, 213, 255, 0.3);
|
||||
border-radius: 3px;
|
||||
padding: 4px 12px;
|
||||
color: #00d5ff;
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.expiration {
|
||||
font-size: 12px;
|
||||
color: #b0b0d0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background-color: rgba(255, 107, 107, 0.1);
|
||||
border: 1px solid #ff6b6b;
|
||||
border-radius: 3px;
|
||||
padding: 8px 10px;
|
||||
color: #ff9999;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.notification-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
|
||||
button {
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
border: none;
|
||||
|
||||
&.btn-decline {
|
||||
background-color: transparent;
|
||||
border: 1px solid rgba(0, 213, 255, 0.3);
|
||||
color: #00d5ff;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: rgba(0, 213, 255, 0.1);
|
||||
border-color: #00d5ff;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-accept {
|
||||
background-color: #00d5ff;
|
||||
color: #0a0e27;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
box-shadow: 0 0 15px rgba(0, 213, 255, 0.6);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
<div class="challenge-notification" [class.error]="!!errorMessage">
|
||||
<div class="notification-header">
|
||||
<div class="notification-title">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="notification-content">
|
||||
<div class="time-control">
|
||||
<span class="label">Time Control:</span>
|
||||
<span class="value">{{ getTimeControlDisplay() }}</span>
|
||||
</div>
|
||||
|
||||
<div class="expiration">
|
||||
<span class="label">{{ getExpirationInfo() }}</span>
|
||||
</div>
|
||||
|
||||
<div *ngIf="errorMessage" class="error-message">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
|
||||
<div class="notification-actions">
|
||||
<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">
|
||||
{{ acceptingChallenge ? 'Accepting...' : 'Accept' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,101 @@
|
||||
import { Component, Input, Output, EventEmitter, inject } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Challenge } from '../../models/challenge.models';
|
||||
import { ChallengeService } from '../../services/challenge.service';
|
||||
import { finalize } from 'rxjs';
|
||||
import { getErrorMessage } from '../../core/http/error-message.util';
|
||||
|
||||
@Component({
|
||||
selector: 'app-challenge-notification',
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
templateUrl: './challenge-notification.component.html',
|
||||
styleUrls: ['./challenge-notification.component.css']
|
||||
})
|
||||
export class ChallengeNotificationComponent {
|
||||
@Input() challenge!: Challenge;
|
||||
@Output() accept = new EventEmitter<Challenge>();
|
||||
@Output() decline = new EventEmitter<Challenge>();
|
||||
@Output() close = new EventEmitter<void>();
|
||||
|
||||
private readonly challengeService = inject(ChallengeService);
|
||||
|
||||
acceptingChallenge = false;
|
||||
decliningChallenge = false;
|
||||
errorMessage = '';
|
||||
|
||||
onAccept(): void {
|
||||
if (this.acceptingChallenge || this.decliningChallenge) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.acceptingChallenge = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
this.challengeService.acceptChallenge(this.challenge.id)
|
||||
.pipe(finalize(() => (this.acceptingChallenge = false)))
|
||||
.subscribe({
|
||||
next: () => {
|
||||
this.accept.emit(this.challenge);
|
||||
},
|
||||
error: (error) => {
|
||||
this.errorMessage = getErrorMessage(error, 'Failed to accept challenge');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onDecline(): void {
|
||||
if (this.acceptingChallenge || this.decliningChallenge) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.decliningChallenge = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
this.challengeService.declineChallenge(this.challenge.id, { reason: 'Not interested' })
|
||||
.pipe(finalize(() => (this.decliningChallenge = false)))
|
||||
.subscribe({
|
||||
next: () => {
|
||||
this.decline.emit(this.challenge);
|
||||
},
|
||||
error: (error) => {
|
||||
this.errorMessage = getErrorMessage(error, 'Failed to decline challenge');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onClose(): void {
|
||||
this.close.emit();
|
||||
}
|
||||
|
||||
getTimeControlDisplay(): string {
|
||||
const { limit, increment } = this.challenge.timeControl;
|
||||
if (!limit || !increment) {
|
||||
return 'Unlimited';
|
||||
}
|
||||
const minutes = Math.floor(limit / 60);
|
||||
return `${minutes}+${increment}`;
|
||||
}
|
||||
|
||||
getCreatedByDisplay(): string {
|
||||
return this.challenge.challenger.name;
|
||||
}
|
||||
|
||||
getExpirationInfo(): string {
|
||||
const expiresAt = new Date(this.challenge.expiresAt);
|
||||
const now = new Date();
|
||||
const diffMs = expiresAt.getTime() - now.getTime();
|
||||
|
||||
if (diffMs <= 0) {
|
||||
return 'Expired';
|
||||
}
|
||||
|
||||
const minutes = Math.floor(diffMs / 60000);
|
||||
if (minutes > 60) {
|
||||
const hours = Math.floor(minutes / 60);
|
||||
return `Expires in ${hours}h`;
|
||||
}
|
||||
|
||||
return `Expires in ${minutes}m`;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user