feat: NCS-63 User account implementation (#2)
User Profile info, no game before login/register, menu bar --------- Co-authored-by: Lala, Shahd <Shahd.Lala@sybit.de> Co-authored-by: shahdlala66 <shahd.lala66@gmail.com> Reviewed-on: #2
This commit was merged in pull request #2.
This commit is contained in:
@@ -1,9 +1,6 @@
|
||||
<main class="game-shell">
|
||||
<app-promotion-dialog
|
||||
[isOpen]="facade.isPromotionDialogOpen"
|
||||
(promotionSelected)="facade.onPromotionSelected($event)"
|
||||
(closed)="facade.onPromotionClosed()"
|
||||
/>
|
||||
<main class="game-shell" [class.theme-dark]="isDarkMode">
|
||||
<app-promotion-dialog [isOpen]="facade.isPromotionDialogOpen" (promotionSelected)="facade.onPromotionSelected($event)"
|
||||
(closed)="facade.onPromotionClosed()" />
|
||||
|
||||
<section class="game-card">
|
||||
<header class="mb-3">
|
||||
@@ -13,79 +10,126 @@
|
||||
</header>
|
||||
|
||||
@if (facade.loading) {
|
||||
<p>Loading game state...</p>
|
||||
<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>
|
||||
@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>
|
||||
}
|
||||
@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 - Dummy Timers -->
|
||||
<div class="col-lg-3 col-md-6 col-12 order-lg-1 order-2">
|
||||
<section class="timer-card">
|
||||
<h2>Timers</h2>
|
||||
<div class="player-timer" [class.active-timer]="facade.state.turn === 'white'">
|
||||
<p class="timer-label">White</p>
|
||||
<p class="timer-value">{{ formatTimer(whiteTimerSeconds) }}</p>
|
||||
</div>
|
||||
<div class="player-timer" [class.active-timer]="facade.state.turn === 'black'">
|
||||
<p class="timer-label">Black</p>
|
||||
<p class="timer-value">{{ formatTimer(blackTimerSeconds) }}</p>
|
||||
</div>
|
||||
</section>
|
||||
</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>
|
||||
<!-- 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" [boardTheme]="boardTheme"
|
||||
(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 class="top-section">
|
||||
<section class="board-theme-card" aria-label="Board design chooser">
|
||||
<h3>Board Design</h3>
|
||||
<div class="board-theme-group" role="radiogroup" aria-label="Board design">
|
||||
<label class="board-theme-option">
|
||||
<input type="radio" name="boardTheme" [checked]="boardTheme === 'arabian'"
|
||||
(change)="setBoardTheme('arabian')" />
|
||||
<span>Arabian</span>
|
||||
</label>
|
||||
|
||||
<label class="board-theme-option">
|
||||
<input type="radio" name="boardTheme" [checked]="boardTheme === 'classic'"
|
||||
(change)="setBoardTheme('classic')" />
|
||||
<span>Classic</span>
|
||||
</label>
|
||||
</div>
|
||||
</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>
|
||||
<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 - Export -->
|
||||
<div class="col-lg-3 col-md-6 col-12 order-lg-3 order-3">
|
||||
<section class="history-card">
|
||||
<h2>Move History</h2>
|
||||
|
||||
@if (facade.state.moves.length === 0) {
|
||||
<p class="history-empty">No moves yet.</p>
|
||||
} @else {
|
||||
<ol class="history-list">
|
||||
@for (move of facade.state.moves; track $index) {
|
||||
<li>
|
||||
<span class="history-number">{{ $index + 1 }}.</span>
|
||||
<span class="history-move">{{ move }}</span>
|
||||
</li>
|
||||
}
|
||||
</ol>
|
||||
}
|
||||
</section>
|
||||
|
||||
<section class="export-card">
|
||||
<h2>Export</h2>
|
||||
<div class="export-mode-group" role="radiogroup" aria-label="Export mode">
|
||||
<label class="export-mode-option">
|
||||
<input type="radio" name="exportType" [checked]="exportType === 'fen'"
|
||||
(change)="setExportType('fen')" />
|
||||
<span>FEN</span>
|
||||
</label>
|
||||
<label class="export-mode-option">
|
||||
<input type="radio" name="exportType" [checked]="exportType === 'pgn'"
|
||||
(change)="setExportType('pgn')" />
|
||||
<span>PGN</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<textarea class="export-text" [value]="exportValue"
|
||||
[placeholder]="exportType === 'fen' ? 'FEN will appear here' : 'PGN will appear here'" rows="8"
|
||||
readonly></textarea>
|
||||
|
||||
<button type="button" class="app-btn w-100" (click)="completeExport()">Done</button>
|
||||
|
||||
@if (exportNotice) {
|
||||
<p class="export-note">{{ exportNotice }}</p>
|
||||
}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (facade.errorMessage) {
|
||||
<p class="alert alert-danger mt-3 mb-0">{{ facade.errorMessage }}</p>
|
||||
<p class="alert alert-danger mt-3 mb-0">{{ facade.errorMessage }}</p>
|
||||
}
|
||||
</section>
|
||||
</main>
|
||||
</main>
|
||||
Reference in New Issue
Block a user