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

Compare commits

merge into: NowChess/NowChess-Frontend:main
Branches Tags
NowChess/NowChess-Frontend:main NowChess/NowChess-Frontend:feat/NCS-55
NowChess/NowChess-Frontend:0.2.2 NowChess/NowChess-Frontend:0.2.1 NowChess/NowChess-Frontend:0.2.0 NowChess/NowChess-Frontend:0.1.0
..
pull from: NowChess/NowChess-Frontend:feat/NCS-55
Branches Tags
NowChess/NowChess-Frontend:main NowChess/NowChess-Frontend:feat/NCS-55
NowChess/NowChess-Frontend:0.2.2 NowChess/NowChess-Frontend:0.2.1 NowChess/NowChess-Frontend:0.2.0 NowChess/NowChess-Frontend:0.1.0

18 Commits
main .. feat/NCS-55

Author SHA1 Message Date
shahdlala66 3b757d7ff7 feat: added a cat not sure about it tho 2026-04-28 22:45:37 +02:00
shahdlala66 19f3359106 style: more colors for windows 2026-04-26 22:13:33 +02:00
shahdlala66 d676288315 style: changed colors etc 2026-04-26 22:13:26 +02:00
shahdlala66 671886781e feat: new boared design 2026-04-26 13:34:55 +02:00
shahdlala66 dc9a7b2e32 feat: drag and drop 2026-04-22 13:16:44 +02:00
shahdlala66 5951257c99 feat: move history, export import fixed, timer added 2026-04-22 13:05:09 +02:00
shahdlala66 a59e2a023b style: bigger gifs 2026-04-22 09:31:15 +02:00
shahdlala66 4f76bcc7c6 feat: piece pormotion 2026-04-22 08:35:58 +02:00
shahdlala66 25b69fd7b6 feat: clean ups and shorter files 2026-04-22 08:28:16 +02:00
shahdlala66 c18026bce6 feat: added dark and light mode 2026-04-22 08:19:16 +02:00
shahdlala66 91fa247696 style: added new gifs (optianl) 2026-04-21 15:12:41 +02:00
shahdlala66 97365371c8 feat: new spec 2026-04-21 13:40:48 +02:00
shahdlala66 fdc0f1d73b feat: join pervious game added 2026-04-19 11:14:14 +02:00
shahdlala66 bc644c16e3 feat: 1vs BOT 2026-04-19 01:06:13 +02:00
shahdlala66 5497997455 feat: more components 2026-04-19 01:00:14 +02:00
shahdlala66 53459648c6 style: styles file added 2026-04-19 00:24:43 +02:00
shahdlala66 8c97a726a7 fix: removed repetitve code 2026-04-19 00:12:13 +02:00
shahdlala66 2582f8e4d6 style: brought back old style for text input 2026-04-19 00:05:52 +02:00
63 changed files with 606 additions and 3900 deletions
Expand all files Collapse all files
.dockerignore
-12
View File
@@ -1,12 +0,0 @@
node_modules
dist
tmp
*.log
.git
.gitignore
Dockerfile
docker-compose*.yml
^\.env$
.idea
vscode
coverage
CHANGELOG.md
-35
View File
@@ -1,35 +0,0 @@
## 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))
## [0.0.0](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/compare/0.1.0...0.0.0) (2026-05-12)
### Features
* NCS-69 Challenge request ([#3](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/3)) ([bad7366](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/bad7366bdbb048c20218257b30ac22efc9ecb6db))
## [0.0.0](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/compare/0.2.0...0.0.0) (2026-05-12)
### Bug Fixes
* NCWF-1 401 ([#5](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/5)) ([f8f93ef](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/f8f93efff48f1d7198023fed45b675c2e225df36))
## [0.0.0](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/compare/0.2.1...0.0.0) (2026-05-12)
### Bug Fixes
* NCWF-1 401 ([#6](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/6)) ([6d1e06d](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/6d1e06dfd606b93d029e9c9b84eea6f8b3b6294e))
Dockerfile
-25
View File
@@ -1,25 +0,0 @@
FROM --platform=$BUILDPLATFORM node:lts-alpine3.23 AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
FROM --platform=$TARGETPLATFORM nginx:stable-alpine AS production
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 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
ENTRYPOINT ["/docker-entrypoint.sh"]
angular.json
+6 -20
View File
@@ -2,8 +2,7 @@
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"cli": {
"packageManager": "npm",
"analytics": false
"packageManager": "npm"
},
"newProjectRoot": "projects",
"projects": {
@@ -47,25 +46,17 @@
"budgets": [
{
"type": "initial",
"maximumWarning": "1MB",
"maximumError": "5MB"
"maximumWarning": "500kB",
"maximumError": "1MB"
},
{
"type": "anyComponentStyle",
"maximumWarning": "1MB",
"maximumError": "5MB"
"maximumWarning": "12kB",
"maximumError": "20kB"
}
],
"outputHashing": "all"
},
"staging": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.staging.ts"
}
]
},
"development": {
"fileReplacements": [
{
@@ -83,17 +74,12 @@
"serve": {
"builder": "@angular/build:dev-server",
"options": {
"proxyConfig": "proxy.conf.json",
"host": "0.0.0.0",
"port": 4200
"proxyConfig": "proxy.conf.json"
},
"configurations": {
"production": {
"buildTarget": "nowchess-frontend:build:production"
},
"staging": {
"buildTarget": "nowchess-frontend:build:staging"
},
"development": {
"buildTarget": "nowchess-frontend:build:development"
}
docker-entrypoint.sh
-18
View File
@@ -1,18 +0,0 @@
#!/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;'
nginx.conf
-22
View File
@@ -1,22 +0,0 @@
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
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;
}
}
package-lock.json
Generated
+24 -3
View File
@@ -458,6 +458,7 @@
"resolved": "https://registry.npmjs.org/@angular/common/-/common-20.3.19.tgz",
"integrity": "sha512-hcB1eUEN8LGcKGc4DlRJ+abS6AYfbEHDZKg8LnXNugkbwI6Ebyh2AUYTDhzZL2S4aH+C8biHKgSYHFCqieCRhA==",
"license": "MIT",
"peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
@@ -474,6 +475,7 @@
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-20.3.19.tgz",
"integrity": "sha512-ETkgDKm0l2PuaBubgPJe0ccy8kE75DFu6/zKcz7TUuk3KrKF2OZAopbbjftsUSZGeCNvCdqHzjmcL6hQ6oAOwA==",
"license": "MIT",
"peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
@@ -487,6 +489,7 @@
"integrity": "sha512-ET/JjO8s62kAHfgIsGXlvW5VUwLqHm03q1y/2yD7aQW/WdDvssMsvZv7Knl440989vdOFemIGTMwVPakmWqRmA==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@babel/core": "7.28.3",
"@jridgewell/sourcemap-codec": "^1.4.14",
@@ -519,6 +522,7 @@
"resolved": "https://registry.npmjs.org/@angular/core/-/core-20.3.19.tgz",
"integrity": "sha512-SYnwW+q51bQoPtGFoGovm1P5GK9fMEXsG0lGaEAUapjskblAYyX7hLlM/jgueSojv2SjhqNF8aXR+gjHLhZVNA==",
"license": "MIT",
"peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
@@ -562,6 +566,7 @@
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-20.3.19.tgz",
"integrity": "sha512-TRZfatH1B/kreDwFRwtpLEurJQ6044qh6DWpvxzTbugaG5otLQJKTk+1z81/KsJwQqc1+24v+yuywc1LM7aq7w==",
"license": "MIT",
"peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
@@ -628,6 +633,7 @@
"integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@ampproject/remapping": "^2.2.0",
"@babel/code-frame": "^7.27.1",
@@ -1601,6 +1607,7 @@
"integrity": "sha512-nqhDw2ZcAUrKNPwhjinJny903bRhI0rQhiDz1LksjeRxqa36i3l75+4iXbOy0rlDpLJGxqtgoPavQjmmyS5UJw==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@inquirer/checkbox": "^4.2.1",
"@inquirer/confirm": "^5.1.14",
@@ -3531,6 +3538,7 @@
"integrity": "sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"undici-types": "~7.19.0"
}
@@ -3887,6 +3895,7 @@
}
],
"license": "MIT",
"peer": true,
"dependencies": {
"baseline-browser-mapping": "^2.10.12",
"caniuse-lite": "^1.0.30001782",
@@ -4902,6 +4911,7 @@
"integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"accepts": "^2.0.0",
"body-parser": "^2.2.1",
@@ -5343,6 +5353,7 @@
"integrity": "sha512-am5zfg3yu6sqn5yjKBNqhnTX7Cv+m00ox+7jbaKkrLMRJ4rAdldd1xPd/JzbBWspqaQv6RSTrgFN95EsfhC+7w==",
"dev": true,
"license": "MIT",
"peer": true,
"engines": {
"node": ">=16.9.0"
}
@@ -5839,7 +5850,8 @@
"resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-5.9.0.tgz",
"integrity": "sha512-OMUvF1iI6+gSRYOhMrH4QYothVLN9C3EJ6wm4g7zLJlnaTl8zbaPOr0bTw70l7QxkoM7sVFOWo83u9B2Fe2Zng==",
"dev": true,
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/jose": {
"version": "6.2.2",
@@ -5941,6 +5953,7 @@
"integrity": "sha512-LrtUxbdvt1gOpo3gxG+VAJlJAEMhbWlM4YrFQgql98FwF7+K8K12LYO4hnDdUkNjeztYrOXEMqgTajSWgmtI/w==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@colors/colors": "1.5.0",
"body-parser": "^1.19.0",
@@ -6408,6 +6421,7 @@
"integrity": "sha512-SL0JY3DaxylDuo/MecFeiC+7pedM0zia33zl0vcjgwcq1q1FWWF1To9EIauPbl8GbMCU0R2e0uJ8bZunhYKD2g==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"cli-truncate": "^4.0.0",
"colorette": "^2.0.20",
@@ -7920,6 +7934,7 @@
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
"integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
"license": "Apache-2.0",
"peer": true,
"dependencies": {
"tslib": "^2.1.0"
}
@@ -7955,6 +7970,7 @@
"integrity": "sha512-9GUyuksjw70uNpb1MTYWsH9MQHOHY6kwfnkafC24+7aOMZn9+rVMBxRbLvw756mrBFbIsFg6Xw9IkR2Fnn3k+Q==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"chokidar": "^4.0.0",
"immutable": "^5.0.2",
@@ -8574,7 +8590,8 @@
"version": "2.8.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
"license": "0BSD"
"license": "0BSD",
"peer": true
},
"node_modules/tuf-js": {
"version": "4.1.0",
@@ -8612,6 +8629,7 @@
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
"dev": true,
"license": "Apache-2.0",
"peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
@@ -8741,6 +8759,7 @@
"integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"esbuild": "^0.27.0",
"fdir": "^6.5.0",
@@ -9538,6 +9557,7 @@
"integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==",
"dev": true,
"license": "MIT",
"peer": true,
"funding": {
"url": "https://github.com/sponsors/colinhacks"
}
@@ -9556,7 +9576,8 @@
"version": "0.15.1",
"resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.15.1.tgz",
"integrity": "sha512-XE96n56IQpJM7NAoXswY3XRLcWFW83xe0BiAOeMD7K5k5xecOeul3Qcpx6GqEeeHNkW5DWL5zOyTbEfB4eti8w==",
"license": "MIT"
"license": "MIT",
"peer": true
}
}
}
package.json
+1 -2
View File
@@ -4,8 +4,7 @@
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --configuration production",
"build:staging": "ng build --configuration staging",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
proxy.conf.json
-10
View File
@@ -1,14 +1,4 @@
{
"/api/account": {
"target": "http://localhost:8083",
"secure": false,
"changeOrigin": true
},
"/api/challenge": {
"target": "http://localhost:8083",
"secure": false,
"changeOrigin": true
},
"/api": {
"target": "http://localhost:8080",
"secure": false,
public/env.template.js
-4
View File
@@ -1,4 +0,0 @@
window.__RUNTIME_CONFIG__ = {
API_URL: "${API_URL}",
WEBSOCKET_URL: "${WEBSOCKET_URL}"
};
src/app/app.config.ts
+2 -3
View File
@@ -1,15 +1,14 @@
import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { provideHttpClient } from '@angular/common/http';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { authInterceptor } from './services/auth.interceptor';
export const appConfig: ApplicationConfig = {
providers: [
provideBrowserGlobalErrorListeners(),
provideZoneChangeDetection({ eventCoalescing: true }),
provideHttpClient(withInterceptors([authInterceptor])),
provideHttpClient(),
provideRouter(routes)
]
};
src/app/app.html
+1 -2
View File
@@ -1,2 +1 @@
<app-toolbar />
<router-outlet />
<router-outlet />
src/app/app.routes.ts
-2
View File
@@ -1,11 +1,9 @@
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';
export const routes: Routes = [
{ path: '', component: WelcomeComponent },
{ path: 'profile', component: ProfileComponent },
{ path: 'game/:gameId', component: GameComponent },
{ path: '**', redirectTo: '' }
];
src/app/app.ts
+9 -6
View File
@@ -1,18 +1,21 @@
import { Component, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ToolbarComponent } from './components/toolbar/toolbar.component';
import { ThemeService } from './services/theme.service';
@Component({
selector: 'app-root',
imports: [RouterOutlet, ToolbarComponent],
imports: [RouterOutlet],
templateUrl: './app.html',
styleUrl: './app.css'
})
export class App implements OnInit {
constructor(private readonly themeService: ThemeService) { }
ngOnInit(): void {
this.themeService.initTheme();
this.initTheme();
}
private initTheme(): void {
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
}
}
}
src/app/button-template.css
-69
View File
@@ -1,69 +0,0 @@
/* Shared Button Template - All Button Styles Consolidated */
.app-btn {
background: var(--btn-bg);
color: var(--btn-fg);
border: none;
border-radius: 2px;
padding: 0.6rem 1rem;
font-family: 'Space Mono', monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
cursor: pointer;
box-shadow: var(--btn-glow);
transition: transform 0.2s ease, filter 0.2s ease, background 1.6s ease, box-shadow 1.6s ease;
display: inline-flex;
align-items: center;
justify-content: center;
outline: none;
text-transform: uppercase;
}
.app-btn:hover:enabled {
transform: scale(1.05);
filter: brightness(1.15);
}
.app-btn:active:enabled {
transform: scale(0.98);
}
.app-btn:disabled {
opacity: 0.65;
cursor: not-allowed;
box-shadow: none;
}
.app-btn.w-100 {
width: 100%;
}
/* Dialog Button Layouts */
.dialog-actions {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
}
.dialog-actions .app-btn {
flex: 1;
min-width: 120px;
}
/* Promotion Dialog Button Variant */
.promotion-choice {
flex-direction: column;
height: auto;
padding: 16px;
gap: 8px;
}
.promotion-choice .piece-symbol {
font-size: 32px;
line-height: 1;
}
.promotion-choice .piece-label {
font-size: 11px;
}
src/app/components/challenge-create-dialog/challenge-create-dialog.component.css
-261
View File
@@ -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;
}
}
}
}
src/app/components/challenge-create-dialog/challenge-create-dialog.component.html
-93
View File
@@ -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>
src/app/components/challenge-create-dialog/challenge-create-dialog.component.ts
-159
View File
@@ -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();
}
}
src/app/components/challenge-notification/challenge-notification.component.css
-194
View File
@@ -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;
}
}
}
}
src/app/components/challenge-notification/challenge-notification.component.html
-38
View File
@@ -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>
src/app/components/challenge-notification/challenge-notification.component.ts
-101
View File
@@ -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`;
}
}
src/app/components/input-card/input-card.component.css
+16 -2
View File
@@ -1,5 +1,3 @@
@import '../../button-template.css';
.input-card {
background: var(--color-bg-card);
border: var(--border-width) solid var(--color-border);
@@ -42,6 +40,22 @@
}
.input-card .btn {
border: var(--button-border);
border-radius: var(--border-radius-sm);
background: var(--color-bg-button);
color: var(--color-text-primary);
padding: var(--button-padding);
cursor: pointer;
font-weight: 600;
transition: background-color 0.2s, color 0.2s;
}
.input-card .btn:hover {
background: var(--color-bg-button-hover);
color: var(--color-text-button-hover);
}
.hint-text {
margin: 0;
color: var(--color-text-primary);
src/app/components/input-card/input-card.component.html
+19 -7
View File
@@ -2,18 +2,30 @@
<label>{{ label }}</label>
@if (inputType === 'textarea') {
<textarea #textareaInput [placeholder]="placeholder" [value]="value" [rows]="rows"
(input)="onValueChange(textareaInput.value)" class="form-input"></textarea>
<textarea
#textareaInput
[placeholder]="placeholder"
[value]="value"
[rows]="rows"
(input)="onValueChange(textareaInput.value)"
class="form-input"
></textarea>
} @else {
<input #textInput type="text" [placeholder]="placeholder" [value]="value" (input)="onValueChange(textInput.value)"
class="form-input" />
<input
#textInput
type="text"
[placeholder]="placeholder"
[value]="value"
(input)="onValueChange(textInput.value)"
class="form-input"
/>
}
<button type="button" class="app-btn w-100" (click)="onButtonClick()">
<button type="button" class="btn w-100" (click)="onButtonClick()">
{{ buttonLabel }}
</button>
@if (hintText) {
<p class="hint-text">{{ hintText }}</p>
<p class="hint-text">{{ hintText }}</p>
}
</section>
</section>
src/app/components/login-dialog/login-dialog.component.css
-68
View File
@@ -1,68 +0,0 @@
@import '../../button-template.css';
.dialog-overlay {
position: fixed;
inset: 0;
background: rgba(2, 2, 10, 0.58);
display: grid;
place-items: center;
z-index: 350;
padding: 1rem;
}
.dialog-card {
width: min(460px, 100%);
background: var(--dlg-bg);
border: 1.5px solid var(--dlg-border);
box-shadow: var(--bb-glow);
border-radius: 4px;
padding: 1rem;
display: grid;
gap: 0.7rem;
}
.dialog-title {
font-family: 'Bebas Neue', sans-serif;
font-size: 22px;
letter-spacing: 2px;
color: var(--bb-title);
text-align: center;
}
.dialog-input {
width: 100%;
background: rgba(4, 4, 20, 0.62);
border: 1px solid var(--bb-border);
color: var(--bb-title);
border-radius: 2px;
padding: 0.6rem 0.7rem;
font-family: 'Space Mono', monospace;
font-size: 13px;
}
.dialog-input:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(0, 213, 255, 0.25);
}
.dialog-textarea {
min-height: 120px;
resize: vertical;
}
.text-danger {
color: #dc3545;
font-size: 0.875rem;
}
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
src/app/components/login-dialog/login-dialog.component.html
-36
View File
@@ -1,36 +0,0 @@
<div class="dialog-overlay" (click)="closeDialog()">
<div class="dialog-card" (click)="$event.stopPropagation()">
<div class="dialog-title">LOGIN</div>
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<label for="username" class="sr-only">Username</label>
<input id="username" type="text" class="dialog-input" formControlName="username" placeholder="Username"
[disabled]="isLoading" />
@if (loginForm.get('username')?.invalid && loginForm.get('username')?.touched) {
<small class="text-danger">Username must be at least 3 characters</small>
}
<label for="password" class="sr-only">Password</label>
<input id="password" type="password" class="dialog-input" formControlName="password" placeholder="Password"
[disabled]="isLoading" />
@if (loginForm.get('password')?.invalid && loginForm.get('password')?.touched) {
<small class="text-danger">Password must be at least 6 characters</small>
}
@if (errorMessage) {
<div class="error-banner">{{ errorMessage }}</div>
}
<div class="dialog-actions">
<button type="button" class="app-btn" (click)="openRegister()">Create account</button>
<button type="button" class="app-btn" (click)="closeDialog()">Cancel</button>
<button type="submit" class="app-btn" [disabled]="isLoading || loginForm.invalid">
@if (isLoading) {
<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
}
Login
</button>
</div>
</form>
</div>
</div>
src/app/components/login-dialog/login-dialog.component.ts
-62
View File
@@ -1,62 +0,0 @@
import { Component, EventEmitter, Output, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { AuthService } from '../../services/auth.service';
import { AuthDialogService } from '../../services/auth-dialog.service';
@Component({
selector: 'app-login-dialog',
standalone: true,
imports: [CommonModule, ReactiveFormsModule],
templateUrl: './login-dialog.component.html',
styleUrl: './login-dialog.component.css'
})
export class LoginDialogComponent {
@Output() onClose = new EventEmitter<void>();
@Output() onSuccess = new EventEmitter<void>();
private readonly authService = inject(AuthService);
private readonly authDialogService = inject(AuthDialogService);
private readonly formBuilder = inject(FormBuilder);
loginForm: FormGroup;
errorMessage: string | null = null;
isLoading = false;
constructor() {
this.loginForm = this.formBuilder.group({
username: ['', [Validators.required, Validators.minLength(3)]],
password: ['', [Validators.required, Validators.minLength(6)]]
});
}
onSubmit(): void {
if (this.loginForm.invalid) {
this.errorMessage = 'Please fill in all fields correctly';
return;
}
this.isLoading = true;
this.errorMessage = null;
const { username, password } = this.loginForm.value;
this.authService.login(username, password).subscribe({
next: () => {
this.isLoading = false;
this.onSuccess.emit();
},
error: (err) => {
this.isLoading = false;
this.errorMessage = err.error?.message || 'Login failed. Please try again.';
}
});
}
closeDialog(): void {
this.onClose.emit();
}
openRegister(): void {
this.authDialogService.openRegister();
}
}
src/app/components/promotion-dialog/promotion-dialog.component.css
+65 -11
View File
@@ -1,5 +1,3 @@
@import '../../button-template.css';
.promotion-dialog-overlay {
position: fixed;
top: 0;
@@ -22,10 +20,9 @@
}
.promotion-dialog {
background: var(--dlg-bg, white);
border: 1.5px solid var(--dlg-border, #ddd);
border-radius: 4px;
box-shadow: var(--bb-glow, 0 4px 16px rgba(0, 0, 0, 0.2));
background: white;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
max-width: 400px;
width: 90%;
animation: slideUp 0.3s ease;
@@ -47,14 +44,32 @@
justify-content: space-between;
align-items: center;
padding: 20px;
border-bottom: 1px solid var(--bb-border, #e0e0e0);
border-bottom: 1px solid #e0e0e0;
h3 {
margin: 0;
font-family: 'Bebas Neue', sans-serif;
font-size: 18px;
font-weight: 600;
color: var(--bb-title, #333);
color: #333;
}
.close-btn {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: #999;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s;
&:hover {
color: #333;
}
}
}
@@ -65,8 +80,7 @@
.promotion-prompt {
margin: 0 0 20px 0;
text-align: center;
color: var(--bb-title);
opacity: 0.8;
color: #666;
font-size: 14px;
}
@@ -75,3 +89,43 @@
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.promotion-button {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px;
background: #f5f5f5;
border: 2px solid #ddd;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
&:hover {
background: #e8e8e8;
border-color: #999;
transform: translateY(-2px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
&:active {
transform: translateY(0);
box-shadow: none;
}
.piece-symbol {
font-size: 32px;
line-height: 1;
}
.piece-label {
font-size: 12px;
font-weight: 500;
color: #666;
text-transform: uppercase;
letter-spacing: 0.5px;
}
}
src/app/components/promotion-dialog/promotion-dialog.component.html
+13 -10
View File
@@ -2,22 +2,25 @@
<div class="promotion-dialog">
<div class="promotion-header">
<h3>Pawn Promotion</h3>
<button class="app-btn" (click)="close()" aria-label="Close"
style="padding:0.2rem 0.5rem;min-width:unset;">&times;</button>
<button class="close-btn" (click)="close()" aria-label="Close">&times;</button>
</div>
<div class="promotion-body">
<p class="promotion-prompt">Choose a piece to promote your pawn to:</p>
<div class="promotion-options">
@for (piece of promotionPieces; track piece.type) {
<button type="button" class="app-btn promotion-choice" [attr.data-piece]="piece.type"
(click)="selectPromotion(piece.type)" [title]="piece.label">
<span class="piece-symbol">{{ piece.symbol }}</span>
<span class="piece-label">{{ piece.label }}</span>
</button>
<button
class="promotion-button"
[attr.data-piece]="piece.type"
(click)="selectPromotion(piece.type)"
[title]="piece.label"
>
<span class="piece-symbol">{{ piece.symbol }}</span>
<span class="piece-label">{{ piece.label }}</span>
</button>
}
</div>
</div>
</div>
</div>
</div>
src/app/components/register-dialog/register-dialog.component.css
-68
View File
@@ -1,68 +0,0 @@
@import '../../button-template.css';
.dialog-overlay {
position: fixed;
inset: 0;
background: rgba(2, 2, 10, 0.58);
display: grid;
place-items: center;
z-index: 350;
padding: 1rem;
}
.dialog-card {
width: min(460px, 100%);
background: var(--dlg-bg);
border: 1.5px solid var(--dlg-border);
box-shadow: var(--bb-glow);
border-radius: 4px;
padding: 1rem;
display: grid;
gap: 0.7rem;
}
.dialog-title {
font-family: 'Bebas Neue', sans-serif;
font-size: 22px;
letter-spacing: 2px;
color: var(--bb-title);
text-align: center;
}
.dialog-input {
width: 100%;
background: rgba(4, 4, 20, 0.62);
border: 1px solid var(--bb-border);
color: var(--bb-title);
border-radius: 2px;
padding: 0.6rem 0.7rem;
font-family: 'Space Mono', monospace;
font-size: 13px;
}
.dialog-input:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(0, 213, 255, 0.25);
}
.dialog-textarea {
min-height: 120px;
resize: vertical;
}
.text-danger {
color: #dc3545;
font-size: 0.875rem;
}
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
src/app/components/register-dialog/register-dialog.component.html
-43
View File
@@ -1,43 +0,0 @@
<div class="dialog-overlay" (click)="closeDialog()">
<div class="dialog-card" (click)="$event.stopPropagation()">
<div class="dialog-title">CREATE ACCOUNT</div>
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<input id="username" type="text" class="dialog-input" formControlName="username" placeholder="Username"
[disabled]="isLoading" />
@if (registerForm.get('username')?.invalid && registerForm.get('username')?.touched) {
<small class="text-danger">Username must be at least 3 characters</small>
}
<input id="email" type="email" class="dialog-input" formControlName="email" placeholder="Email"
[disabled]="isLoading" />
@if (registerForm.get('email')?.invalid && registerForm.get('email')?.touched) {
<small class="text-danger">Please enter a valid email</small>
}
<input id="password" type="password" class="dialog-input" formControlName="password" placeholder="Password"
[disabled]="isLoading" />
@if (registerForm.get('password')?.invalid && registerForm.get('password')?.touched) {
<small class="text-danger">Password must be at least 6 characters</small>
}
<input id="confirmPassword" type="password" class="dialog-input" formControlName="confirmPassword"
placeholder="Confirm Password" [disabled]="isLoading" />
@if (errorMessage) {
<div class="error-banner">{{ errorMessage }}</div>
}
<div class="dialog-actions">
<button type="button" class="app-btn" (click)="openLogin()">Already have an account?</button>
<button type="button" class="app-btn" (click)="closeDialog()">Cancel</button>
<button type="submit" class="app-btn" [disabled]="isLoading || registerForm.invalid">
@if (isLoading) {
<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
}
Register
</button>
</div>
</form>
</div>
</div>
src/app/components/register-dialog/register-dialog.component.ts
-71
View File
@@ -1,71 +0,0 @@
import { Component, EventEmitter, Output, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { AuthService } from '../../services/auth.service';
import { AuthDialogService } from '../../services/auth-dialog.service';
@Component({
selector: 'app-register-dialog',
standalone: true,
imports: [CommonModule, ReactiveFormsModule],
templateUrl: './register-dialog.component.html',
styleUrl: './register-dialog.component.css'
})
export class RegisterDialogComponent {
@Output() onClose = new EventEmitter<void>();
@Output() onSuccess = new EventEmitter<void>();
private readonly authService = inject(AuthService);
private readonly authDialogService = inject(AuthDialogService);
private readonly formBuilder = inject(FormBuilder);
registerForm: FormGroup;
errorMessage: string | null = null;
isLoading = false;
constructor() {
this.registerForm = this.formBuilder.group({
username: ['', [Validators.required, Validators.minLength(3)]],
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, Validators.minLength(6)]],
confirmPassword: ['', [Validators.required]]
});
}
onSubmit(): void {
if (this.registerForm.invalid) {
this.errorMessage = 'Please fill in all fields correctly';
return;
}
const { password, confirmPassword } = this.registerForm.value;
if (password !== confirmPassword) {
this.errorMessage = 'Passwords do not match';
return;
}
this.isLoading = true;
this.errorMessage = null;
const { username, email, password: pwd } = this.registerForm.value;
this.authService.register(username, pwd, email).subscribe({
next: () => {
this.isLoading = false;
this.onSuccess.emit();
},
error: (err) => {
this.isLoading = false;
this.errorMessage =
err.error?.message || 'Registration failed. Please try again.';
}
});
}
closeDialog(): void {
this.onClose.emit();
}
openLogin(): void {
this.authDialogService.openLogin();
}
}
src/app/components/toolbar/toolbar.component.css
-84
View File
@@ -1,84 +0,0 @@
@import '../../button-template.css';
.navbar {
background: rgba(8, 6, 28, 0.85);
backdrop-filter: blur(8px);
box-shadow: 0 4px 20px rgba(0, 210, 255, 0.15);
border-bottom: 1px solid rgba(0, 210, 255, 0.2);
border-radius: 0;
padding: 0.75rem 1rem;
}
.navbar-brand {
font-size: 1.5rem;
font-weight: bold;
color: var(--bb-title) !important;
font-family: 'Bebas Neue', sans-serif;
letter-spacing: 1px;
cursor: pointer;
}
.gap-2 {
gap: 0.5rem;
}
.user-section {
align-items: center;
}
.me-btn {
background: rgba(0, 210, 255, 0.1);
color: var(--bb-title);
border: 1px solid var(--bb-border);
border-radius: 2px;
padding: 0.5rem 0.8rem;
font-family: 'Space Mono', monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
outline: none;
text-transform: uppercase;
}
.me-btn:hover {
background: rgba(0, 210, 255, 0.2);
border-color: var(--bb-tag);
box-shadow: 0 0 10px rgba(0, 210, 255, 0.4);
transform: scale(1.05);
}
.me-btn:active {
transform: scale(0.98);
}
/* Sunset Mode */
.sunset .navbar {
background: rgba(20, 5, 45, 0.85);
border-bottom-color: rgba(255, 64, 207, 0.2);
box-shadow: 0 4px 20px rgba(242, 106, 226, 0.15);
}
.sunset .me-btn {
background: rgba(242, 106, 226, 0.1);
border-color: var(--bb-border);
}
.sunset .me-btn:hover {
background: rgba(242, 106, 226, 0.2);
border-color: var(--bb-tag);
box-shadow: 0 0 10px rgba(242, 106, 226, 0.4);
}
.container-fluid {
display: flex;
align-items: center;
}
.ms-auto {
margin-left: auto;
}
src/app/components/toolbar/toolbar.component.html
-35
View File
@@ -1,35 +0,0 @@
<nav class="navbar">
<div class="container-fluid">
<span class="navbar-brand">NowChess</span>
<div class="ms-auto">
<div class="d-flex align-items-center gap-2">
<button type="button" class="app-btn" (click)="toggleTheme()">
{{ isDarkMode ? 'Light mode' : 'Dark mode' }}
</button>
@if (currentUser; as user) {
<div class="d-flex align-items-center gap-2 user-section">
<button type="button" class="me-btn" (click)="goToProfile()">
👤 {{ user.username }}
</button>
<button type="button" class="app-btn" (click)="logout()">Logout</button>
</div>
} @else {
<button type="button" class="app-btn" (click)="openLoginDialog()">
Login
</button>
<button type="button" class="app-btn" (click)="openRegisterDialog()">
Register
</button>
}
</div>
</div>
</div>
</nav>
@if (showLoginDialog) {
<app-login-dialog (onClose)="closeLoginDialog()" (onSuccess)="onLoginSuccess()" />
}
@if (showRegisterDialog) {
<app-register-dialog (onClose)="closeRegisterDialog()" (onSuccess)="onRegisterSuccess()" />
}
src/app/components/toolbar/toolbar.component.ts
-87
View File
@@ -1,87 +0,0 @@
import { Component, DestroyRef, OnInit, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Router } from '@angular/router';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { AuthService } from '../../services/auth.service';
import { AuthDialogService } from '../../services/auth-dialog.service';
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';
@Component({
selector: 'app-toolbar',
standalone: true,
imports: [CommonModule, LoginDialogComponent, RegisterDialogComponent],
templateUrl: './toolbar.component.html',
styleUrl: './toolbar.component.css'
})
export class ToolbarComponent implements OnInit {
private readonly destroyRef = inject(DestroyRef);
private readonly authService = inject(AuthService);
private readonly authDialogService = inject(AuthDialogService);
private readonly themeService = inject(ThemeService);
private readonly router = inject(Router);
currentUser: CurrentUser | null = null;
showLoginDialog = false;
showRegisterDialog = false;
isDarkMode = false;
ngOnInit(): void {
this.authService.currentUser$
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe((user) => {
this.currentUser = user;
});
this.authDialogService.dialogState$
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe((state) => {
this.showLoginDialog = state === 'login';
this.showRegisterDialog = state === 'register';
});
this.themeService.darkMode$
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe((isDarkMode) => {
this.isDarkMode = isDarkMode;
});
}
openLoginDialog(): void {
this.authDialogService.openLogin();
}
closeLoginDialog(): void {
this.authDialogService.close();
}
openRegisterDialog(): void {
this.authDialogService.openRegister();
}
closeRegisterDialog(): void {
this.authDialogService.close();
}
logout(): void {
this.authService.logout();
}
toggleTheme(): void {
this.themeService.toggleTheme();
}
goToProfile(): void {
this.router.navigate(['/profile']);
}
onLoginSuccess(): void {
this.closeLoginDialog();
}
onRegisterSuccess(): void {
this.closeRegisterDialog();
}
}
src/app/core/config.loader.ts
-11
View File
@@ -1,11 +0,0 @@
/**
* 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'
};
}
src/app/models/auth.models.ts
-28
View File
@@ -1,28 +0,0 @@
export interface LoginRequest {
username: string;
password: string;
}
export interface RegisterRequest {
username: string;
password: string;
email?: string;
}
export interface RegisterResponse {
id: string;
username: string;
rating: number;
createdAt: string;
}
export interface LoginResponse {
token: string;
}
export interface CurrentUser {
id: string;
username: string;
rating: number;
createdAt: string;
}
src/app/models/challenge.models.ts
-49
View File
@@ -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;
}
src/app/pages/challenges/challenges.component.css
-222
View File
@@ -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;
}
}
}
}
src/app/pages/challenges/challenges.component.html
-102
View File
@@ -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>
src/app/pages/challenges/challenges.component.ts
-179
View File
@@ -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`;
}
}
src/app/pages/game/game.component.css
-28
View File
@@ -1,5 +1,3 @@
@import '../../button-template.css';
.game-shell {
min-height: 100dvh;
padding: clamp(var(--size-md), 2vw, var(--size-xl));
@@ -30,7 +28,6 @@
header {
margin-bottom: var(--size-xl);
margin-bottom: var(--size-xl);
}
h1,
@@ -38,13 +35,9 @@ h2 {
color: var(--color-text-primary);
margin: 0 0 var(--size-md);
font-size: var(--heading-h1);
color: var(--color-text-primary);
margin: 0 0 var(--size-md);
font-size: var(--heading-h1);
}
.meta {
color: var(--color-text-primary);
color: var(--color-text-primary);
font-size: 0.95rem;
}
@@ -53,8 +46,6 @@ h2 {
display: inline-block;
margin-bottom: var(--size-sm);
color: var(--color-text-primary);
margin-bottom: var(--size-sm);
color: var(--color-text-primary);
text-decoration: none;
font-weight: 600;
}
@@ -117,10 +108,6 @@ h2 {
}
.board-section {
background: var(--color-bg-board);
border: var(--border-width) solid var(--color-border);
border-radius: var(--border-radius-md);
padding: clamp(var(--size-sm), 1vw, var(--size-lg));
background: var(--color-bg-board);
border: var(--border-width) solid var(--color-border);
border-radius: var(--border-radius-md);
@@ -327,7 +314,6 @@ h2 {
@media (max-width: 991px) {
.game-card {
padding: clamp(var(--size-md), 1.5vw, var(--size-lg));
padding: clamp(var(--size-md), 1.5vw, var(--size-lg));
}
.board-section {
@@ -337,30 +323,25 @@ h2 {
h1,
h2 {
font-size: var(--heading-h1-tablet);
font-size: var(--heading-h1-tablet);
}
}
@media (max-width: 768px) {
.game-shell {
padding: clamp(var(--size-sm), 1.5vw, var(--size-lg));
padding: clamp(var(--size-sm), 1.5vw, var(--size-lg));
}
.game-card {
padding: clamp(var(--size-sm), 1vw, var(--size-md));
padding: clamp(var(--size-sm), 1vw, var(--size-md));
}
header {
margin-bottom: var(--size-lg);
margin-bottom: var(--size-lg);
}
h1,
h2 {
font-size: var(--heading-h1-mobile);
font-size: var(--heading-h1-mobile);
}
.meta {
@@ -370,8 +351,6 @@ h2 {
.top-section {
gap: var(--size-xs);
margin-bottom: var(--size-xs);
gap: var(--size-xs);
margin-bottom: var(--size-xs);
}
.board-section {
@@ -382,24 +361,19 @@ h2 {
@media (max-width: 480px) {
.game-shell {
padding: var(--size-sm);
padding: var(--size-sm);
}
.game-card {
padding: var(--size-sm);
border-radius: var(--border-radius-md);
padding: var(--size-sm);
border-radius: var(--border-radius-md);
}
header {
margin-bottom: var(--size-md);
margin-bottom: var(--size-md);
}
h1 {
font-size: var(--heading-h1-small);
font-size: var(--heading-h1-small);
}
.meta {
@@ -409,8 +383,6 @@ h2 {
.top-section {
gap: var(--size-xs-gap);
margin-bottom: var(--size-xs);
gap: var(--size-xs-gap);
margin-bottom: var(--size-xs);
}
.board-section {
src/app/pages/game/game.component.html
+135 -108
View File
@@ -1,6 +1,9 @@
<main class="game-shell" [class.theme-dark]="isDarkMode">
<app-promotion-dialog [isOpen]="facade.isPromotionDialogOpen" (promotionSelected)="facade.onPromotionSelected($event)"
(closed)="facade.onPromotionClosed()" />
<app-promotion-dialog
[isOpen]="facade.isPromotionDialogOpen"
(promotionSelected)="facade.onPromotionSelected($event)"
(closed)="facade.onPromotionClosed()"
/>
<section class="game-card">
<header class="mb-3">
@@ -10,126 +13,150 @@
</header>
@if (facade.loading) {
<p>Loading game state...</p>
<p>Loading game state...</p>
} @else if (facade.state) {
@if (facade.isGameFinished && facade.gameCompletionMessage) {
<div class="game-completion-alert alert alert-success mb-3">
<h2 class="completion-title">{{ facade.gameCompletionMessage }}</h2>
<p class="completion-subtitle mb-0">
<a routerLink="/" class="completion-link">Start a new game</a>
</p>
</div>
}
@if (facade.isGameFinished && facade.gameCompletionMessage) {
<div class="game-completion-alert alert alert-success mb-3">
<h2 class="completion-title">{{ facade.gameCompletionMessage }}</h2>
<p class="completion-subtitle mb-0">
<a routerLink="/" class="completion-link">Start a new game</a>
</p>
</div>
}
<div class="container-fluid">
<div class="row g-3">
<!-- Left Sidebar - Dummy Timers -->
<div class="col-lg-3 col-md-6 col-12 order-lg-1 order-2">
<section class="timer-card">
<h2>Timers</h2>
<div class="player-timer" [class.active-timer]="facade.state.turn === 'white'">
<p class="timer-label">White</p>
<p class="timer-value">{{ formatTimer(whiteTimerSeconds) }}</p>
</div>
<div class="player-timer" [class.active-timer]="facade.state.turn === 'black'">
<p class="timer-label">Black</p>
<p class="timer-value">{{ formatTimer(blackTimerSeconds) }}</p>
</div>
</section>
@if (facade.isGameFinished && facade.gameCompletionMessage) {
<div class="game-completion-alert alert alert-success mb-3">
<h2 class="completion-title">{{ facade.gameCompletionMessage }}</h2>
<p class="completion-subtitle mb-0">
<a routerLink="/" class="completion-link">Start a new game</a>
</p>
</div>
<!-- Center - Chess Board -->
<div class="col-lg-6 col-md-12 col-12 order-lg-2 order-1">
<section class="center-column d-flex flex-column h-100">
<div class="board-section flex-grow-1 d-flex align-items-center justify-content-center">
<app-chess-board [fen]="facade.state.fen" [selectedSquare]="facade.selectedSquare"
[highlightedSquares]="facade.highlightedSquares" [boardTheme]="boardTheme"
(squareSelected)="facade.onBoardSquareSelected($event)" />
</div>
<section class="top-section">
<section class="board-theme-card" aria-label="Board design chooser">
<h3>Board Design</h3>
<div class="board-theme-group" role="radiogroup" aria-label="Board design">
<label class="board-theme-option">
<input type="radio" name="boardTheme" [checked]="boardTheme === 'arabian'"
(change)="setBoardTheme('arabian')" />
<span>Arabian</span>
</label>
<label class="board-theme-option">
<input type="radio" name="boardTheme" [checked]="boardTheme === 'classic'"
(change)="setBoardTheme('classic')" />
<span>Classic</span>
</label>
</div>
</section>
<app-input-card label="Play move (UCI)" placeholder="e2e4" buttonLabel="Send Move" inputType="input"
[value]="facade.moveInput" cardClass="move-card" hintText="Click your piece to highlight legal targets."
(valueChange)="facade.moveInput = $event" (buttonClick)="facade.submitMove()" />
}
<div class="container-fluid">
<div class="row g-3">
<!-- Left Sidebar - Dummy Timers -->
<div class="col-lg-3 col-md-6 col-12 order-lg-1 order-2">
<section class="timer-card">
<h2>Timers</h2>
<div class="player-timer" [class.active-timer]="facade.state.turn === 'white'">
<p class="timer-label">White</p>
<p class="timer-value">{{ formatTimer(whiteTimerSeconds) }}</p>
</div>
<div class="player-timer" [class.active-timer]="facade.state.turn === 'black'">
<p class="timer-label">Black</p>
<p class="timer-value">{{ formatTimer(blackTimerSeconds) }}</p>
</div>
</section>
</section>
</div>
</div>
<!-- Right Sidebar - Export -->
<div class="col-lg-3 col-md-6 col-12 order-lg-3 order-3">
<section class="history-card">
<h2>Move History</h2>
<!-- Center - Chess Board -->
<div class="col-lg-6 col-md-12 col-12 order-lg-2 order-1">
<section class="center-column d-flex flex-column h-100">
<div class="board-section flex-grow-1 d-flex align-items-center justify-content-center">
<app-chess-board
[fen]="facade.state.fen"
[selectedSquare]="facade.selectedSquare"
[highlightedSquares]="facade.highlightedSquares"
[boardTheme]="boardTheme"
(squareSelected)="facade.onBoardSquareSelected($event)"
/>
</div>
@if (facade.state.moves.length === 0) {
<p class="history-empty">No moves yet.</p>
} @else {
<ol class="history-list">
@for (move of facade.state.moves; track $index) {
<li>
<span class="history-number">{{ $index + 1 }}.</span>
<span class="history-move">{{ move }}</span>
</li>
<section class="top-section">
<section class="board-theme-card" aria-label="Board design chooser">
<h3>Board Design</h3>
<div class="board-theme-group" role="radiogroup" aria-label="Board design">
<label class="board-theme-option">
<input
type="radio"
name="boardTheme"
[checked]="boardTheme === 'arabian'"
(change)="setBoardTheme('arabian')"
/>
<span>Arabian</span>
</label>
<label class="board-theme-option">
<input
type="radio"
name="boardTheme"
[checked]="boardTheme === 'classic'"
(change)="setBoardTheme('classic')"
/>
<span>Classic</span>
</label>
</div>
</section>
<app-input-card
label="Play move (UCI)"
placeholder="e2e4"
buttonLabel="Send Move"
inputType="input"
[value]="facade.moveInput"
cardClass="move-card"
hintText="Click your piece to highlight legal targets."
(valueChange)="facade.moveInput = $event"
(buttonClick)="facade.submitMove()"
/>
</section>
</section>
</div>
<!-- Right Sidebar - Export -->
<div class="col-lg-3 col-md-6 col-12 order-lg-3 order-3">
<section class="history-card">
<h2>Move History</h2>
@if (facade.state.moves.length === 0) {
<p class="history-empty">No moves yet.</p>
} @else {
<ol class="history-list">
@for (move of facade.state.moves; track $index) {
<li>
<span class="history-number">{{ $index + 1 }}.</span>
<span class="history-move">{{ move }}</span>
</li>
}
</ol>
}
</ol>
}
</section>
</section>
<section class="export-card">
<h2>Export</h2>
<div class="export-mode-group" role="radiogroup" aria-label="Export mode">
<label class="export-mode-option">
<input type="radio" name="exportType" [checked]="exportType === 'fen'"
(change)="setExportType('fen')" />
<span>FEN</span>
</label>
<label class="export-mode-option">
<input type="radio" name="exportType" [checked]="exportType === 'pgn'"
(change)="setExportType('pgn')" />
<span>PGN</span>
</label>
</div>
<section class="export-card">
<h2>Export</h2>
<div class="export-mode-group" role="radiogroup" aria-label="Export mode">
<label class="export-mode-option">
<input
type="radio"
name="exportType"
[checked]="exportType === 'fen'"
(change)="setExportType('fen')"
/>
<span>FEN</span>
</label>
<label class="export-mode-option">
<input
type="radio"
name="exportType"
[checked]="exportType === 'pgn'"
(change)="setExportType('pgn')"
/>
<span>PGN</span>
</label>
</div>
<textarea class="export-text" [value]="exportValue"
[placeholder]="exportType === 'fen' ? 'FEN will appear here' : 'PGN will appear here'" rows="8"
readonly></textarea>
<textarea
class="export-text"
[value]="exportValue"
[placeholder]="exportType === 'fen' ? 'FEN will appear here' : 'PGN will appear here'"
rows="8"
readonly
></textarea>
<button type="button" class="app-btn w-100" (click)="completeExport()">Done</button>
<button type="button" class="export-button" (click)="completeExport()">Done</button>
@if (exportNotice) {
<p class="export-note">{{ exportNotice }}</p>
}
</section>
@if (exportNotice) {
<p class="export-note">{{ exportNotice }}</p>
}
</section>
</div>
</div>
</div>
</div>
}
@if (facade.errorMessage) {
<p class="alert alert-danger mt-3 mb-0">{{ facade.errorMessage }}</p>
<p class="alert alert-danger mt-3 mb-0">{{ facade.errorMessage }}</p>
}
</section>
</main>
</main>
src/app/pages/profile/profile.component.css
-478
View File
@@ -1,478 +0,0 @@
@import '../welcome/welcome.component.css';
.profile-building-container {
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
z-index: 15;
}
.building-wrapper {
position: relative;
width: clamp(300px, 80vw, 600px);
margin: 0 auto;
}
.building-structure {
background: linear-gradient(135deg, var(--bldg-body) 0%, var(--bldg-mid) 50%, var(--bldg-lit) 100%);
border: 2px solid var(--dlg-border);
border-radius: 8px;
box-shadow: var(--bb-glow), inset 0 0 20px rgba(0, 210, 255, 0.1);
overflow: hidden;
}
.cityscape-shell.sunset .building-structure {
box-shadow: var(--bb-glow), inset 0 0 20px rgba(255, 120, 40, 0.1);
}
.building-top {
height: 30px;
background: linear-gradient(180deg, var(--bldg-mid) 0%, var(--bldg-body) 100%);
border-bottom: 1px solid rgba(0, 210, 255, 0.3);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: var(--bb-tag);
font-family: 'Bebas Neue', sans-serif;
letter-spacing: 2px;
position: relative;
}
.cityscape-shell.sunset .building-top {
border-bottom-color: rgba(255, 120, 40, 0.3);
}
.building-top::after {
content: 'MY PROFILE';
font-size: 12px;
}
.building-main {
display: grid;
grid-template-columns: 80px 1fr 80px;
gap: 0;
padding: 20px;
min-height: 200px;
background: linear-gradient(90deg, rgba(0, 210, 255, 0.03) 0%, transparent 15%, transparent 85%, rgba(0, 210, 255, 0.03) 100%);
align-items: center;
}
.cityscape-shell.sunset .building-main {
background: linear-gradient(90deg, rgba(255, 120, 40, 0.05) 0%, transparent 15%, transparent 85%, rgba(255, 120, 40, 0.05) 100%);
}
.building-side {
display: flex;
flex-direction: column;
gap: 15px;
justify-content: center;
}
.building-side.left-side {
border-right: 1px solid rgba(0, 210, 255, 0.2);
padding-right: 15px;
}
.cityscape-shell.sunset .building-side.left-side {
border-right-color: rgba(255, 120, 40, 0.2);
}
.building-side.right-side {
border-left: 1px solid rgba(0, 210, 255, 0.2);
padding-left: 15px;
}
.cityscape-shell.sunset .building-side.right-side {
border-left-color: rgba(255, 120, 40, 0.2);
}
.window {
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--win-cool) 0%, var(--win-cool) 100%);
border: 1px solid rgba(0, 210, 255, 0.5);
border-radius: 2px;
box-shadow: 0 0 10px rgba(0, 210, 255, 0.4), inset 0 0 8px rgba(0, 210, 255, 0.2);
position: relative;
animation: windowFlicker 4s ease-in-out infinite;
}
.cityscape-shell.sunset .window {
background: linear-gradient(135deg, var(--win-warm) 0%, var(--win-warm) 100%);
border-color: rgba(255, 120, 40, 0.5);
box-shadow: 0 0 10px rgba(255, 120, 40, 0.4), inset 0 0 8px rgba(255, 120, 40, 0.2);
animation: windowFlickerSunset 4s ease-in-out infinite;
}
@keyframes windowFlicker {
0%, 100% {
box-shadow: 0 0 10px rgba(0, 210, 255, 0.4), inset 0 0 8px rgba(0, 210, 255, 0.2);
}
50% {
box-shadow: 0 0 15px rgba(0, 210, 255, 0.6), inset 0 0 12px rgba(0, 210, 255, 0.3);
}
}
@keyframes windowFlickerSunset {
0%, 100% {
box-shadow: 0 0 10px rgba(255, 120, 40, 0.4), inset 0 0 8px rgba(255, 120, 40, 0.2);
}
50% {
box-shadow: 0 0 15px rgba(255, 120, 40, 0.6), inset 0 0 12px rgba(255, 120, 40, 0.3);
}
}
.building-center {
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
}
.player-display-window {
background: linear-gradient(135deg, rgba(0, 210, 255, 0.1) 0%, rgba(0, 210, 255, 0.05) 100%);
border: 2px solid var(--bb-tag);
border-radius: 4px;
padding: 30px;
text-align: center;
box-shadow: 0 0 20px rgba(0, 210, 255, 0.3), inset 0 0 15px rgba(0, 210, 255, 0.1);
min-width: 250px;
}
.cityscape-shell.sunset .player-display-window {
background: linear-gradient(135deg, rgba(182, 64, 255, 0.1) 0%, rgba(182, 64, 255, 0.05) 100%);
box-shadow: 0 0 20px rgba(255, 64, 249, 0.3), inset 0 0 15px rgba(255, 64, 249, 0.1);
}
.player-avatar {
font-size: 4rem;
margin-bottom: 15px;
display: block;
animation: avatarPulse 3s ease-in-out infinite;
}
@keyframes avatarPulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.player-name {
font-family: 'Bebas Neue', sans-serif;
font-size: 28px;
font-weight: bold;
color: var(--bb-title);
letter-spacing: 1px;
margin-bottom: 20px;
text-transform: uppercase;
background: linear-gradient(90deg, var(--bb-title), var(--bb-tag));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
cursor: pointer;
transition: all 0.3s ease;
padding: 8px 12px;
border-radius: 4px;
position: relative;
}
.player-name:hover {
filter: brightness(1.2);
background: linear-gradient(90deg, var(--bb-tag), var(--bb-title));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transform: scale(1.05);
}
.player-name.copied {
background: linear-gradient(90deg, #4caf50, #66bb6a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
}
.player-id-label {
font-family: 'Space Mono', monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--bb-tag);
margin-bottom: 8px;
opacity: 0.8;
}
.player-id-value {
font-family: 'Space Mono', monospace;
font-size: 18px;
font-weight: 700;
letter-spacing: 2px;
color: var(--bb-tag);
background: rgba(0, 210, 255, 0.15);
padding: 12px 16px;
border: 1.5px solid var(--bb-tag);
border-radius: 2px;
word-break: break-all;
box-shadow: 0 0 15px rgba(0, 210, 255, 0.4);
text-shadow: 0 0 10px rgba(0, 210, 255, 0.5);
cursor: pointer;
transition: all 0.3s ease;
user-select: text;
}
.cityscape-shell.sunset .player-id-value {
background: rgba(182, 64, 255, 0.15);
box-shadow: 0 0 15px rgba(255, 64, 249, 0.4);
text-shadow: 0 0 10px rgba(255, 64, 249, 0.5);
}
.player-id-value:hover {
background: rgba(0, 210, 255, 0.25);
box-shadow: 0 0 20px rgba(0, 210, 255, 0.6);
transform: scale(1.02);
}
.cityscape-shell.sunset .player-id-value:hover {
background: rgba(182, 64, 255, 0.25);
box-shadow: 0 0 20px rgba(255, 64, 249, 0.6);
}
.player-id-value.copied {
background: rgba(76, 175, 80, 0.2);
border-color: #4caf50;
color: #4caf50;
box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
}
.copy-notification {
font-family: 'Space Mono', monospace;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
color: #4caf50;
margin-top: 12px;
animation: copyNotification 2s ease-in-out forwards;
}
@keyframes copyNotification {
0% {
opacity: 1;
transform: translateY(0);
}
80% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-10px);
}
}
.building-base {
padding: 20px;
background: linear-gradient(180deg, rgba(0, 210, 255, 0.05) 0%, rgba(0, 210, 255, 0.02) 100%);
border-top: 1px solid rgba(0, 210, 255, 0.2);
}
.cityscape-shell.sunset .building-base {
background: linear-gradient(180deg, rgba(255, 120, 40, 0.05) 0%, rgba(255, 120, 40, 0.02) 100%);
border-top-color: rgba(255, 120, 40, 0.2);
}
.stat-panel {
display: flex;
justify-content: space-around;
align-items: center;
gap: 20px;
}
.stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
flex: 1;
}
.stat-label {
font-family: 'Space Mono', monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--bb-tag);
opacity: 0.7;
}
.stat-value {
font-family: 'Space Mono', monospace;
font-size: 14px;
font-weight: 700;
color: var(--bb-title);
text-align: center;
}
.stat-divider {
width: 1px;
height: 30px;
background: rgba(0, 210, 255, 0.2);
}
.cityscape-shell.sunset .stat-divider {
background: rgba(255, 120, 40, 0.2);
}
.building-door {
height: 60px;
background: linear-gradient(90deg, var(--bldg-mid) 0%, var(--bldg-body) 50%, var(--bldg-mid) 100%);
border-top: 1px solid rgba(0, 210, 255, 0.2);
border-radius: 0 0 8px 8px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.cityscape-shell.sunset .building-door {
border-top-color: rgba(255, 120, 40, 0.2);
}
.building-door::before {
content: '';
position: absolute;
width: 90%;
height: 100%;
border: 1.5px solid rgba(0, 210, 255, 0.3);
border-radius: 4px;
background: linear-gradient(90deg, rgba(0, 210, 255, 0.05), rgba(0, 210, 255, 0.02));
}
.cityscape-shell.sunset .building-door::before {
border-color: rgba(255, 120, 40, 0.3);
background: linear-gradient(90deg, rgba(255, 120, 40, 0.05), rgba(255, 120, 40, 0.02));
}
.door-handle {
width: 12px;
height: 12px;
background: radial-gradient(circle at 30% 30%, rgba(0, 210, 255, 0.8), rgba(0, 210, 255, 0.4));
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 210, 255, 0.6);
position: relative;
z-index: 2;
margin-left: 80px;
animation: handleGlow 2s ease-in-out infinite;
}
.cityscape-shell.sunset .door-handle {
background: radial-gradient(circle at 30% 30%, rgba(255, 120, 40, 0.8), rgba(255, 120, 40, 0.4));
box-shadow: 0 0 10px rgba(255, 120, 40, 0.6);
animation: handleGlowSunset 2s ease-in-out infinite;
}
@keyframes handleGlow {
0%, 100% {
box-shadow: 0 0 10px rgba(0, 210, 255, 0.6);
}
50% {
box-shadow: 0 0 20px rgba(0, 210, 255, 0.9);
}
}
@keyframes handleGlowSunset {
0%, 100% {
box-shadow: 0 0 10px rgba(255, 120, 40, 0.6);
}
50% {
box-shadow: 0 0 20px rgba(255, 120, 40, 0.9);
}
}
.back-btn {
position: absolute;
top: -50px;
left: 0;
background: transparent;
color: var(--bb-title);
border: 1px solid var(--dlg-border);
border-radius: 2px;
padding: 0.5rem 1rem;
font-family: 'Space Mono', monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.2s ease;
}
.back-btn:hover {
background: rgba(0, 210, 255, 0.1);
border-color: var(--bb-tag);
color: var(--bb-tag);
box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);
}
.cityscape-shell.sunset .back-btn:hover {
background: rgba(182, 64, 255, 0.1);
box-shadow: 0 0 15px rgba(255, 64, 249, 0.3);
}
@media (max-width: 600px) {
.building-structure {
border-radius: 4px;
}
.building-main {
grid-template-columns: 50px 1fr 50px;
padding: 15px;
gap: 8px;
}
.window {
width: 30px;
height: 30px;
}
.player-display-window {
min-width: 180px;
padding: 20px;
}
.player-avatar {
font-size: 3rem;
margin-bottom: 10px;
}
.player-name {
font-size: 20px;
margin-bottom: 15px;
}
.player-id-value {
font-size: 14px;
padding: 8px 12px;
}
.building-base {
padding: 15px;
}
.stat-panel {
gap: 10px;
}
.back-btn {
top: -45px;
font-size: 9px;
padding: 0.4rem 0.8rem;
}
}
src/app/pages/profile/profile.component.html
-97
View File
@@ -1,97 +0,0 @@
<div class="cityscape-shell" [class.sunset]="isSunsetMode">
<div class="scene">
<div class="sky">
<div class="stars-layer">
<div class="star" *ngFor="let star of stars" [ngStyle]="star.style"></div>
</div>
<div class="sun"></div>
<div class="cloud-wrap">
<div class="cloud cloud-a"></div>
<div class="cloud cloud-b"></div>
<div class="cloud cloud-c"></div>
<div class="cloud cloud-d"></div>
<div class="cloud cloud-e"></div>
</div>
</div>
<div class="bg-layer">
<div class="bg-bldg" *ngFor="let building of bgBuildings" [ngStyle]="building.style"></div>
</div>
<div class="main-layer">
<div class="profile-building-container">
@if (currentUser; as user) {
<!-- Player Building with Info Inside -->
<div class="building-wrapper">
<div class="building-structure">
<!-- Building top -->
<div class="building-top"></div>
<!-- Building main section with user inside -->
<div class="building-main">
<!-- Left side windows -->
<div class="building-side left-side">
<div class="window"></div>
<div class="window"></div>
<div class="window"></div>
<div class="window"></div>
</div>
<!-- Center section - User Info -->
<div class="building-center">
<div class="player-display-window">
<div class="player-avatar">👤</div>
<div class="player-name" (click)="copyUsername(user.username)" [class.copied]="usernameCopied" title="Click to copy">{{ user.username }}</div>
<div class="player-id-label">PLAYER ID</div>
<div class="player-id-value" (click)="copyPlayerId(user.id)" [class.copied]="idCopied" title="Click to copy">{{ user.id }}</div>
@if (idCopied) {
<div class="copy-notification">✓ COPIED</div>
}
@if (usernameCopied) {
<div class="copy-notification">✓ COPIED</div>
}
</div>
</div>
<!-- Right side windows -->
<div class="building-side right-side">
<div class="window"></div>
<div class="window"></div>
<div class="window"></div>
<div class="window"></div>
</div>
</div>
<!-- Building base with stats -->
<div class="building-base">
<div class="stat-panel">
<div class="stat">
<span class="stat-label">RATING</span>
<span class="stat-value">{{ user.rating }}</span>
</div>
<div class="stat-divider"></div>
<div class="stat">
<span class="stat-label">MEMBER SINCE</span>
<span class="stat-value">{{ user.createdAt | date: 'MMM dd, yyyy' }}</span>
</div>
</div>
</div>
<!-- Building door -->
<div class="building-door">
<div class="door-handle"></div>
</div>
</div>
<!-- Back button -->
<button type="button" class="back-btn" (click)="goBack()">← BACK</button>
</div>
}
</div>
</div>
<div class="haze"></div>
<div class="ground"></div>
</div>
</div>
src/app/pages/profile/profile.component.ts
-127
View File
@@ -1,127 +0,0 @@
import { Component, OnInit, DestroyRef, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Router } from '@angular/router';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { AuthService } from '../../services/auth.service';
import { ThemeService } from '../../services/theme.service';
import { CurrentUser } from '../../models/auth.models';
interface Star {
style: Record<string, string>;
}
interface BackgroundBuilding {
style: Record<string, string>;
}
@Component({
selector: 'app-profile',
standalone: true,
imports: [CommonModule],
templateUrl: './profile.component.html',
styleUrl: './profile.component.css'
})
export class ProfileComponent implements OnInit {
private readonly destroyRef = inject(DestroyRef);
private readonly authService = inject(AuthService);
private readonly themeService = inject(ThemeService);
private readonly router = inject(Router);
currentUser: CurrentUser | null = null;
isSunsetMode = false;
idCopied = false;
usernameCopied = false;
stars: Star[] = [];
bgBuildings: BackgroundBuilding[] = [];
ngOnInit(): void {
this.authService.currentUser$
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe((user) => {
this.currentUser = user;
if (!user) {
this.router.navigate(['']);
}
});
this.themeService.darkMode$
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe((isDarkMode) => {
this.isSunsetMode = !isDarkMode;
});
this.generateStars(220);
this.generateBackgroundBuildings();
}
goBack(): void {
this.router.navigate(['']);
}
copyPlayerId(id: string): void {
navigator.clipboard.writeText(id).then(() => {
this.idCopied = true;
setTimeout(() => {
this.idCopied = false;
}, 2000);
});
}
copyUsername(username: string): void {
navigator.clipboard.writeText(username).then(() => {
this.usernameCopied = true;
setTimeout(() => {
this.usernameCopied = false;
}, 2000);
});
}
private generateStars(count: number): void {
this.stars = Array.from({ length: count }, () => {
const size = Math.random() * 2 + 0.5;
return {
style: {
width: `${size}px`,
height: `${size}px`,
left: `${Math.random() * 100}%`,
top: `${Math.random() * 62}%`,
'--d': `${(Math.random() * 3 + 1.5).toFixed(1)}s`,
'--dl': `${-(Math.random() * 6).toFixed(1)}s`
}
};
});
}
private generateBackgroundBuildings(): void {
const specs = [
{ l: '0%', w: '7%', h: '30vh' },
{ l: '3%', w: '4%', h: '18vh' },
{ l: '7%', w: '5%', h: '22vh' },
{ l: '11%', w: '8%', h: '28vh' },
{ l: '15%', w: '6%', h: '20vh' },
{ l: '18.5%', w: '4%', h: '18vh' },
{ l: '22.5%', w: '6%', h: '26vh' },
{ l: '28%', w: '5%', h: '25vh' },
{ l: '32%', w: '4%', h: '15vh' },
{ l: '35.5%', w: '4.5%', h: '20vh' },
{ l: '42%', w: '5%', h: '28vh' },
{ l: '47%', w: '5%', h: '22vh' },
{ l: '50%', w: '7%', h: '30vh' },
{ l: '55%', w: '6%', h: '27vh' },
{ l: '60.5%', w: '5%', h: '24vh' },
{ l: '64.5%', w: '3.5%', h: '17vh' },
{ l: '70%', w: '6%', h: '23vh' },
{ l: '75%', w: '4%', h: '19vh' },
{ l: '80.5%', w: '4%', h: '21vh' },
{ l: '85.5%', w: '9%', h: '32vh' },
{ l: '88%', w: '5%', h: '20vh' },
{ l: '91%', w: '3%', h: '16vh' },
{ l: '94%', w: '6%', h: '27vh' }
];
this.bgBuildings = specs.map((spec) => ({
style: { left: spec.l, width: spec.w, height: spec.h }
}));
}
}
src/app/pages/welcome/welcome.component.css
-2
View File
@@ -1,5 +1,3 @@
@import '../../button-template.css';
:host {
display: block;
}
src/app/pages/welcome/welcome.component.html
+168 -113
View File
@@ -1,4 +1,15 @@
<div class="cityscape-shell" [class.sunset]="isSunsetMode">
<div class="mode-badge">{{ modeBadge }}</div>
<button
type="button"
class="tgl"
(click)="toggleTheme()"
[attr.aria-label]="isSunsetMode ? 'Switch to night mode' : 'Switch to sunset mode'"
title="Toggle theme"
>
<span class="tgl-icon">{{ isSunsetMode ? '🌙' : '☀' }}</span>
</button>
<div class="scene">
<div class="sky">
@@ -24,41 +35,50 @@
<div class="ant" style="height:38px;"></div>
<div class="bpart" style="width:55%;margin:0 auto;height:7vh;">
<div class="wins" style="grid-template-columns:repeat(3,1fr);height:100%;align-content:start;">
<div class="w" *ngFor="let win of windows['wA1']" [ngStyle]="win.style"></div>
<div
class="w"
*ngFor="let win of windows['wA1']"
[ngStyle]="win.style"
></div>
</div>
</div>
<div class="bpart" style="width:80%;margin:0 auto;height:9vh;">
<div class="wins" style="grid-template-columns:repeat(4,1fr);align-content:start;height:100%;">
<div class="w" *ngFor="let win of windows['wA2']" [ngStyle]="win.style"></div>
<div
class="w"
*ngFor="let win of windows['wA2']"
[ngStyle]="win.style"
></div>
</div>
</div>
<div class="bpart" style="height:36vh;">
<div>
<div style="padding:5px 5px 0;">
<div class="bb">
<div class="bb-tag">JOIN</div>
<div class="bb-title">JOIN<br />GAME</div>
<button type="button" class="app-btn" (click)="openJoinDialog()" [disabled]="joiningGame">
<button type="button" class="bb-btn" (click)="openJoinDialog()" [disabled]="joiningGame">
{{ joiningGame ? 'JOINING...' : 'JOIN GAME →' }}
</button>
</div>
</div>
<div class="wins" style="grid-template-columns:repeat(5,1fr);">
<div class="w" *ngFor="let win of windows['wA3']" [ngStyle]="win.style"></div>
<div
class="w"
*ngFor="let win of windows['wA3']"
[ngStyle]="win.style"
></div>
</div>
</div>
<!-- Draggable Meat Emoji -->
@if (showMeatEmoji) {
<div class="meat-emoji" [style.left.px]="meatX" [style.top.px]="meatY" (mousedown)="onMeatMouseDown($event)">
🍖
</div>
}
</div>
<div class="bwrap" style="left:21%;width:15%;">
<div class="bpart" style="height:5vh;width:90%;margin:0 auto;">
<div class="wins" style="grid-template-columns:repeat(4,1fr);height:100%;align-content:start;">
<div class="w" *ngFor="let win of windows['wB1']" [ngStyle]="win.style"></div>
<div
class="w"
*ngFor="let win of windows['wB1']"
[ngStyle]="win.style"
></div>
</div>
</div>
<div class="bpart" style="height:44vh;">
@@ -69,13 +89,17 @@
<div class="bb">
<div class="bb-tag">BOT</div>
<div class="bb-title">PLAY WITH<br />A BOT</div>
<button type="button" class="app-btn" (click)="openDifficultyDialog()" [disabled]="creating">
<button type="button" class="bb-btn" (click)="openDifficultyDialog()" [disabled]="creating">
{{ creating ? 'CREATING...' : 'GET STARTED →' }}
</button>
</div>
</div>
<div class="wins" style="grid-template-columns:repeat(5,1fr);">
<div class="w" *ngFor="let win of windows['wB2']" [ngStyle]="win.style"></div>
<div
class="w"
*ngFor="let win of windows['wB2']"
[ngStyle]="win.style"
></div>
</div>
</div>
</div>
@@ -87,12 +111,20 @@
</div>
<div class="bpart" style="height:6vh;width:70%;margin:0 auto;border-radius:2px 2px 0 0;">
<div class="wins" style="grid-template-columns:repeat(5,1fr);height:100%;align-content:start;">
<div class="w" *ngFor="let win of windows['wC1']" [ngStyle]="win.style"></div>
<div
class="w"
*ngFor="let win of windows['wC1']"
[ngStyle]="win.style"
></div>
</div>
</div>
<div class="bpart" style="height:10vh;">
<div class="wins" style="grid-template-columns:repeat(6,1fr);align-content:start;height:100%;">
<div class="w" *ngFor="let win of windows['wC2']" [ngStyle]="win.style"></div>
<div
class="w"
*ngFor="let win of windows['wC2']"
[ngStyle]="win.style"
></div>
</div>
</div>
<div class="bpart" style="height:48vh;">
@@ -101,13 +133,17 @@
<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)="startOneVsOne()" [disabled]="creating">
<button type="button" class="bb-btn" style="padding:7px 20px;font-size:11px;" (click)="startOneVsOne()" [disabled]="creating">
{{ creating ? 'CREATING...' : 'START NOW →' }}
</button>
</div>
</div>
<div class="wins" style="grid-template-columns:repeat(7,1fr);">
<div class="w" *ngFor="let win of windows['wC3']" [ngStyle]="win.style"></div>
<div
class="w"
*ngFor="let win of windows['wC3']"
[ngStyle]="win.style"
></div>
</div>
</div>
</div>
@@ -116,7 +152,11 @@
<div class="ant" style="height:30px;"></div>
<div class="bpart" style="height:5vh;width:110%;margin-left:-5%;">
<div class="wins" style="grid-template-columns:repeat(6,1fr);height:100%;align-content:start;">
<div class="w" *ngFor="let win of windows['wD1']" [ngStyle]="win.style"></div>
<div
class="w"
*ngFor="let win of windows['wD1']"
[ngStyle]="win.style"
></div>
</div>
</div>
<div class="bpart" style="height:42vh;">
@@ -127,11 +167,15 @@
<div class="bb">
<div class="bb-tag">OPTIONS</div>
<div class="bb-title">MORE<br />OPTIONS</div>
<button type="button" class="app-btn" (click)="openOptionsDialog()">OPEN MENU →</button>
<button type="button" class="bb-btn" (click)="openOptionsDialog()">OPEN MENU →</button>
</div>
</div>
<div class="wins" style="grid-template-columns:repeat(6,1fr);">
<div class="w" *ngFor="let win of windows['wD2']" [ngStyle]="win.style"></div>
<div
class="w"
*ngFor="let win of windows['wD2']"
[ngStyle]="win.style"
></div>
</div>
</div>
</div>
@@ -139,7 +183,11 @@
<div class="bwrap" style="left:83%;width:10%;">
<div class="bpart" style="height:30vh;">
<div class="wins" style="grid-template-columns:repeat(3,1fr);height:100%;align-content:start;">
<div class="w" *ngFor="let win of windows['wE1']" [ngStyle]="win.style"></div>
<div
class="w"
*ngFor="let win of windows['wE1']"
[ngStyle]="win.style"
></div>
</div>
</div>
</div>
@@ -147,46 +195,54 @@
<!-- Speech Bubble -->
@if (showSpeechBubble) {
<div class="speech-bubble-container" (click)="onSpeechBubbleClick()">
<div class="speech-bubble">
<div class="bubble-text">{{ bubbleMessage }}</div>
<div class="bubble-tail"></div>
<div class="speech-bubble-container" (click)="onSpeechBubbleClick()">
<div class="speech-bubble">
<div class="bubble-text">{{ bubbleMessage }}</div>
<div class="bubble-tail"></div>
</div>
</div>
</div>
}
<!-- Zoomed Window View -->
@if (isZoomedIn) {
<div class="zoom-overlay" (click)="onZoomedViewClick()" (mousemove)="onMouseMove($event)" (mouseup)="onMouseUp()"
(mouseleave)="onMouseUp()">
<div class="zoom-window-wrapper" (click)="$event.stopPropagation()">
<div class="zoom-window-frame">
<div class="zoom-player-2">
<img src="/assets/arabian-chess/player-two.gif" alt="Player 2" class="player-2-gif"
(click)="$event.stopPropagation()" />
@if (showSecondSpeechBubble) {
<div class="second-speech-bubble">
<div class="bubble-text">Feed me! 🍖</div>
<div class="bubble-tail"></div>
<div class="zoom-overlay" (click)="onZoomedViewClick()" (mousemove)="onMouseMove($event)" (mouseup)="onMouseUp()" (mouseleave)="onMouseUp()">
<div class="zoom-window-wrapper" (click)="$event.stopPropagation()">
<div class="zoom-window-frame">
<div class="zoom-player-2">
<img
src="/assets/arabian-chess/player-two.gif"
alt="Player 2"
class="player-2-gif"
(click)="$event.stopPropagation()"
/>
@if (showSecondSpeechBubble) {
<div class="second-speech-bubble">
<div class="bubble-text">Feed me! 🍖</div>
<div class="bubble-tail"></div>
</div>
}
@if (showHappyBubble) {
<div class="happy-speech-bubble">
<div class="bubble-text">Happy meow! 😸</div>
<div class="bubble-tail"></div>
</div>
}
</div>
}
@if (showHappyBubble) {
<div class="happy-speech-bubble">
<div class="bubble-text">Happy meow! 😸</div>
<div class="bubble-tail"></div>
</div>
}
</div>
</div>
<!-- Draggable Meat Emoji -->
@if (showMeatEmoji) {
<div class="meat-emoji" [style.left.px]="meatX" [style.top.px]="meatY" (mousedown)="onMeatMouseDown($event)">
🍖
<!-- Draggable Meat Emoji -->
@if (showMeatEmoji) {
<div
class="meat-emoji"
[style.left.px]="meatX"
[style.top.px]="meatY"
(mousedown)="onMeatMouseDown($event)"
>
🍖
</div>
}
</div>
}
</div>
</div>
}
<div class="haze"></div>
@@ -194,84 +250,83 @@
</div>
@if (showDifficultyDialog) {
<div class="dialog-overlay" (click)="closeDifficultyDialog()">
<div class="dialog-card" (click)="$event.stopPropagation()">
<div class="dialog-title">SELECT DIFFICULTY</div>
<div class="dialog-actions">
<button type="button" class="app-btn" (click)="startVsBot('easy')" [disabled]="creating">EASY</button>
<button type="button" class="app-btn" (click)="startVsBot('medium')" [disabled]="creating">MEDIUM</button>
<button type="button" class="app-btn" (click)="startVsBot('hard')" [disabled]="creating">HARD</button>
<div class="dialog-overlay" (click)="closeDifficultyDialog()">
<div class="dialog-card" (click)="$event.stopPropagation()">
<div class="dialog-title">SELECT DIFFICULTY</div>
<div class="dialog-actions">
<button type="button" class="dialog-btn" (click)="startVsBot('easy')" [disabled]="creating">EASY</button>
<button type="button" class="dialog-btn" (click)="startVsBot('medium')" [disabled]="creating">MEDIUM</button>
<button type="button" class="dialog-btn" (click)="startVsBot('hard')" [disabled]="creating">HARD</button>
</div>
</div>
</div>
</div>
}
@if (showOptionsDialog) {
<div class="dialog-overlay" (click)="closeOptionsDialog()">
<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)="openImportDialog()">IMPORT GAME</button>
<div class="dialog-overlay" (click)="closeOptionsDialog()">
<div class="dialog-card" (click)="$event.stopPropagation()">
<div class="dialog-title">MORE OPTIONS</div>
<div class="dialog-actions">
<button type="button" class="dialog-btn" (click)="openImportDialog()">IMPORT GAME</button>
</div>
</div>
</div>
</div>
}
@if (showJoinDialog) {
<div class="dialog-overlay" (click)="closeJoinDialog()">
<div class="dialog-card" (click)="$event.stopPropagation()">
<div class="dialog-title">JOIN GAME</div>
<input type="text" class="dialog-input" [(ngModel)]="gameIdInput" placeholder="Paste game ID here"
[disabled]="joiningGame" (keyup.enter)="submitJoinGame()" />
<div class="dialog-actions">
<button type="button" class="app-btn" (click)="submitJoinGame()"
[disabled]="joiningGame || !gameIdInput.trim()">
{{ joiningGame ? 'JOINING...' : 'JOIN' }}
</button>
<button type="button" class="app-btn" (click)="closeJoinDialog()" [disabled]="joiningGame">CANCEL</button>
<div class="dialog-overlay" (click)="closeJoinDialog()">
<div class="dialog-card" (click)="$event.stopPropagation()">
<div class="dialog-title">JOIN GAME</div>
<input
type="text"
class="dialog-input"
[(ngModel)]="gameIdInput"
placeholder="Paste game ID here"
[disabled]="joiningGame"
(keyup.enter)="submitJoinGame()"
/>
<div class="dialog-actions">
<button type="button" class="dialog-btn" (click)="submitJoinGame()" [disabled]="joiningGame || !gameIdInput.trim()">
{{ joiningGame ? 'JOINING...' : 'JOIN' }}
</button>
<button type="button" class="dialog-btn" (click)="closeJoinDialog()" [disabled]="joiningGame">CANCEL</button>
</div>
</div>
</div>
</div>
}
@if (showImportDialog) {
<div class="dialog-overlay" (click)="closeImportDialog()">
<div class="dialog-card" (click)="$event.stopPropagation()">
<div class="dialog-title">IMPORT GAME</div>
<div class="import-mode-group" role="radiogroup" aria-label="Import mode">
<label class="import-mode-option">
<input type="radio" name="importMode" [checked]="importMode === 'fen'" (change)="setImportMode('fen')"
[disabled]="importing" />
<span>FEN</span>
</label>
<label class="import-mode-option">
<input type="radio" name="importMode" [checked]="importMode === 'pgn'" (change)="setImportMode('pgn')"
[disabled]="importing" />
<span>PGN</span>
</label>
</div>
<textarea class="dialog-input dialog-textarea" [(ngModel)]="importText"
[placeholder]="importMode === 'fen' ? 'Paste FEN here' : 'Paste PGN here'" [disabled]="importing"
rows="5"></textarea>
<div class="dialog-actions">
<button type="button" class="app-btn" (click)="submitImportGame()" [disabled]="importing || !importText.trim()">
{{ importing ? 'IMPORTING...' : 'IMPORT' }}
</button>
<button type="button" class="app-btn" (click)="closeImportDialog()" [disabled]="importing">CANCEL</button>
<div class="dialog-overlay" (click)="closeImportDialog()">
<div class="dialog-card" (click)="$event.stopPropagation()">
<div class="dialog-title">IMPORT GAME</div>
<div class="import-mode-group" role="radiogroup" aria-label="Import mode">
<label class="import-mode-option">
<input type="radio" name="importMode" [checked]="importMode === 'fen'" (change)="setImportMode('fen')" [disabled]="importing" />
<span>FEN</span>
</label>
<label class="import-mode-option">
<input type="radio" name="importMode" [checked]="importMode === 'pgn'" (change)="setImportMode('pgn')" [disabled]="importing" />
<span>PGN</span>
</label>
</div>
<textarea
class="dialog-input dialog-textarea"
[(ngModel)]="importText"
[placeholder]="importMode === 'fen' ? 'Paste FEN here' : 'Paste PGN here'"
[disabled]="importing"
rows="5"
></textarea>
<div class="dialog-actions">
<button type="button" class="dialog-btn" (click)="submitImportGame()" [disabled]="importing || !importText.trim()">
{{ importing ? 'IMPORTING...' : 'IMPORT' }}
</button>
<button type="button" class="dialog-btn" (click)="closeImportDialog()" [disabled]="importing">CANCEL</button>
</div>
</div>
</div>
</div>
}
@if (showChallengeDialog) {
<div class="dialog-overlay" (click)="closeChallengeDialog()">
<div class="dialog-card" (click)="$event.stopPropagation()">
<app-challenge-create-dialog (closeChallengeDialog)="closeChallengeDialog()"></app-challenge-create-dialog>
</div>
</div>
}
@if (errorMessage) {
<p class="error-banner">{{ errorMessage }}</p>
<p class="error-banner">{{ errorMessage }}</p>
}
</div>
</div>
src/app/pages/welcome/welcome.component.ts
+129 -200
View File
@@ -1,16 +1,10 @@
import { CommonModule } from '@angular/common';
import { Component, DestroyRef, OnDestroy, OnInit, inject } from '@angular/core';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Router } from '@angular/router';
import { finalize } from 'rxjs';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { getErrorMessage } from '../../core/http/error-message.util';
import { CurrentUser } from '../../models/auth.models';
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';
@@ -30,34 +24,14 @@ interface WindowCell {
style: Record<string, string>;
}
interface Star {
style: Record<string, string>;
}
interface BackgroundBuilding {
style: Record<string, string>;
}
interface WindowCell {
state: 'off' | 'on';
color?: string;
glowColor?: string;
style: Record<string, string>;
}
@Component({
selector: 'app-welcome',
standalone: true,
imports: [CommonModule, FormsModule, ChallengeCreateDialogComponent],
imports: [CommonModule, FormsModule],
templateUrl: './welcome.component.html',
styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent implements OnInit, OnDestroy {
private readonly destroyRef = inject(DestroyRef);
private readonly authService = inject(AuthService);
private readonly authDialogService = inject(AuthDialogService);
private readonly themeService = inject(ThemeService);
creating = false;
joiningGame = false;
importing = false;
@@ -67,7 +41,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
showOptionsDialog = false;
showJoinDialog = false;
showImportDialog = false;
showChallengeDialog = false;
gameIdInput = '';
importMode: ImportMode = 'fen';
@@ -75,9 +48,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
isSunsetMode = false;
modeBadge = 'NIGHT MODE';
currentUser: CurrentUser | null = null;
private authDialogState: 'login' | 'register' | null = null;
private pendingAction: (() => void) | null = null;
// Speech bubble and zoom features
showSpeechBubble = false;
@@ -112,35 +82,15 @@ export class WelcomeComponent implements OnInit, OnDestroy {
private readonly router: Router,
private readonly gameApi: GameApiService
) {
this.initTheme();
}
ngOnInit(): void {
this.themeService.darkMode$
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe((isDarkMode) => {
this.isSunsetMode = !isDarkMode;
this.modeBadge = this.isSunsetMode ? 'SUNSET MODE' : 'NIGHT MODE';
});
this.authService.currentUser$
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe((user) => {
this.currentUser = user;
this.maybeRunPendingAction();
});
this.authDialogService.dialogState$
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe((state) => {
this.authDialogState = state;
this.maybeRunPendingAction();
});
this.generateStars(220);
this.generateBackgroundBuildings();
this.generateWindowsForAllBuildings();
this.startWindowFlicker();
// Show speech bubble after 5 seconds
this.speechBubbleTimeoutId = setTimeout(() => {
this.showSpeechBubble = true;
@@ -157,11 +107,21 @@ export class WelcomeComponent implements OnInit, OnDestroy {
}
}
openDifficultyDialog(): void {
if (!this.requireAuth(() => this.showDifficultyDialog = true)) {
toggleTheme(): void {
this.isSunsetMode = !this.isSunsetMode;
this.modeBadge = this.isSunsetMode ? 'SUNSET MODE' : 'NIGHT MODE';
if (!this.isSunsetMode) {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
return;
}
document.documentElement.removeAttribute('data-theme');
localStorage.removeItem('theme');
}
openDifficultyDialog(): void {
this.closeAllDialogs();
this.showDifficultyDialog = true;
}
@@ -182,10 +142,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
}
openJoinDialog(): void {
if (!this.requireAuth(() => this.showJoinDialog = true)) {
return;
}
this.closeAllDialogs();
this.showJoinDialog = true;
}
@@ -200,10 +156,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
}
openImportDialog(): void {
if (!this.requireAuth(() => this.showImportDialog = true)) {
return;
}
this.closeAllDialogs();
this.showImportDialog = true;
}
@@ -224,147 +176,29 @@ export class WelcomeComponent implements OnInit, OnDestroy {
}
startOneVsOne(): void {
if (!this.requireAuth(() => this.openChallengeDialog())) {
if (this.creating) {
return;
}
this.openChallengeDialog();
}
openChallengeDialog(): void {
this.closeAllDialogs();
this.showChallengeDialog = true;
}
closeChallengeDialog(): void {
this.showChallengeDialog = false;
this.errorMessage = '';
this.creating = true;
this.gameApi
.createGame()
.pipe(finalize(() => (this.creating = false)))
.subscribe({
next: (game) => {
void this.router.navigate(['/game', game.gameId], {
state: { theme: this.isSunsetMode ? 'light' : 'dark' }
});
},
error: (error) => {
this.errorMessage = getErrorMessage(error, 'Unable to create a game.');
}
});
}
startVsBot(difficulty: Difficulty): void {
if (!this.requireAuth(() => this.performStartVsBot(difficulty))) {
return;
}
this.performStartVsBot(difficulty);
}
submitJoinGame(): void {
if (!this.requireAuth(() => this.performSubmitJoinGame())) {
return;
}
this.performSubmitJoinGame();
}
submitImportGame(): void {
if (!this.requireAuth(() => this.performSubmitImportGame())) {
return;
}
this.performSubmitImportGame();
}
onSpeechBubbleClick(): void {
this.showSpeechBubble = false;
this.isZoomedIn = true;
this.bubbleMessage = 'meow';
this.showMeatEmoji = true;
this.showHappyBubble = false;
this.showSecondSpeechBubble = true;
// Reset meat position
this.meatX = window.innerWidth / 2 - 100;
this.meatY = window.innerHeight / 2 + 150;
}
onZoomedViewClick(): void {
this.isZoomedIn = false;
this.showSecondSpeechBubble = false;
this.showHappyBubble = false;
this.showMeatEmoji = false;
this.bubbleMessage = 'meow';
if (this.zoomTimeoutId) {
clearTimeout(this.zoomTimeoutId);
}
}
onMeatMouseDown(event: MouseEvent): void {
this.isDraggingMeat = true;
const rect = (event.target as HTMLElement).getBoundingClientRect();
this.meatDragOffsetX = event.clientX - rect.left;
this.meatDragOffsetY = event.clientY - rect.top;
}
onMouseMove(event: MouseEvent): void {
if (!this.isDraggingMeat) {
return;
}
this.meatX = event.clientX - this.meatDragOffsetX;
this.meatY = event.clientY - this.meatDragOffsetY;
const gifElement = document.querySelector('.player-2-gif') as HTMLElement;
if (!gifElement) {
return;
}
const gifRect = gifElement.getBoundingClientRect();
const gifCenterX = gifRect.left + gifRect.width / 2;
const gifCenterY = gifRect.top + gifRect.height / 2;
const meatElement = document.querySelector('.meat-emoji') as HTMLElement;
if (!meatElement) {
return;
}
const meatRect = meatElement.getBoundingClientRect();
const meatCenterX = meatRect.left + meatRect.width / 2;
const meatCenterY = meatRect.top + meatRect.height / 2;
const distance = Math.sqrt(
Math.pow(meatCenterX - gifCenterX, 2) + Math.pow(meatCenterY - gifCenterY, 2)
);
if (distance < 50) {
this.onMeatFed();
}
}
onMouseUp(): void {
this.isDraggingMeat = false;
}
onMeatFed(): void {
this.showMeatEmoji = false;
this.showSecondSpeechBubble = false;
this.showHappyBubble = true;
this.isDraggingMeat = false;
}
private requireAuth(action: () => void): boolean {
if (this.authService.isLoggedIn()) {
return true;
}
this.pendingAction = action;
this.authDialogService.openLogin();
return false;
}
private maybeRunPendingAction(): void {
if (!this.currentUser || this.authDialogState !== null || !this.pendingAction) {
return;
}
const action = this.pendingAction;
this.pendingAction = null;
action();
}
private performStartVsBot(difficulty: Difficulty): void {
if (this.creating) {
return;
}
@@ -388,7 +222,7 @@ export class WelcomeComponent implements OnInit, OnDestroy {
});
}
private performSubmitJoinGame(): void {
submitJoinGame(): void {
const gameId = this.gameIdInput.trim();
if (this.joiningGame || !gameId) {
return;
@@ -413,7 +247,7 @@ export class WelcomeComponent implements OnInit, OnDestroy {
});
}
private performSubmitImportGame(): void {
submitImportGame(): void {
const trimmedImport = this.importText.trim();
if (this.importing || !trimmedImport) {
return;
@@ -439,6 +273,88 @@ export class WelcomeComponent implements OnInit, OnDestroy {
});
}
onSpeechBubbleClick(): void {
this.showSpeechBubble = false;
this.isZoomedIn = true;
this.bubbleMessage = 'meow';
this.showMeatEmoji = true;
this.showHappyBubble = false;
this.showSecondSpeechBubble = true;
// Reset meat position
this.meatX = window.innerWidth / 2 - 100;
this.meatY = window.innerHeight / 2 + 150;
}
onZoomedViewClick(): void {
this.isZoomedIn = false;
this.showSecondSpeechBubble = false;
this.showHappyBubble = false;
this.showMeatEmoji = false;
this.bubbleMessage = 'meow';
if (this.zoomTimeoutId) {
clearTimeout(this.zoomTimeoutId);
}
}
onMeatMouseDown(event: MouseEvent): void {
this.isDraggingMeat = true;
const rect = (event.target as HTMLElement).getBoundingClientRect();
this.meatDragOffsetX = event.clientX - rect.left;
this.meatDragOffsetY = event.clientY - rect.top;
}
onMouseMove(event: MouseEvent): void {
if (!this.isDraggingMeat) {
return;
}
this.meatX = event.clientX - this.meatDragOffsetX;
this.meatY = event.clientY - this.meatDragOffsetY;
// Get gif element position
const gifElement = document.querySelector('.player-2-gif') as HTMLElement;
if (!gifElement) {
return;
}
const gifRect = gifElement.getBoundingClientRect();
const gifCenterX = gifRect.left + gifRect.width / 2;
const gifCenterY = gifRect.top + gifRect.height / 2;
// Get meat center position
const meatElement = document.querySelector('.meat-emoji') as HTMLElement;
if (!meatElement) {
return;
}
const meatRect = meatElement.getBoundingClientRect();
const meatCenterX = meatRect.left + meatRect.width / 2;
const meatCenterY = meatRect.top + meatRect.height / 2;
// Calculate distance
const distance = Math.sqrt(
Math.pow(meatCenterX - gifCenterX, 2) + Math.pow(meatCenterY - gifCenterY, 2)
);
// If meat is close enough to gif center (within 50px), trigger the interaction
if (distance < 50) {
this.onMeatFed();
}
}
onMouseUp(): void {
this.isDraggingMeat = false;
}
onMeatFed(): void {
this.showMeatEmoji = false;
this.showSecondSpeechBubble = false;
this.showHappyBubble = true;
this.isDraggingMeat = false;
}
private closeAllDialogs(): void {
this.showDifficultyDialog = false;
this.showOptionsDialog = false;
@@ -447,6 +363,19 @@ export class WelcomeComponent implements OnInit, OnDestroy {
this.errorMessage = '';
}
private initTheme(): void {
const savedTheme = localStorage.getItem('theme');
this.isSunsetMode = savedTheme !== 'dark';
this.modeBadge = this.isSunsetMode ? 'SUNSET MODE' : 'NIGHT MODE';
if (!this.isSunsetMode) {
document.documentElement.setAttribute('data-theme', 'dark');
return;
}
document.documentElement.removeAttribute('data-theme');
}
private generateStars(count: number): void {
this.stars = Array.from({ length: count }, () => {
const size = Math.random() * 2 + 0.5;
src/app/services/auth-dialog.service.ts
-23
View File
@@ -1,23 +0,0 @@
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
export type AuthDialogState = 'login' | 'register' | null;
@Injectable({ providedIn: 'root' })
export class AuthDialogService {
private readonly dialogStateSubject = new BehaviorSubject<AuthDialogState>(null);
readonly dialogState$ = this.dialogStateSubject.asObservable();
openLogin(): void {
this.dialogStateSubject.next('login');
}
openRegister(): void {
this.dialogStateSubject.next('register');
}
close(): void {
this.dialogStateSubject.next(null);
}
}
src/app/services/auth.interceptor.ts
-22
View File
@@ -1,22 +0,0 @@
import { HttpInterceptorFn } from '@angular/common/http';
export const authInterceptor: HttpInterceptorFn = (req, next) => {
const token = localStorage.getItem('token');
const isProtectedEndpoint =
req.url.includes('/api/account/me') ||
req.url.includes('/api/account/bots') ||
req.url.includes('/api/account/official-bots') ||
req.url.includes('/api/board/game') ||
req.url.includes('/api/challenge');
if (token && isProtectedEndpoint) {
req = req.clone({
setHeaders: {
Authorization: `Bearer ${token}`
}
});
}
return next(req);
};
src/app/services/auth.service.ts
-93
View File
@@ -1,93 +0,0 @@
import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { map, tap } from 'rxjs/operators';
import { environment } from '../../environments/environment';
import { LoginRequest, RegisterRequest, RegisterResponse, LoginResponse, CurrentUser } from '../models/auth.models';
@Injectable({ providedIn: 'root' })
export class AuthService {
private readonly apiBase = environment.apiBaseUrl;
private readonly accountServiceUrl = environment.accountServiceUrl;
private readonly http = inject(HttpClient);
private currentUserSubject = new BehaviorSubject<CurrentUser | null>(null);
public currentUser$ = this.currentUserSubject.asObservable();
constructor() {
this.loadCurrentUser();
}
login(username: string, password: string): Observable<LoginResponse> {
return this.http
.post<LoginResponse>(`${this.accountServiceUrl}/api/account/login`, {
username,
password
})
.pipe(
tap((response) => {
localStorage.setItem('token', response.token);
localStorage.setItem('username', username);
// After login, fetch current user info
this.getCurrentUser().subscribe();
})
);
}
register(username: string, password: string, email?: string): Observable<RegisterResponse> {
return this.http
.post<RegisterResponse>(`${this.accountServiceUrl}/api/account`, {
username,
password,
email
})
.pipe(
tap((response) => {
localStorage.setItem('username', response.username);
localStorage.setItem('userId', response.id);
this.currentUserSubject.next({
id: response.id,
username: response.username,
rating: response.rating,
createdAt: response.createdAt
});
})
);
}
getCurrentUser(): Observable<CurrentUser> {
return this.http.get<CurrentUser>(`${this.accountServiceUrl}/api/account/me`).pipe(
tap((user) => {
localStorage.setItem('username', user.username);
localStorage.setItem('userId', user.id);
this.currentUserSubject.next(user);
})
);
}
logout(): void {
localStorage.removeItem('token');
localStorage.removeItem('username');
localStorage.removeItem('userId');
this.currentUserSubject.next(null);
}
isLoggedIn(): boolean {
return !!localStorage.getItem('token');
}
private loadCurrentUser(): void {
const token = localStorage.getItem('token');
const username = localStorage.getItem('username');
const userId = localStorage.getItem('userId');
if (token && username && userId) {
// Try to verify token is still valid by fetching current user
this.getCurrentUser().subscribe({
error: () => {
// Token is invalid, clear it
this.logout();
}
});
}
}
}
src/app/services/challenge-event.service.ts
-64
View File
@@ -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);
}
}
src/app/services/challenge-websocket.service.ts
-135
View File
@@ -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);
}
}
src/app/services/challenge.service.ts
-50
View File
@@ -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`,
{}
);
}
}
src/app/services/game-stream.service.ts
+7 -17
View File
@@ -10,7 +10,6 @@ export class GameStreamService {
private readonly destroyRef = inject(DestroyRef);
private streamSubscription: Subscription | null = null;
private pollSubscription: Subscription | null = null;
private lastGameStateHash: string | null = null;
startStreaming(
gameId: string,
@@ -21,10 +20,7 @@ export class GameStreamService {
.streamGame(gameId)
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe({
next: (event) => {
this.lastGameStateHash = JSON.stringify(event);
onEvent(event);
},
next: (event) => onEvent(event),
error: () => {
onStreamError();
this.startPolling(gameId, onEvent);
@@ -41,7 +37,7 @@ export class GameStreamService {
return;
}
this.pollSubscription = interval(5000)
this.pollSubscription = interval(1500)
.pipe(
startWith(0),
switchMap(() => this.gameApi.getGame(gameId)),
@@ -49,16 +45,11 @@ export class GameStreamService {
)
.subscribe({
next: (game) => {
// Only emit if game state changed to avoid unnecessary updates
const stateHash = JSON.stringify(game.state);
if (this.lastGameStateHash !== stateHash) {
this.lastGameStateHash = stateHash;
const event: GameStreamEvent = {
type: 'gameFull',
game
};
onEvent(event);
}
const event: GameStreamEvent = {
type: 'gameFull',
game
};
onEvent(event);
}
});
}
@@ -68,6 +59,5 @@ export class GameStreamService {
this.pollSubscription?.unsubscribe();
this.streamSubscription = null;
this.pollSubscription = null;
this.lastGameStateHash = null;
}
}
src/app/services/stream-handler.service.ts
+5 -20
View File
@@ -84,19 +84,8 @@ export class StreamHandlerService {
}
};
// Set timeout to fallback if WebSocket doesn't connect quickly
const connectionTimeoutId = setTimeout(() => {
if (!connected && !fallbackActive) {
console.warn(`[StreamHandler] WebSocket timeout for ${gameId}, attempting NDJSON fallback`);
ws.close();
void startNdjsonFallback();
}
}, 3000);
ws.onopen = () => {
connected = true;
clearTimeout(connectionTimeoutId);
console.log(`[StreamHandler] WebSocket connected for ${gameId}`);
};
ws.onmessage = (message) => {
@@ -108,23 +97,19 @@ export class StreamHandlerService {
};
ws.onerror = (error) => {
console.warn(`[StreamHandler] WebSocket error for ${gameId}:`, error);
clearTimeout(connectionTimeoutId);
if (!connected && !fallbackActive) {
console.warn(`[StreamHandler] WebSocket error for ${gameId}, attempting NDJSON fallback:`, error);
if (!connected) {
void startNdjsonFallback();
}
};
ws.onclose = () => {
clearTimeout(connectionTimeoutId);
console.warn(`[StreamHandler] WebSocket closed for ${gameId}, connected=${connected}`);
if (connected) {
// Connection was established but closed, stream is complete
observer.complete();
} else if (!fallbackActive) {
// Connection never established, try fallback
if (!connected) {
console.log(`[StreamHandler] Starting NDJSON fallback for ${gameId}`);
void startNdjsonFallback();
} else {
observer.complete();
}
};
src/app/services/theme.service.ts
-34
View File
@@ -1,34 +0,0 @@
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class ThemeService {
private readonly darkModeSubject = new BehaviorSubject<boolean>(false);
readonly darkMode$ = this.darkModeSubject.asObservable();
initTheme(): void {
const savedTheme = localStorage.getItem('theme');
this.applyDarkMode(savedTheme === 'dark');
}
toggleTheme(): void {
this.applyDarkMode(!this.darkModeSubject.value);
}
setDarkMode(isDarkMode: boolean): void {
this.applyDarkMode(isDarkMode);
}
private applyDarkMode(isDarkMode: boolean): void {
if (isDarkMode) {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
} else {
document.documentElement.removeAttribute('data-theme');
localStorage.removeItem('theme');
}
this.darkModeSubject.next(isDarkMode);
}
}
src/environments/environment.development.ts
-1
View File
@@ -1,7 +1,6 @@
export const environment = {
production: false,
apiBaseUrl: '',
accountServiceUrl: '',
wsBaseUrl: 'ws://localhost:8080',
apiPath: '/api/board/game'
};
src/environments/environment.staging.ts
-11
View File
@@ -1,11 +0,0 @@
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'
};
src/environments/environment.ts
+3 -8
View File
@@ -1,11 +1,6 @@
import { loadRuntimeConfig } from '../app/core/config.loader';
const runtimeConfig = loadRuntimeConfig();
export const environment = {
production: false,
apiBaseUrl: runtimeConfig.apiUrl || '',
accountServiceUrl: runtimeConfig.apiUrl || '',
wsBaseUrl: runtimeConfig.wsUrl,
production: true,
apiBaseUrl: '',
wsBaseUrl: 'ws://localhost:8080',
apiPath: '/api/board/game'
};
src/index.html
-1
View File
@@ -6,7 +6,6 @@
<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>
src/styles-variables.css
+3 -11
View File
@@ -1,3 +1,6 @@
/* ========================================
COLOR VARIABLES - Semantic Naming
======================================== */
/* Light Mode Colors (Default) */
:root:not([data-theme='dark']) {
@@ -119,15 +122,4 @@
SHADOWS
======================================== */
--shadow-md: 0 8px 24px rgba(90, 44, 40, 0.2);
/* Neon dialog / card variables (used by welcome dialogs, toolbar, login/register) */
--bb-bg: rgba(8, 6, 28, 0.92);
--bb-border: #00d5ff;
--bb-glow: 0 0 18px rgba(0, 210, 255, 0.5), inset 0 0 10px rgba(0, 210, 255, 0.05);
--bb-tag: #00d5ff;
--bb-title: #d4f4ff;
--btn-bg: #00d5ff;
--btn-fg: #04000f;
--btn-glow: 0 0 14px rgba(0, 210, 255, 0.9);
--dlg-bg: rgba(8, 6, 28, 0.95);
--dlg-border: #00d5ff;
}
versions.env
-3
View File
@@ -1,3 +0,0 @@
MAJOR=0
MINOR=2
PATCH=2