Compare commits
5 Commits
feat/NCS-55
..
0.1.0
| Author | SHA1 | Date | |
|---|---|---|---|
 TeamCity
|
3c1f5c76e0 | ||
 shosho996
|
36d72fd6cd | ||
|
shosho996
|
bd7ec581e3 | ||
|
shosho996
|
ff75c8ce2f | ||
|
shosho996
|
2de003e497 |
@@ -0,0 +1,20 @@
|
||||
## 0.0.0 (2026-05-12)
|
||||
|
||||
### Features
|
||||
|
||||
* added bot, light and dark mode ([2de003e](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/2de003e497baee72f998d0d805ca1e58aababe48))
|
||||
* added web view 1v1 ([1828fa3](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/1828fa3275ddb8ce6bb90a9f6a970ec428ebce3a))
|
||||
* NCS-63 User account implementation ([#2](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/2)) ([ff75c8c](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/ff75c8ce2fad54137f04a14c15bc1d4a38fa9bb8))
|
||||
* NCS-75 Frontend Deployment Dockerfile ([#4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/4)) ([bd7ec58](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/bd7ec581e38b5d8e775741bf16e19b4dc67b979e))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* build issues ([36d72fd](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/36d72fd6cda41be51d28f8ac307dcdbcd31afa91))
|
||||
* cleaner components seperation ([8b090e4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/8b090e4d96c64c0adb253e3aefad7930108ccfb9))
|
||||
* gitignore ([4da882f](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/4da882f481ba7a008aac868fb37de7cb2bafea5d))
|
||||
* GITIGNORE ([8df2d05](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/8df2d0550ab17c9afb2d19c414eac700a75add02))
|
||||
* npm ([c11c1d4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/c11c1d4dce9de4bd5b463e891eebf961b37feb04))
|
||||
* removed .vs ([2833ead](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/2833ead7be3b47ee5c188d2d21b7326cb3cb3f26))
|
||||
* removed cache files ([7ee59c4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/7ee59c434bf137a08fd560bbc02ceefbcfd90f04))
|
||||
* size of pieces and removed text view of the game state ([c60d00f](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/c60d00f9d25247504845654615065fbccd7fe448))
|
||||
* structure ([3e8c7c4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/3e8c7c4057e55aeec7cee8c24f6751ff24912c93))
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
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"]
|
||||
+20
-6
@@ -2,7 +2,8 @@
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"cli": {
|
||||
"packageManager": "npm"
|
||||
"packageManager": "npm",
|
||||
"analytics": false
|
||||
},
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
@@ -46,17 +47,25 @@
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "500kB",
|
||||
"maximumError": "1MB"
|
||||
"maximumWarning": "1MB",
|
||||
"maximumError": "5MB"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "12kB",
|
||||
"maximumError": "20kB"
|
||||
"maximumWarning": "1MB",
|
||||
"maximumError": "5MB"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"staging": {
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.staging.ts"
|
||||
}
|
||||
]
|
||||
},
|
||||
"development": {
|
||||
"fileReplacements": [
|
||||
{
|
||||
@@ -74,12 +83,17 @@
|
||||
"serve": {
|
||||
"builder": "@angular/build:dev-server",
|
||||
"options": {
|
||||
"proxyConfig": "proxy.conf.json"
|
||||
"proxyConfig": "proxy.conf.json",
|
||||
"host": "0.0.0.0",
|
||||
"port": 4200
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"buildTarget": "nowchess-frontend:build:production"
|
||||
},
|
||||
"staging": {
|
||||
"buildTarget": "nowchess-frontend:build:staging"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "nowchess-frontend:build:development"
|
||||
}
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
#!/bin/sh
|
||||
set -e
|
||||
|
||||
# Replace placeholders in env.template.js with environment variables and write env.js
|
||||
TEMPLATE_PATH="/usr/share/nginx/html/env.template.js"
|
||||
TARGET_PATH="/usr/share/nginx/html/env.js"
|
||||
|
||||
if [ -f "$TEMPLATE_PATH" ]; then
|
||||
echo "Rendering runtime config from $TEMPLATE_PATH"
|
||||
echo "Using environment variables:"
|
||||
printenv
|
||||
echo "----"
|
||||
envsubst < "$TEMPLATE_PATH" > "$TARGET_PATH"
|
||||
else
|
||||
echo "No runtime template found at $TEMPLATE_PATH, skipping"
|
||||
fi
|
||||
|
||||
exec nginx -g 'daemon off;'
|
||||
+22
@@ -0,0 +1,22 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
Generated
+3
-24
@@ -458,7 +458,6 @@
|
||||
"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"
|
||||
},
|
||||
@@ -475,7 +474,6 @@
|
||||
"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"
|
||||
},
|
||||
@@ -489,7 +487,6 @@
|
||||
"integrity": "sha512-ET/JjO8s62kAHfgIsGXlvW5VUwLqHm03q1y/2yD7aQW/WdDvssMsvZv7Knl440989vdOFemIGTMwVPakmWqRmA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/core": "7.28.3",
|
||||
"@jridgewell/sourcemap-codec": "^1.4.14",
|
||||
@@ -522,7 +519,6 @@
|
||||
"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"
|
||||
},
|
||||
@@ -566,7 +562,6 @@
|
||||
"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"
|
||||
},
|
||||
@@ -633,7 +628,6 @@
|
||||
"integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@ampproject/remapping": "^2.2.0",
|
||||
"@babel/code-frame": "^7.27.1",
|
||||
@@ -1607,7 +1601,6 @@
|
||||
"integrity": "sha512-nqhDw2ZcAUrKNPwhjinJny903bRhI0rQhiDz1LksjeRxqa36i3l75+4iXbOy0rlDpLJGxqtgoPavQjmmyS5UJw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@inquirer/checkbox": "^4.2.1",
|
||||
"@inquirer/confirm": "^5.1.14",
|
||||
@@ -3538,7 +3531,6 @@
|
||||
"integrity": "sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"undici-types": "~7.19.0"
|
||||
}
|
||||
@@ -3895,7 +3887,6 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"baseline-browser-mapping": "^2.10.12",
|
||||
"caniuse-lite": "^1.0.30001782",
|
||||
@@ -4911,7 +4902,6 @@
|
||||
"integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"accepts": "^2.0.0",
|
||||
"body-parser": "^2.2.1",
|
||||
@@ -5353,7 +5343,6 @@
|
||||
"integrity": "sha512-am5zfg3yu6sqn5yjKBNqhnTX7Cv+m00ox+7jbaKkrLMRJ4rAdldd1xPd/JzbBWspqaQv6RSTrgFN95EsfhC+7w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=16.9.0"
|
||||
}
|
||||
@@ -5850,8 +5839,7 @@
|
||||
"resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-5.9.0.tgz",
|
||||
"integrity": "sha512-OMUvF1iI6+gSRYOhMrH4QYothVLN9C3EJ6wm4g7zLJlnaTl8zbaPOr0bTw70l7QxkoM7sVFOWo83u9B2Fe2Zng==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/jose": {
|
||||
"version": "6.2.2",
|
||||
@@ -5953,7 +5941,6 @@
|
||||
"integrity": "sha512-LrtUxbdvt1gOpo3gxG+VAJlJAEMhbWlM4YrFQgql98FwF7+K8K12LYO4hnDdUkNjeztYrOXEMqgTajSWgmtI/w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@colors/colors": "1.5.0",
|
||||
"body-parser": "^1.19.0",
|
||||
@@ -6421,7 +6408,6 @@
|
||||
"integrity": "sha512-SL0JY3DaxylDuo/MecFeiC+7pedM0zia33zl0vcjgwcq1q1FWWF1To9EIauPbl8GbMCU0R2e0uJ8bZunhYKD2g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"cli-truncate": "^4.0.0",
|
||||
"colorette": "^2.0.20",
|
||||
@@ -7934,7 +7920,6 @@
|
||||
"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"
|
||||
}
|
||||
@@ -7970,7 +7955,6 @@
|
||||
"integrity": "sha512-9GUyuksjw70uNpb1MTYWsH9MQHOHY6kwfnkafC24+7aOMZn9+rVMBxRbLvw756mrBFbIsFg6Xw9IkR2Fnn3k+Q==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"chokidar": "^4.0.0",
|
||||
"immutable": "^5.0.2",
|
||||
@@ -8590,8 +8574,7 @@
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
|
||||
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
||||
"license": "0BSD",
|
||||
"peer": true
|
||||
"license": "0BSD"
|
||||
},
|
||||
"node_modules/tuf-js": {
|
||||
"version": "4.1.0",
|
||||
@@ -8629,7 +8612,6 @@
|
||||
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
"tsserver": "bin/tsserver"
|
||||
@@ -8759,7 +8741,6 @@
|
||||
"integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.27.0",
|
||||
"fdir": "^6.5.0",
|
||||
@@ -9557,7 +9538,6 @@
|
||||
"integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/colinhacks"
|
||||
}
|
||||
@@ -9576,8 +9556,7 @@
|
||||
"version": "0.15.1",
|
||||
"resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.15.1.tgz",
|
||||
"integrity": "sha512-XE96n56IQpJM7NAoXswY3XRLcWFW83xe0BiAOeMD7K5k5xecOeul3Qcpx6GqEeeHNkW5DWL5zOyTbEfB4eti8w==",
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
"license": "MIT"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+2
-1
@@ -4,7 +4,8 @@
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"build": "ng build --configuration production",
|
||||
"build:staging": "ng build --configuration staging",
|
||||
"watch": "ng build --watch --configuration development",
|
||||
"test": "ng test"
|
||||
},
|
||||
|
||||
@@ -1,4 +1,14 @@
|
||||
{
|
||||
"/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,
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
window.__RUNTIME_CONFIG__ = {
|
||||
API_URL: "${API_URL}",
|
||||
WEBSOCKET_URL: "${WEBSOCKET_URL}"
|
||||
};
|
||||
@@ -1,14 +1,15 @@
|
||||
import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
|
||||
import { provideHttpClient } from '@angular/common/http';
|
||||
import { provideHttpClient, withInterceptors } 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(),
|
||||
provideHttpClient(withInterceptors([authInterceptor])),
|
||||
provideRouter(routes)
|
||||
]
|
||||
};
|
||||
|
||||
+2
-1
@@ -1 +1,2 @@
|
||||
<router-outlet />
|
||||
<app-toolbar />
|
||||
<router-outlet />
|
||||
@@ -1,9 +1,11 @@
|
||||
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: '' }
|
||||
];
|
||||
|
||||
+6
-9
@@ -1,21 +1,18 @@
|
||||
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],
|
||||
imports: [RouterOutlet, ToolbarComponent],
|
||||
templateUrl: './app.html',
|
||||
styleUrl: './app.css'
|
||||
})
|
||||
export class App implements OnInit {
|
||||
ngOnInit(): void {
|
||||
this.initTheme();
|
||||
}
|
||||
constructor(private readonly themeService: ThemeService) { }
|
||||
|
||||
private initTheme(): void {
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
if (savedTheme === 'dark') {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
}
|
||||
ngOnInit(): void {
|
||||
this.themeService.initTheme();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
/* 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;
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
@import '../../button-template.css';
|
||||
|
||||
.input-card {
|
||||
background: var(--color-bg-card);
|
||||
border: var(--border-width) solid var(--color-border);
|
||||
@@ -40,22 +42,6 @@
|
||||
|
||||
}
|
||||
|
||||
.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);
|
||||
|
||||
@@ -2,30 +2,18 @@
|
||||
<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="btn w-100" (click)="onButtonClick()">
|
||||
<button type="button" class="app-btn w-100" (click)="onButtonClick()">
|
||||
{{ buttonLabel }}
|
||||
</button>
|
||||
|
||||
@if (hintText) {
|
||||
<p class="hint-text">{{ hintText }}</p>
|
||||
<p class="hint-text">{{ hintText }}</p>
|
||||
}
|
||||
</section>
|
||||
</section>
|
||||
@@ -0,0 +1,68 @@
|
||||
@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;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
<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>
|
||||
@@ -0,0 +1,62 @@
|
||||
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();
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
@import '../../button-template.css';
|
||||
|
||||
.promotion-dialog-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -20,9 +22,10 @@
|
||||
}
|
||||
|
||||
.promotion-dialog {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
||||
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));
|
||||
max-width: 400px;
|
||||
width: 90%;
|
||||
animation: slideUp 0.3s ease;
|
||||
@@ -44,32 +47,14 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
border-bottom: 1px solid var(--bb-border, #e0e0e0);
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-family: 'Bebas Neue', sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
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;
|
||||
}
|
||||
color: var(--bb-title, #333);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -80,7 +65,8 @@
|
||||
.promotion-prompt {
|
||||
margin: 0 0 20px 0;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
color: var(--bb-title);
|
||||
opacity: 0.8;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@@ -89,43 +75,3 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,25 +2,22 @@
|
||||
<div class="promotion-dialog">
|
||||
<div class="promotion-header">
|
||||
<h3>Pawn Promotion</h3>
|
||||
<button class="close-btn" (click)="close()" aria-label="Close">×</button>
|
||||
<button class="app-btn" (click)="close()" aria-label="Close"
|
||||
style="padding:0.2rem 0.5rem;min-width:unset;">×</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
|
||||
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>
|
||||
<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>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,68 @@
|
||||
@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;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
<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>
|
||||
@@ -0,0 +1,71 @@
|
||||
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();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
@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;
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
<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()" />
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
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();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
/**
|
||||
* Load runtime configuration from window.__RUNTIME_CONFIG__
|
||||
* This is injected by docker-entrypoint.sh at container startup
|
||||
*/
|
||||
export function loadRuntimeConfig() {
|
||||
const config = (window as any).__RUNTIME_CONFIG__ || {};
|
||||
return {
|
||||
apiUrl: config.API_URL || '',
|
||||
wsUrl: config.WEBSOCKET_URL || 'ws://localhost:8080'
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
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;
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
@import '../../button-template.css';
|
||||
|
||||
.game-shell {
|
||||
min-height: 100dvh;
|
||||
padding: clamp(var(--size-md), 2vw, var(--size-xl));
|
||||
@@ -28,6 +30,7 @@
|
||||
|
||||
header {
|
||||
margin-bottom: var(--size-xl);
|
||||
margin-bottom: var(--size-xl);
|
||||
}
|
||||
|
||||
h1,
|
||||
@@ -35,9 +38,13 @@ 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;
|
||||
}
|
||||
@@ -46,6 +53,8 @@ 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;
|
||||
}
|
||||
@@ -108,6 +117,10 @@ 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);
|
||||
@@ -314,6 +327,7 @@ 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 {
|
||||
@@ -323,25 +337,30 @@ 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 {
|
||||
@@ -351,6 +370,8 @@ h2 {
|
||||
.top-section {
|
||||
gap: var(--size-xs);
|
||||
margin-bottom: var(--size-xs);
|
||||
gap: var(--size-xs);
|
||||
margin-bottom: var(--size-xs);
|
||||
}
|
||||
|
||||
.board-section {
|
||||
@@ -361,19 +382,24 @@ 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 {
|
||||
@@ -383,6 +409,8 @@ 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 {
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
<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">
|
||||
@@ -13,150 +10,126 @@
|
||||
</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>
|
||||
@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>
|
||||
</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>
|
||||
</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>
|
||||
<!-- 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>
|
||||
<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()"
|
||||
/>
|
||||
<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>
|
||||
</div>
|
||||
</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>
|
||||
<!-- 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>
|
||||
@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>
|
||||
</ol>
|
||||
}
|
||||
</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="export-button" (click)="completeExport()">Done</button>
|
||||
<button type="button" class="app-btn w-100" (click)="completeExport()">Done</button>
|
||||
|
||||
@if (exportNotice) {
|
||||
<p class="export-note">{{ exportNotice }}</p>
|
||||
}
|
||||
</section>
|
||||
</div>
|
||||
@if (exportNotice) {
|
||||
<p class="export-note">{{ exportNotice }}</p>
|
||||
}
|
||||
</section>
|
||||
</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>
|
||||
@@ -0,0 +1,478 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
<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>
|
||||
@@ -0,0 +1,127 @@
|
||||
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 }
|
||||
}));
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
@import '../../button-template.css';
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -1,15 +1,4 @@
|
||||
<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">
|
||||
@@ -35,38 +24,26 @@
|
||||
<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 style="padding:5px 5px 0;">
|
||||
<div>
|
||||
<div class="bb">
|
||||
<div class="bb-tag">JOIN</div>
|
||||
<div class="bb-title">JOIN<br />GAME</div>
|
||||
<button type="button" class="bb-btn" (click)="openJoinDialog()" [disabled]="joiningGame">
|
||||
<button type="button" class="app-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>
|
||||
</div>
|
||||
@@ -74,11 +51,7 @@
|
||||
<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;">
|
||||
@@ -89,17 +62,13 @@
|
||||
<div class="bb">
|
||||
<div class="bb-tag">BOT</div>
|
||||
<div class="bb-title">PLAY WITH<br />A BOT</div>
|
||||
<button type="button" class="bb-btn" (click)="openDifficultyDialog()" [disabled]="creating">
|
||||
<button type="button" class="app-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>
|
||||
@@ -111,20 +80,12 @@
|
||||
</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;">
|
||||
@@ -133,17 +94,13 @@
|
||||
<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="bb-btn" style="padding:7px 20px;font-size:11px;" (click)="startOneVsOne()" [disabled]="creating">
|
||||
<button type="button" class="app-btn" (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>
|
||||
@@ -152,11 +109,7 @@
|
||||
<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;">
|
||||
@@ -167,15 +120,11 @@
|
||||
<div class="bb">
|
||||
<div class="bb-tag">OPTIONS</div>
|
||||
<div class="bb-title">MORE<br />OPTIONS</div>
|
||||
<button type="button" class="bb-btn" (click)="openOptionsDialog()">OPEN MENU →</button>
|
||||
<button type="button" class="app-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>
|
||||
@@ -183,11 +132,7 @@
|
||||
<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>
|
||||
@@ -195,54 +140,46 @@
|
||||
|
||||
<!-- 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>
|
||||
<div class="speech-bubble-container" (click)="onSpeechBubbleClick()">
|
||||
<div class="speech-bubble">
|
||||
<div class="bubble-text">{{ bubbleMessage }}</div>
|
||||
<div class="bubble-tail"></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>
|
||||
}
|
||||
@if (showHappyBubble) {
|
||||
<div class="happy-speech-bubble">
|
||||
<div class="bubble-text">Happy meow! 😸</div>
|
||||
<div class="bubble-tail"></div>
|
||||
</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>
|
||||
|
||||
<!-- Draggable Meat Emoji -->
|
||||
@if (showMeatEmoji) {
|
||||
<div
|
||||
class="meat-emoji"
|
||||
[style.left.px]="meatX"
|
||||
[style.top.px]="meatY"
|
||||
(mousedown)="onMeatMouseDown($event)"
|
||||
>
|
||||
🍖
|
||||
</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>
|
||||
}
|
||||
|
||||
<div class="haze"></div>
|
||||
@@ -250,83 +187,76 @@
|
||||
</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="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 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>
|
||||
</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="dialog-btn" (click)="openImportDialog()">IMPORT GAME</button>
|
||||
</div>
|
||||
<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>
|
||||
</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="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 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>
|
||||
</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="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 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>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (errorMessage) {
|
||||
<p class="error-banner">{{ errorMessage }}</p>
|
||||
<p class="error-banner">{{ errorMessage }}</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,10 +1,15 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
import { Component, DestroyRef, OnDestroy, OnInit, inject } 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';
|
||||
|
||||
type Difficulty = 'easy' | 'medium' | 'hard';
|
||||
type ImportMode = 'fen' | 'pgn';
|
||||
@@ -32,6 +37,11 @@ interface WindowCell {
|
||||
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;
|
||||
@@ -48,6 +58,9 @@ 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;
|
||||
@@ -82,15 +95,35 @@ 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;
|
||||
@@ -107,21 +140,11 @@ export class WelcomeComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
}
|
||||
|
||||
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');
|
||||
openDifficultyDialog(): void {
|
||||
if (!this.requireAuth(() => this.showDifficultyDialog = true)) {
|
||||
return;
|
||||
}
|
||||
|
||||
document.documentElement.removeAttribute('data-theme');
|
||||
localStorage.removeItem('theme');
|
||||
}
|
||||
|
||||
openDifficultyDialog(): void {
|
||||
this.closeAllDialogs();
|
||||
this.showDifficultyDialog = true;
|
||||
}
|
||||
@@ -142,6 +165,10 @@ export class WelcomeComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
|
||||
openJoinDialog(): void {
|
||||
if (!this.requireAuth(() => this.showJoinDialog = true)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.closeAllDialogs();
|
||||
this.showJoinDialog = true;
|
||||
}
|
||||
@@ -156,6 +183,10 @@ export class WelcomeComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
|
||||
openImportDialog(): void {
|
||||
if (!this.requireAuth(() => this.showImportDialog = true)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.closeAllDialogs();
|
||||
this.showImportDialog = true;
|
||||
}
|
||||
@@ -176,6 +207,136 @@ export class WelcomeComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
|
||||
startOneVsOne(): void {
|
||||
if (!this.requireAuth(() => this.performStartOneVsOne())) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.performStartOneVsOne();
|
||||
}
|
||||
|
||||
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 performStartOneVsOne(): void {
|
||||
if (this.creating) {
|
||||
return;
|
||||
}
|
||||
@@ -198,7 +359,7 @@ export class WelcomeComponent implements OnInit, OnDestroy {
|
||||
});
|
||||
}
|
||||
|
||||
startVsBot(difficulty: Difficulty): void {
|
||||
private performStartVsBot(difficulty: Difficulty): void {
|
||||
if (this.creating) {
|
||||
return;
|
||||
}
|
||||
@@ -222,7 +383,7 @@ export class WelcomeComponent implements OnInit, OnDestroy {
|
||||
});
|
||||
}
|
||||
|
||||
submitJoinGame(): void {
|
||||
private performSubmitJoinGame(): void {
|
||||
const gameId = this.gameIdInput.trim();
|
||||
if (this.joiningGame || !gameId) {
|
||||
return;
|
||||
@@ -247,7 +408,7 @@ export class WelcomeComponent implements OnInit, OnDestroy {
|
||||
});
|
||||
}
|
||||
|
||||
submitImportGame(): void {
|
||||
private performSubmitImportGame(): void {
|
||||
const trimmedImport = this.importText.trim();
|
||||
if (this.importing || !trimmedImport) {
|
||||
return;
|
||||
@@ -273,88 +434,6 @@ 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;
|
||||
@@ -363,19 +442,6 @@ 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;
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
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);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { HttpInterceptorFn } from '@angular/common/http';
|
||||
|
||||
export const authInterceptor: HttpInterceptorFn = (req, next) => {
|
||||
const token = localStorage.getItem('token');
|
||||
|
||||
// Add token to protected endpoints only (not registration or login)
|
||||
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/challenge');
|
||||
|
||||
if (token && isProtectedEndpoint) {
|
||||
req = req.clone({
|
||||
setHeaders: {
|
||||
Authorization: `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return next(req);
|
||||
};
|
||||
@@ -0,0 +1,93 @@
|
||||
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();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
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);
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
export const environment = {
|
||||
production: false,
|
||||
apiBaseUrl: '',
|
||||
accountServiceUrl: '',
|
||||
wsBaseUrl: 'ws://localhost:8080',
|
||||
apiPath: '/api/board/game'
|
||||
};
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
import { loadRuntimeConfig } from '../app/core/config.loader';
|
||||
|
||||
const runtimeConfig = loadRuntimeConfig();
|
||||
|
||||
export const environment = {
|
||||
production: true,
|
||||
apiBaseUrl: runtimeConfig.apiUrl || 'https://st.nowchess.janis-eccarius.de',
|
||||
accountServiceUrl: runtimeConfig.apiUrl || 'https://st.nowchess.janis-eccarius.de',
|
||||
wsBaseUrl: runtimeConfig.wsUrl || 'wss://st.nowchess.janis-eccarius.de',
|
||||
apiPath: '/api/board/game'
|
||||
};
|
||||
@@ -1,6 +1,11 @@
|
||||
import { loadRuntimeConfig } from '../app/core/config.loader';
|
||||
|
||||
const runtimeConfig = loadRuntimeConfig();
|
||||
|
||||
export const environment = {
|
||||
production: true,
|
||||
apiBaseUrl: '',
|
||||
wsBaseUrl: 'ws://localhost:8080',
|
||||
production: false,
|
||||
apiBaseUrl: runtimeConfig.apiUrl || '',
|
||||
accountServiceUrl: runtimeConfig.apiUrl || '',
|
||||
wsBaseUrl: runtimeConfig.wsUrl,
|
||||
apiPath: '/api/board/game'
|
||||
};
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<script src="/env.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
|
||||
@@ -1,6 +1,3 @@
|
||||
/* ========================================
|
||||
COLOR VARIABLES - Semantic Naming
|
||||
======================================== */
|
||||
|
||||
/* Light Mode Colors (Default) */
|
||||
:root:not([data-theme='dark']) {
|
||||
@@ -122,4 +119,15 @@
|
||||
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;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
MAJOR=0
|
||||
MINOR=1
|
||||
PATCH=0
|
||||
Reference in New Issue
Block a user