shahdlala66
92 lines
3.3 KiB
HTML
92 lines
3.3 KiB
HTML
<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>
|
|
<h1 class="mb-2">1 vs 1 Game</h1>
|
|
<p class="meta mb-0">Game ID: <strong>{{ facade.gameId }}</strong></p>
|
|
</header>
|
|
|
|
@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">
|
|
<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="board-section flex-grow-1 d-flex align-items-center justify-content-center">
|
|
<app-chess-board
|
|
[fen]="facade.state.fen"
|
|
[selectedSquare]="facade.selectedSquare"
|
|
[highlightedSquares]="facade.highlightedSquares"
|
|
(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">
|
|
<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>
|
|
}
|
|
|
|
@if (facade.errorMessage) {
|
|
<p class="alert alert-danger mt-3 mb-0">{{ facade.errorMessage }}</p>
|
|
}
|
|
</section>
|
|
</main>
|