feat: login and register, style is not ready

.devcontainer/devcontainer-lock.json

@@ -0,0 +1,9 @@
+{
+  "features": {
+    "ghcr.io/devcontainer-config/features/dot-config:4": {
+      "version": "4.0.0",
+      "resolved": "ghcr.io/devcontainer-config/features/dot-config@sha256:d9ca770ccb218e619d5725fd50f00dfacdf582d92a8c3901f11b53b1caddd878",
+      "integrity": "sha256:d9ca770ccb218e619d5725fd50f00dfacdf582d92a8c3901f11b53b1caddd878"
+    }
+  }
+}

.devcontainer/devcontainer.json

@@ -0,0 +1,25 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/alpine
+{
+	"name": "Alpine",
+	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+	"image": "mcr.microsoft.com/devcontainers/base:alpine-3.22",
+	"features": {
+		"ghcr.io/devcontainer-config/features/dot-config:4": {}
+	}
+
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "uname -a",
+
+	// Configure tool-specific properties.
+	// "customizations": {},
+
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
+}

CHANGELOG.md

@@ -1,20 +0,0 @@
-## 0.0.0 (2026-05-12)
-
-### Features
-
-* added bot, light and dark mode ([2de003e](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/2de003e497baee72f998d0d805ca1e58aababe48))
-* added web view 1v1 ([1828fa3](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/1828fa3275ddb8ce6bb90a9f6a970ec428ebce3a))
-* NCS-63 User account implementation ([#2](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/2)) ([ff75c8c](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/ff75c8ce2fad54137f04a14c15bc1d4a38fa9bb8))
-* NCS-75 Frontend Deployment Dockerfile ([#4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/4)) ([bd7ec58](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/bd7ec581e38b5d8e775741bf16e19b4dc67b979e))
-
-### Bug Fixes
-
-* build issues ([36d72fd](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/36d72fd6cda41be51d28f8ac307dcdbcd31afa91))
-* cleaner components seperation ([8b090e4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/8b090e4d96c64c0adb253e3aefad7930108ccfb9))
-* gitignore ([4da882f](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/4da882f481ba7a008aac868fb37de7cb2bafea5d))
-* GITIGNORE ([8df2d05](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/8df2d0550ab17c9afb2d19c414eac700a75add02))
-* npm ([c11c1d4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/c11c1d4dce9de4bd5b463e891eebf961b37feb04))
-* removed .vs ([2833ead](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/2833ead7be3b47ee5c188d2d21b7326cb3cb3f26))
-* removed cache files ([7ee59c4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/7ee59c434bf137a08fd560bbc02ceefbcfd90f04))
-* size of pieces and removed text view of the game state ([c60d00f](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/c60d00f9d25247504845654615065fbccd7fe448))
-* structure ([3e8c7c4](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/3e8c7c4057e55aeec7cee8c24f6751ff24912c93))

Dockerfile

@@ -1,25 +0,0 @@
-FROM --platform=$BUILDPLATFORM node:lts-alpine3.23 AS builder
-
-WORKDIR /app
-
-COPY package*.json ./
-
-RUN npm install
-COPY . .
-RUN npm run build
-
-FROM --platform=$TARGETPLATFORM nginx:stable-alpine AS production
-
-RUN apk add --no-cache gettext
-
-RUN rm -rf /usr/share/nginx/html/*
-COPY --from=builder /app/dist/nowchess-frontend/browser /usr/share/nginx/html
-
-COPY nginx.conf /etc/nginx/conf.d/default.conf
-
-COPY public/env.template.js /usr/share/nginx/html/env.template.js
-COPY docker-entrypoint.sh /docker-entrypoint.sh
-RUN chmod +x /docker-entrypoint.sh
-
-EXPOSE 80
-ENTRYPOINT ["/docker-entrypoint.sh"]

angular.json

@@ -47,25 +47,17 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "1MB",
+                  "maximumWarning": "500kB",
-                  "maximumError": "5MB"
+                  "maximumError": "1MB"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "1MB",
+                  "maximumWarning": "12kB",
-                  "maximumError": "5MB"
+                  "maximumError": "20kB"
                 }
               ],
               "outputHashing": "all"
             },
-            "staging": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.staging.ts"
-                }
-              ]
-            },
             "development": {
               "fileReplacements": [
                 {
@@ -91,9 +83,6 @@
             "production": {
               "buildTarget": "nowchess-frontend:build:production"
             },
-            "staging": {
-              "buildTarget": "nowchess-frontend:build:staging"
-            },
             "development": {
               "buildTarget": "nowchess-frontend:build:development"
             }

docker-entrypoint.sh

@@ -1,18 +0,0 @@
-#!/bin/sh
-set -e
-
-# Replace placeholders in env.template.js with environment variables and write env.js
-TEMPLATE_PATH="/usr/share/nginx/html/env.template.js"
-TARGET_PATH="/usr/share/nginx/html/env.js"
-
-if [ -f "$TEMPLATE_PATH" ]; then
-  echo "Rendering runtime config from $TEMPLATE_PATH"
-  echo "Using environment variables:"
-  printenv
-  echo "----"
-  envsubst < "$TEMPLATE_PATH" > "$TARGET_PATH"
-else
-  echo "No runtime template found at $TEMPLATE_PATH, skipping"
-fi
-
-exec nginx -g 'daemon off;'

nginx.conf

@@ -1,22 +0,0 @@
-server {
-    listen       80;
-    server_name  localhost;
-
-    location / {
-        root   /usr/share/nginx/html;
-        index  index.html index.htm;
-        try_files $uri $uri/ /index.html;
-    }
-
-    location /env.js {
-        root /usr/share/nginx/html;
-        default_type application/javascript;
-        expires -1;
-        add_header 'Cache-Control' 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
-    }
-
-    error_page   500 502 503 504  /50x.html;
-    location = /50x.html {
-        root   /usr/share/nginx/html;
-    }
-}

package.json

@@ -4,8 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "ng build --configuration production",
+    "build": "ng build",
-    "build:staging": "ng build --configuration staging",
     "watch": "ng build --watch --configuration development",
     "test": "ng test"
   },

proxy.conf.json

@@ -15,4 +15,4 @@
     "changeOrigin": true,
     "ws": true
   }
-}
+}

public/env.template.js

@@ -1,4 +0,0 @@
-window.__RUNTIME_CONFIG__ = {
-  API_URL: "${API_URL}",
-  WEBSOCKET_URL: "${WEBSOCKET_URL}"
-};

src/app/app.routes.ts

@@ -1,11 +1,9 @@
 import { Routes } from '@angular/router';
 import { GameComponent } from './pages/game/game.component';
 import { WelcomeComponent } from './pages/welcome/welcome.component';
-import { ProfileComponent } from './pages/profile/profile.component';
 
 export const routes: Routes = [
   { path: '', component: WelcomeComponent },
-  { path: 'profile', component: ProfileComponent },
   { path: 'game/:gameId', component: GameComponent },
   { path: '**', redirectTo: '' }
 ];

src/app/button-template.css

@@ -1,69 +0,0 @@
-/* Shared Button Template - All Button Styles Consolidated */
-
-.app-btn {
-  background: var(--btn-bg);
-  color: var(--btn-fg);
-  border: none;
-  border-radius: 2px;
-  padding: 0.6rem 1rem;
-  font-family: 'Space Mono', monospace;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 1px;
-  cursor: pointer;
-  box-shadow: var(--btn-glow);
-  transition: transform 0.2s ease, filter 0.2s ease, background 1.6s ease, box-shadow 1.6s ease;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  outline: none;
-  text-transform: uppercase;
-}
-
-.app-btn:hover:enabled {
-  transform: scale(1.05);
-  filter: brightness(1.15);
-}
-
-.app-btn:active:enabled {
-  transform: scale(0.98);
-}
-
-.app-btn:disabled {
-  opacity: 0.65;
-  cursor: not-allowed;
-  box-shadow: none;
-}
-
-.app-btn.w-100 {
-  width: 100%;
-}
-
-/* Dialog Button Layouts */
-.dialog-actions {
-  display: flex;
-  gap: 0.6rem;
-  flex-wrap: wrap;
-}
-
-.dialog-actions .app-btn {
-  flex: 1;
-  min-width: 120px;
-}
-
-/* Promotion Dialog Button Variant */
-.promotion-choice {
-  flex-direction: column;
-  height: auto;
-  padding: 16px;
-  gap: 8px;
-}
-
-.promotion-choice .piece-symbol {
-  font-size: 32px;
-  line-height: 1;
-}
-
-.promotion-choice .piece-label {
-  font-size: 11px;
-}

src/app/components/input-card/input-card.component.css

@@ -1,5 +1,3 @@
-@import '../../button-template.css';
-
 .input-card {
   background: var(--color-bg-card);
   border: var(--border-width) solid var(--color-border);
@@ -42,6 +40,22 @@
 
 }
 
+.input-card .btn {
+  border: var(--button-border);
+  border-radius: var(--border-radius-sm);
+  background: var(--color-bg-button);
+  color: var(--color-text-primary);
+  padding: var(--button-padding);
+  cursor: pointer;
+  font-weight: 600;
+  transition: background-color 0.2s, color 0.2s;
+}
+
+.input-card .btn:hover {
+  background: var(--color-bg-button-hover);
+  color: var(--color-text-button-hover);
+}
+
 .hint-text {
   margin: 0;
   color: var(--color-text-primary);

src/app/components/input-card/input-card.component.html

@@ -2,18 +2,30 @@
   <label>{{ label }}</label>
 
   @if (inputType === 'textarea') {
-  <textarea #textareaInput [placeholder]="placeholder" [value]="value" [rows]="rows"
+    <textarea
-    (input)="onValueChange(textareaInput.value)" class="form-input"></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)"
+    <input
-    class="form-input" />
+      #textInput
+      type="text"
+      [placeholder]="placeholder"
+      [value]="value"
+      (input)="onValueChange(textInput.value)"
+      class="form-input"
+    />
   }
 
-  <button type="button" class="app-btn w-100" (click)="onButtonClick()">
+  <button type="button" class="btn w-100" (click)="onButtonClick()">
     {{ buttonLabel }}
   </button>
 
   @if (hintText) {
-  <p class="hint-text">{{ hintText }}</p>
+    <p class="hint-text">{{ hintText }}</p>
   }
-</section>
+</section>

src/app/components/login-dialog/login-dialog.component.css

@@ -1,5 +1,3 @@
-@import '../../button-template.css';
-
 .dialog-overlay {
   position: fixed;
   inset: 0;
@@ -29,6 +27,37 @@
   text-align: center;
 }
 
+.dialog-actions {
+  display: flex;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+}
+
+.dialog-btn {
+  flex: 1;
+  min-width: 120px;
+  background: var(--btn-bg);
+  color: var(--btn-fg);
+  border: none;
+  border-radius: 2px;
+  padding: 0.55rem 0.75rem;
+  font-family: 'Space Mono', monospace;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 1px;
+  cursor: pointer;
+  box-shadow: var(--btn-glow);
+}
+
+.dialog-btn:hover:enabled {
+  filter: brightness(1.12);
+}
+
+.dialog-btn:disabled {
+  opacity: 0.65;
+  cursor: not-allowed;
+}
+
 .dialog-input {
   width: 100%;
   background: rgba(4, 4, 20, 0.62);

src/app/components/login-dialog/login-dialog.component.html

@@ -22,9 +22,9 @@
       }
 
       <div class="dialog-actions">
-        <button type="button" class="app-btn" (click)="openRegister()">Create account</button>
+        <button type="button" class="dialog-btn" (click)="openRegister()">Create account</button>
-        <button type="button" class="app-btn" (click)="closeDialog()">Cancel</button>
+        <button type="button" class="dialog-btn" (click)="closeDialog()">Cancel</button>
-        <button type="submit" class="app-btn" [disabled]="isLoading || loginForm.invalid">
+        <button type="button" class="dialog-btn" (click)="onSubmit()" [disabled]="isLoading || loginForm.invalid">
           @if (isLoading) {
           <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
           }

src/app/components/promotion-dialog/promotion-dialog.component.css

@@ -1,5 +1,3 @@
-@import '../../button-template.css';
-
 .promotion-dialog-overlay {
   position: fixed;
   top: 0;
@@ -22,10 +20,9 @@
 }
 
 .promotion-dialog {
-  background: var(--dlg-bg, white);
+  background: white;
-  border: 1.5px solid var(--dlg-border, #ddd);
+  border-radius: 8px;
-  border-radius: 4px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-  box-shadow: var(--bb-glow, 0 4px 16px rgba(0, 0, 0, 0.2));
   max-width: 400px;
   width: 90%;
   animation: slideUp 0.3s ease;
@@ -47,14 +44,32 @@
   justify-content: space-between;
   align-items: center;
   padding: 20px;
-  border-bottom: 1px solid var(--bb-border, #e0e0e0);
+  border-bottom: 1px solid #e0e0e0;
 
   h3 {
     margin: 0;
-    font-family: 'Bebas Neue', sans-serif;
     font-size: 18px;
     font-weight: 600;
-    color: var(--bb-title, #333);
+    color: #333;
+  }
+
+  .close-btn {
+    background: none;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    color: #999;
+    padding: 0;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.2s;
+
+    &:hover {
+      color: #333;
+    }
   }
 }
 
@@ -65,8 +80,7 @@
 .promotion-prompt {
   margin: 0 0 20px 0;
   text-align: center;
-  color: var(--bb-title);
+  color: #666;
-  opacity: 0.8;
   font-size: 14px;
 }
 
@@ -75,3 +89,43 @@
   grid-template-columns: 1fr 1fr;
   gap: 12px;
 }
+
+.promotion-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 16px;
+  background: #f5f5f5;
+  border: 2px solid #ddd;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-family: inherit;
+
+  &:hover {
+    background: #e8e8e8;
+    border-color: #999;
+    transform: translateY(-2px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  &:active {
+    transform: translateY(0);
+    box-shadow: none;
+  }
+
+  .piece-symbol {
+    font-size: 32px;
+    line-height: 1;
+  }
+
+  .piece-label {
+    font-size: 12px;
+    font-weight: 500;
+    color: #666;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+}

src/app/components/promotion-dialog/promotion-dialog.component.html

@@ -2,22 +2,25 @@
   <div class="promotion-dialog">
     <div class="promotion-header">
       <h3>Pawn Promotion</h3>
-      <button class="app-btn" (click)="close()" aria-label="Close"
+      <button class="close-btn" (click)="close()" aria-label="Close">&times;</button>
-        style="padding:0.2rem 0.5rem;min-width:unset;">&times;</button>
     </div>
-
+    
     <div class="promotion-body">
       <p class="promotion-prompt">Choose a piece to promote your pawn to:</p>
-
+      
       <div class="promotion-options">
         @for (piece of promotionPieces; track piece.type) {
-        <button type="button" class="app-btn promotion-choice" [attr.data-piece]="piece.type"
+          <button
-          (click)="selectPromotion(piece.type)" [title]="piece.label">
+            class="promotion-button"
-          <span class="piece-symbol">{{ piece.symbol }}</span>
+            [attr.data-piece]="piece.type"
-          <span class="piece-label">{{ piece.label }}</span>
+            (click)="selectPromotion(piece.type)"
-        </button>
+            [title]="piece.label"
+          >
+            <span class="piece-symbol">{{ piece.symbol }}</span>
+            <span class="piece-label">{{ piece.label }}</span>
+          </button>
         }
       </div>
     </div>
   </div>
-</div>
+</div>

src/app/components/register-dialog/register-dialog.component.css

@@ -1,5 +1,3 @@
-@import '../../button-template.css';
-
 .dialog-overlay {
   position: fixed;
   inset: 0;
@@ -29,6 +27,37 @@
   text-align: center;
 }
 
+.dialog-actions {
+  display: flex;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+}
+
+.dialog-btn {
+  flex: 1;
+  min-width: 120px;
+  background: var(--btn-bg);
+  color: var(--btn-fg);
+  border: none;
+  border-radius: 2px;
+  padding: 0.55rem 0.75rem;
+  font-family: 'Space Mono', monospace;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 1px;
+  cursor: pointer;
+  box-shadow: var(--btn-glow);
+}
+
+.dialog-btn:hover:enabled {
+  filter: brightness(1.12);
+}
+
+.dialog-btn:disabled {
+  opacity: 0.65;
+  cursor: not-allowed;
+}
+
 .dialog-input {
   width: 100%;
   background: rgba(4, 4, 20, 0.62);

src/app/components/register-dialog/register-dialog.component.html

@@ -29,9 +29,9 @@
       }
 
       <div class="dialog-actions">
-        <button type="button" class="app-btn" (click)="openLogin()">Already have an account?</button>
+        <button type="button" class="dialog-btn" (click)="openLogin()">Already have an account?</button>
-        <button type="button" class="app-btn" (click)="closeDialog()">Cancel</button>
+        <button type="button" class="dialog-btn" (click)="closeDialog()">Cancel</button>
-        <button type="submit" class="app-btn" [disabled]="isLoading || registerForm.invalid">
+        <button type="button" class="dialog-btn" (click)="onSubmit()" [disabled]="isLoading || registerForm.invalid">
           @if (isLoading) {
           <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
           }

src/app/components/toolbar/toolbar.component.css

@@ -1,12 +1,9 @@
-@import '../../button-template.css';
-
 .navbar {
-  background: rgba(8, 6, 28, 0.85);
+  background: var(--dlg-bg);
-  backdrop-filter: blur(8px);
+  border: 1.5px solid var(--dlg-border);
-  box-shadow: 0 4px 20px rgba(0, 210, 255, 0.15);
+  box-shadow: var(--bb-glow);
-  border-bottom: 1px solid rgba(0, 210, 255, 0.2);
+  border-radius: 4px;
-  border-radius: 0;
+  padding: 0.25rem 0.75rem;
-  padding: 0.75rem 1rem;
 }
 
 .navbar-brand {
@@ -15,70 +12,8 @@
   color: var(--bb-title) !important;
   font-family: 'Bebas Neue', sans-serif;
   letter-spacing: 1px;
-  cursor: pointer;
 }
 
 .gap-2 {
   gap: 0.5rem;
 }
-
-.user-section {
-  align-items: center;
-}
-
-.me-btn {
-  background: rgba(0, 210, 255, 0.1);
-  color: var(--bb-title);
-  border: 1px solid var(--bb-border);
-  border-radius: 2px;
-  padding: 0.5rem 0.8rem;
-  font-family: 'Space Mono', monospace;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.5px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  outline: none;
-  text-transform: uppercase;
-}
-
-.me-btn:hover {
-  background: rgba(0, 210, 255, 0.2);
-  border-color: var(--bb-tag);
-  box-shadow: 0 0 10px rgba(0, 210, 255, 0.4);
-  transform: scale(1.05);
-}
-
-.me-btn:active {
-  transform: scale(0.98);
-}
-
-/* Sunset Mode */
-.sunset .navbar {
-  background: rgba(20, 5, 45, 0.85);
-  border-bottom-color: rgba(255, 64, 207, 0.2);
-  box-shadow: 0 4px 20px rgba(242, 106, 226, 0.15);
-}
-
-.sunset .me-btn {
-  background: rgba(242, 106, 226, 0.1);
-  border-color: var(--bb-border);
-}
-
-.sunset .me-btn:hover {
-  background: rgba(242, 106, 226, 0.2);
-  border-color: var(--bb-tag);
-  box-shadow: 0 0 10px rgba(242, 106, 226, 0.4);
-}
-
-.container-fluid {
-  display: flex;
-  align-items: center;
-}
-
-.ms-auto {
-  margin-left: auto;
-}

src/app/components/toolbar/toolbar.component.html

@@ -3,21 +3,19 @@
     <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()">
+        <button type="button" class="dialog-btn" (click)="toggleTheme()">
           {{ isDarkMode ? 'Light mode' : 'Dark mode' }}
         </button>
         @if (currentUser; as user) {
-        <div class="d-flex align-items-center gap-2 user-section">
+        <div class="d-flex align-items-center gap-2">
-          <button type="button" class="me-btn" (click)="goToProfile()">
+          <span style="color:var(--bb-title);font-weight:700">{{ user.username }}</span>
-            👤 {{ user.username }}
+          <button class="dialog-btn" (click)="logout()">Logout</button>
-          </button>
-          <button type="button" class="app-btn" (click)="logout()">Logout</button>
         </div>
         } @else {
-        <button type="button" class="app-btn" (click)="openLoginDialog()">
+        <button class="dialog-btn" (click)="openLoginDialog()">
           Login
         </button>
-        <button type="button" class="app-btn" (click)="openRegisterDialog()">
+        <button class="dialog-btn" (click)="openRegisterDialog()">
           Register
         </button>
         }

src/app/components/toolbar/toolbar.component.ts

@@ -1,6 +1,5 @@
 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';
@@ -21,7 +20,6 @@ export class ToolbarComponent implements OnInit {
   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;
@@ -73,10 +71,6 @@ export class ToolbarComponent implements OnInit {
     this.themeService.toggleTheme();
   }
 
-  goToProfile(): void {
-    this.router.navigate(['/profile']);
-  }
-
   onLoginSuccess(): void {
     this.closeLoginDialog();
   }

src/app/core/config.loader.ts

@@ -1,11 +0,0 @@
-/**
- * Load runtime configuration from window.__RUNTIME_CONFIG__
- * This is injected by docker-entrypoint.sh at container startup
- */
-export function loadRuntimeConfig() {
-  const config = (window as any).__RUNTIME_CONFIG__ || {};
-  return {
-    apiUrl: config.API_URL || '',
-    wsUrl: config.WEBSOCKET_URL || 'ws://localhost:8080'
-  };
-}

src/app/pages/game/game.component.css

@@ -1,5 +1,3 @@
-@import '../../button-template.css';
-
 .game-shell {
   min-height: 100dvh;
   padding: clamp(var(--size-md), 2vw, var(--size-xl));
@@ -30,7 +28,6 @@
 
 header {
   margin-bottom: var(--size-xl);
-  margin-bottom: var(--size-xl);
 }
 
 h1,
@@ -38,13 +35,9 @@ h2 {
   color: var(--color-text-primary);
   margin: 0 0 var(--size-md);
   font-size: var(--heading-h1);
-  color: var(--color-text-primary);
-  margin: 0 0 var(--size-md);
-  font-size: var(--heading-h1);
 }
 
 .meta {
-  color: var(--color-text-primary);
   color: var(--color-text-primary);
   font-size: 0.95rem;
 }
@@ -53,8 +46,6 @@ h2 {
   display: inline-block;
   margin-bottom: var(--size-sm);
   color: var(--color-text-primary);
-  margin-bottom: var(--size-sm);
-  color: var(--color-text-primary);
   text-decoration: none;
   font-weight: 600;
 }
@@ -117,10 +108,6 @@ h2 {
 }
 
 .board-section {
-  background: var(--color-bg-board);
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--border-radius-md);
-  padding: clamp(var(--size-sm), 1vw, var(--size-lg));
   background: var(--color-bg-board);
   border: var(--border-width) solid var(--color-border);
   border-radius: var(--border-radius-md);
@@ -327,7 +314,6 @@ h2 {
 @media (max-width: 991px) {
   .game-card {
     padding: clamp(var(--size-md), 1.5vw, var(--size-lg));
-    padding: clamp(var(--size-md), 1.5vw, var(--size-lg));
   }
 
   .board-section {
@@ -337,30 +323,25 @@ h2 {
   h1,
   h2 {
     font-size: var(--heading-h1-tablet);
-    font-size: var(--heading-h1-tablet);
   }
 }
 
 @media (max-width: 768px) {
   .game-shell {
     padding: clamp(var(--size-sm), 1.5vw, var(--size-lg));
-    padding: clamp(var(--size-sm), 1.5vw, var(--size-lg));
   }
 
   .game-card {
     padding: clamp(var(--size-sm), 1vw, var(--size-md));
-    padding: clamp(var(--size-sm), 1vw, var(--size-md));
   }
 
   header {
     margin-bottom: var(--size-lg);
-    margin-bottom: var(--size-lg);
   }
 
   h1,
   h2 {
     font-size: var(--heading-h1-mobile);
-    font-size: var(--heading-h1-mobile);
   }
 
   .meta {
@@ -370,8 +351,6 @@ h2 {
   .top-section {
     gap: var(--size-xs);
     margin-bottom: var(--size-xs);
-    gap: var(--size-xs);
-    margin-bottom: var(--size-xs);
   }
 
   .board-section {
@@ -382,24 +361,19 @@ h2 {
 @media (max-width: 480px) {
   .game-shell {
     padding: var(--size-sm);
-    padding: var(--size-sm);
   }
 
   .game-card {
     padding: var(--size-sm);
     border-radius: var(--border-radius-md);
-    padding: var(--size-sm);
-    border-radius: var(--border-radius-md);
   }
 
   header {
     margin-bottom: var(--size-md);
-    margin-bottom: var(--size-md);
   }
 
   h1 {
     font-size: var(--heading-h1-small);
-    font-size: var(--heading-h1-small);
   }
 
   .meta {
@@ -409,8 +383,6 @@ h2 {
   .top-section {
     gap: var(--size-xs-gap);
     margin-bottom: var(--size-xs);
-    gap: var(--size-xs-gap);
-    margin-bottom: var(--size-xs);
   }
 
   .board-section {

src/app/pages/game/game.component.html

@@ -1,6 +1,9 @@
 <main class="game-shell" [class.theme-dark]="isDarkMode">
-  <app-promotion-dialog [isOpen]="facade.isPromotionDialogOpen" (promotionSelected)="facade.onPromotionSelected($event)"
+  <app-promotion-dialog
-    (closed)="facade.onPromotionClosed()" />
+    [isOpen]="facade.isPromotionDialogOpen"
+    (promotionSelected)="facade.onPromotionSelected($event)"
+    (closed)="facade.onPromotionClosed()"
+  />
 
   <section class="game-card">
     <header class="mb-3">
@@ -10,126 +13,150 @@
     </header>
 
     @if (facade.loading) {
-    <p>Loading game state...</p>
+      <p>Loading game state...</p>
     } @else if (facade.state) {
-    @if (facade.isGameFinished && facade.gameCompletionMessage) {
+      @if (facade.isGameFinished && facade.gameCompletionMessage) {
-    <div class="game-completion-alert alert alert-success mb-3">
+        <div class="game-completion-alert alert alert-success mb-3">
-      <h2 class="completion-title">{{ facade.gameCompletionMessage }}</h2>
+          <h2 class="completion-title">{{ facade.gameCompletionMessage }}</h2>
-      <p class="completion-subtitle mb-0">
+          <p class="completion-subtitle mb-0">
-        <a routerLink="/" class="completion-link">Start a new game</a>
+            <a routerLink="/" class="completion-link">Start a new game</a>
-      </p>
+          </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>
-
+      }
-        <!-- Center - Chess Board -->
+      <div class="container-fluid">
-        <div class="col-lg-6 col-md-12 col-12 order-lg-2 order-1">
+        <div class="row g-3">
-          <section class="center-column d-flex flex-column h-100">
+          <!-- Left Sidebar - Dummy Timers -->
-            <div class="board-section flex-grow-1 d-flex align-items-center justify-content-center">
+          <div class="col-lg-3 col-md-6 col-12 order-lg-1 order-2">
-              <app-chess-board [fen]="facade.state.fen" [selectedSquare]="facade.selectedSquare"
+            <section class="timer-card">
-                [highlightedSquares]="facade.highlightedSquares" [boardTheme]="boardTheme"
+              <h2>Timers</h2>
-                (squareSelected)="facade.onBoardSquareSelected($event)" />
+              <div class="player-timer" [class.active-timer]="facade.state.turn === 'white'">
-            </div>
+                <p class="timer-label">White</p>
-
+                <p class="timer-value">{{ formatTimer(whiteTimerSeconds) }}</p>
-            <section class="top-section">
+              </div>
-              <section class="board-theme-card" aria-label="Board design chooser">
+              <div class="player-timer" [class.active-timer]="facade.state.turn === 'black'">
-                <h3>Board Design</h3>
+                <p class="timer-label">Black</p>
-                <div class="board-theme-group" role="radiogroup" aria-label="Board design">
+                <p class="timer-value">{{ formatTimer(blackTimerSeconds) }}</p>
-                  <label class="board-theme-option">
+              </div>
-                    <input type="radio" name="boardTheme" [checked]="boardTheme === 'arabian'"
-                      (change)="setBoardTheme('arabian')" />
-                    <span>Arabian</span>
-                  </label>
-
-                  <label class="board-theme-option">
-                    <input type="radio" name="boardTheme" [checked]="boardTheme === 'classic'"
-                      (change)="setBoardTheme('classic')" />
-                    <span>Classic</span>
-                  </label>
-                </div>
-              </section>
-
-              <app-input-card label="Play move (UCI)" placeholder="e2e4" buttonLabel="Send Move" inputType="input"
-                [value]="facade.moveInput" cardClass="move-card" hintText="Click your piece to highlight legal targets."
-                (valueChange)="facade.moveInput = $event" (buttonClick)="facade.submitMove()" />
             </section>
-          </section>
+          </div>
-        </div>
 
-        <!-- Right Sidebar - Export -->
+          <!-- Center - Chess Board -->
-        <div class="col-lg-3 col-md-6 col-12 order-lg-3 order-3">
+          <div class="col-lg-6 col-md-12 col-12 order-lg-2 order-1">
-          <section class="history-card">
+            <section class="center-column d-flex flex-column h-100">
-            <h2>Move History</h2>
+              <div class="board-section flex-grow-1 d-flex align-items-center justify-content-center">
+                <app-chess-board
+                  [fen]="facade.state.fen"
+                  [selectedSquare]="facade.selectedSquare"
+                  [highlightedSquares]="facade.highlightedSquares"
+                  [boardTheme]="boardTheme"
+                  (squareSelected)="facade.onBoardSquareSelected($event)"
+                />
+              </div>
 
-            @if (facade.state.moves.length === 0) {
+              <section class="top-section">
-            <p class="history-empty">No moves yet.</p>
+                <section class="board-theme-card" aria-label="Board design chooser">
-            } @else {
+                  <h3>Board Design</h3>
-            <ol class="history-list">
+                  <div class="board-theme-group" role="radiogroup" aria-label="Board design">
-              @for (move of facade.state.moves; track $index) {
+                    <label class="board-theme-option">
-              <li>
+                      <input
-                <span class="history-number">{{ $index + 1 }}.</span>
+                        type="radio"
-                <span class="history-move">{{ move }}</span>
+                        name="boardTheme"
-              </li>
+                        [checked]="boardTheme === 'arabian'"
+                        (change)="setBoardTheme('arabian')"
+                      />
+                      <span>Arabian</span>
+                    </label>
+
+                    <label class="board-theme-option">
+                      <input
+                        type="radio"
+                        name="boardTheme"
+                        [checked]="boardTheme === 'classic'"
+                        (change)="setBoardTheme('classic')"
+                      />
+                      <span>Classic</span>
+                    </label>
+                  </div>
+                </section>
+
+                <app-input-card
+                  label="Play move (UCI)"
+                  placeholder="e2e4"
+                  buttonLabel="Send Move"
+                  inputType="input"
+                  [value]="facade.moveInput"
+                  cardClass="move-card"
+                  hintText="Click your piece to highlight legal targets."
+                  (valueChange)="facade.moveInput = $event"
+                  (buttonClick)="facade.submitMove()"
+                />
+              </section>
+            </section>
+          </div>
+
+          <!-- Right Sidebar - Export -->
+          <div class="col-lg-3 col-md-6 col-12 order-lg-3 order-3">
+            <section class="history-card">
+              <h2>Move History</h2>
+
+              @if (facade.state.moves.length === 0) {
+                <p class="history-empty">No moves yet.</p>
+              } @else {
+                <ol class="history-list">
+                  @for (move of facade.state.moves; track $index) {
+                    <li>
+                      <span class="history-number">{{ $index + 1 }}.</span>
+                      <span class="history-move">{{ move }}</span>
+                    </li>
+                  }
+                </ol>
               }
-            </ol>
+            </section>
-            }
-          </section>
 
-          <section class="export-card">
+            <section class="export-card">
-            <h2>Export</h2>
+              <h2>Export</h2>
-            <div class="export-mode-group" role="radiogroup" aria-label="Export mode">
+              <div class="export-mode-group" role="radiogroup" aria-label="Export mode">
-              <label class="export-mode-option">
+                <label class="export-mode-option">
-                <input type="radio" name="exportType" [checked]="exportType === 'fen'"
+                  <input
-                  (change)="setExportType('fen')" />
+                    type="radio"
-                <span>FEN</span>
+                    name="exportType"
-              </label>
+                    [checked]="exportType === 'fen'"
-              <label class="export-mode-option">
+                    (change)="setExportType('fen')"
-                <input type="radio" name="exportType" [checked]="exportType === 'pgn'"
+                  />
-                  (change)="setExportType('pgn')" />
+                  <span>FEN</span>
-                <span>PGN</span>
+                </label>
-              </label>
+                <label class="export-mode-option">
-            </div>
+                  <input
+                    type="radio"
+                    name="exportType"
+                    [checked]="exportType === 'pgn'"
+                    (change)="setExportType('pgn')"
+                  />
+                  <span>PGN</span>
+                </label>
+              </div>
 
-            <textarea class="export-text" [value]="exportValue"
+              <textarea
-              [placeholder]="exportType === 'fen' ? 'FEN will appear here' : 'PGN will appear here'" rows="8"
+                class="export-text"
-              readonly></textarea>
+                [value]="exportValue"
+                [placeholder]="exportType === 'fen' ? 'FEN will appear here' : 'PGN will appear here'"
+                rows="8"
+                readonly
+              ></textarea>
 
-            <button type="button" class="app-btn w-100" (click)="completeExport()">Done</button>
+              <button type="button" class="export-button" (click)="completeExport()">Done</button>
 
-            @if (exportNotice) {
+              @if (exportNotice) {
-            <p class="export-note">{{ exportNotice }}</p>
+                <p class="export-note">{{ exportNotice }}</p>
-            }
+              }
-          </section>
+            </section>
+          </div>
         </div>
       </div>
-    </div>
     }
 
     @if (facade.errorMessage) {
-    <p class="alert alert-danger mt-3 mb-0">{{ facade.errorMessage }}</p>
+      <p class="alert alert-danger mt-3 mb-0">{{ facade.errorMessage }}</p>
     }
   </section>
-</main>
+</main>

src/app/pages/profile/profile.component.css

@@ -1,478 +0,0 @@
-@import '../welcome/welcome.component.css';
-
-.profile-building-container {
-  position: absolute;
-  bottom: 10%;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 15;
-}
-
-.building-wrapper {
-  position: relative;
-  width: clamp(300px, 80vw, 600px);
-  margin: 0 auto;
-}
-
-.building-structure {
-  background: linear-gradient(135deg, var(--bldg-body) 0%, var(--bldg-mid) 50%, var(--bldg-lit) 100%);
-  border: 2px solid var(--dlg-border);
-  border-radius: 8px;
-  box-shadow: var(--bb-glow), inset 0 0 20px rgba(0, 210, 255, 0.1);
-  overflow: hidden;
-}
-
-.cityscape-shell.sunset .building-structure {
-  box-shadow: var(--bb-glow), inset 0 0 20px rgba(255, 120, 40, 0.1);
-}
-
-.building-top {
-  height: 30px;
-  background: linear-gradient(180deg, var(--bldg-mid) 0%, var(--bldg-body) 100%);
-  border-bottom: 1px solid rgba(0, 210, 255, 0.3);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: bold;
-  color: var(--bb-tag);
-  font-family: 'Bebas Neue', sans-serif;
-  letter-spacing: 2px;
-  position: relative;
-}
-
-.cityscape-shell.sunset .building-top {
-  border-bottom-color: rgba(255, 120, 40, 0.3);
-}
-
-.building-top::after {
-  content: 'MY PROFILE';
-  font-size: 12px;
-}
-
-.building-main {
-  display: grid;
-  grid-template-columns: 80px 1fr 80px;
-  gap: 0;
-  padding: 20px;
-  min-height: 200px;
-  background: linear-gradient(90deg, rgba(0, 210, 255, 0.03) 0%, transparent 15%, transparent 85%, rgba(0, 210, 255, 0.03) 100%);
-  align-items: center;
-}
-
-.cityscape-shell.sunset .building-main {
-  background: linear-gradient(90deg, rgba(255, 120, 40, 0.05) 0%, transparent 15%, transparent 85%, rgba(255, 120, 40, 0.05) 100%);
-}
-
-.building-side {
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-  justify-content: center;
-}
-
-.building-side.left-side {
-  border-right: 1px solid rgba(0, 210, 255, 0.2);
-  padding-right: 15px;
-}
-
-.cityscape-shell.sunset .building-side.left-side {
-  border-right-color: rgba(255, 120, 40, 0.2);
-}
-
-.building-side.right-side {
-  border-left: 1px solid rgba(0, 210, 255, 0.2);
-  padding-left: 15px;
-}
-
-.cityscape-shell.sunset .building-side.right-side {
-  border-left-color: rgba(255, 120, 40, 0.2);
-}
-
-.window {
-  width: 40px;
-  height: 40px;
-  background: linear-gradient(135deg, var(--win-cool) 0%, var(--win-cool) 100%);
-  border: 1px solid rgba(0, 210, 255, 0.5);
-  border-radius: 2px;
-  box-shadow: 0 0 10px rgba(0, 210, 255, 0.4), inset 0 0 8px rgba(0, 210, 255, 0.2);
-  position: relative;
-  animation: windowFlicker 4s ease-in-out infinite;
-}
-
-.cityscape-shell.sunset .window {
-  background: linear-gradient(135deg, var(--win-warm) 0%, var(--win-warm) 100%);
-  border-color: rgba(255, 120, 40, 0.5);
-  box-shadow: 0 0 10px rgba(255, 120, 40, 0.4), inset 0 0 8px rgba(255, 120, 40, 0.2);
-  animation: windowFlickerSunset 4s ease-in-out infinite;
-}
-
-@keyframes windowFlicker {
-  0%, 100% {
-    box-shadow: 0 0 10px rgba(0, 210, 255, 0.4), inset 0 0 8px rgba(0, 210, 255, 0.2);
-  }
-  50% {
-    box-shadow: 0 0 15px rgba(0, 210, 255, 0.6), inset 0 0 12px rgba(0, 210, 255, 0.3);
-  }
-}
-
-@keyframes windowFlickerSunset {
-  0%, 100% {
-    box-shadow: 0 0 10px rgba(255, 120, 40, 0.4), inset 0 0 8px rgba(255, 120, 40, 0.2);
-  }
-  50% {
-    box-shadow: 0 0 15px rgba(255, 120, 40, 0.6), inset 0 0 12px rgba(255, 120, 40, 0.3);
-  }
-}
-
-.building-center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0 20px;
-}
-
-.player-display-window {
-  background: linear-gradient(135deg, rgba(0, 210, 255, 0.1) 0%, rgba(0, 210, 255, 0.05) 100%);
-  border: 2px solid var(--bb-tag);
-  border-radius: 4px;
-  padding: 30px;
-  text-align: center;
-  box-shadow: 0 0 20px rgba(0, 210, 255, 0.3), inset 0 0 15px rgba(0, 210, 255, 0.1);
-  min-width: 250px;
-}
-
-.cityscape-shell.sunset .player-display-window {
-  background: linear-gradient(135deg, rgba(182, 64, 255, 0.1) 0%, rgba(182, 64, 255, 0.05) 100%);
-  box-shadow: 0 0 20px rgba(255, 64, 249, 0.3), inset 0 0 15px rgba(255, 64, 249, 0.1);
-}
-
-.player-avatar {
-  font-size: 4rem;
-  margin-bottom: 15px;
-  display: block;
-  animation: avatarPulse 3s ease-in-out infinite;
-}
-
-@keyframes avatarPulse {
-  0%, 100% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.05);
-  }
-}
-
-.player-name {
-  font-family: 'Bebas Neue', sans-serif;
-  font-size: 28px;
-  font-weight: bold;
-  color: var(--bb-title);
-  letter-spacing: 1px;
-  margin-bottom: 20px;
-  text-transform: uppercase;
-  background: linear-gradient(90deg, var(--bb-title), var(--bb-tag));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  padding: 8px 12px;
-  border-radius: 4px;
-  position: relative;
-}
-
-.player-name:hover {
-  filter: brightness(1.2);
-  background: linear-gradient(90deg, var(--bb-tag), var(--bb-title));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  transform: scale(1.05);
-}
-
-.player-name.copied {
-  background: linear-gradient(90deg, #4caf50, #66bb6a);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
-}
-
-.player-id-label {
-  font-family: 'Space Mono', monospace;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-  color: var(--bb-tag);
-  margin-bottom: 8px;
-  opacity: 0.8;
-}
-
-.player-id-value {
-  font-family: 'Space Mono', monospace;
-  font-size: 18px;
-  font-weight: 700;
-  letter-spacing: 2px;
-  color: var(--bb-tag);
-  background: rgba(0, 210, 255, 0.15);
-  padding: 12px 16px;
-  border: 1.5px solid var(--bb-tag);
-  border-radius: 2px;
-  word-break: break-all;
-  box-shadow: 0 0 15px rgba(0, 210, 255, 0.4);
-  text-shadow: 0 0 10px rgba(0, 210, 255, 0.5);
-  cursor: pointer;
-  transition: all 0.3s ease;
-  user-select: text;
-}
-
-.cityscape-shell.sunset .player-id-value {
-  background: rgba(182, 64, 255, 0.15);
-  box-shadow: 0 0 15px rgba(255, 64, 249, 0.4);
-  text-shadow: 0 0 10px rgba(255, 64, 249, 0.5);
-}
-
-.player-id-value:hover {
-  background: rgba(0, 210, 255, 0.25);
-  box-shadow: 0 0 20px rgba(0, 210, 255, 0.6);
-  transform: scale(1.02);
-}
-
-.cityscape-shell.sunset .player-id-value:hover {
-  background: rgba(182, 64, 255, 0.25);
-  box-shadow: 0 0 20px rgba(255, 64, 249, 0.6);
-}
-
-.player-id-value.copied {
-  background: rgba(76, 175, 80, 0.2);
-  border-color: #4caf50;
-  color: #4caf50;
-  box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
-}
-
-.copy-notification {
-  font-family: 'Space Mono', monospace;
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 1px;
-  color: #4caf50;
-  margin-top: 12px;
-  animation: copyNotification 2s ease-in-out forwards;
-}
-
-@keyframes copyNotification {
-  0% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  80% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  100% {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-}
-
-.building-base {
-  padding: 20px;
-  background: linear-gradient(180deg, rgba(0, 210, 255, 0.05) 0%, rgba(0, 210, 255, 0.02) 100%);
-  border-top: 1px solid rgba(0, 210, 255, 0.2);
-}
-
-.cityscape-shell.sunset .building-base {
-  background: linear-gradient(180deg, rgba(255, 120, 40, 0.05) 0%, rgba(255, 120, 40, 0.02) 100%);
-  border-top-color: rgba(255, 120, 40, 0.2);
-}
-
-.stat-panel {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  gap: 20px;
-}
-
-.stat {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  flex: 1;
-}
-
-.stat-label {
-  font-family: 'Space Mono', monospace;
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.5px;
-  text-transform: uppercase;
-  color: var(--bb-tag);
-  opacity: 0.7;
-}
-
-.stat-value {
-  font-family: 'Space Mono', monospace;
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--bb-title);
-  text-align: center;
-}
-
-.stat-divider {
-  width: 1px;
-  height: 30px;
-  background: rgba(0, 210, 255, 0.2);
-}
-
-.cityscape-shell.sunset .stat-divider {
-  background: rgba(255, 120, 40, 0.2);
-}
-
-.building-door {
-  height: 60px;
-  background: linear-gradient(90deg, var(--bldg-mid) 0%, var(--bldg-body) 50%, var(--bldg-mid) 100%);
-  border-top: 1px solid rgba(0, 210, 255, 0.2);
-  border-radius: 0 0 8px 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  overflow: hidden;
-}
-
-.cityscape-shell.sunset .building-door {
-  border-top-color: rgba(255, 120, 40, 0.2);
-}
-
-.building-door::before {
-  content: '';
-  position: absolute;
-  width: 90%;
-  height: 100%;
-  border: 1.5px solid rgba(0, 210, 255, 0.3);
-  border-radius: 4px;
-  background: linear-gradient(90deg, rgba(0, 210, 255, 0.05), rgba(0, 210, 255, 0.02));
-}
-
-.cityscape-shell.sunset .building-door::before {
-  border-color: rgba(255, 120, 40, 0.3);
-  background: linear-gradient(90deg, rgba(255, 120, 40, 0.05), rgba(255, 120, 40, 0.02));
-}
-
-.door-handle {
-  width: 12px;
-  height: 12px;
-  background: radial-gradient(circle at 30% 30%, rgba(0, 210, 255, 0.8), rgba(0, 210, 255, 0.4));
-  border-radius: 50%;
-  box-shadow: 0 0 10px rgba(0, 210, 255, 0.6);
-  position: relative;
-  z-index: 2;
-  margin-left: 80px;
-  animation: handleGlow 2s ease-in-out infinite;
-}
-
-.cityscape-shell.sunset .door-handle {
-  background: radial-gradient(circle at 30% 30%, rgba(255, 120, 40, 0.8), rgba(255, 120, 40, 0.4));
-  box-shadow: 0 0 10px rgba(255, 120, 40, 0.6);
-  animation: handleGlowSunset 2s ease-in-out infinite;
-}
-
-@keyframes handleGlow {
-  0%, 100% {
-    box-shadow: 0 0 10px rgba(0, 210, 255, 0.6);
-  }
-  50% {
-    box-shadow: 0 0 20px rgba(0, 210, 255, 0.9);
-  }
-}
-
-@keyframes handleGlowSunset {
-  0%, 100% {
-    box-shadow: 0 0 10px rgba(255, 120, 40, 0.6);
-  }
-  50% {
-    box-shadow: 0 0 20px rgba(255, 120, 40, 0.9);
-  }
-}
-
-.back-btn {
-  position: absolute;
-  top: -50px;
-  left: 0;
-  background: transparent;
-  color: var(--bb-title);
-  border: 1px solid var(--dlg-border);
-  border-radius: 2px;
-  padding: 0.5rem 1rem;
-  font-family: 'Space Mono', monospace;
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 1px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.back-btn:hover {
-  background: rgba(0, 210, 255, 0.1);
-  border-color: var(--bb-tag);
-  color: var(--bb-tag);
-  box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);
-}
-
-.cityscape-shell.sunset .back-btn:hover {
-  background: rgba(182, 64, 255, 0.1);
-  box-shadow: 0 0 15px rgba(255, 64, 249, 0.3);
-}
-
-@media (max-width: 600px) {
-  .building-structure {
-    border-radius: 4px;
-  }
-
-  .building-main {
-    grid-template-columns: 50px 1fr 50px;
-    padding: 15px;
-    gap: 8px;
-  }
-
-  .window {
-    width: 30px;
-    height: 30px;
-  }
-
-  .player-display-window {
-    min-width: 180px;
-    padding: 20px;
-  }
-
-  .player-avatar {
-    font-size: 3rem;
-    margin-bottom: 10px;
-  }
-
-  .player-name {
-    font-size: 20px;
-    margin-bottom: 15px;
-  }
-
-  .player-id-value {
-    font-size: 14px;
-    padding: 8px 12px;
-  }
-
-  .building-base {
-    padding: 15px;
-  }
-
-  .stat-panel {
-    gap: 10px;
-  }
-
-  .back-btn {
-    top: -45px;
-    font-size: 9px;
-    padding: 0.4rem 0.8rem;
-  }
-}

src/app/pages/profile/profile.component.html

@@ -1,97 +0,0 @@
-<div class="cityscape-shell" [class.sunset]="isSunsetMode">
-
-  <div class="scene">
-    <div class="sky">
-      <div class="stars-layer">
-        <div class="star" *ngFor="let star of stars" [ngStyle]="star.style"></div>
-      </div>
-      <div class="sun"></div>
-      <div class="cloud-wrap">
-        <div class="cloud cloud-a"></div>
-        <div class="cloud cloud-b"></div>
-        <div class="cloud cloud-c"></div>
-        <div class="cloud cloud-d"></div>
-        <div class="cloud cloud-e"></div>
-      </div>
-    </div>
-
-    <div class="bg-layer">
-      <div class="bg-bldg" *ngFor="let building of bgBuildings" [ngStyle]="building.style"></div>
-    </div>
-
-    <div class="main-layer">
-      <div class="profile-building-container">
-        @if (currentUser; as user) {
-        <!-- Player Building with Info Inside -->
-        <div class="building-wrapper">
-          <div class="building-structure">
-            <!-- Building top -->
-            <div class="building-top"></div>
-            
-            <!-- Building main section with user inside -->
-            <div class="building-main">
-              <!-- Left side windows -->
-              <div class="building-side left-side">
-                <div class="window"></div>
-                <div class="window"></div>
-                <div class="window"></div>
-                <div class="window"></div>
-              </div>
-              
-              <!-- Center section - User Info -->
-              <div class="building-center">
-                <div class="player-display-window">
-                  <div class="player-avatar">👤</div>
-                  <div class="player-name" (click)="copyUsername(user.username)" [class.copied]="usernameCopied" title="Click to copy">{{ user.username }}</div>
-                  <div class="player-id-label">PLAYER ID</div>
-                  <div class="player-id-value" (click)="copyPlayerId(user.id)" [class.copied]="idCopied" title="Click to copy">{{ user.id }}</div>
-                  @if (idCopied) {
-                  <div class="copy-notification">✓ COPIED</div>
-                  }
-                  @if (usernameCopied) {
-                  <div class="copy-notification">✓ COPIED</div>
-                  }
-                </div>
-              </div>
-              
-              <!-- Right side windows -->
-              <div class="building-side right-side">
-                <div class="window"></div>
-                <div class="window"></div>
-                <div class="window"></div>
-                <div class="window"></div>
-              </div>
-            </div>
-            
-            <!-- Building base with stats -->
-            <div class="building-base">
-              <div class="stat-panel">
-                <div class="stat">
-                  <span class="stat-label">RATING</span>
-                  <span class="stat-value">{{ user.rating }}</span>
-                </div>
-                <div class="stat-divider"></div>
-                <div class="stat">
-                  <span class="stat-label">MEMBER SINCE</span>
-                  <span class="stat-value">{{ user.createdAt | date: 'MMM dd, yyyy' }}</span>
-                </div>
-              </div>
-            </div>
-            
-            <!-- Building door -->
-            <div class="building-door">
-              <div class="door-handle"></div>
-            </div>
-          </div>
-          
-          <!-- Back button -->
-          <button type="button" class="back-btn" (click)="goBack()">← BACK</button>
-        </div>
-        }
-      </div>
-    </div>
-
-    <div class="haze"></div>
-    <div class="ground"></div>
-  </div>
-</div>

src/app/pages/profile/profile.component.ts

@@ -1,127 +0,0 @@
-import { Component, OnInit, DestroyRef, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { Router } from '@angular/router';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { AuthService } from '../../services/auth.service';
-import { ThemeService } from '../../services/theme.service';
-import { CurrentUser } from '../../models/auth.models';
-
-interface Star {
-  style: Record<string, string>;
-}
-
-interface BackgroundBuilding {
-  style: Record<string, string>;
-}
-
-@Component({
-  selector: 'app-profile',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './profile.component.html',
-  styleUrl: './profile.component.css'
-})
-export class ProfileComponent implements OnInit {
-  private readonly destroyRef = inject(DestroyRef);
-  private readonly authService = inject(AuthService);
-  private readonly themeService = inject(ThemeService);
-  private readonly router = inject(Router);
-
-  currentUser: CurrentUser | null = null;
-  isSunsetMode = false;
-  idCopied = false;
-  usernameCopied = false;
-
-  stars: Star[] = [];
-  bgBuildings: BackgroundBuilding[] = [];
-
-  ngOnInit(): void {
-    this.authService.currentUser$
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe((user) => {
-        this.currentUser = user;
-        if (!user) {
-          this.router.navigate(['']);
-        }
-      });
-
-    this.themeService.darkMode$
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe((isDarkMode) => {
-        this.isSunsetMode = !isDarkMode;
-      });
-
-    this.generateStars(220);
-    this.generateBackgroundBuildings();
-  }
-
-  goBack(): void {
-    this.router.navigate(['']);
-  }
-
-  copyPlayerId(id: string): void {
-    navigator.clipboard.writeText(id).then(() => {
-      this.idCopied = true;
-      setTimeout(() => {
-        this.idCopied = false;
-      }, 2000);
-    });
-  }
-
-  copyUsername(username: string): void {
-    navigator.clipboard.writeText(username).then(() => {
-      this.usernameCopied = true;
-      setTimeout(() => {
-        this.usernameCopied = false;
-      }, 2000);
-    });
-  }
-
-  private generateStars(count: number): void {
-    this.stars = Array.from({ length: count }, () => {
-      const size = Math.random() * 2 + 0.5;
-      return {
-        style: {
-          width: `${size}px`,
-          height: `${size}px`,
-          left: `${Math.random() * 100}%`,
-          top: `${Math.random() * 62}%`,
-          '--d': `${(Math.random() * 3 + 1.5).toFixed(1)}s`,
-          '--dl': `${-(Math.random() * 6).toFixed(1)}s`
-        }
-      };
-    });
-  }
-
-  private generateBackgroundBuildings(): void {
-    const specs = [
-      { l: '0%', w: '7%', h: '30vh' },
-      { l: '3%', w: '4%', h: '18vh' },
-      { l: '7%', w: '5%', h: '22vh' },
-      { l: '11%', w: '8%', h: '28vh' },
-      { l: '15%', w: '6%', h: '20vh' },
-      { l: '18.5%', w: '4%', h: '18vh' },
-      { l: '22.5%', w: '6%', h: '26vh' },
-      { l: '28%', w: '5%', h: '25vh' },
-      { l: '32%', w: '4%', h: '15vh' },
-      { l: '35.5%', w: '4.5%', h: '20vh' },
-      { l: '42%', w: '5%', h: '28vh' },
-      { l: '47%', w: '5%', h: '22vh' },
-      { l: '50%', w: '7%', h: '30vh' },
-      { l: '55%', w: '6%', h: '27vh' },
-      { l: '60.5%', w: '5%', h: '24vh' },
-      { l: '64.5%', w: '3.5%', h: '17vh' },
-      { l: '70%', w: '6%', h: '23vh' },
-      { l: '75%', w: '4%', h: '19vh' },
-      { l: '80.5%', w: '4%', h: '21vh' },
-      { l: '85.5%', w: '9%', h: '32vh' },
-      { l: '88%', w: '5%', h: '20vh' },
-      { l: '91%', w: '3%', h: '16vh' },
-      { l: '94%', w: '6%', h: '27vh' }
-    ];
-
-    this.bgBuildings = specs.map((spec) => ({
-      style: { left: spec.l, width: spec.w, height: spec.h }
-    }));
-  }
-}

src/app/pages/welcome/welcome.component.css

@@ -1,5 +1,3 @@
-@import '../../button-template.css';
-
 :host {
   display: block;
 }

src/app/pages/welcome/welcome.component.html

@@ -33,11 +33,11 @@
           </div>
         </div>
         <div class="bpart" style="height:36vh;">
-          <div>
+          <div style="padding:5px 5px 0;">
             <div class="bb">
               <div class="bb-tag">JOIN</div>
               <div class="bb-title">JOIN<br />GAME</div>
-              <button type="button" class="app-btn" (click)="openJoinDialog()" [disabled]="joiningGame">
+              <button type="button" class="bb-btn" (click)="openJoinDialog()" [disabled]="joiningGame">
                 {{ joiningGame ? 'JOINING...' : 'JOIN GAME →' }}
               </button>
             </div>
@@ -62,7 +62,7 @@
             <div class="bb">
               <div class="bb-tag">BOT</div>
               <div class="bb-title">PLAY WITH<br />A BOT</div>
-              <button type="button" class="app-btn" (click)="openDifficultyDialog()" [disabled]="creating">
+              <button type="button" class="bb-btn" (click)="openDifficultyDialog()" [disabled]="creating">
                 {{ creating ? 'CREATING...' : 'GET STARTED →' }}
               </button>
             </div>
@@ -94,7 +94,8 @@
               <div class="bb-tag">WELCOME</div>
               <div class="bb-title" style="font-size:clamp(16px,1.8vw,26px);">WELCOME TO<br />NOWCHESS</div>
               <div class="bb-subtitle">Play your next move from the skyline.</div>
-              <button type="button" class="app-btn" (click)="startOneVsOne()" [disabled]="creating">
+              <button type="button" class="bb-btn" style="padding:7px 20px;font-size:11px;" (click)="startOneVsOne()"
+                [disabled]="creating">
                 {{ creating ? 'CREATING...' : 'START NOW →' }}
               </button>
             </div>
@@ -120,7 +121,7 @@
             <div class="bb">
               <div class="bb-tag">OPTIONS</div>
               <div class="bb-title">MORE<br />OPTIONS</div>
-              <button type="button" class="app-btn" (click)="openOptionsDialog()">OPEN MENU →</button>
+              <button type="button" class="bb-btn" (click)="openOptionsDialog()">OPEN MENU →</button>
             </div>
           </div>
           <div class="wins" style="grid-template-columns:repeat(6,1fr);">
@@ -191,9 +192,9 @@
     <div class="dialog-card" (click)="$event.stopPropagation()">
       <div class="dialog-title">SELECT DIFFICULTY</div>
       <div class="dialog-actions">
-        <button type="button" class="app-btn" (click)="startVsBot('easy')" [disabled]="creating">EASY</button>
+        <button type="button" class="dialog-btn" (click)="startVsBot('easy')" [disabled]="creating">EASY</button>
-        <button type="button" class="app-btn" (click)="startVsBot('medium')" [disabled]="creating">MEDIUM</button>
+        <button type="button" class="dialog-btn" (click)="startVsBot('medium')" [disabled]="creating">MEDIUM</button>
-        <button type="button" class="app-btn" (click)="startVsBot('hard')" [disabled]="creating">HARD</button>
+        <button type="button" class="dialog-btn" (click)="startVsBot('hard')" [disabled]="creating">HARD</button>
       </div>
     </div>
   </div>
@@ -204,7 +205,7 @@
     <div class="dialog-card" (click)="$event.stopPropagation()">
       <div class="dialog-title">MORE OPTIONS</div>
       <div class="dialog-actions">
-        <button type="button" class="app-btn" (click)="openImportDialog()">IMPORT GAME</button>
+        <button type="button" class="dialog-btn" (click)="openImportDialog()">IMPORT GAME</button>
       </div>
     </div>
   </div>
@@ -217,11 +218,11 @@
       <input type="text" class="dialog-input" [(ngModel)]="gameIdInput" placeholder="Paste game ID here"
         [disabled]="joiningGame" (keyup.enter)="submitJoinGame()" />
       <div class="dialog-actions">
-        <button type="button" class="app-btn" (click)="submitJoinGame()"
+        <button type="button" class="dialog-btn" (click)="submitJoinGame()"
           [disabled]="joiningGame || !gameIdInput.trim()">
           {{ joiningGame ? 'JOINING...' : 'JOIN' }}
         </button>
-        <button type="button" class="app-btn" (click)="closeJoinDialog()" [disabled]="joiningGame">CANCEL</button>
+        <button type="button" class="dialog-btn" (click)="closeJoinDialog()" [disabled]="joiningGame">CANCEL</button>
       </div>
     </div>
   </div>
@@ -247,10 +248,11 @@
         [placeholder]="importMode === 'fen' ? 'Paste FEN here' : 'Paste PGN here'" [disabled]="importing"
         rows="5"></textarea>
       <div class="dialog-actions">
-        <button type="button" class="app-btn" (click)="submitImportGame()" [disabled]="importing || !importText.trim()">
+        <button type="button" class="dialog-btn" (click)="submitImportGame()"
+          [disabled]="importing || !importText.trim()">
           {{ importing ? 'IMPORTING...' : 'IMPORT' }}
         </button>
-        <button type="button" class="app-btn" (click)="closeImportDialog()" [disabled]="importing">CANCEL</button>
+        <button type="button" class="dialog-btn" (click)="closeImportDialog()" [disabled]="importing">CANCEL</button>
       </div>
     </div>
   </div>

src/environments/environment.staging.ts

@@ -1,11 +0,0 @@
-import { loadRuntimeConfig } from '../app/core/config.loader';
-
-const runtimeConfig = loadRuntimeConfig();
-
-export const environment = {
-  production: true,
-  apiBaseUrl: runtimeConfig.apiUrl || 'https://st.nowchess.janis-eccarius.de',
-  accountServiceUrl: runtimeConfig.apiUrl || 'https://st.nowchess.janis-eccarius.de',
-  wsBaseUrl: runtimeConfig.wsUrl || 'wss://st.nowchess.janis-eccarius.de',
-  apiPath: '/api/board/game'
-};

src/environments/environment.ts

@@ -1,11 +1,7 @@
-import { loadRuntimeConfig } from '../app/core/config.loader';
-
-const runtimeConfig = loadRuntimeConfig();
-
 export const environment = {
-  production: false,
+  production: true,
-  apiBaseUrl: runtimeConfig.apiUrl || '',
+  apiBaseUrl: '',
-  accountServiceUrl: runtimeConfig.apiUrl || '',
+  accountServiceUrl: '',
-  wsBaseUrl: runtimeConfig.wsUrl,
+  wsBaseUrl: 'ws://localhost:8080',
   apiPath: '/api/board/game'
 };

src/index.html

@@ -6,7 +6,6 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <script src="/env.js" defer></script>
 </head>
 <body>
   <app-root></app-root>

src/styles-variables.css

@@ -1,3 +1,6 @@
+/* ========================================
+   COLOR VARIABLES - Semantic Naming
+   ======================================== */
 
 /* Light Mode Colors (Default) */
 :root:not([data-theme='dark']) {

versions.env

@@ -1,3 +0,0 @@
-MAJOR=0
-MINOR=1
-PATCH=0