-
JOIN GAME
-
-
-
-
-
+
+
+
JOIN GAME
+
+
+
+
+
}
@if (showImportDialog) {
-
-
-
IMPORT GAME
-
-
-
-
-
-
-
-
-
+
+
+
IMPORT GAME
+
+
+
+
+
+
+
+
+
}
@if (errorMessage) {
-
{{ errorMessage }}
+
{{ errorMessage }}
}
-
+
\ No newline at end of file
diff --git a/src/app/pages/welcome/welcome.component.ts b/src/app/pages/welcome/welcome.component.ts
index f6cdb5b..a5fc29f 100644
--- a/src/app/pages/welcome/welcome.component.ts
+++ b/src/app/pages/welcome/welcome.component.ts
@@ -1,10 +1,15 @@
import { CommonModule } from '@angular/common';
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, DestroyRef, OnDestroy, OnInit, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Router } from '@angular/router';
import { finalize } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { getErrorMessage } from '../../core/http/error-message.util';
+import { CurrentUser } from '../../models/auth.models';
+import { AuthDialogService } from '../../services/auth-dialog.service';
+import { AuthService } from '../../services/auth.service';
import { GameApiService } from '../../services/game-api.service';
+import { ThemeService } from '../../services/theme.service';
type Difficulty = 'easy' | 'medium' | 'hard';
type ImportMode = 'fen' | 'pgn';
@@ -32,6 +37,11 @@ interface WindowCell {
styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent implements OnInit, OnDestroy {
+ private readonly destroyRef = inject(DestroyRef);
+ private readonly authService = inject(AuthService);
+ private readonly authDialogService = inject(AuthDialogService);
+ private readonly themeService = inject(ThemeService);
+
creating = false;
joiningGame = false;
importing = false;
@@ -48,6 +58,9 @@ export class WelcomeComponent implements OnInit, OnDestroy {
isSunsetMode = false;
modeBadge = 'NIGHT MODE';
+ currentUser: CurrentUser | null = null;
+ private authDialogState: 'login' | 'register' | null = null;
+ private pendingAction: (() => void) | null = null;
// Speech bubble and zoom features
showSpeechBubble = false;
@@ -82,10 +95,30 @@ export class WelcomeComponent implements OnInit, OnDestroy {
private readonly router: Router,
private readonly gameApi: GameApiService
) {
- this.initTheme();
}
ngOnInit(): void {
+ this.themeService.darkMode$
+ .pipe(takeUntilDestroyed(this.destroyRef))
+ .subscribe((isDarkMode) => {
+ this.isSunsetMode = !isDarkMode;
+ this.modeBadge = this.isSunsetMode ? 'SUNSET MODE' : 'NIGHT MODE';
+ });
+
+ this.authService.currentUser$
+ .pipe(takeUntilDestroyed(this.destroyRef))
+ .subscribe((user) => {
+ this.currentUser = user;
+ this.maybeRunPendingAction();
+ });
+
+ this.authDialogService.dialogState$
+ .pipe(takeUntilDestroyed(this.destroyRef))
+ .subscribe((state) => {
+ this.authDialogState = state;
+ this.maybeRunPendingAction();
+ });
+
this.generateStars(220);
this.generateBackgroundBuildings();
this.generateWindowsForAllBuildings();
@@ -107,21 +140,11 @@ export class WelcomeComponent implements OnInit, OnDestroy {
}
}
- toggleTheme(): void {
- this.isSunsetMode = !this.isSunsetMode;
- this.modeBadge = this.isSunsetMode ? 'SUNSET MODE' : 'NIGHT MODE';
-
- if (!this.isSunsetMode) {
- document.documentElement.setAttribute('data-theme', 'dark');
- localStorage.setItem('theme', 'dark');
+ openDifficultyDialog(): void {
+ if (!this.requireAuth(() => this.showDifficultyDialog = true)) {
return;
}
- document.documentElement.removeAttribute('data-theme');
- localStorage.removeItem('theme');
- }
-
- openDifficultyDialog(): void {
this.closeAllDialogs();
this.showDifficultyDialog = true;
}
@@ -142,6 +165,10 @@ export class WelcomeComponent implements OnInit, OnDestroy {
}
openJoinDialog(): void {
+ if (!this.requireAuth(() => this.showJoinDialog = true)) {
+ return;
+ }
+
this.closeAllDialogs();
this.showJoinDialog = true;
}
@@ -156,6 +183,10 @@ export class WelcomeComponent implements OnInit, OnDestroy {
}
openImportDialog(): void {
+ if (!this.requireAuth(() => this.showImportDialog = true)) {
+ return;
+ }
+
this.closeAllDialogs();
this.showImportDialog = true;
}
@@ -176,101 +207,35 @@ export class WelcomeComponent implements OnInit, OnDestroy {
}
startOneVsOne(): void {
- if (this.creating) {
+ if (!this.requireAuth(() => this.performStartOneVsOne())) {
return;
}
- this.errorMessage = '';
- this.creating = true;
-
- this.gameApi
- .createGame()
- .pipe(finalize(() => (this.creating = false)))
- .subscribe({
- next: (game) => {
- void this.router.navigate(['/game', game.gameId], {
- state: { theme: this.isSunsetMode ? 'light' : 'dark' }
- });
- },
- error: (error) => {
- this.errorMessage = getErrorMessage(error, 'Unable to create a game.');
- }
- });
+ this.performStartOneVsOne();
}
startVsBot(difficulty: Difficulty): void {
- if (this.creating) {
+ if (!this.requireAuth(() => this.performStartVsBot(difficulty))) {
return;
}
- this.errorMessage = '';
- this.creating = true;
- this.showDifficultyDialog = false;
-
- this.gameApi
- .createGameVsBot(difficulty)
- .pipe(finalize(() => (this.creating = false)))
- .subscribe({
- next: (game) => {
- void this.router.navigate(['/game', game.gameId], {
- state: { theme: this.isSunsetMode ? 'light' : 'dark' }
- });
- },
- error: (error) => {
- this.errorMessage = getErrorMessage(error, 'Unable to create a game against bot.');
- }
- });
+ this.performStartVsBot(difficulty);
}
submitJoinGame(): void {
- const gameId = this.gameIdInput.trim();
- if (this.joiningGame || !gameId) {
+ if (!this.requireAuth(() => this.performSubmitJoinGame())) {
return;
}
- this.errorMessage = '';
- this.joiningGame = true;
-
- this.gameApi
- .getGame(gameId)
- .pipe(finalize(() => (this.joiningGame = false)))
- .subscribe({
- next: (game) => {
- this.closeJoinDialog();
- void this.router.navigate(['/game', game.gameId], {
- state: { theme: this.isSunsetMode ? 'light' : 'dark' }
- });
- },
- error: (error) => {
- this.errorMessage = getErrorMessage(error, 'Unable to find or join the game.');
- }
- });
+ this.performSubmitJoinGame();
}
submitImportGame(): void {
- const trimmedImport = this.importText.trim();
- if (this.importing || !trimmedImport) {
+ if (!this.requireAuth(() => this.performSubmitImportGame())) {
return;
}
- this.errorMessage = '';
- this.importing = true;
-
- const importRequest =
- this.importMode === 'fen' ? this.gameApi.importFen(trimmedImport) : this.gameApi.importPgn(trimmedImport);
-
- importRequest.pipe(finalize(() => (this.importing = false))).subscribe({
- next: (game) => {
- this.closeImportDialog();
- void this.router.navigate(['/game', game.gameId], {
- state: { theme: this.isSunsetMode ? 'light' : 'dark' }
- });
- },
- error: (error) => {
- const defaultMessage = this.importMode === 'fen' ? 'Unable to import FEN.' : 'Unable to import PGN.';
- this.errorMessage = getErrorMessage(error, defaultMessage);
- }
- });
+ this.performSubmitImportGame();
}
onSpeechBubbleClick(): void {
@@ -313,7 +278,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
this.meatX = event.clientX - this.meatDragOffsetX;
this.meatY = event.clientY - this.meatDragOffsetY;
- // Get gif element position
const gifElement = document.querySelector('.player-2-gif') as HTMLElement;
if (!gifElement) {
return;
@@ -323,7 +287,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
const gifCenterX = gifRect.left + gifRect.width / 2;
const gifCenterY = gifRect.top + gifRect.height / 2;
- // Get meat center position
const meatElement = document.querySelector('.meat-emoji') as HTMLElement;
if (!meatElement) {
return;
@@ -333,12 +296,10 @@ export class WelcomeComponent implements OnInit, OnDestroy {
const meatCenterX = meatRect.left + meatRect.width / 2;
const meatCenterY = meatRect.top + meatRect.height / 2;
- // Calculate distance
const distance = Math.sqrt(
Math.pow(meatCenterX - gifCenterX, 2) + Math.pow(meatCenterY - gifCenterY, 2)
);
- // If meat is close enough to gif center (within 50px), trigger the interaction
if (distance < 50) {
this.onMeatFed();
}
@@ -355,6 +316,124 @@ export class WelcomeComponent implements OnInit, OnDestroy {
this.isDraggingMeat = false;
}
+ private requireAuth(action: () => void): boolean {
+ if (this.authService.isLoggedIn()) {
+ return true;
+ }
+
+ this.pendingAction = action;
+ this.authDialogService.openLogin();
+ return false;
+ }
+
+ private maybeRunPendingAction(): void {
+ if (!this.currentUser || this.authDialogState !== null || !this.pendingAction) {
+ return;
+ }
+
+ const action = this.pendingAction;
+ this.pendingAction = null;
+ action();
+ }
+
+ private performStartOneVsOne(): void {
+ if (this.creating) {
+ return;
+ }
+
+ this.errorMessage = '';
+ this.creating = true;
+
+ this.gameApi
+ .createGame()
+ .pipe(finalize(() => (this.creating = false)))
+ .subscribe({
+ next: (game) => {
+ void this.router.navigate(['/game', game.gameId], {
+ state: { theme: this.isSunsetMode ? 'light' : 'dark' }
+ });
+ },
+ error: (error) => {
+ this.errorMessage = getErrorMessage(error, 'Unable to create a game.');
+ }
+ });
+ }
+
+ private performStartVsBot(difficulty: Difficulty): void {
+ if (this.creating) {
+ return;
+ }
+
+ this.errorMessage = '';
+ this.creating = true;
+ this.showDifficultyDialog = false;
+
+ this.gameApi
+ .createGameVsBot(difficulty)
+ .pipe(finalize(() => (this.creating = false)))
+ .subscribe({
+ next: (game) => {
+ void this.router.navigate(['/game', game.gameId], {
+ state: { theme: this.isSunsetMode ? 'light' : 'dark' }
+ });
+ },
+ error: (error) => {
+ this.errorMessage = getErrorMessage(error, 'Unable to create a game against bot.');
+ }
+ });
+ }
+
+ private performSubmitJoinGame(): void {
+ const gameId = this.gameIdInput.trim();
+ if (this.joiningGame || !gameId) {
+ return;
+ }
+
+ this.errorMessage = '';
+ this.joiningGame = true;
+
+ this.gameApi
+ .getGame(gameId)
+ .pipe(finalize(() => (this.joiningGame = false)))
+ .subscribe({
+ next: (game) => {
+ this.closeJoinDialog();
+ void this.router.navigate(['/game', game.gameId], {
+ state: { theme: this.isSunsetMode ? 'light' : 'dark' }
+ });
+ },
+ error: (error) => {
+ this.errorMessage = getErrorMessage(error, 'Unable to find or join the game.');
+ }
+ });
+ }
+
+ private performSubmitImportGame(): void {
+ const trimmedImport = this.importText.trim();
+ if (this.importing || !trimmedImport) {
+ return;
+ }
+
+ this.errorMessage = '';
+ this.importing = true;
+
+ const importRequest =
+ this.importMode === 'fen' ? this.gameApi.importFen(trimmedImport) : this.gameApi.importPgn(trimmedImport);
+
+ importRequest.pipe(finalize(() => (this.importing = false))).subscribe({
+ next: (game) => {
+ this.closeImportDialog();
+ void this.router.navigate(['/game', game.gameId], {
+ state: { theme: this.isSunsetMode ? 'light' : 'dark' }
+ });
+ },
+ error: (error) => {
+ const defaultMessage = this.importMode === 'fen' ? 'Unable to import FEN.' : 'Unable to import PGN.';
+ this.errorMessage = getErrorMessage(error, defaultMessage);
+ }
+ });
+ }
+
private closeAllDialogs(): void {
this.showDifficultyDialog = false;
this.showOptionsDialog = false;
@@ -363,19 +442,6 @@ export class WelcomeComponent implements OnInit, OnDestroy {
this.errorMessage = '';
}
- private initTheme(): void {
- const savedTheme = localStorage.getItem('theme');
- this.isSunsetMode = savedTheme !== 'dark';
- this.modeBadge = this.isSunsetMode ? 'SUNSET MODE' : 'NIGHT MODE';
-
- if (!this.isSunsetMode) {
- document.documentElement.setAttribute('data-theme', 'dark');
- return;
- }
-
- document.documentElement.removeAttribute('data-theme');
- }
-
private generateStars(count: number): void {
this.stars = Array.from({ length: count }, () => {
const size = Math.random() * 2 + 0.5;
diff --git a/src/app/services/auth-dialog.service.ts b/src/app/services/auth-dialog.service.ts
new file mode 100644
index 0000000..9d41dd1
--- /dev/null
+++ b/src/app/services/auth-dialog.service.ts
@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+export type AuthDialogState = 'login' | 'register' | null;
+
+@Injectable({ providedIn: 'root' })
+export class AuthDialogService {
+ private readonly dialogStateSubject = new BehaviorSubject
(null);
+
+ readonly dialogState$ = this.dialogStateSubject.asObservable();
+
+ openLogin(): void {
+ this.dialogStateSubject.next('login');
+ }
+
+ openRegister(): void {
+ this.dialogStateSubject.next('register');
+ }
+
+ close(): void {
+ this.dialogStateSubject.next(null);
+ }
+}
\ No newline at end of file
diff --git a/src/app/services/auth.interceptor.ts b/src/app/services/auth.interceptor.ts
new file mode 100644
index 0000000..c878833
--- /dev/null
+++ b/src/app/services/auth.interceptor.ts
@@ -0,0 +1,22 @@
+import { HttpInterceptorFn } from '@angular/common/http';
+
+export const authInterceptor: HttpInterceptorFn = (req, next) => {
+ const token = localStorage.getItem('token');
+
+ // Add token to protected endpoints only (not registration or login)
+ const isProtectedEndpoint =
+ req.url.includes('/api/account/me') ||
+ req.url.includes('/api/account/bots') ||
+ req.url.includes('/api/account/official-bots') ||
+ req.url.includes('/api/challenge');
+
+ if (token && isProtectedEndpoint) {
+ req = req.clone({
+ setHeaders: {
+ Authorization: `Bearer ${token}`
+ }
+ });
+ }
+
+ return next(req);
+};
diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts
new file mode 100644
index 0000000..178b315
--- /dev/null
+++ b/src/app/services/auth.service.ts
@@ -0,0 +1,93 @@
+import { Injectable, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
+import { environment } from '../../environments/environment';
+import { LoginRequest, RegisterRequest, RegisterResponse, LoginResponse, CurrentUser } from '../models/auth.models';
+
+@Injectable({ providedIn: 'root' })
+export class AuthService {
+ private readonly apiBase = environment.apiBaseUrl;
+ private readonly accountServiceUrl = environment.accountServiceUrl;
+ private readonly http = inject(HttpClient);
+
+ private currentUserSubject = new BehaviorSubject(null);
+ public currentUser$ = this.currentUserSubject.asObservable();
+
+ constructor() {
+ this.loadCurrentUser();
+ }
+
+ login(username: string, password: string): Observable {
+ return this.http
+ .post(`${this.accountServiceUrl}/api/account/login`, {
+ username,
+ password
+ })
+ .pipe(
+ tap((response) => {
+ localStorage.setItem('token', response.token);
+ localStorage.setItem('username', username);
+ // After login, fetch current user info
+ this.getCurrentUser().subscribe();
+ })
+ );
+ }
+
+ register(username: string, password: string, email?: string): Observable {
+ return this.http
+ .post(`${this.accountServiceUrl}/api/account`, {
+ username,
+ password,
+ email
+ })
+ .pipe(
+ tap((response) => {
+ localStorage.setItem('username', response.username);
+ localStorage.setItem('userId', response.id);
+ this.currentUserSubject.next({
+ id: response.id,
+ username: response.username,
+ rating: response.rating,
+ createdAt: response.createdAt
+ });
+ })
+ );
+ }
+
+ getCurrentUser(): Observable {
+ return this.http.get(`${this.accountServiceUrl}/api/account/me`).pipe(
+ tap((user) => {
+ localStorage.setItem('username', user.username);
+ localStorage.setItem('userId', user.id);
+ this.currentUserSubject.next(user);
+ })
+ );
+ }
+
+ logout(): void {
+ localStorage.removeItem('token');
+ localStorage.removeItem('username');
+ localStorage.removeItem('userId');
+ this.currentUserSubject.next(null);
+ }
+
+ isLoggedIn(): boolean {
+ return !!localStorage.getItem('token');
+ }
+
+ private loadCurrentUser(): void {
+ const token = localStorage.getItem('token');
+ const username = localStorage.getItem('username');
+ const userId = localStorage.getItem('userId');
+ if (token && username && userId) {
+ // Try to verify token is still valid by fetching current user
+ this.getCurrentUser().subscribe({
+ error: () => {
+ // Token is invalid, clear it
+ this.logout();
+ }
+ });
+ }
+ }
+}
diff --git a/src/app/services/theme.service.ts b/src/app/services/theme.service.ts
new file mode 100644
index 0000000..2083c4a
--- /dev/null
+++ b/src/app/services/theme.service.ts
@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class ThemeService {
+ private readonly darkModeSubject = new BehaviorSubject(false);
+
+ readonly darkMode$ = this.darkModeSubject.asObservable();
+
+ initTheme(): void {
+ const savedTheme = localStorage.getItem('theme');
+ this.applyDarkMode(savedTheme === 'dark');
+ }
+
+ toggleTheme(): void {
+ this.applyDarkMode(!this.darkModeSubject.value);
+ }
+
+ setDarkMode(isDarkMode: boolean): void {
+ this.applyDarkMode(isDarkMode);
+ }
+
+ private applyDarkMode(isDarkMode: boolean): void {
+ if (isDarkMode) {
+ document.documentElement.setAttribute('data-theme', 'dark');
+ localStorage.setItem('theme', 'dark');
+ } else {
+ document.documentElement.removeAttribute('data-theme');
+ localStorage.removeItem('theme');
+ }
+
+ this.darkModeSubject.next(isDarkMode);
+ }
+}
\ No newline at end of file
diff --git a/src/environments/environment.development.ts b/src/environments/environment.development.ts
index e55757c..9ad1e10 100644
--- a/src/environments/environment.development.ts
+++ b/src/environments/environment.development.ts
@@ -1,6 +1,7 @@
export const environment = {
production: false,
apiBaseUrl: '',
+ accountServiceUrl: '',
wsBaseUrl: 'ws://localhost:8080',
apiPath: '/api/board/game'
};
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 42a2794..8c38733 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -1,6 +1,7 @@
export const environment = {
production: true,
apiBaseUrl: '',
+ accountServiceUrl: '',
wsBaseUrl: 'ws://localhost:8080',
apiPath: '/api/board/game'
};
diff --git a/src/styles-variables.css b/src/styles-variables.css
index ac13142..4b83bf2 100644
--- a/src/styles-variables.css
+++ b/src/styles-variables.css
@@ -122,4 +122,15 @@
SHADOWS
======================================== */
--shadow-md: 0 8px 24px rgba(90, 44, 40, 0.2);
+ /* Neon dialog / card variables (used by welcome dialogs, toolbar, login/register) */
+ --bb-bg: rgba(8, 6, 28, 0.92);
+ --bb-border: #00d5ff;
+ --bb-glow: 0 0 18px rgba(0, 210, 255, 0.5), inset 0 0 10px rgba(0, 210, 255, 0.05);
+ --bb-tag: #00d5ff;
+ --bb-title: #d4f4ff;
+ --btn-bg: #00d5ff;
+ --btn-fg: #04000f;
+ --btn-glow: 0 0 14px rgba(0, 210, 255, 0.9);
+ --dlg-bg: rgba(8, 6, 28, 0.95);
+ --dlg-border: #00d5ff;
}
\ No newline at end of file
- @if (showSecondSpeechBubble) {
-