feat: added bot, light and dark mode
This commit was merged in pull request #1.
This commit is contained in:
@@ -1,38 +1,38 @@
|
||||
.game-shell {
|
||||
min-height: 100dvh;
|
||||
padding: clamp(0.75rem, 2vw, 1.5rem);
|
||||
padding: clamp(var(--size-md), 2vw, var(--size-xl));
|
||||
}
|
||||
|
||||
.game-card {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
background: #F3C8A0;
|
||||
border: 2px solid #5A2C28;
|
||||
border-radius: 12px;
|
||||
padding: clamp(1rem, 2vw, 1.5rem);
|
||||
box-shadow: 0 8px 24px rgba(90, 44, 40, 0.2);
|
||||
background: var(--color-bg-main);
|
||||
border: var(--border-width) solid var(--color-border);
|
||||
border-radius: var(--border-radius-lg);
|
||||
padding: clamp(var(--size-lg), 2vw, var(--size-xl));
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: var(--size-xl);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
color: #5A2C28;
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: clamp(1.5rem, 4vw, 2rem);
|
||||
color: var(--color-text-primary);
|
||||
margin: 0 0 var(--size-md);
|
||||
font-size: var(--heading-h1);
|
||||
}
|
||||
|
||||
.meta {
|
||||
color: #5A2C28;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #5A2C28;
|
||||
margin-bottom: var(--size-sm);
|
||||
color: var(--color-text-primary);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -42,25 +42,19 @@ h2 {
|
||||
}
|
||||
|
||||
.top-section {
|
||||
background: #F3C8A0;
|
||||
padding: 0.75rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #5A2C28;
|
||||
display: grid;
|
||||
gap: var(--size-md);
|
||||
margin-top: var(--size-sm);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.move-form {
|
||||
align-items: center;
|
||||
.move-card {
|
||||
padding: var(--size-lg-padding);
|
||||
}
|
||||
|
||||
.move-form label {
|
||||
color: #5A2C28;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.board-hint {
|
||||
color: #5A2C28;
|
||||
margin: 0;
|
||||
.move-card .btn {
|
||||
align-self: flex-start;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.center-column {
|
||||
@@ -68,72 +62,70 @@ h2 {
|
||||
}
|
||||
|
||||
.board-section {
|
||||
background: #B9DAD1;
|
||||
border: 2px solid #5A2C28;
|
||||
border-radius: 10px;
|
||||
padding: clamp(0.5rem, 1vw, 1rem);
|
||||
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));
|
||||
min-height: 400px;
|
||||
container-type: size;
|
||||
}
|
||||
|
||||
.import-card {
|
||||
background: #E1EAA9;
|
||||
border: 2px solid #5A2C28;
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.import-card label {
|
||||
color: #5A2C28;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.import-card textarea {
|
||||
border: 2px solid #5A2C28;
|
||||
border-radius: 8px;
|
||||
background: #B9DAD1;
|
||||
padding: 0.6rem 0.75rem;
|
||||
resize: vertical;
|
||||
min-height: 100px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.import-card input {
|
||||
border: 2px solid #5A2C28;
|
||||
border-radius: 8px;
|
||||
background: #B9DAD1;
|
||||
padding: 0.6rem 0.75rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: 2px solid #5A2C28;
|
||||
border-radius: 8px;
|
||||
background: #C19EF5;
|
||||
color: #5A2C28;
|
||||
padding: 0.6rem 1rem;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #BA6D4B;
|
||||
color: #F3C8A0;
|
||||
}
|
||||
|
||||
.alert {
|
||||
border-radius: 8px;
|
||||
border: 2px solid #5A2C28;
|
||||
border-radius: var(--border-radius-sm);
|
||||
border: var(--border-width) solid var(--color-border);
|
||||
}
|
||||
|
||||
.game-completion-alert {
|
||||
background: linear-gradient(135deg, var(--color-secondary-mint, #B9DAD1) 0%, var(--color-secondary-blue, #B9C2DA) 100%);
|
||||
border: 2px solid var(--color-secondary-mint, #B9DAD1) !important;
|
||||
border-radius: var(--border-radius-lg) !important;
|
||||
padding: var(--size-xl-padding) !important;
|
||||
box-shadow: 0 8px 16px rgba(185, 218, 209, 0.3);
|
||||
animation: slideIn 0.4s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.completion-title {
|
||||
color: var(--color-text-primary);
|
||||
font-size: 1.75rem;
|
||||
margin: 0 0 var(--size-md) 0;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.completion-subtitle {
|
||||
text-align: center;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.completion-link {
|
||||
color: var(--color-text-primary);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
border-bottom: 2px solid var(--color-text-primary);
|
||||
transition: all 0.3s ease;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.completion-link:hover {
|
||||
color: var(--color-secondary-blue);
|
||||
border-bottom-color: var(--color-secondary-blue);
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.game-card {
|
||||
padding: clamp(0.75rem, 1.5vw, 1rem);
|
||||
padding: clamp(var(--size-md), 1.5vw, var(--size-lg));
|
||||
}
|
||||
|
||||
.board-section {
|
||||
@@ -142,26 +134,26 @@ h2 {
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-size: clamp(1.25rem, 3vw, 1.75rem);
|
||||
font-size: var(--heading-h1-tablet);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.game-shell {
|
||||
padding: clamp(0.5rem, 1.5vw, 1rem);
|
||||
padding: clamp(var(--size-sm), 1.5vw, var(--size-lg));
|
||||
}
|
||||
|
||||
.game-card {
|
||||
padding: clamp(0.5rem, 1vw, 0.75rem);
|
||||
padding: clamp(var(--size-sm), 1vw, var(--size-md));
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: var(--size-lg);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-size: 1.25rem;
|
||||
font-size: var(--heading-h1-mobile);
|
||||
}
|
||||
|
||||
.meta {
|
||||
@@ -169,61 +161,31 @@ h2 {
|
||||
}
|
||||
|
||||
.top-section {
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.move-form {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.move-form label {
|
||||
flex-basis: 100%;
|
||||
margin-bottom: 0.5rem;
|
||||
gap: var(--size-xs);
|
||||
margin-bottom: var(--size-xs);
|
||||
}
|
||||
|
||||
.board-section {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.import-card {
|
||||
padding: 0.75rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.import-card label {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.import-card textarea,
|
||||
.import-card input {
|
||||
min-height: 70px;
|
||||
font-size: 0.9rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.game-shell {
|
||||
padding: 0.5rem;
|
||||
padding: var(--size-sm);
|
||||
}
|
||||
|
||||
.game-card {
|
||||
padding: 0.5rem;
|
||||
border-radius: 8px;
|
||||
padding: var(--size-sm);
|
||||
border-radius: var(--border-radius-md);
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 0.75rem;
|
||||
margin-bottom: var(--size-md);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.1rem;
|
||||
font-size: var(--heading-h1-small);
|
||||
}
|
||||
|
||||
.meta {
|
||||
@@ -231,23 +193,11 @@ h2 {
|
||||
}
|
||||
|
||||
.top-section {
|
||||
padding: 0.4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
gap: var(--size-xs-gap);
|
||||
margin-bottom: var(--size-xs);
|
||||
}
|
||||
|
||||
.board-section {
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
.import-card {
|
||||
padding: 0.5rem;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.import-card textarea,
|
||||
.import-card input {
|
||||
min-height: 50px;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,10 @@
|
||||
<main class="game-shell">
|
||||
<app-promotion-dialog
|
||||
[isOpen]="facade.isPromotionDialogOpen"
|
||||
(promotionSelected)="facade.onPromotionSelected($event)"
|
||||
(closed)="facade.onPromotionClosed()"
|
||||
/>
|
||||
|
||||
<section class="game-card">
|
||||
<header class="mb-3">
|
||||
<a routerLink="/" class="back-link">Back</a>
|
||||
@@ -9,41 +15,33 @@
|
||||
@if (facade.loading) {
|
||||
<p>Loading game state...</p>
|
||||
} @else if (facade.state) {
|
||||
@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 - FEN Import -->
|
||||
<div class="col-lg-3 col-md-6 col-12 order-lg-1 order-2">
|
||||
<aside class="import-card fen-card h-100">
|
||||
<label for="fenImport">Import FEN</label>
|
||||
<textarea
|
||||
id="fenImport"
|
||||
name="fenImport"
|
||||
[(ngModel)]="facade.fenInput"
|
||||
rows="4"
|
||||
placeholder="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
|
||||
></textarea>
|
||||
<button type="button" class="btn w-100" (click)="facade.importFen()">Load FEN</button>
|
||||
</aside>
|
||||
<app-input-card
|
||||
label="Import FEN"
|
||||
placeholder="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
|
||||
buttonLabel="Load FEN"
|
||||
inputType="textarea"
|
||||
[value]="facade.fenInput"
|
||||
cardClass="fen-card"
|
||||
(valueChange)="facade.fenInput = $event"
|
||||
(buttonClick)="facade.importFen()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Center - Chess Board -->
|
||||
<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">
|
||||
<div class="top-section mb-3">
|
||||
<form class="move-form d-flex flex-wrap gap-2 mb-2" (ngSubmit)="facade.submitMove()">
|
||||
<label for="uciMove" class="form-label mb-0">Play move (UCI)</label>
|
||||
<input
|
||||
id="uciMove"
|
||||
name="uciMove"
|
||||
class="form-control flex-grow-1"
|
||||
[(ngModel)]="facade.moveInput"
|
||||
placeholder="e2e4"
|
||||
/>
|
||||
<button type="submit" class="btn">Send Move</button>
|
||||
</form>
|
||||
<p class="board-hint small mb-0">Click your piece to highlight legal targets.</p>
|
||||
</div>
|
||||
|
||||
<div class="board-section flex-grow-1 d-flex align-items-center justify-content-center">
|
||||
<app-chess-board
|
||||
[fen]="facade.state.fen"
|
||||
@@ -52,22 +50,35 @@
|
||||
(squareSelected)="facade.onBoardSquareSelected($event)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<section class="top-section">
|
||||
<app-input-card
|
||||
label="Play move (UCI)"
|
||||
placeholder="e2e4"
|
||||
buttonLabel="Send Move"
|
||||
inputType="input"
|
||||
[value]="facade.moveInput"
|
||||
cardClass="move-card"
|
||||
hintText="Click your piece to highlight legal targets."
|
||||
(valueChange)="facade.moveInput = $event"
|
||||
(buttonClick)="facade.submitMove()"
|
||||
/>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Right Sidebar - PGN Import -->
|
||||
<div class="col-lg-3 col-md-6 col-12 order-lg-3 order-3">
|
||||
<aside class="import-card pgn-card h-100">
|
||||
<label for="pgnImport">Import PGN</label>
|
||||
<textarea
|
||||
id="pgnImport"
|
||||
name="pgnImport"
|
||||
[(ngModel)]="facade.pgnInput"
|
||||
rows="4"
|
||||
placeholder="1. e4 e5 2. Nf3 Nc6 *"
|
||||
></textarea>
|
||||
<button type="button" class="btn w-100" (click)="facade.importPgn()">Load PGN</button>
|
||||
</aside>
|
||||
<app-input-card
|
||||
label="Import PGN"
|
||||
placeholder="1. e4 e5 2. Nf3 Nc6 *"
|
||||
buttonLabel="Load PGN"
|
||||
inputType="textarea"
|
||||
[value]="facade.pgnInput"
|
||||
cardClass="pgn-card"
|
||||
(valueChange)="facade.pgnInput = $event"
|
||||
(buttonClick)="facade.importPgn()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,12 +4,14 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { ActivatedRoute, RouterLink } from '@angular/router';
|
||||
import { ChessBoardComponent } from '../../components/chess-board/chess-board.component';
|
||||
import { InputCardComponent } from '../../components/input-card/input-card.component';
|
||||
import { PromotionDialogComponent } from '../../components/promotion-dialog/promotion-dialog.component';
|
||||
import { GameFacade } from './game.facade';
|
||||
|
||||
@Component({
|
||||
selector: 'app-game',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule, RouterLink, ChessBoardComponent],
|
||||
imports: [CommonModule, FormsModule, RouterLink, ChessBoardComponent, InputCardComponent, PromotionDialogComponent],
|
||||
providers: [GameFacade],
|
||||
templateUrl: './game.component.html',
|
||||
styleUrl: './game.component.css'
|
||||
|
||||
+162
-121
@@ -1,11 +1,13 @@
|
||||
import { DestroyRef, Injectable, OnDestroy, inject } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
||||
import { interval, startWith, Subscription, switchMap } from 'rxjs';
|
||||
import { getPieceAtSquare, isPieceColor } from '../../core/chess/fen.utils';
|
||||
import { getErrorMessage } from '../../core/http/error-message.util';
|
||||
import { GameFull, GameState, GameStreamEvent, LegalMove } from '../../models/game.models';
|
||||
import { GameApiService } from '../../services/game-api.service';
|
||||
import { BotMoveService } from '../../services/bot-move.service';
|
||||
import { GameCompletionService } from '../../services/game-completion.service';
|
||||
import { GameImportService } from '../../services/game-import.service';
|
||||
import { BoardSelectionService, BoardSelection } from '../../services/board-selection.service';
|
||||
import { GameStreamService } from '../../services/game-stream.service';
|
||||
|
||||
@Injectable()
|
||||
export class GameFacade implements OnDestroy {
|
||||
@@ -16,25 +18,42 @@ export class GameFacade implements OnDestroy {
|
||||
fenInput = '';
|
||||
pgnInput = '';
|
||||
loading = true;
|
||||
selectedSquare: string | null = null;
|
||||
highlightedSquares: string[] = [];
|
||||
gameCompletionMessage = '';
|
||||
isGameFinished = false;
|
||||
isPromotionDialogOpen = false;
|
||||
|
||||
private boardSelection: BoardSelection = {
|
||||
selectedSquare: null,
|
||||
highlightedSquares: [],
|
||||
selectedSquareMoves: []
|
||||
};
|
||||
private pendingPromotionMoves: LegalMove[] = [];
|
||||
|
||||
private selectedSquareMoves: LegalMove[] = [];
|
||||
private readonly router = inject(Router);
|
||||
private readonly gameApi = inject(GameApiService);
|
||||
private readonly destroyRef = inject(DestroyRef);
|
||||
private streamSubscription: Subscription | null = null;
|
||||
private pollSubscription: Subscription | null = null;
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.streamSubscription?.unsubscribe();
|
||||
this.pollSubscription?.unsubscribe();
|
||||
}
|
||||
private readonly botMoveService = inject(BotMoveService);
|
||||
private readonly completionService = inject(GameCompletionService);
|
||||
private readonly importService = inject(GameImportService);
|
||||
private readonly boardSelectionService = inject(BoardSelectionService);
|
||||
private readonly streamService = inject(GameStreamService);
|
||||
|
||||
get state(): GameState | null {
|
||||
return this.game?.state ?? null;
|
||||
}
|
||||
|
||||
get selectedSquare(): string | null {
|
||||
return this.boardSelection.selectedSquare;
|
||||
}
|
||||
|
||||
get highlightedSquares(): string[] {
|
||||
return this.boardSelection.highlightedSquares;
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.streamService.cleanup();
|
||||
this.botMoveService.cleanup();
|
||||
}
|
||||
|
||||
setGameId(gameId: string): void {
|
||||
this.gameId = gameId;
|
||||
this.loadGame();
|
||||
@@ -45,36 +64,45 @@ export class GameFacade implements OnDestroy {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.selectedSquare && this.highlightedSquares.includes(square)) {
|
||||
const selectedMove = this.selectedSquareMoves.find((move) => move.to === square);
|
||||
// Handle move selection
|
||||
if (this.boardSelection.selectedSquare && this.boardSelection.highlightedSquares.includes(square)) {
|
||||
const selectedMove = this.boardSelection.selectedSquareMoves.find((move) => move.to === square);
|
||||
if (selectedMove) {
|
||||
// If multiple promotion outcomes exist for the target, ask player to choose one.
|
||||
const promotionMoves = this.boardSelection.selectedSquareMoves.filter(
|
||||
(move) => move.to === square && !!move.promotion
|
||||
);
|
||||
if (promotionMoves.length > 0) {
|
||||
this.pendingPromotionMoves = promotionMoves;
|
||||
this.isPromotionDialogOpen = true;
|
||||
return;
|
||||
}
|
||||
this.moveInput = selectedMove.uci;
|
||||
this.submitMove();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const piece = getPieceAtSquare(this.state.fen, square);
|
||||
if (!piece || !isPieceColor(piece, this.state.turn)) {
|
||||
this.clearSelection();
|
||||
return;
|
||||
}
|
||||
|
||||
// Load moves for selected square
|
||||
this.errorMessage = '';
|
||||
this.gameApi
|
||||
.getLegalMoves(this.gameId, square)
|
||||
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||
.subscribe({
|
||||
next: (response) => {
|
||||
this.selectedSquare = square;
|
||||
this.selectedSquareMoves = response.moves;
|
||||
this.highlightedSquares = response.moves.map((move) => move.to);
|
||||
},
|
||||
error: () => {
|
||||
this.clearSelection();
|
||||
this.errorMessage = 'Could not load legal moves for selected square.';
|
||||
}
|
||||
});
|
||||
const newSelection = this.boardSelectionService.handleSquareSelection(
|
||||
square,
|
||||
this.gameId,
|
||||
this.state,
|
||||
this.boardSelection,
|
||||
(moves) => {
|
||||
this.boardSelection = {
|
||||
selectedSquare: square,
|
||||
highlightedSquares: moves.map((move) => move.to),
|
||||
selectedSquareMoves: moves
|
||||
};
|
||||
},
|
||||
(error) => {
|
||||
this.errorMessage = error;
|
||||
this.boardSelection = this.boardSelectionService.clearSelection();
|
||||
}
|
||||
);
|
||||
this.boardSelection = newSelection;
|
||||
}
|
||||
|
||||
submitMove(): void {
|
||||
@@ -91,9 +119,25 @@ export class GameFacade implements OnDestroy {
|
||||
next: (state) => {
|
||||
if (this.game) {
|
||||
this.game = { ...this.game, state };
|
||||
this.updateGameCompletion();
|
||||
}
|
||||
this.moveInput = '';
|
||||
this.clearSelection();
|
||||
this.boardSelection = this.boardSelectionService.clearSelection();
|
||||
this.botMoveService.tryMakeBotMove(
|
||||
this.gameId,
|
||||
this.game,
|
||||
this.state,
|
||||
(updatedState) => {
|
||||
if (this.game) {
|
||||
this.game = { ...this.game, state: updatedState };
|
||||
this.updateGameCompletion();
|
||||
}
|
||||
this.boardSelection = this.boardSelectionService.clearSelection();
|
||||
},
|
||||
(error) => {
|
||||
this.errorMessage = error;
|
||||
}
|
||||
);
|
||||
},
|
||||
error: (error) => {
|
||||
this.errorMessage = getErrorMessage(error, 'Move rejected.');
|
||||
@@ -101,59 +145,61 @@ export class GameFacade implements OnDestroy {
|
||||
});
|
||||
}
|
||||
|
||||
importFen(): void {
|
||||
const fen = this.fenInput.trim();
|
||||
if (!fen) {
|
||||
this.errorMessage = 'Please provide a FEN string.';
|
||||
onPromotionSelected(promotionPiece: 'queen' | 'rook' | 'bishop' | 'knight'): void {
|
||||
const selectedPromotionMove = this.pendingPromotionMoves.find((move) => move.promotion === promotionPiece);
|
||||
if (!selectedPromotionMove) {
|
||||
this.errorMessage = 'Selected promotion move is unavailable.';
|
||||
this.isPromotionDialogOpen = false;
|
||||
this.pendingPromotionMoves = [];
|
||||
return;
|
||||
}
|
||||
|
||||
this.moveInput = selectedPromotionMove.uci;
|
||||
this.isPromotionDialogOpen = false;
|
||||
this.boardSelection = this.boardSelectionService.clearSelection();
|
||||
this.pendingPromotionMoves = [];
|
||||
this.submitMove();
|
||||
}
|
||||
|
||||
onPromotionClosed(): void {
|
||||
this.isPromotionDialogOpen = false;
|
||||
this.boardSelection = this.boardSelectionService.clearSelection();
|
||||
this.pendingPromotionMoves = [];
|
||||
}
|
||||
|
||||
importFen(): void {
|
||||
this.errorMessage = '';
|
||||
this.gameApi
|
||||
.importFen(fen)
|
||||
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||
.subscribe({
|
||||
next: (game) => {
|
||||
this.fenInput = '';
|
||||
this.pgnInput = '';
|
||||
void this.router.navigate(['/game', game.gameId]);
|
||||
},
|
||||
error: (error) => {
|
||||
this.errorMessage = getErrorMessage(error, 'FEN import failed.');
|
||||
}
|
||||
});
|
||||
this.importService.importFen(
|
||||
this.fenInput,
|
||||
() => {
|
||||
this.fenInput = '';
|
||||
this.pgnInput = '';
|
||||
},
|
||||
(error) => {
|
||||
this.errorMessage = error;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
importPgn(): void {
|
||||
const pgn = this.pgnInput.trim();
|
||||
if (!pgn) {
|
||||
this.errorMessage = 'Please provide a PGN string.';
|
||||
return;
|
||||
}
|
||||
|
||||
this.errorMessage = '';
|
||||
this.gameApi
|
||||
.importPgn(pgn)
|
||||
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||
.subscribe({
|
||||
next: (game) => {
|
||||
this.pgnInput = '';
|
||||
this.fenInput = '';
|
||||
void this.router.navigate(['/game', game.gameId]);
|
||||
},
|
||||
error: (error) => {
|
||||
this.errorMessage = getErrorMessage(error, 'PGN import failed.');
|
||||
}
|
||||
});
|
||||
this.importService.importPgn(
|
||||
this.pgnInput,
|
||||
() => {
|
||||
this.pgnInput = '';
|
||||
this.fenInput = '';
|
||||
},
|
||||
(error) => {
|
||||
this.errorMessage = error;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
private loadGame(): void {
|
||||
this.loading = true;
|
||||
this.errorMessage = '';
|
||||
this.clearSelection();
|
||||
this.streamSubscription?.unsubscribe();
|
||||
this.pollSubscription?.unsubscribe();
|
||||
this.pollSubscription = null;
|
||||
this.boardSelection = this.boardSelectionService.clearSelection();
|
||||
this.streamService.cleanup();
|
||||
|
||||
this.gameApi
|
||||
.getGame(this.gameId)
|
||||
@@ -162,7 +208,9 @@ export class GameFacade implements OnDestroy {
|
||||
next: (game) => {
|
||||
this.game = game;
|
||||
this.loading = false;
|
||||
this.startStream();
|
||||
this.updateGameCompletion();
|
||||
this.startStreaming();
|
||||
this.tryMakeBotMove();
|
||||
},
|
||||
error: (error) => {
|
||||
this.errorMessage = getErrorMessage(error, `Could not load game ${this.gameId}.`);
|
||||
@@ -171,57 +219,32 @@ export class GameFacade implements OnDestroy {
|
||||
});
|
||||
}
|
||||
|
||||
private startStream(): void {
|
||||
this.streamSubscription = this.gameApi
|
||||
.streamGame(this.gameId)
|
||||
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||
.subscribe({
|
||||
next: (event) => this.applyStreamEvent(event),
|
||||
error: () => {
|
||||
this.errorMessage = 'Live stream disconnected. Falling back to polling.';
|
||||
this.startPolling();
|
||||
},
|
||||
complete: () => {
|
||||
this.errorMessage = 'Live stream ended. Falling back to polling.';
|
||||
this.startPolling();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private startPolling(): void {
|
||||
if (this.pollSubscription) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.pollSubscription = interval(1500)
|
||||
.pipe(
|
||||
startWith(0),
|
||||
switchMap(() => this.gameApi.getGame(this.gameId)),
|
||||
takeUntilDestroyed(this.destroyRef)
|
||||
)
|
||||
.subscribe({
|
||||
next: (game) => {
|
||||
const previousMoves = this.game?.state.moves.join(',') ?? '';
|
||||
this.game = game;
|
||||
if (previousMoves !== game.state.moves.join(',')) {
|
||||
this.clearSelection();
|
||||
}
|
||||
}
|
||||
});
|
||||
private startStreaming(): void {
|
||||
this.streamService.startStreaming(
|
||||
this.gameId,
|
||||
(event) => this.applyStreamEvent(event),
|
||||
() => {
|
||||
this.errorMessage = 'Live stream disconnected. Falling back to polling.';
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
private applyStreamEvent(event: GameStreamEvent): void {
|
||||
if (event.type === 'gameFull') {
|
||||
this.game = event.game;
|
||||
this.clearSelection();
|
||||
this.boardSelection = this.boardSelectionService.clearSelection();
|
||||
this.updateGameCompletion();
|
||||
this.tryMakeBotMove();
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.type === 'gameState' && this.game) {
|
||||
const moveCountBefore = this.game.state.moves.length;
|
||||
this.game = { ...this.game, state: event.state };
|
||||
this.updateGameCompletion();
|
||||
if (event.state.moves.length !== moveCountBefore) {
|
||||
this.clearSelection();
|
||||
this.boardSelection = this.boardSelectionService.clearSelection();
|
||||
this.tryMakeBotMove();
|
||||
}
|
||||
return;
|
||||
}
|
||||
@@ -231,9 +254,27 @@ export class GameFacade implements OnDestroy {
|
||||
}
|
||||
}
|
||||
|
||||
private clearSelection(): void {
|
||||
this.selectedSquare = null;
|
||||
this.selectedSquareMoves = [];
|
||||
this.highlightedSquares = [];
|
||||
private tryMakeBotMove(): void {
|
||||
this.botMoveService.tryMakeBotMove(
|
||||
this.gameId,
|
||||
this.game,
|
||||
this.state,
|
||||
(updatedState) => {
|
||||
if (this.game) {
|
||||
this.game = { ...this.game, state: updatedState };
|
||||
this.updateGameCompletion();
|
||||
}
|
||||
this.boardSelection = this.boardSelectionService.clearSelection();
|
||||
},
|
||||
(error) => {
|
||||
this.errorMessage = error;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
private updateGameCompletion(): void {
|
||||
const completion = this.completionService.getGameCompletion(this.game, this.state);
|
||||
this.gameCompletionMessage = completion.message;
|
||||
this.isGameFinished = completion.isFinished;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user