ci: bump version to v0.1.0

Co-authored-by: shahdlala66 <shahd.lala66@gmail.com>
Reviewed-on: #4
Co-authored-by: Shahd Lala <shosho996@blackhole.local>
Co-committed-by: Shahd Lala <shosho996@blackhole.local>

.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"
-}

CHANGELOG.md

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

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

public/env.template.js

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

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>

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

@@ -2,7 +2,8 @@
   <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">
@@ -10,16 +11,11 @@
 
       <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>

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/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>

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>
@@ -94,8 +94,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 +247,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/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=1
+PATCH=0