shahdlala66
100 lines
3.4 KiB
HTML
100 lines
3.4 KiB
HTML
<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>
|
|
</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>
|
|
|
|
@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>
|
|
</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>
|
|
</div>
|
|
}
|
|
|
|
@if (errorMessage) {
|
|
<p class="error">{{ errorMessage }}</p>
|
|
}
|
|
</section>
|
|
</main>
|