ci: bump version to v0.2.0

- create challange window
- challanges view page
- decline and accept
- notif tab (wip)
- active game window (wip)

---------

Co-authored-by: shahdlala66 <shahd.lala66@gmail.com>
Co-authored-by: Lala, Shahd <Shahd.Lala@sybit.de>
Reviewed-on: #3

.devcontainer/devcontainer-lock.json

@@ -1,9 +0,0 @@
-{
-  "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

@@ -1,25 +0,0 @@
-// 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"
-}

.dockerignore

@@ -0,0 +1,12 @@
+node_modules
+dist
+tmp
+*.log
+.git
+.gitignore
+Dockerfile
+docker-compose*.yml
+^\.env$
+.idea
+vscode
+coverage

CHANGELOG.md

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

Dockerfile

@@ -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"]

angular.json

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

docker-entrypoint.sh

@@ -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;'

nginx.conf

@@ -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;
+    }
+}

package.json

@@ -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"
   },

proxy.conf.json

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

public/env.template.js

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

src/app/components/challenge-create-dialog/challenge-create-dialog.component.css

@@ -0,0 +1,261 @@
+@import '../../button-template.css';
+
+.challenge-create-dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  backdrop-filter: blur(3px);
+
+  &.loading {
+    pointer-events: none;
+    opacity: 0.7;
+  }
+}
+
+.challenge-create-dialog {
+  background: linear-gradient(135deg, #0a0e27 0%, #1a1a3e 100%);
+  border: 2px solid #00d5ff;
+  border-radius: 8px;
+  box-shadow: 0 0 20px rgba(0, 213, 255, 0.3), inset 0 0 10px rgba(0, 213, 255, 0.05);
+  width: 90%;
+  max-width: 500px;
+  max-height: 90vh;
+  overflow-y: auto;
+  padding: 24px;
+  color: #e0e0e0;
+}
+
+.dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid rgba(0, 213, 255, 0.2);
+
+  h2 {
+    margin: 0;
+    color: #00d5ff;
+    font-size: 24px;
+    font-weight: 600;
+    letter-spacing: 1px;
+  }
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 28px;
+  color: #00d5ff;
+  cursor: pointer;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+
+  &:hover:not(:disabled) {
+    color: #ffffff;
+    transform: scale(1.1);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.dialog-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  label {
+    color: #b0b0d0;
+    font-size: 13px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  input,
+  select {
+    background-color: rgba(15, 20, 50, 0.8);
+    border: 1px solid rgba(0, 213, 255, 0.3);
+    border-radius: 4px;
+    color: #e0e0e0;
+    padding: 10px 12px;
+    font-size: 14px;
+    font-family: 'Space Mono', monospace;
+    transition: all 0.2s ease;
+
+    &:focus {
+      outline: none;
+      border-color: #00d5ff;
+      box-shadow: 0 0 10px rgba(0, 213, 255, 0.3);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    option {
+      background-color: #0a0e27;
+      color: #e0e0e0;
+    }
+  }
+
+  small {
+    color: #ff6b6b;
+    font-size: 12px;
+    margin-top: 4px;
+  }
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.form-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  label {
+    color: #b0b0d0;
+    font-size: 13px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  input {
+    background-color: rgba(15, 20, 50, 0.8);
+    border: 1px solid rgba(0, 213, 255, 0.3);
+    border-radius: 4px;
+    color: #e0e0e0;
+    padding: 10px 12px;
+    font-size: 14px;
+    font-family: 'Space Mono', monospace;
+    transition: all 0.2s ease;
+
+    &:focus {
+      outline: none;
+      border-color: #00d5ff;
+      box-shadow: 0 0 10px rgba(0, 213, 255, 0.3);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.preset-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.preset-btn {
+  padding: 8px 16px;
+  background-color: rgba(0, 213, 255, 0.1);
+  border: 1px solid #00d5ff;
+  border-radius: 4px;
+  color: #00d5ff;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover:not(:disabled) {
+    background-color: rgba(0, 213, 255, 0.2);
+    box-shadow: 0 0 10px rgba(0, 213, 255, 0.3);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.error-message {
+  background-color: rgba(255, 107, 107, 0.1);
+  border: 1px solid #ff6b6b;
+  border-radius: 4px;
+  padding: 12px;
+  color: #ff9999;
+  font-size: 13px;
+  margin-bottom: 8px;
+}
+
+.dialog-buttons {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+  margin-top: 20px;
+  padding-top: 15px;
+  border-top: 1px solid rgba(0, 213, 255, 0.2);
+
+  button {
+    padding: 10px 24px;
+    font-size: 13px;
+    font-weight: 600;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+
+    &.btn-secondary {
+      background-color: transparent;
+      border: 1px solid rgba(0, 213, 255, 0.3);
+      color: #00d5ff;
+
+      &:hover:not(:disabled) {
+        background-color: rgba(0, 213, 255, 0.1);
+        border-color: #00d5ff;
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+
+    &.btn-primary {
+      background-color: #00d5ff;
+      border: none;
+      color: #0a0e27;
+
+      &:hover:not(:disabled) {
+        box-shadow: 0 0 20px rgba(0, 213, 255, 0.6);
+        transform: translateY(-2px);
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+  }
+}

src/app/components/challenge-create-dialog/challenge-create-dialog.component.html

@@ -0,0 +1,93 @@
+<div class="challenge-create-dialog-overlay" (click)="cancel()" [class.loading]="loading">
+    <div class="challenge-create-dialog" (click)="$event.stopPropagation()">
+        <div class="dialog-header">
+            <h2>Create Challenge</h2>
+            <button type="button" class="close-btn" (click)="cancel()" [disabled]="loading">×</button>
+        </div>
+
+        <form [formGroup]="form" (ngSubmit)="submit()" class="dialog-form">
+            <!-- Error Message -->
+            <div *ngIf="errorMessage" class="error-message">
+                {{ errorMessage }}
+            </div>
+
+            <!-- Target Username -->
+            <div class="form-group">
+                <label for="targetUsername">Opponent Username</label>
+                <input type="text" id="targetUsername" formControlName="targetUsername"
+                    placeholder="Enter opponent's username" [disabled]="loading" required />
+                <small *ngIf="form.get('targetUsername')?.hasError('required') && form.get('targetUsername')?.touched">
+                    Username is required
+                </small>
+            </div>
+
+            <!-- Player Color Selection -->
+            <div class="form-group">
+                <label for="color">Play as</label>
+                <select id="color" formControlName="color" [disabled]="loading">
+                    <option value="white">White</option>
+                    <option value="black">Black</option>
+                    <option value="random">Random</option>
+                </select>
+            </div>
+
+            <!-- Time Control Mode Selection -->
+            <div class="form-group">
+                <label for="timeMode">Time Control</label>
+                <select id="timeMode" formControlName="timeMode" [disabled]="loading">
+                    <option value="blitz">Blitz</option>
+                    <option value="rapid">Rapid</option>
+                    <option value="classical">Classical</option>
+                    <option value="unlimited">Unlimited</option>
+                </select>
+            </div>
+
+            <!-- Time Presets -->
+            <div class="form-group" *ngIf="selectedTimeMode !== 'unlimited'">
+                <label>Presets</label>
+                <div class="preset-buttons">
+                    <button type="button" *ngFor="let preset of getAvailablePresets()" class="preset-btn"
+                        (click)="selectPreset(preset)" [disabled]="loading">
+                        {{ preset.label }}
+                    </button>
+                </div>
+            </div>
+
+            <!-- Custom Time Control -->
+            <div class="form-group" *ngIf="selectedTimeMode !== 'unlimited'">
+                <div class="form-row">
+                    <div class="form-col">
+                        <label for="limitMinutes">Time (minutes)</label>
+                        <input type="number" id="limitMinutes" formControlName="limitMinutes" min="1" max="1000"
+                            [disabled]="loading" />
+                    </div>
+                    <div class="form-col">
+                        <label for="incrementSeconds">Increment (seconds)</label>
+                        <input type="number" id="incrementSeconds" formControlName="incrementSeconds" min="0" max="300"
+                            [disabled]="loading" />
+                    </div>
+                </div>
+            </div>
+
+            <!-- TTL (Time to Live) -->
+            <div class="form-group">
+                <label for="ttlSeconds">Challenge Expires In</label>
+                <select id="ttlSeconds" formControlName="ttlSeconds" [disabled]="loading">
+                    <option *ngFor="let ttl of ttlOptions" [value]="ttl.seconds">
+                        {{ ttl.label }}
+                    </option>
+                </select>
+            </div>
+
+            <!-- Buttons -->
+            <div class="dialog-buttons">
+                <button type="button" class="btn btn-secondary" (click)="cancel()" [disabled]="loading">
+                    Cancel
+                </button>
+                <button type="submit" class="btn btn-primary" [disabled]="form.invalid || loading">
+                    {{ loading ? 'Sending...' : 'Send Challenge' }}
+                </button>
+            </div>
+        </form>
+    </div>
+</div>

src/app/components/challenge-create-dialog/challenge-create-dialog.component.ts

@@ -0,0 +1,159 @@
+import { Component, inject, OnInit, OnDestroy, DestroyRef, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { finalize } from 'rxjs';
+import { ChallengeService } from '../../services/challenge.service';
+import { Router } from '@angular/router';
+import { getErrorMessage } from '../../core/http/error-message.util';
+import { PlayerColor } from '../../models/challenge.models';
+
+type TimeMode = 'blitz' | 'rapid' | 'classical' | 'unlimited';
+
+interface TimePreset {
+    label: string;
+    limitSeconds: number;
+    incrementSeconds: number;
+}
+
+@Component({
+    selector: 'app-challenge-create-dialog',
+    standalone: true,
+    imports: [CommonModule, FormsModule, ReactiveFormsModule],
+    templateUrl: './challenge-create-dialog.component.html',
+    styleUrls: ['./challenge-create-dialog.component.css']
+})
+export class ChallengeCreateDialogComponent implements OnInit, OnDestroy {
+    private readonly challengeService = inject(ChallengeService);
+    private readonly router = inject(Router);
+    private readonly fb = inject(FormBuilder);
+    private readonly destroyRef = inject(DestroyRef);
+
+    @Output() closeChallengeDialog = new EventEmitter<void>();
+
+    form!: FormGroup;
+    loading = false;
+    errorMessage = '';
+    selectedTimeMode: TimeMode = 'rapid';
+
+    timePresets: Record<TimeMode, TimePreset[]> = {
+        blitz: [
+            { label: '1+0', limitSeconds: 60, incrementSeconds: 0 },
+            { label: '2+1', limitSeconds: 120, incrementSeconds: 1 },
+            { label: '3+0', limitSeconds: 180, incrementSeconds: 0 },
+            { label: '3+2', limitSeconds: 180, incrementSeconds: 2 },
+            { label: '5+0', limitSeconds: 300, incrementSeconds: 0 }
+        ],
+        rapid: [
+            { label: '10+0', limitSeconds: 600, incrementSeconds: 0 },
+            { label: '10+5', limitSeconds: 600, incrementSeconds: 5 },
+            { label: '15+10', limitSeconds: 900, incrementSeconds: 10 },
+            { label: '25+10', limitSeconds: 1500, incrementSeconds: 10 }
+        ],
+        classical: [
+            { label: '30+0', limitSeconds: 1800, incrementSeconds: 0 },
+            { label: '30+20', limitSeconds: 1800, incrementSeconds: 20 },
+            { label: '60+30', limitSeconds: 3600, incrementSeconds: 30 },
+            { label: '90+30', limitSeconds: 5400, incrementSeconds: 30 }
+        ],
+        unlimited: []
+    };
+
+    ttlOptions = [
+        { label: '5 minutes', seconds: 300 },
+        { label: '1 hour', seconds: 3600 },
+        { label: '1 day', seconds: 86400 },
+        { label: 'No expiry', seconds: 0 }
+    ];
+
+    ngOnInit(): void {
+        this.initializeForm();
+    }
+
+    ngOnDestroy(): void {
+    }
+
+    private initializeForm(): void {
+        this.form = this.fb.group({
+            targetUsername: ['', [Validators.required, Validators.minLength(1)]],
+            color: ['random', Validators.required],
+            timeMode: ['rapid'],
+            limitMinutes: [10, [Validators.required, Validators.min(1), Validators.max(1000)]],
+            incrementSeconds: [5, [Validators.required, Validators.min(0), Validators.max(300)]],
+            ttlSeconds: [3600, Validators.required]
+        });
+
+        this.form.get('timeMode')?.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((mode: unknown) => {
+                const timeMode = mode as TimeMode;
+                this.selectedTimeMode = timeMode;
+                if (timeMode !== 'unlimited') {
+                    const firstPreset = this.timePresets[timeMode][0];
+                    if (firstPreset) {
+                        this.form.patchValue({
+                            limitMinutes: firstPreset.limitSeconds / 60,
+                            incrementSeconds: firstPreset.incrementSeconds
+                        });
+                    }
+                }
+            });
+    }
+
+    selectPreset(preset: TimePreset): void {
+        this.form.patchValue({
+            limitMinutes: preset.limitSeconds / 60,
+            incrementSeconds: preset.incrementSeconds
+        });
+    }
+
+    getAvailablePresets(): TimePreset[] {
+        return this.timePresets[this.selectedTimeMode] || [];
+    }
+
+    submit(): void {
+        if (this.form.invalid || this.loading) {
+            return;
+        }
+
+        const targetUsername = this.form.get('targetUsername')?.value?.trim();
+        if (!targetUsername) {
+            this.errorMessage = 'Please enter a valid username';
+            return;
+        }
+
+        this.errorMessage = '';
+        this.loading = true;
+
+        const limitSeconds = Math.round((this.form.get('limitMinutes')?.value || 0) * 60);
+        const incrementSeconds = this.form.get('incrementSeconds')?.value || 0;
+        const ttlSeconds = this.form.get('ttlSeconds')?.value;
+        const color = (this.form.get('color')?.value || 'random') as PlayerColor;
+
+        this.challengeService.sendChallenge(targetUsername, {
+            timeControl: {
+                limitSeconds,
+                incrementSeconds
+            },
+            color,
+            ttlSeconds: ttlSeconds > 0 ? ttlSeconds : undefined
+        })
+            .pipe(finalize(() => (this.loading = false)))
+            .subscribe({
+                next: (challenge) => {
+                    // Challenge sent successfully - navigate to challenges page to view status
+                    this.form.reset();
+                    this.closeChallengeDialog.emit();
+                    void this.router.navigate(['/challenges']);
+                },
+                error: (error) => {
+                    this.errorMessage = getErrorMessage(error, 'Failed to send challenge. Please try again.');
+                }
+            });
+    }
+
+    cancel(): void {
+        this.form.reset();
+        this.closeChallengeDialog.emit();
+    }
+}

src/app/components/challenge-notification/challenge-notification.component.css

@@ -0,0 +1,194 @@
+@import '../../button-template.css';
+
+.challenge-notification {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  max-width: 400px;
+  background: linear-gradient(135deg, #0a0e27 0%, #1a1a3e 100%);
+  border: 2px solid #00d5ff;
+  border-radius: 8px;
+  box-shadow: 0 0 20px rgba(0, 213, 255, 0.4), inset 0 0 10px rgba(0, 213, 255, 0.05);
+  padding: 16px;
+  color: #e0e0e0;
+  z-index: 2000;
+  animation: slideInRight 0.3s ease-out;
+
+  &.error {
+    border-color: #ff6b6b;
+    box-shadow: 0 0 20px rgba(255, 107, 107, 0.4), inset 0 0 10px rgba(255, 107, 107, 0.05);
+  }
+
+  @media (max-width: 768px) {
+    top: 10px;
+    right: 10px;
+    left: 10px;
+    max-width: none;
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(450px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.notification-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(0, 213, 255, 0.2);
+}
+
+.notification-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+
+  .badge {
+    background-color: rgba(0, 213, 255, 0.2);
+    border: 1px solid #00d5ff;
+    border-radius: 3px;
+    padding: 4px 8px;
+    font-size: 10px;
+    font-weight: 700;
+    color: #00d5ff;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    white-space: nowrap;
+  }
+
+  .title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #d4f4ff;
+  }
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 24px;
+  color: #00d5ff;
+  cursor: pointer;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+
+  &:hover:not(:disabled) {
+    color: #ffffff;
+    transform: scale(1.15);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.notification-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.time-control {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 13px;
+
+  .label {
+    color: #b0b0d0;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  .value {
+    background-color: rgba(0, 213, 255, 0.1);
+    border: 1px solid rgba(0, 213, 255, 0.3);
+    border-radius: 3px;
+    padding: 4px 12px;
+    color: #00d5ff;
+    font-family: 'Space Mono', monospace;
+    font-weight: 600;
+  }
+}
+
+.expiration {
+  font-size: 12px;
+  color: #b0b0d0;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.error-message {
+  background-color: rgba(255, 107, 107, 0.1);
+  border: 1px solid #ff6b6b;
+  border-radius: 3px;
+  padding: 8px 10px;
+  color: #ff9999;
+  font-size: 12px;
+}
+
+.notification-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+
+  button {
+    padding: 8px 16px;
+    font-size: 12px;
+    font-weight: 600;
+    border-radius: 3px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    border: none;
+
+    &.btn-decline {
+      background-color: transparent;
+      border: 1px solid rgba(0, 213, 255, 0.3);
+      color: #00d5ff;
+
+      &:hover:not(:disabled) {
+        background-color: rgba(0, 213, 255, 0.1);
+        border-color: #00d5ff;
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+
+    &.btn-accept {
+      background-color: #00d5ff;
+      color: #0a0e27;
+
+      &:hover:not(:disabled) {
+        box-shadow: 0 0 15px rgba(0, 213, 255, 0.6);
+        transform: translateY(-1px);
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+  }
+}

src/app/components/challenge-notification/challenge-notification.component.html

@@ -0,0 +1,38 @@
+<div class="challenge-notification" [class.error]="!!errorMessage">
+    <div class="notification-header">
+        <div class="notification-title">
+            <span class="badge">CHALLENGE</span>
+            <span class="title">{{ getCreatedByDisplay() }} challenged you!</span>
+        </div>
+        <button type="button" class="close-btn" (click)="onClose()"
+            [disabled]="acceptingChallenge || decliningChallenge">
+            ×
+        </button>
+    </div>
+
+    <div class="notification-content">
+        <div class="time-control">
+            <span class="label">Time Control:</span>
+            <span class="value">{{ getTimeControlDisplay() }}</span>
+        </div>
+
+        <div class="expiration">
+            <span class="label">{{ getExpirationInfo() }}</span>
+        </div>
+
+        <div *ngIf="errorMessage" class="error-message">
+            {{ errorMessage }}
+        </div>
+
+        <div class="notification-actions">
+            <button type="button" class="btn btn-decline" (click)="onDecline()"
+                [disabled]="acceptingChallenge || decliningChallenge">
+                {{ decliningChallenge ? 'Declining...' : 'Decline' }}
+            </button>
+            <button type="button" class="btn btn-accept" (click)="onAccept()"
+                [disabled]="acceptingChallenge || decliningChallenge">
+                {{ acceptingChallenge ? 'Accepting...' : 'Accept' }}
+            </button>
+        </div>
+    </div>
+</div>

src/app/components/challenge-notification/challenge-notification.component.ts

@@ -0,0 +1,101 @@
+import { Component, Input, Output, EventEmitter, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Challenge } from '../../models/challenge.models';
+import { ChallengeService } from '../../services/challenge.service';
+import { finalize } from 'rxjs';
+import { getErrorMessage } from '../../core/http/error-message.util';
+
+@Component({
+    selector: 'app-challenge-notification',
+    standalone: true,
+    imports: [CommonModule],
+    templateUrl: './challenge-notification.component.html',
+    styleUrls: ['./challenge-notification.component.css']
+})
+export class ChallengeNotificationComponent {
+    @Input() challenge!: Challenge;
+    @Output() accept = new EventEmitter<Challenge>();
+    @Output() decline = new EventEmitter<Challenge>();
+    @Output() close = new EventEmitter<void>();
+
+    private readonly challengeService = inject(ChallengeService);
+
+    acceptingChallenge = false;
+    decliningChallenge = false;
+    errorMessage = '';
+
+    onAccept(): void {
+        if (this.acceptingChallenge || this.decliningChallenge) {
+            return;
+        }
+
+        this.acceptingChallenge = true;
+        this.errorMessage = '';
+
+        this.challengeService.acceptChallenge(this.challenge.id)
+            .pipe(finalize(() => (this.acceptingChallenge = false)))
+            .subscribe({
+                next: () => {
+                    this.accept.emit(this.challenge);
+                },
+                error: (error) => {
+                    this.errorMessage = getErrorMessage(error, 'Failed to accept challenge');
+                }
+            });
+    }
+
+    onDecline(): void {
+        if (this.acceptingChallenge || this.decliningChallenge) {
+            return;
+        }
+
+        this.decliningChallenge = true;
+        this.errorMessage = '';
+
+        this.challengeService.declineChallenge(this.challenge.id, { reason: 'Not interested' })
+            .pipe(finalize(() => (this.decliningChallenge = false)))
+            .subscribe({
+                next: () => {
+                    this.decline.emit(this.challenge);
+                },
+                error: (error) => {
+                    this.errorMessage = getErrorMessage(error, 'Failed to decline challenge');
+                }
+            });
+    }
+
+    onClose(): void {
+        this.close.emit();
+    }
+
+    getTimeControlDisplay(): string {
+        const { limit, increment } = this.challenge.timeControl;
+        if (!limit || !increment) {
+            return 'Unlimited';
+        }
+        const minutes = Math.floor(limit / 60);
+        return `${minutes}+${increment}`;
+    }
+
+    getCreatedByDisplay(): string {
+        return this.challenge.challenger.name;
+    }
+
+    getExpirationInfo(): string {
+        const expiresAt = new Date(this.challenge.expiresAt);
+        const now = new Date();
+        const diffMs = expiresAt.getTime() - now.getTime();
+
+        if (diffMs <= 0) {
+            return 'Expired';
+        }
+
+        const minutes = Math.floor(diffMs / 60000);
+        if (minutes > 60) {
+            const hours = Math.floor(minutes / 60);
+            return `Expires in ${hours}h`;
+        }
+
+        return `Expires in ${minutes}m`;
+    }
+}

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

@@ -2,23 +2,11 @@
   <label>{{ label }}</label>
 
   @if (inputType === 'textarea') {
-    <textarea
+  <textarea #textareaInput [placeholder]="placeholder" [value]="value" [rows]="rows"
-      #textareaInput
+    (input)="onValueChange(textareaInput.value)" class="form-input"></textarea>
-      [placeholder]="placeholder"
-      [value]="value"
-      [rows]="rows"
-      (input)="onValueChange(textareaInput.value)"
-      class="form-input"
-    ></textarea>
   } @else {
-    <input
+  <input #textInput type="text" [placeholder]="placeholder" [value]="value" (input)="onValueChange(textInput.value)"
-      #textInput
+    class="form-input" />
-      type="text"
-      [placeholder]="placeholder"
-      [value]="value"
-      (input)="onValueChange(textInput.value)"
-      class="form-input"
-    />
   }
 
   <button type="button" class="app-btn w-100" (click)="onButtonClick()">
@@ -26,6 +14,6 @@
   </button>
 
   @if (hintText) {
-    <p class="hint-text">{{ hintText }}</p>
+  <p class="hint-text">{{ hintText }}</p>
   }
-</section>
+</section>

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

@@ -2,26 +2,22 @@
   <div class="promotion-dialog">
     <div class="promotion-header">
       <h3>Pawn Promotion</h3>
-      <button class="app-btn" (click)="close()" aria-label="Close" style="padding:0.2rem 0.5rem;min-width:unset;">&times;</button>
+      <button class="app-btn" (click)="close()" aria-label="Close"
+        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
+        <button type="button" class="app-btn promotion-choice" [attr.data-piece]="piece.type"
-            type="button"
+          (click)="selectPromotion(piece.type)" [title]="piece.label">
-            class="app-btn promotion-choice"
+          <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/core/config.loader.ts

@@ -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'
+  };
+}

src/app/models/challenge.models.ts

@@ -0,0 +1,49 @@
+export type ChallengeStatus = 'created' | 'pending' | 'accepted' | 'declined' | 'cancelled' | 'expired';
+
+export type PlayerColor = 'white' | 'black' | 'random';
+
+export interface Player {
+    id: string;
+    name: string;
+    rating: number;
+}
+
+export interface TimeControl {
+    type: string | null;
+    limit: number | null;
+    increment: number | null;
+}
+
+export interface Challenge {
+    id: string;
+    challenger: Player;
+    destUser: Player;
+    variant: string;
+    color: PlayerColor;
+    timeControl: TimeControl;
+    status: ChallengeStatus;
+    declineReason: string | null;
+    gameId: string | null;
+    expiresAt: string;
+    createdAt: string;
+}
+
+export interface SendChallengeRequest {
+    timeControl: {
+        limitSeconds: number;
+        incrementSeconds: number;
+    };
+    color?: PlayerColor;
+    ttlSeconds?: number;
+}
+
+export interface ListChallengesResponse {
+    'in'?: Challenge[];
+    'out'?: Challenge[];
+    incoming?: Challenge[];
+    outgoing?: Challenge[];
+}
+
+export interface DeclineChallengeRequest {
+    reason?: string;
+}

src/app/pages/challenges/challenges.component.css

@@ -0,0 +1,222 @@
+@import '../../button-template.css';
+
+.challenges-container {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #04000f 0%, #0e0235 25%, #2d0860 50%, #0e0235 75%, #04000f 100%);
+  color: #e0e0e0;
+  padding: 20px;
+  font-family: 'Space Mono', 'Courier New', monospace;
+}
+
+.challenges-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30px;
+  padding-bottom: 20px;
+  border-bottom: 2px solid rgba(0, 213, 255, 0.3);
+
+  h1 {
+    margin: 0;
+    color: #00d5ff;
+    font-size: 32px;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+  }
+}
+
+.back-btn {
+  background: transparent;
+  border: 1px solid rgba(0, 213, 255, 0.3);
+  color: #00d5ff;
+  padding: 10px 20px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: rgba(0, 213, 255, 0.1);
+    border-color: #00d5ff;
+  }
+}
+
+.error-banner {
+  background-color: rgba(255, 107, 107, 0.1);
+  border: 1px solid #ff6b6b;
+  border-radius: 4px;
+  padding: 15px;
+  color: #ff9999;
+  margin-bottom: 20px;
+}
+
+.challenges-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 30px;
+
+  @media (max-width: 1024px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.challenges-section {
+  h2 {
+    color: #00d5ff;
+    font-size: 20px;
+    margin: 0 0 20px 0;
+    padding-bottom: 10px;
+    border-bottom: 1px solid rgba(0, 213, 255, 0.2);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
+}
+
+.loading-spinner {
+  text-align: center;
+  padding: 40px;
+  color: #00d5ff;
+  font-size: 16px;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 40px;
+  color: #b0b0d0;
+  font-size: 14px;
+  background-color: rgba(0, 213, 255, 0.05);
+  border: 1px dashed rgba(0, 213, 255, 0.2);
+  border-radius: 4px;
+}
+
+.challenge-list {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.challenge-card {
+  background: linear-gradient(135deg, rgba(10, 14, 39, 0.8) 0%, rgba(26, 26, 62, 0.8) 100%);
+  border: 1px solid rgba(0, 213, 255, 0.3);
+  border-radius: 8px;
+  padding: 16px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: rgba(0, 213, 255, 0.6);
+    box-shadow: 0 0 15px rgba(0, 213, 255, 0.2);
+  }
+}
+
+.challenge-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(0, 213, 255, 0.1);
+
+  .challenger-name {
+    color: #d4f4ff;
+    font-weight: 600;
+    font-size: 14px;
+  }
+
+  .time-control {
+    background-color: rgba(0, 213, 255, 0.15);
+    border: 1px solid rgba(0, 213, 255, 0.3);
+    color: #00d5ff;
+    padding: 4px 12px;
+    border-radius: 3px;
+    font-weight: 600;
+    font-size: 12px;
+  }
+}
+
+.challenge-details {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 12px;
+
+  .detail {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 12px;
+
+    .label {
+      color: #b0b0d0;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .value {
+      color: #00d5ff;
+      font-weight: 600;
+
+      &.status-pending {
+        color: #ffcc30;
+      }
+
+      &.status-accepted {
+        color: #4ade80;
+      }
+
+      &.status-declined {
+        color: #ff6b6b;
+      }
+
+      &.status-expired {
+        color: #b0b0d0;
+      }
+    }
+  }
+}
+
+.challenge-actions {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+
+  .btn {
+    padding: 8px 16px;
+    border: 1px solid rgba(0, 213, 255, 0.3);
+    border-radius: 4px;
+    background-color: transparent;
+    color: #00d5ff;
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background-color: rgba(0, 213, 255, 0.1);
+      border-color: #00d5ff;
+    }
+
+    &.btn-accept {
+      background-color: #00d5ff;
+      color: #04000f;
+      border: none;
+
+      &:hover {
+        box-shadow: 0 0 15px rgba(0, 213, 255, 0.6);
+      }
+    }
+
+    &.btn-decline,
+    &.btn-cancel {
+      color: #ff6b6b;
+      border-color: rgba(255, 107, 107, 0.3);
+
+      &:hover {
+        background-color: rgba(255, 107, 107, 0.1);
+        border-color: #ff6b6b;
+      }
+    }
+  }
+}

src/app/pages/challenges/challenges.component.html

@@ -0,0 +1,102 @@
+<div class="challenges-container">
+    <div class="challenges-header">
+        <h1>Active Challenges</h1>
+        <button type="button" class="back-btn" (click)="goBack()">← Back</button>
+    </div>
+
+    <div *ngIf="errorMessage" class="error-banner">
+        {{ errorMessage }}
+    </div>
+
+    <div class="challenges-grid">
+        <!-- Incoming Challenges -->
+        <div class="challenges-section">
+            <h2>Incoming Challenges</h2>
+            <div *ngIf="loading" class="loading-spinner">Loading...</div>
+
+            <div *ngIf="!loading && incomingChallenges.length === 0" class="empty-state">
+                <p>No incoming challenges</p>
+            </div>
+
+            <div *ngIf="!loading && incomingChallenges.length > 0" class="challenge-list">
+                <div *ngFor="let challenge of incomingChallenges" class="challenge-card">
+                    <div class="challenge-header">
+                        <span class="challenger-name">{{ getChallengerDisplay(challenge) }}</span>
+                        <span class="time-control">{{ getTimeControlDisplay(challenge) }}</span>
+                    </div>
+
+                    <div class="challenge-details">
+                        <div class="detail">
+                            <span class="label">Status:</span>
+                            <span class="value" [class]="'status-' + challenge.status">
+                                {{ challenge.status | uppercase }}
+                            </span>
+                        </div>
+                        <div class="detail">
+                            <span class="label">Expires in:</span>
+                            <span class="value">{{ getExpirationInfo(challenge) }}</span>
+                        </div>
+                    </div>
+
+                    <div class="challenge-actions" *ngIf="challenge.status === 'created'">
+                        <button type="button" class="btn btn-decline" (click)="declineChallenge(challenge)">
+                            Decline
+                        </button>
+                        <button type="button" class="btn btn-accept" (click)="acceptChallenge(challenge)">
+                            Accept
+                        </button>
+                    </div>
+
+                    <div class="challenge-actions" *ngIf="challenge.status === 'accepted' && challenge.gameId">
+                        <button type="button" class="btn btn-accept" (click)="openGame(challenge)">
+                            Play
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Outgoing Challenges -->
+        <div class="challenges-section">
+            <h2>Outgoing Challenges</h2>
+
+            <div *ngIf="!loading && outgoingChallenges.length === 0" class="empty-state">
+                <p>No outgoing challenges</p>
+            </div>
+
+            <div *ngIf="!loading && outgoingChallenges.length > 0" class="challenge-list">
+                <div *ngFor="let challenge of outgoingChallenges" class="challenge-card">
+                    <div class="challenge-header">
+                        <span class="challenger-name">→ {{ getOpponentDisplay(challenge) }}</span>
+                        <span class="time-control">{{ getTimeControlDisplay(challenge) }}</span>
+                    </div>
+
+                    <div class="challenge-details">
+                        <div class="detail">
+                            <span class="label">Status:</span>
+                            <span class="value" [class]="'status-' + challenge.status">
+                                {{ challenge.status | uppercase }}
+                            </span>
+                        </div>
+                        <div class="detail">
+                            <span class="label">Expires in:</span>
+                            <span class="value">{{ getExpirationInfo(challenge) }}</span>
+                        </div>
+                    </div>
+
+                    <div class="challenge-actions" *ngIf="challenge.status === 'created'">
+                        <button type="button" class="btn btn-cancel" (click)="cancelChallenge(challenge)">
+                            Cancel
+                        </button>
+                    </div>
+
+                    <div class="challenge-actions" *ngIf="challenge.status === 'accepted' && challenge.gameId">
+                        <button type="button" class="btn btn-accept" (click)="openGame(challenge)">
+                            Play
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/app/pages/challenges/challenges.component.ts

@@ -0,0 +1,179 @@
+import { Component, inject, OnInit, OnDestroy, DestroyRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ChallengeService } from '../../services/challenge.service';
+import { ChallengeEventService } from '../../services/challenge-event.service';
+import { Challenge } from '../../models/challenge.models';
+import { getErrorMessage } from '../../core/http/error-message.util';
+
+@Component({
+    selector: 'app-challenges',
+    standalone: true,
+    imports: [CommonModule],
+    templateUrl: './challenges.component.html',
+    styleUrls: ['./challenges.component.css']
+})
+export class ChallengesComponent implements OnInit, OnDestroy {
+    private readonly challengeService = inject(ChallengeService);
+    private readonly challengeEventService = inject(ChallengeEventService);
+    private readonly router = inject(Router);
+    private readonly destroyRef = inject(DestroyRef);
+
+    incomingChallenges: Challenge[] = [];
+    outgoingChallenges: Challenge[] = [];
+    loading = false;
+    errorMessage = '';
+
+    private pollInterval: any = null;
+    private readonly pollIntervalMs = 5000; // Poll every 5 seconds
+
+    ngOnInit(): void {
+        this.loadChallenges(true);
+
+        // Subscribe to challenge events
+        this.challengeEventService.getChallengeReceived$()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+                this.loadChallenges();
+            });
+
+        // Start polling for challenge updates
+        this.startPolling();
+    }
+
+    ngOnDestroy(): void {
+        this.stopPolling();
+    }
+
+    private startPolling(): void {
+        this.pollInterval = setInterval(() => {
+            this.loadChallenges(false);
+        }, this.pollIntervalMs);
+    }
+
+    private stopPolling(): void {
+        if (this.pollInterval) {
+            clearInterval(this.pollInterval);
+            this.pollInterval = null;
+        }
+    }
+
+    loadChallenges(showLoader = false): void {
+        if (showLoader) {
+            this.loading = true;
+            this.errorMessage = '';
+        }
+
+        this.challengeService.listChallenges()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+                next: (response) => {
+                    this.incomingChallenges = response.in || response.incoming || [];
+                    this.outgoingChallenges = response.out || response.outgoing || [];
+                    if (showLoader) {
+                        this.loading = false;
+                    }
+                },
+                error: (error) => {
+                    this.errorMessage = getErrorMessage(error, 'Failed to load challenges');
+                    if (showLoader) {
+                        this.loading = false;
+                    }
+                }
+            });
+    }
+
+    acceptChallenge(challenge: Challenge): void {
+        this.challengeService.acceptChallenge(challenge.id)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+                next: (acceptedChallenge) => {
+                    this.challengeEventService.onChallengeAccepted(acceptedChallenge);
+                    this.loadChallenges();
+                    if (acceptedChallenge.gameId) {
+                        void this.router.navigate(['/game', acceptedChallenge.gameId]);
+                    } else {
+                        this.errorMessage = 'Challenge accepted, but no game was created.';
+                    }
+                },
+                error: (error) => {
+                    this.errorMessage = getErrorMessage(error, 'Failed to accept challenge');
+                }
+            });
+    }
+
+    declineChallenge(challenge: Challenge): void {
+        this.challengeService.declineChallenge(challenge.id, { reason: 'Not interested' })
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+                next: () => {
+                    this.challengeEventService.removeChallenge(challenge.id);
+                    this.loadChallenges();
+                },
+                error: (error) => {
+                    this.errorMessage = getErrorMessage(error, 'Failed to decline challenge');
+                }
+            });
+    }
+
+    cancelChallenge(challenge: Challenge): void {
+        this.challengeService.cancelChallenge(challenge.id)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+                next: () => {
+                    this.loadChallenges();
+                },
+                error: (error) => {
+                    this.errorMessage = getErrorMessage(error, 'Failed to cancel challenge');
+                }
+            });
+    }
+
+    goBack(): void {
+        void this.router.navigate(['/']);
+    }
+
+    openGame(challenge: Challenge): void {
+        if (!challenge.gameId) {
+            this.errorMessage = 'Missing game id for this challenge.';
+            return;
+        }
+        void this.router.navigate(['/game', challenge.gameId]);
+    }
+
+    getTimeControlDisplay(challenge: Challenge): string {
+        const { limit, increment } = challenge.timeControl;
+        if (!limit || !increment) {
+            return 'Unlimited';
+        }
+        const minutes = Math.floor(limit / 60);
+        return `${minutes}+${increment}`;
+    }
+
+    getChallengerDisplay(challenge: Challenge): string {
+        return challenge.challenger.name;
+    }
+
+    getOpponentDisplay(challenge: Challenge): string {
+        return challenge.destUser.name;
+    }
+
+    getExpirationInfo(challenge: Challenge): string {
+        const expiresAt = new Date(challenge.expiresAt);
+        const now = new Date();
+        const diffMs = expiresAt.getTime() - now.getTime();
+
+        if (diffMs <= 0 || challenge.status === 'expired') {
+            return 'Expired';
+        }
+
+        const minutes = Math.floor(diffMs / 60000);
+        if (minutes > 60) {
+            const hours = Math.floor(minutes / 60);
+            return `${hours}h`;
+        }
+
+        return `${minutes}m`;
+    }
+}

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

@@ -30,6 +30,7 @@
 
 header {
   margin-bottom: var(--size-xl);
+  margin-bottom: var(--size-xl);
 }
 
 h1,
@@ -37,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;
 }
@@ -48,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;
 }
@@ -110,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);
@@ -316,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 {
@@ -325,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 {
@@ -353,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 {
@@ -363,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 {
@@ -385,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 {

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

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

@@ -33,7 +33,7 @@
           </div>
         </div>
         <div class="bpart" style="height:36vh;">
-          <div style="padding:5px 5px 0;">
+          <div>
             <div class="bb">
               <div class="bb-tag">JOIN</div>
               <div class="bb-title">JOIN<br />GAME</div>
@@ -46,6 +46,13 @@
             <div class="w" *ngFor="let win of windows['wA3']" [ngStyle]="win.style"></div>
           </div>
         </div>
+
+        <!-- Draggable Meat Emoji -->
+        @if (showMeatEmoji) {
+        <div class="meat-emoji" [style.left.px]="meatX" [style.top.px]="meatY" (mousedown)="onMeatMouseDown($event)">
+          🍖
+        </div>
+        }
       </div>
 
       <div class="bwrap" style="left:21%;width:15%;">
@@ -94,8 +101,7 @@
               <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()"
+              <button type="button" class="app-btn" (click)="startOneVsOne()" [disabled]="creating">
-                [disabled]="creating">
                 {{ creating ? 'CREATING...' : 'START NOW →' }}
               </button>
             </div>
@@ -248,8 +254,7 @@
         [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()"
+        <button type="button" class="app-btn" (click)="submitImportGame()" [disabled]="importing || !importText.trim()">
-          [disabled]="importing || !importText.trim()">
           {{ importing ? 'IMPORTING...' : 'IMPORT' }}
         </button>
         <button type="button" class="app-btn" (click)="closeImportDialog()" [disabled]="importing">CANCEL</button>

src/app/pages/welcome/welcome.component.ts

@@ -10,6 +10,7 @@ import { AuthDialogService } from '../../services/auth-dialog.service';
 import { AuthService } from '../../services/auth.service';
 import { GameApiService } from '../../services/game-api.service';
 import { ThemeService } from '../../services/theme.service';
+import { ChallengeCreateDialogComponent } from '../../components/challenge-create-dialog/challenge-create-dialog.component';
 
 type Difficulty = 'easy' | 'medium' | 'hard';
 type ImportMode = 'fen' | 'pgn';
@@ -29,10 +30,25 @@ interface WindowCell {
   style: Record<string, string>;
 }
 
+interface Star {
+  style: Record<string, string>;
+}
+
+interface BackgroundBuilding {
+  style: Record<string, string>;
+}
+
+interface WindowCell {
+  state: 'off' | 'on';
+  color?: string;
+  glowColor?: string;
+  style: Record<string, string>;
+}
+
 @Component({
   selector: 'app-welcome',
   standalone: true,
-  imports: [CommonModule, FormsModule],
+  imports: [CommonModule, FormsModule, ChallengeCreateDialogComponent],
   templateUrl: './welcome.component.html',
   styleUrls: ['./welcome.component.css']
 })

src/app/services/challenge-event.service.ts

@@ -0,0 +1,64 @@
+import { Injectable, inject } from '@angular/core';
+import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import { Challenge } from '../models/challenge.models';
+
+/**
+ * Service to manage challenge events via WebSocket
+ * Listens for incoming challenges and emits them to subscribers
+ */
+@Injectable({ providedIn: 'root' })
+export class ChallengeEventService {
+    private readonly incomingChallenges$ = new BehaviorSubject<Challenge[]>([]);
+    private readonly challengeReceived$ = new Subject<Challenge>();
+    private readonly challengeAccepted$ = new Subject<Challenge>();
+    private readonly challengeDeclined$ = new Subject<Challenge>();
+
+    getIncomingChallenges$(): Observable<Challenge[]> {
+        return this.incomingChallenges$.asObservable();
+    }
+
+    getChallengeReceived$(): Observable<Challenge> {
+        return this.challengeReceived$.asObservable();
+    }
+
+    getChallengeAccepted$(): Observable<Challenge> {
+        return this.challengeAccepted$.asObservable();
+    }
+
+    getChallengeDeclined$(): Observable<Challenge> {
+        return this.challengeDeclined$.asObservable();
+    }
+
+    /**
+     * Called when a new challenge is received via WebSocket
+     */
+    onChallengeReceived(challenge: Challenge): void {
+        const current = this.incomingChallenges$.value;
+        this.incomingChallenges$.next([...current, challenge]);
+        this.challengeReceived$.next(challenge);
+    }
+
+    /**
+     * Called when a challenge is accepted
+     */
+    onChallengeAccepted(challenge: Challenge): void {
+        const current = this.incomingChallenges$.value;
+        this.incomingChallenges$.next(current.filter(c => c.id !== challenge.id));
+        this.challengeAccepted$.next(challenge);
+    }
+
+    /**
+     * Called when a challenge is declined or expires
+     */
+    onChallengeRemoved(challengeId: string): void {
+        const current = this.incomingChallenges$.value;
+        this.incomingChallenges$.next(current.filter(c => c.id !== challengeId));
+    }
+
+    /**
+     * Remove a challenge from the incoming list
+     */
+    removeChallenge(challengeId: string): void {
+        this.onChallengeRemoved(challengeId);
+    }
+}

src/app/services/challenge-websocket.service.ts

@@ -0,0 +1,135 @@
+import { Injectable, inject } from '@angular/core';
+import { Subject } from 'rxjs';
+import { ChallengeEventService } from './challenge-event.service';
+import { Challenge } from '../models/challenge.models';
+
+/**
+ * Service to handle WebSocket connections for challenge events
+ * Listens for incoming challenge notifications and emits them to ChallengeEventService
+ */
+@Injectable({ providedIn: 'root' })
+export class ChallengeWebSocketService {
+    private readonly challengeEventService = inject(ChallengeEventService);
+    private ws: WebSocket | null = null;
+    private reconnectAttempts = 0;
+    private readonly maxReconnectAttempts = 5;
+    private readonly reconnectDelay = 3000;
+
+    /**
+     * Initialize WebSocket connection for challenge events
+     */
+    connect(): void {
+        if (this.ws) {
+            return; // Already connected
+        }
+
+        const wsProtocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
+        const wsUrl = `${wsProtocol}://${window.location.host}/ws/challenges`;
+
+        try {
+            this.ws = new WebSocket(wsUrl);
+
+            this.ws.onopen = () => {
+                console.log('Challenge WebSocket connected');
+                this.reconnectAttempts = 0;
+            };
+
+            this.ws.onmessage = (event) => {
+                this.handleMessage(event.data);
+            };
+
+            this.ws.onerror = (error) => {
+                console.error('Challenge WebSocket error:', error);
+            };
+
+            this.ws.onclose = () => {
+                console.log('Challenge WebSocket disconnected');
+                this.ws = null;
+                this.attemptReconnect();
+            };
+        } catch (error) {
+            console.error('Failed to create WebSocket:', error);
+            this.attemptReconnect();
+        }
+    }
+
+    /**
+     * Close the WebSocket connection
+     */
+    disconnect(): void {
+        if (this.ws) {
+            this.ws.close();
+            this.ws = null;
+        }
+    }
+
+    /**
+     * Send a message through WebSocket
+     */
+    send(message: any): void {
+        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+            this.ws.send(JSON.stringify(message));
+        }
+    }
+
+    /**
+     * Handle incoming WebSocket messages
+     */
+    private handleMessage(data: string): void {
+        try {
+            const message = JSON.parse(data);
+
+            if (!message.type) {
+                return;
+            }
+
+            switch (message.type) {
+                case 'challenge.received':
+                    if (message.challenge) {
+                        this.challengeEventService.onChallengeReceived(message.challenge as Challenge);
+                    }
+                    break;
+
+                case 'challenge.accepted':
+                    if (message.challenge) {
+                        this.challengeEventService.onChallengeAccepted(message.challenge as Challenge);
+                    }
+                    break;
+
+                case 'challenge.declined':
+                    if (message.challengeId) {
+                        this.challengeEventService.removeChallenge(message.challengeId);
+                    }
+                    break;
+
+                case 'challenge.expired':
+                    if (message.challengeId) {
+                        this.challengeEventService.removeChallenge(message.challengeId);
+                    }
+                    break;
+
+                default:
+                    console.debug('Unknown challenge message type:', message.type);
+            }
+        } catch (error) {
+            console.error('Failed to parse WebSocket message:', error);
+        }
+    }
+
+    /**
+     * Attempt to reconnect to WebSocket
+     */
+    private attemptReconnect(): void {
+        if (this.reconnectAttempts >= this.maxReconnectAttempts) {
+            console.error('Max WebSocket reconnection attempts reached');
+            return;
+        }
+
+        this.reconnectAttempts++;
+        console.log(`Attempting WebSocket reconnect (${this.reconnectAttempts}/${this.maxReconnectAttempts})...`);
+
+        setTimeout(() => {
+            this.connect();
+        }, this.reconnectDelay);
+    }
+}

src/app/services/challenge.service.ts

@@ -0,0 +1,50 @@
+import { Injectable, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Challenge, DeclineChallengeRequest, ListChallengesResponse, SendChallengeRequest } from '../models/challenge.models';
+
+@Injectable({ providedIn: 'root' })
+export class ChallengeService {
+    private readonly http = inject(HttpClient);
+    private readonly challengeBaseUrl = '/api/challenge';
+
+    sendChallenge(username: string, request: SendChallengeRequest): Observable<Challenge> {
+        return this.http.post<Challenge>(
+            `${this.challengeBaseUrl}/${username}`,
+            request
+        );
+    }
+
+    listChallenges(): Observable<ListChallengesResponse> {
+        return this.http.get<ListChallengesResponse>(
+            `${this.challengeBaseUrl}`
+        );
+    }
+
+    getChallenge(challengeId: string): Observable<Challenge> {
+        return this.http.get<Challenge>(
+            `${this.challengeBaseUrl}/${challengeId}`
+        );
+    }
+
+    acceptChallenge(challengeId: string): Observable<Challenge> {
+        return this.http.post<Challenge>(
+            `${this.challengeBaseUrl}/${challengeId}/accept`,
+            {}
+        );
+    }
+
+    declineChallenge(challengeId: string, request?: DeclineChallengeRequest): Observable<void> {
+        return this.http.post<void>(
+            `${this.challengeBaseUrl}/${challengeId}/decline`,
+            request || {}
+        );
+    }
+
+    cancelChallenge(challengeId: string): Observable<void> {
+        return this.http.post<void>(
+            `${this.challengeBaseUrl}/${challengeId}/cancel`,
+            {}
+        );
+    }
+}

src/environments/environment.staging.ts

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

src/environments/environment.ts

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

src/index.html

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

src/styles-variables.css

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

versions.env

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