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,99 +1,262 @@
|
||||
<main class="welcome-shell">
|
||||
<div class="theme-toggle-container">
|
||||
<div class="switch">
|
||||
<input type="checkbox" class="switch__input" id="themeToggle" (change)="toggleDarkMode()" [checked]="!isDarkMode()">
|
||||
<label class="switch__label" for="themeToggle">
|
||||
<span class="switch__indicator"></span>
|
||||
<span class="switch__decoration"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clouds-container">
|
||||
<div class="cloud cloud-left">
|
||||
<img src="arabian-chess/player-one.gif" alt="Player One" class="cloud-gif" />
|
||||
</div>
|
||||
<div class="plane plane-left">
|
||||
<img src="arabian-chess/plane.png" alt="Plane" class="plane-body" />
|
||||
<img src="arabian-chess/raf.gif" alt="Raf" class="plane-gif" />
|
||||
</div>
|
||||
<div class="cloud cloud-right">
|
||||
<div class="gif-with-halo">
|
||||
<img src="arabian-chess/player-two.gif" alt="Player Two" class="cloud-gif" />
|
||||
<div class="cityscape-shell" [class.sunset]="isSunsetMode">
|
||||
|
||||
<div class="scene">
|
||||
<div class="sky">
|
||||
<div class="stars-layer">
|
||||
<div class="star" *ngFor="let star of stars" [ngStyle]="star.style"></div>
|
||||
</div>
|
||||
<div class="sun"></div>
|
||||
<div class="cloud-wrap">
|
||||
<div class="cloud cloud-a"></div>
|
||||
<div class="cloud cloud-b"></div>
|
||||
<div class="cloud cloud-c"></div>
|
||||
<div class="cloud cloud-d"></div>
|
||||
<div class="cloud cloud-e"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="welcome-card">
|
||||
<h1>Welcome to NowChess</h1>
|
||||
<p>Pick a mode to begin.</p>
|
||||
|
||||
<div class="mode-grid">
|
||||
<button type="button" class="mode mode-active" (click)="toggleDifficultySelector()" [disabled]="creating">
|
||||
<span>Bot</span>
|
||||
<small>{{ creating ? 'Creating game...' : 'Choose difficulty' }}</small>
|
||||
</button>
|
||||
<div class="bg-layer">
|
||||
<div class="bg-bldg" *ngFor="let building of bgBuildings" [ngStyle]="building.style"></div>
|
||||
</div>
|
||||
|
||||
@if (showDifficultySelector) {
|
||||
<div class="difficulty-selector">
|
||||
<p>Select difficulty:</p>
|
||||
<div class="difficulty-buttons">
|
||||
<button type="button" class="difficulty-btn easy" (click)="startVsBot('easy')" [disabled]="creating">
|
||||
Easy
|
||||
</button>
|
||||
<button type="button" class="difficulty-btn medium" (click)="startVsBot('medium')" [disabled]="creating">
|
||||
Medium
|
||||
</button>
|
||||
<button type="button" class="difficulty-btn hard" (click)="startVsBot('hard')" [disabled]="creating">
|
||||
Hard
|
||||
</button>
|
||||
<div class="main-layer">
|
||||
<div class="bwrap" style="left:2.5%;width:16%;">
|
||||
<div class="ant" style="height:38px;"></div>
|
||||
<div class="bpart" style="width:55%;margin:0 auto;height:7vh;">
|
||||
<div class="wins" style="grid-template-columns:repeat(3,1fr);height:100%;align-content:start;">
|
||||
<div class="w" *ngFor="let win of windows['wA1']" [ngStyle]="win.style"></div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<button type="button" class="mode mode-active" (click)="startOneVsOne()" [disabled]="creating">
|
||||
<span>1 vs 1</span>
|
||||
<small>{{ creating ? 'Creating game...' : 'Start now' }}</small>
|
||||
</button>
|
||||
|
||||
<button type="button" class="mode mode-active" (click)="toggleJoinGameForm()" [disabled]="joiningGame">
|
||||
<span>Join Game</span>
|
||||
<small>{{ joiningGame ? 'Joining...' : 'Enter game ID' }}</small>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@if (showJoinGameForm) {
|
||||
<div class="join-game-form">
|
||||
<p>Enter the game ID:</p>
|
||||
<div class="join-game-input-group">
|
||||
<input
|
||||
type="text"
|
||||
class="join-game-input"
|
||||
[(ngModel)]="gameIdInput"
|
||||
placeholder="Paste game ID here"
|
||||
[disabled]="joiningGame"
|
||||
(keyup.enter)="joinGame()"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="join-game-btn join"
|
||||
(click)="joinGame()"
|
||||
[disabled]="joiningGame || !gameIdInput.trim()"
|
||||
>
|
||||
{{ joiningGame ? 'Joining...' : 'Join' }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="join-game-btn cancel"
|
||||
(click)="clearJoinGameForm()"
|
||||
[disabled]="joiningGame"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<div class="bpart" style="width:80%;margin:0 auto;height:9vh;">
|
||||
<div class="wins" style="grid-template-columns:repeat(4,1fr);align-content:start;height:100%;">
|
||||
<div class="w" *ngFor="let win of windows['wA2']" [ngStyle]="win.style"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bpart" style="height:36vh;">
|
||||
<div>
|
||||
<div class="bb">
|
||||
<div class="bb-tag">JOIN</div>
|
||||
<div class="bb-title">JOIN<br />GAME</div>
|
||||
<button type="button" class="app-btn" (click)="openJoinDialog()" [disabled]="joiningGame">
|
||||
{{ joiningGame ? 'JOINING...' : 'JOIN GAME →' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wins" style="grid-template-columns:repeat(5,1fr);">
|
||||
<div class="w" *ngFor="let win of windows['wA3']" [ngStyle]="win.style"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bwrap" style="left:21%;width:15%;">
|
||||
<div class="bpart" style="height:5vh;width:90%;margin:0 auto;">
|
||||
<div class="wins" style="grid-template-columns:repeat(4,1fr);height:100%;align-content:start;">
|
||||
<div class="w" *ngFor="let win of windows['wB1']" [ngStyle]="win.style"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bpart" style="height:44vh;">
|
||||
<div style="padding:5px 5px 0;">
|
||||
<div style="text-align:center;padding:4px 0 6px;">
|
||||
<span class="neon">OPEN 24/7</span>
|
||||
</div>
|
||||
<div class="bb">
|
||||
<div class="bb-tag">BOT</div>
|
||||
<div class="bb-title">PLAY WITH<br />A BOT</div>
|
||||
<button type="button" class="app-btn" (click)="openDifficultyDialog()" [disabled]="creating">
|
||||
{{ creating ? 'CREATING...' : 'GET STARTED →' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wins" style="grid-template-columns:repeat(5,1fr);">
|
||||
<div class="w" *ngFor="let win of windows['wB2']" [ngStyle]="win.style"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bwrap" style="left:39%;width:20%;">
|
||||
<img class="playerone-gif" src="/assets/arabian-chess/player-one.gif" alt="Player One" />
|
||||
<div style="display:flex;justify-content:center;gap:16px;margin-bottom:0;">
|
||||
<div class="ant" style="height:65px;margin-top:-15px;"></div>
|
||||
</div>
|
||||
<div class="bpart" style="height:6vh;width:70%;margin:0 auto;border-radius:2px 2px 0 0;">
|
||||
<div class="wins" style="grid-template-columns:repeat(5,1fr);height:100%;align-content:start;">
|
||||
<div class="w" *ngFor="let win of windows['wC1']" [ngStyle]="win.style"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bpart" style="height:10vh;">
|
||||
<div class="wins" style="grid-template-columns:repeat(6,1fr);align-content:start;height:100%;">
|
||||
<div class="w" *ngFor="let win of windows['wC2']" [ngStyle]="win.style"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bpart" style="height:48vh;">
|
||||
<div style="padding:6px 6px 0;">
|
||||
<div class="bb" style="padding:14px 14px 12px;">
|
||||
<div class="bb-tag">WELCOME</div>
|
||||
<div class="bb-title" style="font-size:clamp(16px,1.8vw,26px);">WELCOME TO<br />NOWCHESS</div>
|
||||
<div class="bb-subtitle">Play your next move from the skyline.</div>
|
||||
<button type="button" class="app-btn" (click)="startOneVsOne()" [disabled]="creating">
|
||||
{{ creating ? 'CREATING...' : 'START NOW →' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wins" style="grid-template-columns:repeat(7,1fr);">
|
||||
<div class="w" *ngFor="let win of windows['wC3']" [ngStyle]="win.style"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bwrap" style="left:63%;width:18%;">
|
||||
<div class="ant" style="height:30px;"></div>
|
||||
<div class="bpart" style="height:5vh;width:110%;margin-left:-5%;">
|
||||
<div class="wins" style="grid-template-columns:repeat(6,1fr);height:100%;align-content:start;">
|
||||
<div class="w" *ngFor="let win of windows['wD1']" [ngStyle]="win.style"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bpart" style="height:42vh;">
|
||||
<div style="padding:5px 5px 0;">
|
||||
<div style="text-align:center;padding:4px 0 6px;">
|
||||
<span class="neon">MORE</span>
|
||||
</div>
|
||||
<div class="bb">
|
||||
<div class="bb-tag">OPTIONS</div>
|
||||
<div class="bb-title">MORE<br />OPTIONS</div>
|
||||
<button type="button" class="app-btn" (click)="openOptionsDialog()">OPEN MENU →</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wins" style="grid-template-columns:repeat(6,1fr);">
|
||||
<div class="w" *ngFor="let win of windows['wD2']" [ngStyle]="win.style"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bwrap" style="left:83%;width:10%;">
|
||||
<div class="bpart" style="height:30vh;">
|
||||
<div class="wins" style="grid-template-columns:repeat(3,1fr);height:100%;align-content:start;">
|
||||
<div class="w" *ngFor="let win of windows['wE1']" [ngStyle]="win.style"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Speech Bubble -->
|
||||
@if (showSpeechBubble) {
|
||||
<div class="speech-bubble-container" (click)="onSpeechBubbleClick()">
|
||||
<div class="speech-bubble">
|
||||
<div class="bubble-text">{{ bubbleMessage }}</div>
|
||||
<div class="bubble-tail"></div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (errorMessage) {
|
||||
<p class="error">{{ errorMessage }}</p>
|
||||
<!-- Zoomed Window View -->
|
||||
@if (isZoomedIn) {
|
||||
<div class="zoom-overlay" (click)="onZoomedViewClick()" (mousemove)="onMouseMove($event)" (mouseup)="onMouseUp()"
|
||||
(mouseleave)="onMouseUp()">
|
||||
<div class="zoom-window-wrapper" (click)="$event.stopPropagation()">
|
||||
<div class="zoom-window-frame">
|
||||
<div class="zoom-player-2">
|
||||
<img src="/assets/arabian-chess/player-two.gif" alt="Player 2" class="player-2-gif"
|
||||
(click)="$event.stopPropagation()" />
|
||||
@if (showSecondSpeechBubble) {
|
||||
<div class="second-speech-bubble">
|
||||
<div class="bubble-text">Feed me! 🍖</div>
|
||||
<div class="bubble-tail"></div>
|
||||
</div>
|
||||
}
|
||||
@if (showHappyBubble) {
|
||||
<div class="happy-speech-bubble">
|
||||
<div class="bubble-text">Happy meow! 😸</div>
|
||||
<div class="bubble-tail"></div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Draggable Meat Emoji -->
|
||||
@if (showMeatEmoji) {
|
||||
<div class="meat-emoji" [style.left.px]="meatX" [style.top.px]="meatY" (mousedown)="onMeatMouseDown($event)">
|
||||
🍖
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div class="haze"></div>
|
||||
<div class="ground"></div>
|
||||
</div>
|
||||
|
||||
@if (showDifficultyDialog) {
|
||||
<div class="dialog-overlay" (click)="closeDifficultyDialog()">
|
||||
<div class="dialog-card" (click)="$event.stopPropagation()">
|
||||
<div class="dialog-title">SELECT DIFFICULTY</div>
|
||||
<div class="dialog-actions">
|
||||
<button type="button" class="app-btn" (click)="startVsBot('easy')" [disabled]="creating">EASY</button>
|
||||
<button type="button" class="app-btn" (click)="startVsBot('medium')" [disabled]="creating">MEDIUM</button>
|
||||
<button type="button" class="app-btn" (click)="startVsBot('hard')" [disabled]="creating">HARD</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (showOptionsDialog) {
|
||||
<div class="dialog-overlay" (click)="closeOptionsDialog()">
|
||||
<div class="dialog-card" (click)="$event.stopPropagation()">
|
||||
<div class="dialog-title">MORE OPTIONS</div>
|
||||
<div class="dialog-actions">
|
||||
<button type="button" class="app-btn" (click)="openImportDialog()">IMPORT GAME</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (showJoinDialog) {
|
||||
<div class="dialog-overlay" (click)="closeJoinDialog()">
|
||||
<div class="dialog-card" (click)="$event.stopPropagation()">
|
||||
<div class="dialog-title">JOIN GAME</div>
|
||||
<input type="text" class="dialog-input" [(ngModel)]="gameIdInput" placeholder="Paste game ID here"
|
||||
[disabled]="joiningGame" (keyup.enter)="submitJoinGame()" />
|
||||
<div class="dialog-actions">
|
||||
<button type="button" class="app-btn" (click)="submitJoinGame()"
|
||||
[disabled]="joiningGame || !gameIdInput.trim()">
|
||||
{{ joiningGame ? 'JOINING...' : 'JOIN' }}
|
||||
</button>
|
||||
<button type="button" class="app-btn" (click)="closeJoinDialog()" [disabled]="joiningGame">CANCEL</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (showImportDialog) {
|
||||
<div class="dialog-overlay" (click)="closeImportDialog()">
|
||||
<div class="dialog-card" (click)="$event.stopPropagation()">
|
||||
<div class="dialog-title">IMPORT GAME</div>
|
||||
<div class="import-mode-group" role="radiogroup" aria-label="Import mode">
|
||||
<label class="import-mode-option">
|
||||
<input type="radio" name="importMode" [checked]="importMode === 'fen'" (change)="setImportMode('fen')"
|
||||
[disabled]="importing" />
|
||||
<span>FEN</span>
|
||||
</label>
|
||||
<label class="import-mode-option">
|
||||
<input type="radio" name="importMode" [checked]="importMode === 'pgn'" (change)="setImportMode('pgn')"
|
||||
[disabled]="importing" />
|
||||
<span>PGN</span>
|
||||
</label>
|
||||
</div>
|
||||
<textarea class="dialog-input dialog-textarea" [(ngModel)]="importText"
|
||||
[placeholder]="importMode === 'fen' ? 'Paste FEN here' : 'Paste PGN here'" [disabled]="importing"
|
||||
rows="5"></textarea>
|
||||
<div class="dialog-actions">
|
||||
<button type="button" class="app-btn" (click)="submitImportGame()" [disabled]="importing || !importText.trim()">
|
||||
{{ importing ? 'IMPORTING...' : 'IMPORT' }}
|
||||
</button>
|
||||
<button type="button" class="app-btn" (click)="closeImportDialog()" [disabled]="importing">CANCEL</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (errorMessage) {
|
||||
<p class="error-banner">{{ errorMessage }}</p>
|
||||
}
|
||||
</div>
|
||||
Reference in New Issue
Block a user