feat: login and register, style is not ready
This commit is contained in:
Lala, Shahd
@@ -1,15 +1,4 @@
|
||||
<div class="cityscape-shell" [class.sunset]="isSunsetMode">
|
||||
<div class="mode-badge">{{ modeBadge }}</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="tgl"
|
||||
(click)="toggleTheme()"
|
||||
[attr.aria-label]="isSunsetMode ? 'Switch to night mode' : 'Switch to sunset mode'"
|
||||
title="Toggle theme"
|
||||
>
|
||||
<span class="tgl-icon">{{ isSunsetMode ? '🌙' : '☀' }}</span>
|
||||
</button>
|
||||
|
||||
<div class="scene">
|
||||
<div class="sky">
|
||||
@@ -35,20 +24,12 @@
|
||||
<div class="ant" style="height:38px;"></div>
|
||||
<div class="bpart" style="width:55%;margin:0 auto;height:7vh;">
|
||||
<div class="wins" style="grid-template-columns:repeat(3,1fr);height:100%;align-content:start;">
|
||||
<div
|
||||
class="w"
|
||||
*ngFor="let win of windows['wA1']"
|
||||
[ngStyle]="win.style"
|
||||
></div>
|
||||
<div class="w" *ngFor="let win of windows['wA1']" [ngStyle]="win.style"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bpart" style="width:80%;margin:0 auto;height:9vh;">
|
||||
<div class="wins" style="grid-template-columns:repeat(4,1fr);align-content:start;height:100%;">
|
||||
<div
|
||||
class="w"
|
||||
*ngFor="let win of windows['wA2']"
|
||||
[ngStyle]="win.style"
|
||||
></div>
|
||||
<div class="w" *ngFor="let win of windows['wA2']" [ngStyle]="win.style"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bpart" style="height:36vh;">
|
||||
@@ -62,11 +43,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="wins" style="grid-template-columns:repeat(5,1fr);">
|
||||
<div
|
||||
class="w"
|
||||
*ngFor="let win of windows['wA3']"
|
||||
[ngStyle]="win.style"
|
||||
></div>
|
||||
<div class="w" *ngFor="let win of windows['wA3']" [ngStyle]="win.style"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -74,11 +51,7 @@
|
||||
<div class="bwrap" style="left:21%;width:15%;">
|
||||
<div class="bpart" style="height:5vh;width:90%;margin:0 auto;">
|
||||
<div class="wins" style="grid-template-columns:repeat(4,1fr);height:100%;align-content:start;">
|
||||
<div
|
||||
class="w"
|
||||
*ngFor="let win of windows['wB1']"
|
||||
[ngStyle]="win.style"
|
||||
></div>
|
||||
<div class="w" *ngFor="let win of windows['wB1']" [ngStyle]="win.style"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bpart" style="height:44vh;">
|
||||
@@ -95,11 +68,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="wins" style="grid-template-columns:repeat(5,1fr);">
|
||||
<div
|
||||
class="w"
|
||||
*ngFor="let win of windows['wB2']"
|
||||
[ngStyle]="win.style"
|
||||
></div>
|
||||
<div class="w" *ngFor="let win of windows['wB2']" [ngStyle]="win.style"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -111,20 +80,12 @@
|
||||
</div>
|
||||
<div class="bpart" style="height:6vh;width:70%;margin:0 auto;border-radius:2px 2px 0 0;">
|
||||
<div class="wins" style="grid-template-columns:repeat(5,1fr);height:100%;align-content:start;">
|
||||
<div
|
||||
class="w"
|
||||
*ngFor="let win of windows['wC1']"
|
||||
[ngStyle]="win.style"
|
||||
></div>
|
||||
<div class="w" *ngFor="let win of windows['wC1']" [ngStyle]="win.style"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bpart" style="height:10vh;">
|
||||
<div class="wins" style="grid-template-columns:repeat(6,1fr);align-content:start;height:100%;">
|
||||
<div
|
||||
class="w"
|
||||
*ngFor="let win of windows['wC2']"
|
||||
[ngStyle]="win.style"
|
||||
></div>
|
||||
<div class="w" *ngFor="let win of windows['wC2']" [ngStyle]="win.style"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bpart" style="height:48vh;">
|
||||
@@ -133,17 +94,14 @@
|
||||
<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="bb-btn" style="padding:7px 20px;font-size:11px;" (click)="startOneVsOne()" [disabled]="creating">
|
||||
<button type="button" class="bb-btn" style="padding:7px 20px;font-size:11px;" (click)="startOneVsOne()"
|
||||
[disabled]="creating">
|
||||
{{ creating ? 'CREATING...' : 'START NOW →' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wins" style="grid-template-columns:repeat(7,1fr);">
|
||||
<div
|
||||
class="w"
|
||||
*ngFor="let win of windows['wC3']"
|
||||
[ngStyle]="win.style"
|
||||
></div>
|
||||
<div class="w" *ngFor="let win of windows['wC3']" [ngStyle]="win.style"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -152,11 +110,7 @@
|
||||
<div class="ant" style="height:30px;"></div>
|
||||
<div class="bpart" style="height:5vh;width:110%;margin-left:-5%;">
|
||||
<div class="wins" style="grid-template-columns:repeat(6,1fr);height:100%;align-content:start;">
|
||||
<div
|
||||
class="w"
|
||||
*ngFor="let win of windows['wD1']"
|
||||
[ngStyle]="win.style"
|
||||
></div>
|
||||
<div class="w" *ngFor="let win of windows['wD1']" [ngStyle]="win.style"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bpart" style="height:42vh;">
|
||||
@@ -171,11 +125,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="wins" style="grid-template-columns:repeat(6,1fr);">
|
||||
<div
|
||||
class="w"
|
||||
*ngFor="let win of windows['wD2']"
|
||||
[ngStyle]="win.style"
|
||||
></div>
|
||||
<div class="w" *ngFor="let win of windows['wD2']" [ngStyle]="win.style"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -183,11 +133,7 @@
|
||||
<div class="bwrap" style="left:83%;width:10%;">
|
||||
<div class="bpart" style="height:30vh;">
|
||||
<div class="wins" style="grid-template-columns:repeat(3,1fr);height:100%;align-content:start;">
|
||||
<div
|
||||
class="w"
|
||||
*ngFor="let win of windows['wE1']"
|
||||
[ngStyle]="win.style"
|
||||
></div>
|
||||
<div class="w" *ngFor="let win of windows['wE1']" [ngStyle]="win.style"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -195,54 +141,46 @@
|
||||
|
||||
<!-- Speech Bubble -->
|
||||
@if (showSpeechBubble) {
|
||||
<div class="speech-bubble-container" (click)="onSpeechBubbleClick()">
|
||||
<div class="speech-bubble">
|
||||
<div class="bubble-text">{{ bubbleMessage }}</div>
|
||||
<div class="bubble-tail"></div>
|
||||
</div>
|
||||
<div class="speech-bubble-container" (click)="onSpeechBubbleClick()">
|
||||
<div class="speech-bubble">
|
||||
<div class="bubble-text">{{ bubbleMessage }}</div>
|
||||
<div class="bubble-tail"></div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Zoomed Window View -->
|
||||
@if (isZoomedIn) {
|
||||
<div class="zoom-overlay" (click)="onZoomedViewClick()" (mousemove)="onMouseMove($event)" (mouseup)="onMouseUp()" (mouseleave)="onMouseUp()">
|
||||
<div class="zoom-window-wrapper" (click)="$event.stopPropagation()">
|
||||
<div class="zoom-window-frame">
|
||||
<div class="zoom-player-2">
|
||||
<img
|
||||
src="/assets/arabian-chess/player-two.gif"
|
||||
alt="Player 2"
|
||||
class="player-2-gif"
|
||||
(click)="$event.stopPropagation()"
|
||||
/>
|
||||
@if (showSecondSpeechBubble) {
|
||||
<div class="second-speech-bubble">
|
||||
<div class="bubble-text">Feed me! 🍖</div>
|
||||
<div class="bubble-tail"></div>
|
||||
</div>
|
||||
}
|
||||
@if (showHappyBubble) {
|
||||
<div class="happy-speech-bubble">
|
||||
<div class="bubble-text">Happy meow! 😸</div>
|
||||
<div class="bubble-tail"></div>
|
||||
</div>
|
||||
}
|
||||
<div class="zoom-overlay" (click)="onZoomedViewClick()" (mousemove)="onMouseMove($event)" (mouseup)="onMouseUp()"
|
||||
(mouseleave)="onMouseUp()">
|
||||
<div class="zoom-window-wrapper" (click)="$event.stopPropagation()">
|
||||
<div class="zoom-window-frame">
|
||||
<div class="zoom-player-2">
|
||||
<img src="/assets/arabian-chess/player-two.gif" alt="Player 2" class="player-2-gif"
|
||||
(click)="$event.stopPropagation()" />
|
||||
@if (showSecondSpeechBubble) {
|
||||
<div class="second-speech-bubble">
|
||||
<div class="bubble-text">Feed me! 🍖</div>
|
||||
<div class="bubble-tail"></div>
|
||||
</div>
|
||||
}
|
||||
@if (showHappyBubble) {
|
||||
<div class="happy-speech-bubble">
|
||||
<div class="bubble-text">Happy meow! 😸</div>
|
||||
<div class="bubble-tail"></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>
|
||||
|
||||
<!-- Draggable Meat Emoji -->
|
||||
@if (showMeatEmoji) {
|
||||
<div class="meat-emoji" [style.left.px]="meatX" [style.top.px]="meatY" (mousedown)="onMeatMouseDown($event)">
|
||||
🍖
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="haze"></div>
|
||||
@@ -250,83 +188,77 @@
|
||||
</div>
|
||||
|
||||
@if (showDifficultyDialog) {
|
||||
<div class="dialog-overlay" (click)="closeDifficultyDialog()">
|
||||
<div class="dialog-card" (click)="$event.stopPropagation()">
|
||||
<div class="dialog-title">SELECT DIFFICULTY</div>
|
||||
<div class="dialog-actions">
|
||||
<button type="button" class="dialog-btn" (click)="startVsBot('easy')" [disabled]="creating">EASY</button>
|
||||
<button type="button" class="dialog-btn" (click)="startVsBot('medium')" [disabled]="creating">MEDIUM</button>
|
||||
<button type="button" class="dialog-btn" (click)="startVsBot('hard')" [disabled]="creating">HARD</button>
|
||||
</div>
|
||||
<div class="dialog-overlay" (click)="closeDifficultyDialog()">
|
||||
<div class="dialog-card" (click)="$event.stopPropagation()">
|
||||
<div class="dialog-title">SELECT DIFFICULTY</div>
|
||||
<div class="dialog-actions">
|
||||
<button type="button" class="dialog-btn" (click)="startVsBot('easy')" [disabled]="creating">EASY</button>
|
||||
<button type="button" class="dialog-btn" (click)="startVsBot('medium')" [disabled]="creating">MEDIUM</button>
|
||||
<button type="button" class="dialog-btn" (click)="startVsBot('hard')" [disabled]="creating">HARD</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (showOptionsDialog) {
|
||||
<div class="dialog-overlay" (click)="closeOptionsDialog()">
|
||||
<div class="dialog-card" (click)="$event.stopPropagation()">
|
||||
<div class="dialog-title">MORE OPTIONS</div>
|
||||
<div class="dialog-actions">
|
||||
<button type="button" class="dialog-btn" (click)="openImportDialog()">IMPORT GAME</button>
|
||||
</div>
|
||||
<div class="dialog-overlay" (click)="closeOptionsDialog()">
|
||||
<div class="dialog-card" (click)="$event.stopPropagation()">
|
||||
<div class="dialog-title">MORE OPTIONS</div>
|
||||
<div class="dialog-actions">
|
||||
<button type="button" class="dialog-btn" (click)="openImportDialog()">IMPORT GAME</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (showJoinDialog) {
|
||||
<div class="dialog-overlay" (click)="closeJoinDialog()">
|
||||
<div class="dialog-card" (click)="$event.stopPropagation()">
|
||||
<div class="dialog-title">JOIN GAME</div>
|
||||
<input
|
||||
type="text"
|
||||
class="dialog-input"
|
||||
[(ngModel)]="gameIdInput"
|
||||
placeholder="Paste game ID here"
|
||||
[disabled]="joiningGame"
|
||||
(keyup.enter)="submitJoinGame()"
|
||||
/>
|
||||
<div class="dialog-actions">
|
||||
<button type="button" class="dialog-btn" (click)="submitJoinGame()" [disabled]="joiningGame || !gameIdInput.trim()">
|
||||
{{ joiningGame ? 'JOINING...' : 'JOIN' }}
|
||||
</button>
|
||||
<button type="button" class="dialog-btn" (click)="closeJoinDialog()" [disabled]="joiningGame">CANCEL</button>
|
||||
</div>
|
||||
<div class="dialog-overlay" (click)="closeJoinDialog()">
|
||||
<div class="dialog-card" (click)="$event.stopPropagation()">
|
||||
<div class="dialog-title">JOIN GAME</div>
|
||||
<input type="text" class="dialog-input" [(ngModel)]="gameIdInput" placeholder="Paste game ID here"
|
||||
[disabled]="joiningGame" (keyup.enter)="submitJoinGame()" />
|
||||
<div class="dialog-actions">
|
||||
<button type="button" class="dialog-btn" (click)="submitJoinGame()"
|
||||
[disabled]="joiningGame || !gameIdInput.trim()">
|
||||
{{ joiningGame ? 'JOINING...' : 'JOIN' }}
|
||||
</button>
|
||||
<button type="button" class="dialog-btn" (click)="closeJoinDialog()" [disabled]="joiningGame">CANCEL</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (showImportDialog) {
|
||||
<div class="dialog-overlay" (click)="closeImportDialog()">
|
||||
<div class="dialog-card" (click)="$event.stopPropagation()">
|
||||
<div class="dialog-title">IMPORT GAME</div>
|
||||
<div class="import-mode-group" role="radiogroup" aria-label="Import mode">
|
||||
<label class="import-mode-option">
|
||||
<input type="radio" name="importMode" [checked]="importMode === 'fen'" (change)="setImportMode('fen')" [disabled]="importing" />
|
||||
<span>FEN</span>
|
||||
</label>
|
||||
<label class="import-mode-option">
|
||||
<input type="radio" name="importMode" [checked]="importMode === 'pgn'" (change)="setImportMode('pgn')" [disabled]="importing" />
|
||||
<span>PGN</span>
|
||||
</label>
|
||||
</div>
|
||||
<textarea
|
||||
class="dialog-input dialog-textarea"
|
||||
[(ngModel)]="importText"
|
||||
[placeholder]="importMode === 'fen' ? 'Paste FEN here' : 'Paste PGN here'"
|
||||
[disabled]="importing"
|
||||
rows="5"
|
||||
></textarea>
|
||||
<div class="dialog-actions">
|
||||
<button type="button" class="dialog-btn" (click)="submitImportGame()" [disabled]="importing || !importText.trim()">
|
||||
{{ importing ? 'IMPORTING...' : 'IMPORT' }}
|
||||
</button>
|
||||
<button type="button" class="dialog-btn" (click)="closeImportDialog()" [disabled]="importing">CANCEL</button>
|
||||
</div>
|
||||
<div class="dialog-overlay" (click)="closeImportDialog()">
|
||||
<div class="dialog-card" (click)="$event.stopPropagation()">
|
||||
<div class="dialog-title">IMPORT GAME</div>
|
||||
<div class="import-mode-group" role="radiogroup" aria-label="Import mode">
|
||||
<label class="import-mode-option">
|
||||
<input type="radio" name="importMode" [checked]="importMode === 'fen'" (change)="setImportMode('fen')"
|
||||
[disabled]="importing" />
|
||||
<span>FEN</span>
|
||||
</label>
|
||||
<label class="import-mode-option">
|
||||
<input type="radio" name="importMode" [checked]="importMode === 'pgn'" (change)="setImportMode('pgn')"
|
||||
[disabled]="importing" />
|
||||
<span>PGN</span>
|
||||
</label>
|
||||
</div>
|
||||
<textarea class="dialog-input dialog-textarea" [(ngModel)]="importText"
|
||||
[placeholder]="importMode === 'fen' ? 'Paste FEN here' : 'Paste PGN here'" [disabled]="importing"
|
||||
rows="5"></textarea>
|
||||
<div class="dialog-actions">
|
||||
<button type="button" class="dialog-btn" (click)="submitImportGame()"
|
||||
[disabled]="importing || !importText.trim()">
|
||||
{{ importing ? 'IMPORTING...' : 'IMPORT' }}
|
||||
</button>
|
||||
<button type="button" class="dialog-btn" (click)="closeImportDialog()" [disabled]="importing">CANCEL</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (errorMessage) {
|
||||
<p class="error-banner">{{ errorMessage }}</p>
|
||||
<p class="error-banner">{{ errorMessage }}</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user