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

feat: more components

Browse Source
This commit is contained in:
shahdlala66
2026-04-19 01:00:14 +02:00
parent 53459648c6
commit 5497997455
7 changed files with 170 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/game/game.component.html
+34 -33
View File
@@ -13,32 +13,21 @@
<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"
class="form-input"
[(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">
<section class="top-section">
<form class="move-form" (ngSubmit)="facade.submitMove()">
<label for="uciMove">Play move (UCI)</label>
<input id="uciMove" name="uciMove" class="form-input" [(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>
<div class="board-section flex-grow-1 d-flex align-items-center justify-content-center">
<app-chess-board
[fen]="facade.state.fen"
@@ -47,23 +36,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"
class="form-input"
[(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>