Compare commits
4 Commits
7de4f3784b
..
0.1.0
| Author | SHA1 | Date | |
|---|---|---|---|
 TeamCity
|
3c1f5c76e0 | ||
 shosho996
|
36d72fd6cd | ||
|
shosho996
|
bd7ec581e3 | ||
|
shosho996
|
ff75c8ce2f |
@@ -1,12 +0,0 @@
|
||||
node_modules
|
||||
dist
|
||||
tmp
|
||||
*.log
|
||||
.git
|
||||
.gitignore
|
||||
Dockerfile
|
||||
docker-compose*.yml
|
||||
^\.env$
|
||||
.idea
|
||||
vscode
|
||||
coverage
|
||||
@@ -0,0 +1,20 @@
|
||||
## 0.0.0 (2026-05-12)
|
||||
|
||||
### Features
|
||||
|
||||
* added bot, light and dark mode ([2de003e](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/2de003e497baee72f998d0d805ca1e58aababe48))
|
||||
* added web view 1v1 ([1828fa3](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/1828fa3275ddb8ce6bb90a9f6a970ec428ebce3a))
|
||||
* NCS-63 User account implementation ([#2](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/2)) ([ff75c8c](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/ff75c8ce2fad54137f04a14c15bc1d4a38fa9bb8))
|
||||
* NCS-75 Frontend Deployment Dockerfile ([#4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/4)) ([bd7ec58](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/bd7ec581e38b5d8e775741bf16e19b4dc67b979e))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* build issues ([36d72fd](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/36d72fd6cda41be51d28f8ac307dcdbcd31afa91))
|
||||
* cleaner components seperation ([8b090e4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/8b090e4d96c64c0adb253e3aefad7930108ccfb9))
|
||||
* gitignore ([4da882f](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/4da882f481ba7a008aac868fb37de7cb2bafea5d))
|
||||
* GITIGNORE ([8df2d05](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/8df2d0550ab17c9afb2d19c414eac700a75add02))
|
||||
* npm ([c11c1d4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/c11c1d4dce9de4bd5b463e891eebf961b37feb04))
|
||||
* removed .vs ([2833ead](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/2833ead7be3b47ee5c188d2d21b7326cb3cb3f26))
|
||||
* removed cache files ([7ee59c4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/7ee59c434bf137a08fd560bbc02ceefbcfd90f04))
|
||||
* size of pieces and removed text view of the game state ([c60d00f](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/c60d00f9d25247504845654615065fbccd7fe448))
|
||||
* structure ([3e8c7c4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/3e8c7c4057e55aeec7cee8c24f6751ff24912c93))
|
||||
+12
-6
@@ -1,19 +1,25 @@
|
||||
FROM node:20-alpine AS build
|
||||
FROM --platform=$BUILDPLATFORM node:lts-alpine3.23 AS builder
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package*.json ./
|
||||
RUN npm ci --silent
|
||||
|
||||
RUN npm install
|
||||
COPY . .
|
||||
RUN npm run build
|
||||
|
||||
RUN npm run build -- --configuration production
|
||||
FROM --platform=$TARGETPLATFORM nginx:stable-alpine AS production
|
||||
|
||||
FROM nginx:stable-alpine
|
||||
RUN apk add --no-cache gettext
|
||||
|
||||
RUN rm -rf /usr/share/nginx/html/*
|
||||
COPY --from=builder /app/dist/nowchess-frontend/browser /usr/share/nginx/html
|
||||
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
|
||||
COPY --from=build /app/dist/nowchess-frontend/browser /usr/share/nginx/html
|
||||
COPY public/env.template.js /usr/share/nginx/html/env.template.js
|
||||
COPY docker-entrypoint.sh /docker-entrypoint.sh
|
||||
RUN chmod +x /docker-entrypoint.sh
|
||||
|
||||
EXPOSE 80
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
ENTRYPOINT ["/docker-entrypoint.sh"]
|
||||
|
||||
+15
-4
@@ -47,17 +47,25 @@
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "500kB",
|
||||
"maximumError": "4MB"
|
||||
"maximumWarning": "1MB",
|
||||
"maximumError": "5MB"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "1.5MB",
|
||||
"maximumError": "2MB"
|
||||
"maximumWarning": "1MB",
|
||||
"maximumError": "5MB"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"staging": {
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.staging.ts"
|
||||
}
|
||||
]
|
||||
},
|
||||
"development": {
|
||||
"fileReplacements": [
|
||||
{
|
||||
@@ -83,6 +91,9 @@
|
||||
"production": {
|
||||
"buildTarget": "nowchess-frontend:build:production"
|
||||
},
|
||||
"staging": {
|
||||
"buildTarget": "nowchess-frontend:build:staging"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "nowchess-frontend:build:development"
|
||||
}
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
#!/bin/sh
|
||||
set -e
|
||||
|
||||
# Replace placeholders in env.template.js with environment variables and write env.js
|
||||
TEMPLATE_PATH="/usr/share/nginx/html/env.template.js"
|
||||
TARGET_PATH="/usr/share/nginx/html/env.js"
|
||||
|
||||
if [ -f "$TEMPLATE_PATH" ]; then
|
||||
echo "Rendering runtime config from $TEMPLATE_PATH"
|
||||
echo "Using environment variables:"
|
||||
printenv
|
||||
echo "----"
|
||||
envsubst < "$TEMPLATE_PATH" > "$TARGET_PATH"
|
||||
else
|
||||
echo "No runtime template found at $TEMPLATE_PATH, skipping"
|
||||
fi
|
||||
|
||||
exec nginx -g 'daemon off;'
|
||||
+18
-12
@@ -1,16 +1,22 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name _;
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
listen 80;
|
||||
server_name localhost;
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
location / {
|
||||
root /usr/share/nginx/html;
|
||||
index index.html index.htm;
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
location ~* \.(?:js|css|png|jpg|jpeg|gif|ico|svg|woff2?|ttf|eot)$ {
|
||||
try_files $uri =404;
|
||||
expires 1y;
|
||||
add_header Cache-Control "public";
|
||||
}
|
||||
location /env.js {
|
||||
root /usr/share/nginx/html;
|
||||
default_type application/javascript;
|
||||
expires -1;
|
||||
add_header 'Cache-Control' 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
|
||||
}
|
||||
|
||||
error_page 500 502 503 504 /50x.html;
|
||||
location = /50x.html {
|
||||
root /usr/share/nginx/html;
|
||||
}
|
||||
}
|
||||
|
||||
+2
-1
@@ -4,7 +4,8 @@
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"build": "ng build --configuration production",
|
||||
"build:staging": "ng build --configuration staging",
|
||||
"watch": "ng build --watch --configuration development",
|
||||
"test": "ng test"
|
||||
},
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
window.__RUNTIME_CONFIG__ = {
|
||||
API_URL: "${API_URL}",
|
||||
WEBSOCKET_URL: "${WEBSOCKET_URL}"
|
||||
};
|
||||
@@ -2,12 +2,10 @@ import { Routes } from '@angular/router';
|
||||
import { GameComponent } from './pages/game/game.component';
|
||||
import { WelcomeComponent } from './pages/welcome/welcome.component';
|
||||
import { ProfileComponent } from './pages/profile/profile.component';
|
||||
import { ChallengesComponent } from './pages/challenges/challenges.component';
|
||||
|
||||
export const routes: Routes = [
|
||||
{ path: '', component: WelcomeComponent },
|
||||
{ path: 'profile', component: ProfileComponent },
|
||||
{ path: 'challenges', component: ChallengesComponent },
|
||||
{ path: 'game/:gameId', component: GameComponent },
|
||||
{ path: '**', redirectTo: '' }
|
||||
];
|
||||
|
||||
+1
-6
@@ -2,7 +2,6 @@ import { Component, OnInit } from '@angular/core';
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
import { ToolbarComponent } from './components/toolbar/toolbar.component';
|
||||
import { ThemeService } from './services/theme.service';
|
||||
import { ChallengeWebSocketService } from './services/challenge-websocket.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
@@ -11,13 +10,9 @@ import { ChallengeWebSocketService } from './services/challenge-websocket.servic
|
||||
styleUrl: './app.css'
|
||||
})
|
||||
export class App implements OnInit {
|
||||
constructor(
|
||||
private readonly themeService: ThemeService,
|
||||
private readonly challengeWs: ChallengeWebSocketService
|
||||
) { }
|
||||
constructor(private readonly themeService: ThemeService) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.themeService.initTheme();
|
||||
this.challengeWs.connect();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,261 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,93 +0,0 @@
|
||||
<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>
|
||||
@@ -1,159 +0,0 @@
|
||||
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();
|
||||
}
|
||||
}
|
||||
@@ -1,194 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
<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>
|
||||
@@ -1,101 +0,0 @@
|
||||
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`;
|
||||
}
|
||||
}
|
||||
@@ -82,148 +82,3 @@
|
||||
.ms-auto {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.notification-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.notification-badge {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
&.has-notifications {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
background-color: #ff6b6b;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
filter: drop-shadow(0 0 3px rgba(0, 213, 255, 0.3));
|
||||
}
|
||||
50% {
|
||||
filter: drop-shadow(0 0 8px rgba(0, 213, 255, 0.6));
|
||||
}
|
||||
100% {
|
||||
filter: drop-shadow(0 0 3px rgba(0, 213, 255, 0.3));
|
||||
}
|
||||
}
|
||||
|
||||
.notification-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
background: linear-gradient(135deg, #0a0e27 0%, #1a1a3e 100%);
|
||||
border: 1px solid rgba(0, 213, 255, 0.3);
|
||||
border-radius: 8px;
|
||||
min-width: 250px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
z-index: 1001;
|
||||
box-shadow: 0 0 20px rgba(0, 213, 255, 0.3);
|
||||
margin-top: 10px;
|
||||
|
||||
.notification-menu-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid rgba(0, 213, 255, 0.2);
|
||||
color: #00d5ff;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #00d5ff;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notification-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.notification-item {
|
||||
padding: 10px 12px;
|
||||
background-color: rgba(0, 213, 255, 0.05);
|
||||
border: 1px solid rgba(0, 213, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #b0b0d0;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 213, 255, 0.1);
|
||||
border-color: rgba(0, 213, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.notification-menu-footer {
|
||||
padding: 8px 8px 0;
|
||||
border-top: 1px solid rgba(0, 213, 255, 0.2);
|
||||
}
|
||||
|
||||
.view-all-btn {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
background-color: rgba(0, 213, 255, 0.1);
|
||||
border: 1px solid rgba(0, 213, 255, 0.3);
|
||||
border-radius: 4px;
|
||||
color: #00d5ff;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 213, 255, 0.2);
|
||||
border-color: #00d5ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,37 +3,6 @@
|
||||
<span class="navbar-brand">NowChess</span>
|
||||
<div class="ms-auto">
|
||||
<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">
|
||||
🔔
|
||||
<span *ngIf="incomingChallenges.length > 0" class="badge">
|
||||
{{ incomingChallenges.length }}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<!-- Notification Menu Dropdown -->
|
||||
@if (showNotificationMenu && incomingChallenges.length > 0) {
|
||||
<div class="notification-menu" (click)="$event.stopPropagation()">
|
||||
<div class="notification-menu-header">
|
||||
Challenges
|
||||
<button type="button" class="close-btn" (click)="closeNotificationMenu()">×</button>
|
||||
</div>
|
||||
<div class="notification-list">
|
||||
<div *ngFor="let challenge of incomingChallenges" class="notification-item">
|
||||
{{ challenge.challenger.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="notification-menu-footer">
|
||||
<button type="button" class="view-all-btn" (click)="goToChallenges()">
|
||||
View All Challenges →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<button type="button" class="app-btn" (click)="toggleTheme()">
|
||||
{{ isDarkMode ? 'Light mode' : 'Dark mode' }}
|
||||
</button>
|
||||
@@ -42,9 +11,6 @@
|
||||
<button type="button" class="me-btn" (click)="goToProfile()">
|
||||
👤 {{ user.username }}
|
||||
</button>
|
||||
<button type="button" class="app-btn" (click)="goToChallenges()">
|
||||
Challenges
|
||||
</button>
|
||||
<button type="button" class="app-btn" (click)="logout()">Logout</button>
|
||||
</div>
|
||||
} @else {
|
||||
@@ -60,12 +26,6 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Challenge Notification Popup -->
|
||||
@if (displayedChallenge) {
|
||||
<app-challenge-notification [challenge]="displayedChallenge" (accept)="onChallengeAccepted($event)"
|
||||
(decline)="onChallengeDeclined($event)" (close)="onNotificationClose()" />
|
||||
}
|
||||
|
||||
@if (showLoginDialog) {
|
||||
<app-login-dialog (onClose)="closeLoginDialog()" (onSuccess)="onLoginSuccess()" />
|
||||
}
|
||||
|
||||
@@ -8,14 +8,11 @@ import { CurrentUser } from '../../models/auth.models';
|
||||
import { LoginDialogComponent } from '../login-dialog/login-dialog.component';
|
||||
import { RegisterDialogComponent } from '../register-dialog/register-dialog.component';
|
||||
import { ThemeService } from '../../services/theme.service';
|
||||
import { ChallengeEventService } from '../../services/challenge-event.service';
|
||||
import { ChallengeNotificationComponent } from '../challenge-notification/challenge-notification.component';
|
||||
import { Challenge } from '../../models/challenge.models';
|
||||
|
||||
@Component({
|
||||
selector: 'app-toolbar',
|
||||
standalone: true,
|
||||
imports: [CommonModule, LoginDialogComponent, RegisterDialogComponent, ChallengeNotificationComponent],
|
||||
imports: [CommonModule, LoginDialogComponent, RegisterDialogComponent],
|
||||
templateUrl: './toolbar.component.html',
|
||||
styleUrl: './toolbar.component.css'
|
||||
})
|
||||
@@ -24,16 +21,12 @@ export class ToolbarComponent implements OnInit {
|
||||
private readonly authService = inject(AuthService);
|
||||
private readonly authDialogService = inject(AuthDialogService);
|
||||
private readonly themeService = inject(ThemeService);
|
||||
private readonly challengeEventService = inject(ChallengeEventService);
|
||||
private readonly router = inject(Router);
|
||||
|
||||
currentUser: CurrentUser | null = null;
|
||||
showLoginDialog = false;
|
||||
showRegisterDialog = false;
|
||||
isDarkMode = false;
|
||||
incomingChallenges: Challenge[] = [];
|
||||
showNotificationMenu = false;
|
||||
displayedChallenge: Challenge | null = null;
|
||||
|
||||
ngOnInit(): void {
|
||||
this.authService.currentUser$
|
||||
@@ -54,22 +47,6 @@ export class ToolbarComponent implements OnInit {
|
||||
.subscribe((isDarkMode) => {
|
||||
this.isDarkMode = isDarkMode;
|
||||
});
|
||||
|
||||
this.challengeEventService.getIncomingChallenges$()
|
||||
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||
.subscribe((challenges) => {
|
||||
this.incomingChallenges = challenges;
|
||||
// Show the most recent challenge as notification
|
||||
if (challenges.length > 0) {
|
||||
this.displayedChallenge = challenges[0];
|
||||
}
|
||||
});
|
||||
|
||||
this.challengeEventService.getChallengeReceived$()
|
||||
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||
.subscribe((challenge) => {
|
||||
this.displayedChallenge = challenge;
|
||||
});
|
||||
}
|
||||
|
||||
openLoginDialog(): void {
|
||||
@@ -107,34 +84,4 @@ export class ToolbarComponent implements OnInit {
|
||||
onRegisterSuccess(): void {
|
||||
this.closeRegisterDialog();
|
||||
}
|
||||
|
||||
toggleNotificationMenu(): void {
|
||||
this.showNotificationMenu = !this.showNotificationMenu;
|
||||
}
|
||||
|
||||
closeNotificationMenu(): void {
|
||||
this.showNotificationMenu = false;
|
||||
}
|
||||
|
||||
onChallengeAccepted(challenge: Challenge): void {
|
||||
this.challengeEventService.onChallengeAccepted(challenge);
|
||||
this.displayedChallenge = null;
|
||||
this.closeNotificationMenu();
|
||||
// Navigate to the game (once game creation is handled by backend)
|
||||
}
|
||||
|
||||
onChallengeDeclined(challenge: Challenge): void {
|
||||
this.challengeEventService.removeChallenge(challenge.id);
|
||||
this.displayedChallenge = null;
|
||||
this.closeNotificationMenu();
|
||||
}
|
||||
|
||||
onNotificationClose(): void {
|
||||
this.displayedChallenge = null;
|
||||
}
|
||||
|
||||
goToChallenges(): void {
|
||||
this.closeNotificationMenu();
|
||||
void this.router.navigate(['/challenges']);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
/**
|
||||
* Load runtime configuration from window.__RUNTIME_CONFIG__
|
||||
* This is injected by docker-entrypoint.sh at container startup
|
||||
*/
|
||||
export function loadRuntimeConfig() {
|
||||
const config = (window as any).__RUNTIME_CONFIG__ || {};
|
||||
return {
|
||||
apiUrl: config.API_URL || '',
|
||||
wsUrl: config.WEBSOCKET_URL || 'ws://localhost:8080'
|
||||
};
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
export type ChallengeStatus = 'created' | 'pending' | 'accepted' | 'declined' | 'cancelled' | 'expired';
|
||||
|
||||
export type PlayerColor = 'white' | 'black' | 'random';
|
||||
|
||||
export interface Player {
|
||||
id: string;
|
||||
name: string;
|
||||
rating: number;
|
||||
}
|
||||
|
||||
export interface TimeControl {
|
||||
type: string | null;
|
||||
limit: number | null;
|
||||
increment: number | null;
|
||||
}
|
||||
|
||||
export interface Challenge {
|
||||
id: string;
|
||||
challenger: Player;
|
||||
destUser: Player;
|
||||
variant: string;
|
||||
color: PlayerColor;
|
||||
timeControl: TimeControl;
|
||||
status: ChallengeStatus;
|
||||
declineReason: string | null;
|
||||
gameId: string | null;
|
||||
expiresAt: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface SendChallengeRequest {
|
||||
timeControl: {
|
||||
limitSeconds: number;
|
||||
incrementSeconds: number;
|
||||
};
|
||||
color?: PlayerColor;
|
||||
ttlSeconds?: number;
|
||||
}
|
||||
|
||||
export interface ListChallengesResponse {
|
||||
'in'?: Challenge[];
|
||||
'out'?: Challenge[];
|
||||
incoming?: Challenge[];
|
||||
outgoing?: Challenge[];
|
||||
}
|
||||
|
||||
export interface DeclineChallengeRequest {
|
||||
reason?: string;
|
||||
}
|
||||
@@ -1,222 +0,0 @@
|
||||
@import '../../button-template.css';
|
||||
|
||||
.challenges-container {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #04000f 0%, #0e0235 25%, #2d0860 50%, #0e0235 75%, #04000f 100%);
|
||||
color: #e0e0e0;
|
||||
padding: 20px;
|
||||
font-family: 'Space Mono', 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.challenges-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 2px solid rgba(0, 213, 255, 0.3);
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
color: #00d5ff;
|
||||
font-size: 32px;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(0, 213, 255, 0.3);
|
||||
color: #00d5ff;
|
||||
padding: 10px 20px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 213, 255, 0.1);
|
||||
border-color: #00d5ff;
|
||||
}
|
||||
}
|
||||
|
||||
.error-banner {
|
||||
background-color: rgba(255, 107, 107, 0.1);
|
||||
border: 1px solid #ff6b6b;
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
color: #ff9999;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.challenges-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 30px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.challenges-section {
|
||||
h2 {
|
||||
color: #00d5ff;
|
||||
font-size: 20px;
|
||||
margin: 0 0 20px 0;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid rgba(0, 213, 255, 0.2);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #00d5ff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #b0b0d0;
|
||||
font-size: 14px;
|
||||
background-color: rgba(0, 213, 255, 0.05);
|
||||
border: 1px dashed rgba(0, 213, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.challenge-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.challenge-card {
|
||||
background: linear-gradient(135deg, rgba(10, 14, 39, 0.8) 0%, rgba(26, 26, 62, 0.8) 100%);
|
||||
border: 1px solid rgba(0, 213, 255, 0.3);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(0, 213, 255, 0.6);
|
||||
box-shadow: 0 0 15px rgba(0, 213, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.challenge-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.1);
|
||||
|
||||
.challenger-name {
|
||||
color: #d4f4ff;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.time-control {
|
||||
background-color: rgba(0, 213, 255, 0.15);
|
||||
border: 1px solid rgba(0, 213, 255, 0.3);
|
||||
color: #00d5ff;
|
||||
padding: 4px 12px;
|
||||
border-radius: 3px;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.challenge-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.detail {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
|
||||
.label {
|
||||
color: #b0b0d0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #00d5ff;
|
||||
font-weight: 600;
|
||||
|
||||
&.status-pending {
|
||||
color: #ffcc30;
|
||||
}
|
||||
|
||||
&.status-accepted {
|
||||
color: #4ade80;
|
||||
}
|
||||
|
||||
&.status-declined {
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
&.status-expired {
|
||||
color: #b0b0d0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.challenge-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: flex-end;
|
||||
|
||||
.btn {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid rgba(0, 213, 255, 0.3);
|
||||
border-radius: 4px;
|
||||
background-color: transparent;
|
||||
color: #00d5ff;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 213, 255, 0.1);
|
||||
border-color: #00d5ff;
|
||||
}
|
||||
|
||||
&.btn-accept {
|
||||
background-color: #00d5ff;
|
||||
color: #04000f;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 15px rgba(0, 213, 255, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-decline,
|
||||
&.btn-cancel {
|
||||
color: #ff6b6b;
|
||||
border-color: rgba(255, 107, 107, 0.3);
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 107, 107, 0.1);
|
||||
border-color: #ff6b6b;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,102 +0,0 @@
|
||||
<div class="challenges-container">
|
||||
<div class="challenges-header">
|
||||
<h1>Active Challenges</h1>
|
||||
<button type="button" class="back-btn" (click)="goBack()">← Back</button>
|
||||
</div>
|
||||
|
||||
<div *ngIf="errorMessage" class="error-banner">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
|
||||
<div class="challenges-grid">
|
||||
<!-- Incoming Challenges -->
|
||||
<div class="challenges-section">
|
||||
<h2>Incoming Challenges</h2>
|
||||
<div *ngIf="loading" class="loading-spinner">Loading...</div>
|
||||
|
||||
<div *ngIf="!loading && incomingChallenges.length === 0" class="empty-state">
|
||||
<p>No incoming challenges</p>
|
||||
</div>
|
||||
|
||||
<div *ngIf="!loading && incomingChallenges.length > 0" class="challenge-list">
|
||||
<div *ngFor="let challenge of incomingChallenges" class="challenge-card">
|
||||
<div class="challenge-header">
|
||||
<span class="challenger-name">{{ getChallengerDisplay(challenge) }}</span>
|
||||
<span class="time-control">{{ getTimeControlDisplay(challenge) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="challenge-details">
|
||||
<div class="detail">
|
||||
<span class="label">Status:</span>
|
||||
<span class="value" [class]="'status-' + challenge.status">
|
||||
{{ challenge.status | uppercase }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span class="label">Expires in:</span>
|
||||
<span class="value">{{ getExpirationInfo(challenge) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="challenge-actions" *ngIf="challenge.status === 'created'">
|
||||
<button type="button" class="btn btn-decline" (click)="declineChallenge(challenge)">
|
||||
Decline
|
||||
</button>
|
||||
<button type="button" class="btn btn-accept" (click)="acceptChallenge(challenge)">
|
||||
Accept
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="challenge-actions" *ngIf="challenge.status === 'accepted' && challenge.gameId">
|
||||
<button type="button" class="btn btn-accept" (click)="openGame(challenge)">
|
||||
Play
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Outgoing Challenges -->
|
||||
<div class="challenges-section">
|
||||
<h2>Outgoing Challenges</h2>
|
||||
|
||||
<div *ngIf="!loading && outgoingChallenges.length === 0" class="empty-state">
|
||||
<p>No outgoing challenges</p>
|
||||
</div>
|
||||
|
||||
<div *ngIf="!loading && outgoingChallenges.length > 0" class="challenge-list">
|
||||
<div *ngFor="let challenge of outgoingChallenges" class="challenge-card">
|
||||
<div class="challenge-header">
|
||||
<span class="challenger-name">→ {{ getOpponentDisplay(challenge) }}</span>
|
||||
<span class="time-control">{{ getTimeControlDisplay(challenge) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="challenge-details">
|
||||
<div class="detail">
|
||||
<span class="label">Status:</span>
|
||||
<span class="value" [class]="'status-' + challenge.status">
|
||||
{{ challenge.status | uppercase }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span class="label">Expires in:</span>
|
||||
<span class="value">{{ getExpirationInfo(challenge) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="challenge-actions" *ngIf="challenge.status === 'created'">
|
||||
<button type="button" class="btn btn-cancel" (click)="cancelChallenge(challenge)">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="challenge-actions" *ngIf="challenge.status === 'accepted' && challenge.gameId">
|
||||
<button type="button" class="btn btn-accept" (click)="openGame(challenge)">
|
||||
Play
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,179 +0,0 @@
|
||||
import { Component, inject, OnInit, OnDestroy, DestroyRef } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Router } from '@angular/router';
|
||||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
||||
import { ChallengeService } from '../../services/challenge.service';
|
||||
import { ChallengeEventService } from '../../services/challenge-event.service';
|
||||
import { Challenge } from '../../models/challenge.models';
|
||||
import { getErrorMessage } from '../../core/http/error-message.util';
|
||||
|
||||
@Component({
|
||||
selector: 'app-challenges',
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
templateUrl: './challenges.component.html',
|
||||
styleUrls: ['./challenges.component.css']
|
||||
})
|
||||
export class ChallengesComponent implements OnInit, OnDestroy {
|
||||
private readonly challengeService = inject(ChallengeService);
|
||||
private readonly challengeEventService = inject(ChallengeEventService);
|
||||
private readonly router = inject(Router);
|
||||
private readonly destroyRef = inject(DestroyRef);
|
||||
|
||||
incomingChallenges: Challenge[] = [];
|
||||
outgoingChallenges: Challenge[] = [];
|
||||
loading = false;
|
||||
errorMessage = '';
|
||||
|
||||
private pollInterval: any = null;
|
||||
private readonly pollIntervalMs = 5000; // Poll every 5 seconds
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loadChallenges(true);
|
||||
|
||||
// Subscribe to challenge events
|
||||
this.challengeEventService.getChallengeReceived$()
|
||||
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||
.subscribe(() => {
|
||||
this.loadChallenges();
|
||||
});
|
||||
|
||||
// Start polling for challenge updates
|
||||
this.startPolling();
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.stopPolling();
|
||||
}
|
||||
|
||||
private startPolling(): void {
|
||||
this.pollInterval = setInterval(() => {
|
||||
this.loadChallenges(false);
|
||||
}, this.pollIntervalMs);
|
||||
}
|
||||
|
||||
private stopPolling(): void {
|
||||
if (this.pollInterval) {
|
||||
clearInterval(this.pollInterval);
|
||||
this.pollInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
loadChallenges(showLoader = false): void {
|
||||
if (showLoader) {
|
||||
this.loading = true;
|
||||
this.errorMessage = '';
|
||||
}
|
||||
|
||||
this.challengeService.listChallenges()
|
||||
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||
.subscribe({
|
||||
next: (response) => {
|
||||
this.incomingChallenges = response.in || response.incoming || [];
|
||||
this.outgoingChallenges = response.out || response.outgoing || [];
|
||||
if (showLoader) {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
error: (error) => {
|
||||
this.errorMessage = getErrorMessage(error, 'Failed to load challenges');
|
||||
if (showLoader) {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
acceptChallenge(challenge: Challenge): void {
|
||||
this.challengeService.acceptChallenge(challenge.id)
|
||||
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||
.subscribe({
|
||||
next: (acceptedChallenge) => {
|
||||
this.challengeEventService.onChallengeAccepted(acceptedChallenge);
|
||||
this.loadChallenges();
|
||||
if (acceptedChallenge.gameId) {
|
||||
void this.router.navigate(['/game', acceptedChallenge.gameId]);
|
||||
} else {
|
||||
this.errorMessage = 'Challenge accepted, but no game was created.';
|
||||
}
|
||||
},
|
||||
error: (error) => {
|
||||
this.errorMessage = getErrorMessage(error, 'Failed to accept challenge');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
declineChallenge(challenge: Challenge): void {
|
||||
this.challengeService.declineChallenge(challenge.id, { reason: 'Not interested' })
|
||||
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||
.subscribe({
|
||||
next: () => {
|
||||
this.challengeEventService.removeChallenge(challenge.id);
|
||||
this.loadChallenges();
|
||||
},
|
||||
error: (error) => {
|
||||
this.errorMessage = getErrorMessage(error, 'Failed to decline challenge');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
cancelChallenge(challenge: Challenge): void {
|
||||
this.challengeService.cancelChallenge(challenge.id)
|
||||
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||
.subscribe({
|
||||
next: () => {
|
||||
this.loadChallenges();
|
||||
},
|
||||
error: (error) => {
|
||||
this.errorMessage = getErrorMessage(error, 'Failed to cancel challenge');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
goBack(): void {
|
||||
void this.router.navigate(['/']);
|
||||
}
|
||||
|
||||
openGame(challenge: Challenge): void {
|
||||
if (!challenge.gameId) {
|
||||
this.errorMessage = 'Missing game id for this challenge.';
|
||||
return;
|
||||
}
|
||||
void this.router.navigate(['/game', challenge.gameId]);
|
||||
}
|
||||
|
||||
getTimeControlDisplay(challenge: Challenge): string {
|
||||
const { limit, increment } = challenge.timeControl;
|
||||
if (!limit || !increment) {
|
||||
return 'Unlimited';
|
||||
}
|
||||
const minutes = Math.floor(limit / 60);
|
||||
return `${minutes}+${increment}`;
|
||||
}
|
||||
|
||||
getChallengerDisplay(challenge: Challenge): string {
|
||||
return challenge.challenger.name;
|
||||
}
|
||||
|
||||
getOpponentDisplay(challenge: Challenge): string {
|
||||
return challenge.destUser.name;
|
||||
}
|
||||
|
||||
getExpirationInfo(challenge: Challenge): string {
|
||||
const expiresAt = new Date(challenge.expiresAt);
|
||||
const now = new Date();
|
||||
const diffMs = expiresAt.getTime() - now.getTime();
|
||||
|
||||
if (diffMs <= 0 || challenge.status === 'expired') {
|
||||
return 'Expired';
|
||||
}
|
||||
|
||||
const minutes = Math.floor(diffMs / 60000);
|
||||
if (minutes > 60) {
|
||||
const hours = Math.floor(minutes / 60);
|
||||
return `${hours}h`;
|
||||
}
|
||||
|
||||
return `${minutes}m`;
|
||||
}
|
||||
}
|
||||
@@ -94,8 +94,8 @@
|
||||
<div class="bb-tag">WELCOME</div>
|
||||
<div class="bb-title" style="font-size:clamp(16px,1.8vw,26px);">WELCOME TO<br />NOWCHESS</div>
|
||||
<div class="bb-subtitle">Play your next move from the skyline.</div>
|
||||
<button type="button" class="app-btn" (click)="openChallengeDialog()" [disabled]="creating">
|
||||
{{ creating ? 'CREATING...' : 'CREATE GAME →' }}
|
||||
<button type="button" class="app-btn" (click)="startOneVsOne()" [disabled]="creating">
|
||||
{{ creating ? 'CREATING...' : 'START NOW →' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -204,7 +204,6 @@
|
||||
<div class="dialog-card" (click)="$event.stopPropagation()">
|
||||
<div class="dialog-title">MORE OPTIONS</div>
|
||||
<div class="dialog-actions">
|
||||
<button type="button" class="app-btn" (click)="openChallengeDialog()">START GAME</button>
|
||||
<button type="button" class="app-btn" (click)="openImportDialog()">IMPORT GAME</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -257,10 +256,6 @@
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (showChallengeDialog) {
|
||||
<app-challenge-create-dialog (closeChallengeDialog)="closeChallengeDialog()"></app-challenge-create-dialog>
|
||||
}
|
||||
|
||||
@if (errorMessage) {
|
||||
<p class="error-banner">{{ errorMessage }}</p>
|
||||
}
|
||||
|
||||
@@ -10,7 +10,6 @@ import { AuthDialogService } from '../../services/auth-dialog.service';
|
||||
import { AuthService } from '../../services/auth.service';
|
||||
import { GameApiService } from '../../services/game-api.service';
|
||||
import { ThemeService } from '../../services/theme.service';
|
||||
import { ChallengeCreateDialogComponent } from '../../components/challenge-create-dialog/challenge-create-dialog.component';
|
||||
|
||||
type Difficulty = 'easy' | 'medium' | 'hard';
|
||||
type ImportMode = 'fen' | 'pgn';
|
||||
@@ -33,7 +32,7 @@ interface WindowCell {
|
||||
@Component({
|
||||
selector: 'app-welcome',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule, ChallengeCreateDialogComponent],
|
||||
imports: [CommonModule, FormsModule],
|
||||
templateUrl: './welcome.component.html',
|
||||
styleUrls: ['./welcome.component.css']
|
||||
})
|
||||
@@ -46,7 +45,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
|
||||
creating = false;
|
||||
joiningGame = false;
|
||||
importing = false;
|
||||
showChallengeDialog = false;
|
||||
errorMessage = '';
|
||||
|
||||
showDifficultyDialog = false;
|
||||
@@ -156,20 +154,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
|
||||
this.errorMessage = '';
|
||||
}
|
||||
|
||||
openChallengeDialog(): void {
|
||||
if (!this.requireAuth(() => this.showChallengeDialog = true)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.closeAllDialogs();
|
||||
this.showChallengeDialog = true;
|
||||
}
|
||||
|
||||
closeChallengeDialog(): void {
|
||||
this.showChallengeDialog = false;
|
||||
this.errorMessage = '';
|
||||
}
|
||||
|
||||
openOptionsDialog(): void {
|
||||
this.closeAllDialogs();
|
||||
this.showOptionsDialog = true;
|
||||
@@ -455,7 +439,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
|
||||
this.showOptionsDialog = false;
|
||||
this.showJoinDialog = false;
|
||||
this.showImportDialog = false;
|
||||
this.showChallengeDialog = false;
|
||||
this.errorMessage = '';
|
||||
}
|
||||
|
||||
|
||||
@@ -1,64 +0,0 @@
|
||||
import { Injectable, inject } from '@angular/core';
|
||||
import { BehaviorSubject, Observable, Subject } from 'rxjs';
|
||||
import { Challenge } from '../models/challenge.models';
|
||||
|
||||
/**
|
||||
* Service to manage challenge events via WebSocket
|
||||
* Listens for incoming challenges and emits them to subscribers
|
||||
*/
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class ChallengeEventService {
|
||||
private readonly incomingChallenges$ = new BehaviorSubject<Challenge[]>([]);
|
||||
private readonly challengeReceived$ = new Subject<Challenge>();
|
||||
private readonly challengeAccepted$ = new Subject<Challenge>();
|
||||
private readonly challengeDeclined$ = new Subject<Challenge>();
|
||||
|
||||
getIncomingChallenges$(): Observable<Challenge[]> {
|
||||
return this.incomingChallenges$.asObservable();
|
||||
}
|
||||
|
||||
getChallengeReceived$(): Observable<Challenge> {
|
||||
return this.challengeReceived$.asObservable();
|
||||
}
|
||||
|
||||
getChallengeAccepted$(): Observable<Challenge> {
|
||||
return this.challengeAccepted$.asObservable();
|
||||
}
|
||||
|
||||
getChallengeDeclined$(): Observable<Challenge> {
|
||||
return this.challengeDeclined$.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when a new challenge is received via WebSocket
|
||||
*/
|
||||
onChallengeReceived(challenge: Challenge): void {
|
||||
const current = this.incomingChallenges$.value;
|
||||
this.incomingChallenges$.next([...current, challenge]);
|
||||
this.challengeReceived$.next(challenge);
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when a challenge is accepted
|
||||
*/
|
||||
onChallengeAccepted(challenge: Challenge): void {
|
||||
const current = this.incomingChallenges$.value;
|
||||
this.incomingChallenges$.next(current.filter(c => c.id !== challenge.id));
|
||||
this.challengeAccepted$.next(challenge);
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when a challenge is declined or expires
|
||||
*/
|
||||
onChallengeRemoved(challengeId: string): void {
|
||||
const current = this.incomingChallenges$.value;
|
||||
this.incomingChallenges$.next(current.filter(c => c.id !== challengeId));
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove a challenge from the incoming list
|
||||
*/
|
||||
removeChallenge(challengeId: string): void {
|
||||
this.onChallengeRemoved(challengeId);
|
||||
}
|
||||
}
|
||||
@@ -1,135 +0,0 @@
|
||||
import { Injectable, inject } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { ChallengeEventService } from './challenge-event.service';
|
||||
import { Challenge } from '../models/challenge.models';
|
||||
|
||||
/**
|
||||
* Service to handle WebSocket connections for challenge events
|
||||
* Listens for incoming challenge notifications and emits them to ChallengeEventService
|
||||
*/
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class ChallengeWebSocketService {
|
||||
private readonly challengeEventService = inject(ChallengeEventService);
|
||||
private ws: WebSocket | null = null;
|
||||
private reconnectAttempts = 0;
|
||||
private readonly maxReconnectAttempts = 5;
|
||||
private readonly reconnectDelay = 3000;
|
||||
|
||||
/**
|
||||
* Initialize WebSocket connection for challenge events
|
||||
*/
|
||||
connect(): void {
|
||||
if (this.ws) {
|
||||
return; // Already connected
|
||||
}
|
||||
|
||||
const wsProtocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
|
||||
const wsUrl = `${wsProtocol}://${window.location.host}/ws/challenges`;
|
||||
|
||||
try {
|
||||
this.ws = new WebSocket(wsUrl);
|
||||
|
||||
this.ws.onopen = () => {
|
||||
console.log('Challenge WebSocket connected');
|
||||
this.reconnectAttempts = 0;
|
||||
};
|
||||
|
||||
this.ws.onmessage = (event) => {
|
||||
this.handleMessage(event.data);
|
||||
};
|
||||
|
||||
this.ws.onerror = (error) => {
|
||||
console.error('Challenge WebSocket error:', error);
|
||||
};
|
||||
|
||||
this.ws.onclose = () => {
|
||||
console.log('Challenge WebSocket disconnected');
|
||||
this.ws = null;
|
||||
this.attemptReconnect();
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Failed to create WebSocket:', error);
|
||||
this.attemptReconnect();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Close the WebSocket connection
|
||||
*/
|
||||
disconnect(): void {
|
||||
if (this.ws) {
|
||||
this.ws.close();
|
||||
this.ws = null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Send a message through WebSocket
|
||||
*/
|
||||
send(message: any): void {
|
||||
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
||||
this.ws.send(JSON.stringify(message));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle incoming WebSocket messages
|
||||
*/
|
||||
private handleMessage(data: string): void {
|
||||
try {
|
||||
const message = JSON.parse(data);
|
||||
|
||||
if (!message.type) {
|
||||
return;
|
||||
}
|
||||
|
||||
switch (message.type) {
|
||||
case 'challenge.received':
|
||||
if (message.challenge) {
|
||||
this.challengeEventService.onChallengeReceived(message.challenge as Challenge);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'challenge.accepted':
|
||||
if (message.challenge) {
|
||||
this.challengeEventService.onChallengeAccepted(message.challenge as Challenge);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'challenge.declined':
|
||||
if (message.challengeId) {
|
||||
this.challengeEventService.removeChallenge(message.challengeId);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'challenge.expired':
|
||||
if (message.challengeId) {
|
||||
this.challengeEventService.removeChallenge(message.challengeId);
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
console.debug('Unknown challenge message type:', message.type);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to parse WebSocket message:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Attempt to reconnect to WebSocket
|
||||
*/
|
||||
private attemptReconnect(): void {
|
||||
if (this.reconnectAttempts >= this.maxReconnectAttempts) {
|
||||
console.error('Max WebSocket reconnection attempts reached');
|
||||
return;
|
||||
}
|
||||
|
||||
this.reconnectAttempts++;
|
||||
console.log(`Attempting WebSocket reconnect (${this.reconnectAttempts}/${this.maxReconnectAttempts})...`);
|
||||
|
||||
setTimeout(() => {
|
||||
this.connect();
|
||||
}, this.reconnectDelay);
|
||||
}
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
import { Injectable, inject } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Observable } from 'rxjs';
|
||||
import { Challenge, DeclineChallengeRequest, ListChallengesResponse, SendChallengeRequest } from '../models/challenge.models';
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class ChallengeService {
|
||||
private readonly http = inject(HttpClient);
|
||||
private readonly challengeBaseUrl = '/api/challenge';
|
||||
|
||||
sendChallenge(username: string, request: SendChallengeRequest): Observable<Challenge> {
|
||||
return this.http.post<Challenge>(
|
||||
`${this.challengeBaseUrl}/${username}`,
|
||||
request
|
||||
);
|
||||
}
|
||||
|
||||
listChallenges(): Observable<ListChallengesResponse> {
|
||||
return this.http.get<ListChallengesResponse>(
|
||||
`${this.challengeBaseUrl}`
|
||||
);
|
||||
}
|
||||
|
||||
getChallenge(challengeId: string): Observable<Challenge> {
|
||||
return this.http.get<Challenge>(
|
||||
`${this.challengeBaseUrl}/${challengeId}`
|
||||
);
|
||||
}
|
||||
|
||||
acceptChallenge(challengeId: string): Observable<Challenge> {
|
||||
return this.http.post<Challenge>(
|
||||
`${this.challengeBaseUrl}/${challengeId}/accept`,
|
||||
{}
|
||||
);
|
||||
}
|
||||
|
||||
declineChallenge(challengeId: string, request?: DeclineChallengeRequest): Observable<void> {
|
||||
return this.http.post<void>(
|
||||
`${this.challengeBaseUrl}/${challengeId}/decline`,
|
||||
request || {}
|
||||
);
|
||||
}
|
||||
|
||||
cancelChallenge(challengeId: string): Observable<void> {
|
||||
return this.http.post<void>(
|
||||
`${this.challengeBaseUrl}/${challengeId}/cancel`,
|
||||
{}
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import { loadRuntimeConfig } from '../app/core/config.loader';
|
||||
|
||||
const runtimeConfig = loadRuntimeConfig();
|
||||
|
||||
export const environment = {
|
||||
production: true,
|
||||
apiBaseUrl: runtimeConfig.apiUrl || 'https://st.nowchess.janis-eccarius.de',
|
||||
accountServiceUrl: runtimeConfig.apiUrl || 'https://st.nowchess.janis-eccarius.de',
|
||||
wsBaseUrl: runtimeConfig.wsUrl || 'wss://st.nowchess.janis-eccarius.de',
|
||||
apiPath: '/api/board/game'
|
||||
};
|
||||
@@ -1,7 +1,11 @@
|
||||
import { loadRuntimeConfig } from '../app/core/config.loader';
|
||||
|
||||
const runtimeConfig = loadRuntimeConfig();
|
||||
|
||||
export const environment = {
|
||||
production: true,
|
||||
apiBaseUrl: '',
|
||||
accountServiceUrl: '',
|
||||
wsBaseUrl: 'ws://localhost:8080',
|
||||
production: false,
|
||||
apiBaseUrl: runtimeConfig.apiUrl || '',
|
||||
accountServiceUrl: runtimeConfig.apiUrl || '',
|
||||
wsBaseUrl: runtimeConfig.wsUrl,
|
||||
apiPath: '/api/board/game'
|
||||
};
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<script src="/env.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
MAJOR=0
|
||||
MINOR=1
|
||||
PATCH=0
|
||||
Reference in New Issue
Block a user