Compare commits
4 Commits
7de4f3784b
...
0.1.0
| Author | SHA1 | Date | |
|---|---|---|---|
 TeamCity
|
3c1f5c76e0 | ||
 shosho996
|
36d72fd6cd | ||
|
shosho996
|
bd7ec581e3 | ||
|
shosho996
|
ff75c8ce2f |
@@ -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"]
|
||||
+34
-10
@@ -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": {
|
||||
@@ -28,8 +29,13 @@
|
||||
},
|
||||
{
|
||||
"glob": "**/*",
|
||||
"input": "arabian-chess",
|
||||
"output": "/arabian-chess"
|
||||
"input": "assets/arabian-chess",
|
||||
"output": "/assets/arabian-chess"
|
||||
},
|
||||
{
|
||||
"glob": "**/*",
|
||||
"input": "assets/ChessAssets",
|
||||
"output": "/assets/ChessAssets"
|
||||
}
|
||||
],
|
||||
"styles": [
|
||||
@@ -41,17 +47,25 @@
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "500kB",
|
||||
"maximumError": "1MB"
|
||||
"maximumWarning": "1MB",
|
||||
"maximumError": "5MB"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "4kB",
|
||||
"maximumError": "8kB"
|
||||
"maximumWarning": "1MB",
|
||||
"maximumError": "5MB"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"staging": {
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.staging.ts"
|
||||
}
|
||||
]
|
||||
},
|
||||
"development": {
|
||||
"fileReplacements": [
|
||||
{
|
||||
@@ -69,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"
|
||||
}
|
||||
@@ -99,8 +118,13 @@
|
||||
},
|
||||
{
|
||||
"glob": "**/*",
|
||||
"input": "arabian-chess",
|
||||
"output": "/arabian-chess"
|
||||
"input": "assets/arabian-chess",
|
||||
"output": "/assets/arabian-chess"
|
||||
},
|
||||
{
|
||||
"glob": "**/*",
|
||||
"input": "assets/ChessAssets",
|
||||
"output": "/assets/ChessAssets"
|
||||
}
|
||||
],
|
||||
"styles": [
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 518 KiB After Width: | Height: | Size: 518 KiB |
|
Before Width: | Height: | Size: 4.8 MiB After Width: | Height: | Size: 4.8 MiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 907 B After Width: | Height: | Size: 907 B |
|
Before Width: | Height: | Size: 919 B After Width: | Height: | Size: 919 B |
|
Before Width: | Height: | Size: 818 B After Width: | Height: | Size: 818 B |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 161 B After Width: | Height: | Size: 161 B |
|
Before Width: | Height: | Size: 188 B After Width: | Height: | Size: 188 B |
|
Before Width: | Height: | Size: 188 B After Width: | Height: | Size: 188 B |
|
Before Width: | Height: | Size: 237 B After Width: | Height: | Size: 237 B |
|
Before Width: | Height: | Size: 243 B After Width: | Height: | Size: 243 B |
|
Before Width: | Height: | Size: 264 B After Width: | Height: | Size: 264 B |
|
Before Width: | Height: | Size: 244 B After Width: | Height: | Size: 244 B |
|
Before Width: | Height: | Size: 240 B After Width: | Height: | Size: 240 B |
|
Before Width: | Height: | Size: 232 B After Width: | Height: | Size: 232 B |
|
Before Width: | Height: | Size: 287 B After Width: | Height: | Size: 287 B |
|
Before Width: | Height: | Size: 211 B After Width: | Height: | Size: 211 B |
|
Before Width: | Height: | Size: 238 B After Width: | Height: | Size: 238 B |
|
Before Width: | Height: | Size: 227 B After Width: | Height: | Size: 227 B |
|
Before Width: | Height: | Size: 267 B After Width: | Height: | Size: 267 B |
|
Before Width: | Height: | Size: 300 B After Width: | Height: | Size: 300 B |
|
Before Width: | Height: | Size: 218 B After Width: | Height: | Size: 218 B |
|
Before Width: | Height: | Size: 244 B After Width: | Height: | Size: 244 B |
|
Before Width: | Height: | Size: 245 B After Width: | Height: | Size: 245 B |
|
Before Width: | Height: | Size: 229 B After Width: | Height: | Size: 229 B |
|
Before Width: | Height: | Size: 286 B After Width: | Height: | Size: 286 B |
|
Before Width: | Height: | Size: 245 B After Width: | Height: | Size: 245 B |
|
Before Width: | Height: | Size: 266 B After Width: | Height: | Size: 266 B |
|
Before Width: | Height: | Size: 297 B After Width: | Height: | Size: 297 B |
|
Before Width: | Height: | Size: 258 B After Width: | Height: | Size: 258 B |
|
Before Width: | Height: | Size: 263 B After Width: | Height: | Size: 263 B |
|
Before Width: | Height: | Size: 313 B After Width: | Height: | Size: 313 B |
|
Before Width: | Height: | Size: 251 B After Width: | Height: | Size: 251 B |
|
Before Width: | Height: | Size: 275 B After Width: | Height: | Size: 275 B |
|
Before Width: | Height: | Size: 305 B After Width: | Height: | Size: 305 B |
|
Before Width: | Height: | Size: 281 B After Width: | Height: | Size: 281 B |
|
Before Width: | Height: | Size: 280 B After Width: | Height: | Size: 280 B |
|
Before Width: | Height: | Size: 85 KiB After Width: | Height: | Size: 85 KiB |
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 59 KiB |
@@ -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;
|
||||
}
|
||||
@@ -27,12 +27,56 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.square[draggable='true'] {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.square.drag-source {
|
||||
opacity: 0.65;
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.square.drag-over {
|
||||
outline: 3px dashed var(--color-primary);
|
||||
outline-offset: -4px;
|
||||
}
|
||||
|
||||
.square.light {
|
||||
background-image: url('/arabian-chess/sprites/board/board_square_white.png');
|
||||
background-image: url('/assets/arabian-chess/sprites/board/board_square_white.png');
|
||||
}
|
||||
|
||||
.square.dark {
|
||||
background-image: url('/arabian-chess/sprites/board/board_square_black.png');
|
||||
background-image: url('/assets/arabian-chess/sprites/board/board_square_black.png');
|
||||
}
|
||||
|
||||
.board-grid--classic {
|
||||
border-radius: var(--border-radius-md);
|
||||
}
|
||||
|
||||
.board-grid--classic .square {
|
||||
background-image: none;
|
||||
transition: filter 160ms ease;
|
||||
}
|
||||
|
||||
.board-grid--classic .square.light {
|
||||
background-color: #f3c8a0;
|
||||
}
|
||||
|
||||
.board-grid--classic .square.dark {
|
||||
background-color: #ba6d4b;
|
||||
}
|
||||
|
||||
.board-grid--classic .square.drag-over {
|
||||
outline-color: #5a2c28;
|
||||
}
|
||||
|
||||
.board-grid--classic .square.selected {
|
||||
outline-color: #5a2c28;
|
||||
}
|
||||
|
||||
.board-grid--classic .square.highlighted::after {
|
||||
background: #b9dad1;
|
||||
border-color: #5a2c28;
|
||||
}
|
||||
|
||||
.square.highlighted::after {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<div class="board-shell">
|
||||
<div class="board-grid">
|
||||
<div class="board-grid" [class.board-grid--classic]="boardTheme === 'classic'" [class.board-grid--arabian]="boardTheme === 'arabian'">
|
||||
@for (square of squares; track trackByCoordinate($index, square)) {
|
||||
<button
|
||||
type="button"
|
||||
@@ -8,13 +8,25 @@
|
||||
[class.dark]="!square.isLight"
|
||||
[class.selected]="isSelected(square)"
|
||||
[class.highlighted]="isHighlighted(square)"
|
||||
[class.drag-source]="isDraggingSource(square)"
|
||||
[class.drag-over]="isDragOver(square)"
|
||||
[attr.data-square]="square.coordinate"
|
||||
(click)="onSquareClick(square)"
|
||||
(dragover)="onSquareDragOver($event, square)"
|
||||
(drop)="onSquareDrop($event, square)"
|
||||
>
|
||||
<app-chess-piece [pieceCode]="square.pieceCode" />
|
||||
<app-chess-piece
|
||||
[pieceCode]="square.pieceCode"
|
||||
[boardTheme]="boardTheme"
|
||||
[draggable]="!!square.pieceCode"
|
||||
(pieceDragStart)="onPieceDragStart($event, square)"
|
||||
(pieceDragEnd)="onSquareDragEnd()"
|
||||
/>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
|
||||
<img class="board-bottom" src="/arabian-chess/sprites/board/board_bottom.png" alt="Board frame" />
|
||||
@if (boardTheme === 'arabian') {
|
||||
<img class="board-bottom" src="/assets/arabian-chess/sprites/board/board_bottom.png" alt="Board frame" />
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -7,6 +7,8 @@ interface BoardSquare {
|
||||
pieceCode: string | null;
|
||||
}
|
||||
|
||||
type BoardTheme = 'arabian' | 'classic';
|
||||
|
||||
@Component({
|
||||
selector: 'app-chess-board',
|
||||
standalone: true,
|
||||
@@ -18,10 +20,14 @@ export class ChessBoardComponent implements OnChanges {
|
||||
@Input({ required: true }) fen = '';
|
||||
@Input() selectedSquare: string | null = null;
|
||||
@Input() highlightedSquares: string[] = [];
|
||||
@Input() boardTheme: BoardTheme = 'arabian';
|
||||
@Output() squareSelected = new EventEmitter<string>();
|
||||
|
||||
squares: BoardSquare[] = [];
|
||||
private highlightedSquareSet = new Set<string>();
|
||||
private draggingFromSquare: string | null = null;
|
||||
private dragOverSquare: string | null = null;
|
||||
private suppressNextClick = false;
|
||||
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
if (changes['fen']) {
|
||||
@@ -38,9 +44,61 @@ export class ChessBoardComponent implements OnChanges {
|
||||
}
|
||||
|
||||
onSquareClick(square: BoardSquare): void {
|
||||
if (this.suppressNextClick) {
|
||||
this.suppressNextClick = false;
|
||||
return;
|
||||
}
|
||||
|
||||
this.squareSelected.emit(square.coordinate);
|
||||
}
|
||||
|
||||
onPieceDragStart(event: DragEvent, square: BoardSquare): void {
|
||||
if (!square.pieceCode) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
this.draggingFromSquare = square.coordinate;
|
||||
if (event.dataTransfer) {
|
||||
event.dataTransfer.setData('text/plain', square.coordinate);
|
||||
event.dataTransfer.effectAllowed = 'move';
|
||||
}
|
||||
this.squareSelected.emit(square.coordinate);
|
||||
}
|
||||
|
||||
onSquareDragOver(event: DragEvent, square: BoardSquare): void {
|
||||
if (!this.draggingFromSquare) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
if (event.dataTransfer) {
|
||||
event.dataTransfer.dropEffect = 'move';
|
||||
}
|
||||
this.dragOverSquare = square.coordinate === this.draggingFromSquare ? null : square.coordinate;
|
||||
}
|
||||
|
||||
onSquareDrop(event: DragEvent, square: BoardSquare): void {
|
||||
event.preventDefault();
|
||||
if (!this.draggingFromSquare) {
|
||||
return;
|
||||
}
|
||||
|
||||
const fromSquare = this.draggingFromSquare;
|
||||
this.clearDragState();
|
||||
|
||||
if (fromSquare === square.coordinate) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.suppressNextClick = true;
|
||||
this.squareSelected.emit(square.coordinate);
|
||||
}
|
||||
|
||||
onSquareDragEnd(): void {
|
||||
this.clearDragState();
|
||||
}
|
||||
|
||||
isSelected(square: BoardSquare): boolean {
|
||||
return this.selectedSquare === square.coordinate;
|
||||
}
|
||||
@@ -49,6 +107,14 @@ export class ChessBoardComponent implements OnChanges {
|
||||
return this.highlightedSquareSet.has(square.coordinate);
|
||||
}
|
||||
|
||||
isDraggingSource(square: BoardSquare): boolean {
|
||||
return this.draggingFromSquare === square.coordinate;
|
||||
}
|
||||
|
||||
isDragOver(square: BoardSquare): boolean {
|
||||
return this.dragOverSquare === square.coordinate;
|
||||
}
|
||||
|
||||
private buildSquares(fen: string): BoardSquare[] {
|
||||
const placement = fen.split(' ')[0] ?? '';
|
||||
const rows = placement.split('/');
|
||||
@@ -87,4 +153,9 @@ export class ChessBoardComponent implements OnChanges {
|
||||
pieceCode
|
||||
};
|
||||
}
|
||||
|
||||
private clearDragState(): void {
|
||||
this.draggingFromSquare = null;
|
||||
this.dragOverSquare = null;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,15 @@
|
||||
height: clamp(40px, 8cqh, 120px);
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
pointer-events: none;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.piece[draggable='true'] {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.piece[draggable='true']:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
|
||||
@@ -1,3 +1,10 @@
|
||||
@if (pieceCode) {
|
||||
<img class="piece" [src]="spriteUrl" [alt]="pieceCode" />
|
||||
<img
|
||||
class="piece"
|
||||
[src]="spriteUrl"
|
||||
[alt]="pieceCode"
|
||||
[attr.draggable]="draggable ? 'true' : null"
|
||||
(dragstart)="onDragStart($event)"
|
||||
(dragend)="onDragEnd()"
|
||||
/>
|
||||
}
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
||||
|
||||
type BoardTheme = 'arabian' | 'classic';
|
||||
|
||||
@Component({
|
||||
selector: 'app-chess-piece',
|
||||
@@ -8,18 +10,44 @@ import { Component, Input } from '@angular/core';
|
||||
})
|
||||
export class ChessPieceComponent {
|
||||
@Input({ required: true }) pieceCode: string | null = null;
|
||||
@Input() boardTheme: BoardTheme = 'arabian';
|
||||
@Input() draggable = false;
|
||||
@Output() pieceDragStart = new EventEmitter<DragEvent>();
|
||||
@Output() pieceDragEnd = new EventEmitter<void>();
|
||||
|
||||
onDragStart(event: DragEvent): void {
|
||||
if (!this.draggable) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
this.pieceDragStart.emit(event);
|
||||
}
|
||||
|
||||
onDragEnd(): void {
|
||||
this.pieceDragEnd.emit();
|
||||
}
|
||||
|
||||
get spriteUrl(): string {
|
||||
if (!this.pieceCode) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const color = this.pieceCode === this.pieceCode.toUpperCase() ? 'white' : 'black';
|
||||
const pieceName = this.getPieceName(this.pieceCode.toLowerCase());
|
||||
return `/arabian-chess/sprites/pieces/${color}_${pieceName}.png`;
|
||||
const isWhite = this.pieceCode === this.pieceCode.toUpperCase();
|
||||
const pieceCode = this.pieceCode.toLowerCase();
|
||||
|
||||
if (this.boardTheme === 'classic') {
|
||||
const colorPrefix = isWhite ? 'w' : 'b';
|
||||
const classicPieceName = this.getClassicPieceName(pieceCode);
|
||||
return `/assets/ChessAssets/${colorPrefix}_${classicPieceName}.png`;
|
||||
}
|
||||
|
||||
const arabianColor = isWhite ? 'white' : 'black';
|
||||
const arabianPieceName = this.getArabianPieceName(pieceCode);
|
||||
return `/assets/arabian-chess/sprites/pieces/${arabianColor}_${arabianPieceName}.png`;
|
||||
}
|
||||
|
||||
private getPieceName(piece: string): string {
|
||||
private getArabianPieceName(piece: string): string {
|
||||
switch (piece) {
|
||||
case 'k':
|
||||
return 'king';
|
||||
@@ -37,4 +65,23 @@ export class ChessPieceComponent {
|
||||
return 'pawn';
|
||||
}
|
||||
}
|
||||
|
||||
private getClassicPieceName(piece: string): string {
|
||||
switch (piece) {
|
||||
case 'k':
|
||||
return 'King';
|
||||
case 'q':
|
||||
return 'Queen';
|
||||
case 'r':
|
||||
return 'Rook';
|
||||
case 'b':
|
||||
return 'Bishop';
|
||||
case 'n':
|
||||
return 'Knight';
|
||||
case 'p':
|
||||
return 'Pawn';
|
||||
default:
|
||||
return 'Pawn';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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,6 +1,16 @@
|
||||
@import '../../button-template.css';
|
||||
|
||||
.game-shell {
|
||||
min-height: 100dvh;
|
||||
padding: clamp(var(--size-md), 2vw, var(--size-xl));
|
||||
background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-secondary-mint) 100%);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
:host-context(html[data-theme='dark']) .game-shell {
|
||||
background:
|
||||
radial-gradient(circle at top, rgba(185, 194, 218, 0.16) 0%, transparent 35%),
|
||||
linear-gradient(180deg, #0f1f2e 0%, #17293d 52%, #0b1420 100%);
|
||||
}
|
||||
|
||||
.game-card {
|
||||
@@ -13,8 +23,14 @@
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
:host-context(html[data-theme='dark']) .game-shell .game-card {
|
||||
background: rgba(26, 47, 71, 0.88);
|
||||
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: var(--size-xl);
|
||||
margin-bottom: var(--size-xl);
|
||||
}
|
||||
|
||||
h1,
|
||||
@@ -22,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;
|
||||
}
|
||||
@@ -33,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;
|
||||
}
|
||||
@@ -48,6 +70,39 @@ h2 {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.board-theme-card {
|
||||
background: var(--color-bg-card);
|
||||
border: var(--border-width) solid var(--color-border);
|
||||
border-radius: var(--border-radius-md);
|
||||
padding: var(--size-md-padding);
|
||||
display: grid;
|
||||
gap: var(--size-sm);
|
||||
}
|
||||
|
||||
.board-theme-card h3 {
|
||||
margin: 0;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.board-theme-group {
|
||||
display: flex;
|
||||
gap: var(--size-md);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.board-theme-option {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--size-xs);
|
||||
color: var(--color-text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.board-theme-option input {
|
||||
accent-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.move-card {
|
||||
padding: var(--size-lg-padding);
|
||||
}
|
||||
@@ -62,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);
|
||||
@@ -70,6 +129,148 @@ h2 {
|
||||
container-type: size;
|
||||
}
|
||||
|
||||
:host-context(html[data-theme='dark']) .game-shell .board-section,
|
||||
:host-context(html[data-theme='dark']) .game-shell .timer-card,
|
||||
:host-context(html[data-theme='dark']) .game-shell .history-card,
|
||||
:host-context(html[data-theme='dark']) .game-shell .export-card,
|
||||
:host-context(html[data-theme='dark']) .game-shell .board-theme-card,
|
||||
:host-context(html[data-theme='dark']) .game-shell .player-timer {
|
||||
background: rgba(45, 74, 111, 0.72);
|
||||
}
|
||||
|
||||
:host-context(html[data-theme='dark']) .game-shell .export-text {
|
||||
background: rgba(26, 47, 71, 0.9);
|
||||
}
|
||||
|
||||
:host-context(html[data-theme='dark']) .game-shell .game-completion-alert {
|
||||
background: linear-gradient(135deg, rgba(74, 124, 124, 0.35) 0%, rgba(90, 111, 165, 0.35) 100%);
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.timer-card,
|
||||
.history-card,
|
||||
.export-card {
|
||||
background: var(--color-bg-card);
|
||||
border: var(--border-width) solid var(--color-border);
|
||||
border-radius: var(--border-radius-md);
|
||||
padding: var(--size-lg-padding);
|
||||
display: grid;
|
||||
gap: var(--size-md);
|
||||
}
|
||||
|
||||
.timer-card h2,
|
||||
.history-card h2,
|
||||
.export-card h2 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.history-list {
|
||||
margin: 0;
|
||||
padding-left: 1.1rem;
|
||||
display: grid;
|
||||
gap: var(--size-xs);
|
||||
max-height: 180px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.history-list li {
|
||||
color: var(--color-text-primary);
|
||||
display: flex;
|
||||
gap: var(--size-sm);
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.history-number {
|
||||
font-weight: 700;
|
||||
min-width: 1.8rem;
|
||||
}
|
||||
|
||||
.history-move {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.history-empty {
|
||||
margin: 0;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.player-timer {
|
||||
background: var(--color-bg-input);
|
||||
border: var(--border-width) solid var(--color-border);
|
||||
border-radius: var(--border-radius-md);
|
||||
padding: var(--size-md-padding);
|
||||
}
|
||||
|
||||
.active-timer {
|
||||
box-shadow: 0 0 0 3px rgba(185, 218, 209, 0.25);
|
||||
}
|
||||
|
||||
.timer-label {
|
||||
margin: 0;
|
||||
color: var(--color-text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.timer-value {
|
||||
margin: var(--size-xs) 0 0;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 1.35rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.export-mode-group {
|
||||
display: flex;
|
||||
gap: var(--size-lg);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.export-mode-option {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--size-sm);
|
||||
color: var(--color-text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.export-mode-option input {
|
||||
accent-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.export-text {
|
||||
width: 100%;
|
||||
min-height: 140px;
|
||||
border: var(--border-width) solid var(--color-border);
|
||||
border-radius: var(--border-radius-md);
|
||||
background: var(--color-bg-input);
|
||||
color: var(--color-text-primary);
|
||||
padding: var(--size-md-padding);
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.export-button {
|
||||
width: fit-content;
|
||||
border: var(--button-border);
|
||||
border-radius: var(--button-radius);
|
||||
background: var(--color-bg-button);
|
||||
color: var(--color-text-primary);
|
||||
font-weight: 700;
|
||||
padding: var(--button-padding);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.export-button:hover {
|
||||
background: var(--color-bg-button-hover);
|
||||
color: var(--color-text-button-hover);
|
||||
}
|
||||
|
||||
.export-note {
|
||||
margin: 0;
|
||||
color: var(--color-text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.alert {
|
||||
border-radius: var(--border-radius-sm);
|
||||
border: var(--border-width) solid var(--color-border);
|
||||
@@ -126,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 {
|
||||
@@ -135,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 {
|
||||
@@ -163,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 {
|
||||
@@ -173,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 {
|
||||
@@ -195,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">
|
||||
<app-promotion-dialog
|
||||
[isOpen]="facade.isPromotionDialogOpen"
|
||||
(promotionSelected)="facade.onPromotionSelected($event)"
|
||||
(closed)="facade.onPromotionClosed()"
|
||||
/>
|
||||
<main class="game-shell" [class.theme-dark]="isDarkMode">
|
||||
<app-promotion-dialog [isOpen]="facade.isPromotionDialogOpen" (promotionSelected)="facade.onPromotionSelected($event)"
|
||||
(closed)="facade.onPromotionClosed()" />
|
||||
|
||||
<section class="game-card">
|
||||
<header class="mb-3">
|
||||
@@ -13,79 +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 - FEN Import -->
|
||||
<div class="col-lg-3 col-md-6 col-12 order-lg-1 order-2">
|
||||
<app-input-card
|
||||
label="Import FEN"
|
||||
placeholder="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
|
||||
buttonLabel="Load FEN"
|
||||
inputType="textarea"
|
||||
[value]="facade.fenInput"
|
||||
cardClass="fen-card"
|
||||
(valueChange)="facade.fenInput = $event"
|
||||
(buttonClick)="facade.importFen()"
|
||||
/>
|
||||
</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"
|
||||
(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">
|
||||
<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 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>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Right Sidebar - PGN Import -->
|
||||
<div class="col-lg-3 col-md-6 col-12 order-lg-3 order-3">
|
||||
<app-input-card
|
||||
label="Import PGN"
|
||||
placeholder="1. e4 e5 2. Nf3 Nc6 *"
|
||||
buttonLabel="Load PGN"
|
||||
inputType="textarea"
|
||||
[value]="facade.pgnInput"
|
||||
cardClass="pgn-card"
|
||||
(valueChange)="facade.pgnInput = $event"
|
||||
(buttonClick)="facade.importPgn()"
|
||||
/>
|
||||
</div>
|
||||
<app-input-card label="Play move (UCI)" placeholder="e2e4" buttonLabel="Send Move" inputType="input"
|
||||
[value]="facade.moveInput" cardClass="move-card" hintText="Click your piece to highlight legal targets."
|
||||
(valueChange)="facade.moveInput = $event" (buttonClick)="facade.submitMove()" />
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Right Sidebar - Export -->
|
||||
<div class="col-lg-3 col-md-6 col-12 order-lg-3 order-3">
|
||||
<section class="history-card">
|
||||
<h2>Move History</h2>
|
||||
|
||||
@if (facade.state.moves.length === 0) {
|
||||
<p class="history-empty">No moves yet.</p>
|
||||
} @else {
|
||||
<ol class="history-list">
|
||||
@for (move of facade.state.moves; track $index) {
|
||||
<li>
|
||||
<span class="history-number">{{ $index + 1 }}.</span>
|
||||
<span class="history-move">{{ move }}</span>
|
||||
</li>
|
||||
}
|
||||
</ol>
|
||||
}
|
||||
</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>
|
||||
|
||||
<textarea class="export-text" [value]="exportValue"
|
||||
[placeholder]="exportType === 'fen' ? 'FEN will appear here' : 'PGN will appear here'" rows="8"
|
||||
readonly></textarea>
|
||||
|
||||
<button type="button" class="app-btn w-100" (click)="completeExport()">Done</button>
|
||||
|
||||
@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>
|
||||
@@ -1,5 +1,5 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component, DestroyRef, OnInit, inject } from '@angular/core';
|
||||
import { Component, DestroyRef, OnDestroy, OnInit, inject } from '@angular/core';
|
||||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { ActivatedRoute, RouterLink } from '@angular/router';
|
||||
@@ -8,6 +8,16 @@ import { InputCardComponent } from '../../components/input-card/input-card.compo
|
||||
import { PromotionDialogComponent } from '../../components/promotion-dialog/promotion-dialog.component';
|
||||
import { GameFacade } from './game.facade';
|
||||
|
||||
type TimerTurn = 'white' | 'black';
|
||||
type BoardTheme = 'arabian' | 'classic';
|
||||
|
||||
interface TimerSnapshot {
|
||||
whiteSeconds: number;
|
||||
blackSeconds: number;
|
||||
turn: TimerTurn;
|
||||
savedAt: number;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-game',
|
||||
standalone: true,
|
||||
@@ -16,12 +26,28 @@ import { GameFacade } from './game.facade';
|
||||
templateUrl: './game.component.html',
|
||||
styleUrl: './game.component.css'
|
||||
})
|
||||
export class GameComponent implements OnInit {
|
||||
export class GameComponent implements OnInit, OnDestroy {
|
||||
private static readonly TIMER_START_SECONDS = 10 * 60;
|
||||
private static readonly BOARD_THEME_STORAGE_KEY = 'nowchess.boardTheme';
|
||||
private readonly route = inject(ActivatedRoute);
|
||||
private readonly destroyRef = inject(DestroyRef);
|
||||
readonly facade = inject(GameFacade);
|
||||
whiteTimerSeconds = GameComponent.TIMER_START_SECONDS;
|
||||
blackTimerSeconds = GameComponent.TIMER_START_SECONDS;
|
||||
exportType: 'fen' | 'pgn' = 'fen';
|
||||
boardTheme: BoardTheme = 'arabian';
|
||||
isDarkMode = false;
|
||||
exportValue = '';
|
||||
exportNotice = '';
|
||||
private timerIntervalId: number | null = null;
|
||||
private activeGameId = '';
|
||||
|
||||
ngOnInit(): void {
|
||||
this.applyIncomingTheme();
|
||||
this.syncThemeFromDocument();
|
||||
this.boardTheme = this.resolveStoredBoardTheme();
|
||||
this.startDummyTimers();
|
||||
|
||||
this.route.paramMap.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((paramMap) => {
|
||||
const id = paramMap.get('gameId');
|
||||
if (!id) {
|
||||
@@ -30,7 +56,203 @@ export class GameComponent implements OnInit {
|
||||
return;
|
||||
}
|
||||
|
||||
this.activeGameId = id;
|
||||
this.restoreTimers(id);
|
||||
this.facade.setGameId(id);
|
||||
this.syncExportValue();
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (this.timerIntervalId !== null) {
|
||||
window.clearInterval(this.timerIntervalId);
|
||||
}
|
||||
|
||||
this.persistTimers(this.resolveCurrentTurn());
|
||||
}
|
||||
|
||||
private syncThemeFromDocument(): void {
|
||||
this.isDarkMode = document.documentElement.getAttribute('data-theme') === 'dark';
|
||||
}
|
||||
|
||||
private applyIncomingTheme(): void {
|
||||
const incomingTheme = window.history.state?.theme;
|
||||
if (incomingTheme === 'dark') {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
localStorage.setItem('theme', 'dark');
|
||||
return;
|
||||
}
|
||||
|
||||
if (incomingTheme === 'light') {
|
||||
document.documentElement.removeAttribute('data-theme');
|
||||
localStorage.removeItem('theme');
|
||||
}
|
||||
}
|
||||
|
||||
setExportType(type: 'fen' | 'pgn'): void {
|
||||
this.exportType = type;
|
||||
this.exportNotice = '';
|
||||
this.syncExportValue();
|
||||
}
|
||||
|
||||
setBoardTheme(theme: BoardTheme): void {
|
||||
this.boardTheme = theme;
|
||||
localStorage.setItem(GameComponent.BOARD_THEME_STORAGE_KEY, theme);
|
||||
}
|
||||
|
||||
completeExport(): void {
|
||||
this.syncExportValue();
|
||||
if (!this.exportValue.trim()) {
|
||||
this.exportNotice = 'Nothing to export yet.';
|
||||
return;
|
||||
}
|
||||
|
||||
if (!navigator.clipboard?.writeText) {
|
||||
this.exportNotice = 'Export is ready in the text box.';
|
||||
return;
|
||||
}
|
||||
|
||||
void navigator.clipboard
|
||||
.writeText(this.exportValue)
|
||||
.then(() => {
|
||||
this.exportNotice = 'Copied to clipboard.';
|
||||
})
|
||||
.catch(() => {
|
||||
this.exportNotice = 'Export is ready in the text box.';
|
||||
});
|
||||
}
|
||||
|
||||
formatTimer(totalSeconds: number): string {
|
||||
const safeSeconds = Math.max(0, totalSeconds);
|
||||
const minutes = Math.floor(safeSeconds / 60)
|
||||
.toString()
|
||||
.padStart(2, '0');
|
||||
const seconds = (safeSeconds % 60).toString().padStart(2, '0');
|
||||
return `${minutes}:${seconds}`;
|
||||
}
|
||||
|
||||
private startDummyTimers(): void {
|
||||
if (this.timerIntervalId !== null) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.timerIntervalId = window.setInterval(() => {
|
||||
this.tickDummyTimers();
|
||||
this.syncExportValue();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
private tickDummyTimers(): void {
|
||||
const state = this.facade.state;
|
||||
if (!state || this.facade.loading || this.facade.isGameFinished) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (state.turn === 'white') {
|
||||
this.whiteTimerSeconds = Math.max(0, this.whiteTimerSeconds - 1);
|
||||
this.persistTimers('white');
|
||||
return;
|
||||
}
|
||||
|
||||
this.blackTimerSeconds = Math.max(0, this.blackTimerSeconds - 1);
|
||||
this.persistTimers('black');
|
||||
}
|
||||
|
||||
private syncExportValue(): void {
|
||||
const state = this.facade.state;
|
||||
if (!state) {
|
||||
this.exportValue = '';
|
||||
return;
|
||||
}
|
||||
|
||||
this.exportValue = this.exportType === 'fen' ? state.fen : state.pgn;
|
||||
}
|
||||
|
||||
private restoreTimers(gameId: string): void {
|
||||
const fallbackTurn = this.resolveCurrentTurn();
|
||||
const rawSnapshot = localStorage.getItem(this.getTimerStorageKey(gameId));
|
||||
if (!rawSnapshot) {
|
||||
this.resetTimers();
|
||||
this.persistTimers(fallbackTurn);
|
||||
return;
|
||||
}
|
||||
|
||||
const snapshot = this.parseSnapshot(rawSnapshot);
|
||||
if (!snapshot) {
|
||||
this.resetTimers();
|
||||
this.persistTimers(fallbackTurn);
|
||||
return;
|
||||
}
|
||||
|
||||
this.applySnapshot(snapshot);
|
||||
this.persistTimers(snapshot.turn);
|
||||
}
|
||||
|
||||
private parseSnapshot(rawSnapshot: string): TimerSnapshot | null {
|
||||
try {
|
||||
const parsed = JSON.parse(rawSnapshot) as Partial<TimerSnapshot>;
|
||||
if (
|
||||
typeof parsed.whiteSeconds !== 'number' ||
|
||||
typeof parsed.blackSeconds !== 'number' ||
|
||||
(parsed.turn !== 'white' && parsed.turn !== 'black') ||
|
||||
typeof parsed.savedAt !== 'number'
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
whiteSeconds: Math.max(0, Math.floor(parsed.whiteSeconds)),
|
||||
blackSeconds: Math.max(0, Math.floor(parsed.blackSeconds)),
|
||||
turn: parsed.turn,
|
||||
savedAt: parsed.savedAt
|
||||
};
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
private applySnapshot(snapshot: TimerSnapshot): void {
|
||||
const elapsedSeconds = Math.max(0, Math.floor((Date.now() - snapshot.savedAt) / 1000));
|
||||
this.whiteTimerSeconds = snapshot.whiteSeconds;
|
||||
this.blackTimerSeconds = snapshot.blackSeconds;
|
||||
|
||||
if (snapshot.turn === 'white') {
|
||||
this.whiteTimerSeconds = Math.max(0, this.whiteTimerSeconds - elapsedSeconds);
|
||||
return;
|
||||
}
|
||||
|
||||
this.blackTimerSeconds = Math.max(0, this.blackTimerSeconds - elapsedSeconds);
|
||||
}
|
||||
|
||||
private persistTimers(turn: TimerTurn): void {
|
||||
if (!this.activeGameId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const snapshot: TimerSnapshot = {
|
||||
whiteSeconds: this.whiteTimerSeconds,
|
||||
blackSeconds: this.blackTimerSeconds,
|
||||
turn,
|
||||
savedAt: Date.now()
|
||||
};
|
||||
localStorage.setItem(this.getTimerStorageKey(this.activeGameId), JSON.stringify(snapshot));
|
||||
}
|
||||
|
||||
private resolveCurrentTurn(): TimerTurn {
|
||||
return this.facade.state?.turn ?? 'white';
|
||||
}
|
||||
|
||||
private resetTimers(): void {
|
||||
this.whiteTimerSeconds = GameComponent.TIMER_START_SECONDS;
|
||||
this.blackTimerSeconds = GameComponent.TIMER_START_SECONDS;
|
||||
}
|
||||
|
||||
private getTimerStorageKey(gameId: string): string {
|
||||
return `nowchess.timer.${gameId}`;
|
||||
}
|
||||
|
||||
private resolveStoredBoardTheme(): BoardTheme {
|
||||
const stored = localStorage.getItem(GameComponent.BOARD_THEME_STORAGE_KEY);
|
||||
return stored === 'classic' ? 'classic' : 'arabian';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 }
|
||||
}));
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user