NowChess/NowChess-Frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: bootstrap added

Browse Source
This commit is contained in:
shahdlala66
2026-04-18 23:21:25 +02:00
parent 8b090e4d96
commit 0d7bb0343c
7 changed files with 370 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/game/game.component.html
+63 -46
View File
@@ -1,63 +1,80 @@
<main class="game-shell">
<section class="game-card">
<header>
<header class="mb-3">
<a routerLink="/" class="back-link">Back</a>
<h1>1 vs 1 Game</h1>
<p class="meta">Game ID: <strong>{{ facade.gameId }}</strong></p>
<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) {
<section class="content-layout">
<aside class="import-card fen-card">
<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" (click)="facade.importFen()">Load FEN</button>
</aside>
<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>
</div>
<section class="center-column">
<section class="top-section">
<form class="move-form" (ngSubmit)="facade.submitMove()">
<label for="uciMove">Play move (UCI)</label>
<input id="uciMove" name="uciMove" [(ngModel)]="facade.moveInput" placeholder="e2e4" />
<button type="submit">Send Move</button>
</form>
<p class="board-hint">Click your piece to highlight legal targets.</p>
</section>
<!-- 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>
<section class="board-section">
<app-chess-board
[fen]="facade.state.fen"
[selectedSquare]="facade.selectedSquare"
[highlightedSquares]="facade.highlightedSquares"
(squareSelected)="facade.onBoardSquareSelected($event)"
/>
</section>
</section>
<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>
</div>
<aside class="import-card pgn-card">
<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" (click)="facade.importPgn()">Load PGN</button>
</aside>
</section>
<!-- 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>
</div>
</div>
</div>
}
@if (facade.errorMessage) {
<p class="error">{{ facade.errorMessage }}</p>
<p class="alert alert-danger mt-3 mb-0">{{ facade.errorMessage }}</p>
}
</section>
</main>