fix: NCWF-1 401 #5
+2
-2
@@ -51,8 +51,8 @@
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "4kB",
|
||||
"maximumError": "8kB"
|
||||
"maximumWarning": "12kB",
|
||||
"maximumError": "20kB"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
|
||||
@@ -1,6 +1,14 @@
|
||||
.game-shell {
|
||||
min-height: 100dvh;
|
||||
padding: clamp(var(--size-md), 2vw, var(--size-xl));
|
||||
background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-secondary-mint) 100%);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
:host-context(html[data-theme='dark']) .game-shell {
|
||||
background:
|
||||
radial-gradient(circle at top, rgba(185, 194, 218, 0.16) 0%, transparent 35%),
|
||||
linear-gradient(180deg, #0f1f2e 0%, #17293d 52%, #0b1420 100%);
|
||||
}
|
||||
|
||||
.game-card {
|
||||
@@ -13,6 +21,11 @@
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
:host-context(html[data-theme='dark']) .game-shell .game-card {
|
||||
background: rgba(26, 47, 71, 0.88);
|
||||
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: var(--size-xl);
|
||||
}
|
||||
@@ -103,6 +116,24 @@ h2 {
|
||||
container-type: size;
|
||||
}
|
||||
|
||||
:host-context(html[data-theme='dark']) .game-shell .board-section,
|
||||
:host-context(html[data-theme='dark']) .game-shell .timer-card,
|
||||
:host-context(html[data-theme='dark']) .game-shell .history-card,
|
||||
:host-context(html[data-theme='dark']) .game-shell .export-card,
|
||||
:host-context(html[data-theme='dark']) .game-shell .board-theme-card,
|
||||
:host-context(html[data-theme='dark']) .game-shell .player-timer {
|
||||
background: rgba(45, 74, 111, 0.72);
|
||||
}
|
||||
|
||||
:host-context(html[data-theme='dark']) .game-shell .export-text {
|
||||
background: rgba(26, 47, 71, 0.9);
|
||||
}
|
||||
|
||||
:host-context(html[data-theme='dark']) .game-shell .game-completion-alert {
|
||||
background: linear-gradient(135deg, rgba(74, 124, 124, 0.35) 0%, rgba(90, 111, 165, 0.35) 100%);
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.timer-card,
|
||||
.history-card,
|
||||
.export-card {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<main class="game-shell">
|
||||
<main class="game-shell" [class.theme-dark]="isDarkMode">
|
||||
<app-promotion-dialog
|
||||
[isOpen]="facade.isPromotionDialogOpen"
|
||||
(promotionSelected)="facade.onPromotionSelected($event)"
|
||||
|
||||
@@ -36,12 +36,15 @@ export class GameComponent implements OnInit, OnDestroy {
|
||||
blackTimerSeconds = GameComponent.TIMER_START_SECONDS;
|
||||
exportType: 'fen' | 'pgn' = 'fen';
|
||||
boardTheme: BoardTheme = 'arabian';
|
||||
isDarkMode = false;
|
||||
exportValue = '';
|
||||
exportNotice = '';
|
||||
private timerIntervalId: number | null = null;
|
||||
private activeGameId = '';
|
||||
|
||||
ngOnInit(): void {
|
||||
this.applyIncomingTheme();
|
||||
this.syncThemeFromDocument();
|
||||
this.boardTheme = this.resolveStoredBoardTheme();
|
||||
this.startDummyTimers();
|
||||
|
||||
@@ -68,6 +71,24 @@ export class GameComponent implements OnInit, OnDestroy {
|
||||
this.persistTimers(this.resolveCurrentTurn());
|
||||
}
|
||||
|
||||
private syncThemeFromDocument(): void {
|
||||
this.isDarkMode = document.documentElement.getAttribute('data-theme') === 'dark';
|
||||
}
|
||||
|
||||
private applyIncomingTheme(): void {
|
||||
const incomingTheme = window.history.state?.theme;
|
||||
if (incomingTheme === 'dark') {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
localStorage.setItem('theme', 'dark');
|
||||
return;
|
||||
}
|
||||
|
||||
if (incomingTheme === 'light') {
|
||||
document.documentElement.removeAttribute('data-theme');
|
||||
localStorage.removeItem('theme');
|
||||
}
|
||||
}
|
||||
|
||||
setExportType(type: 'fen' | 'pgn'): void {
|
||||
this.exportType = type;
|
||||
this.exportNotice = '';
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,173 +1,302 @@
|
||||
<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="cityscape-shell" [class.sunset]="isSunsetMode">
|
||||
<div class="mode-badge">{{ modeBadge }}</div>
|
||||
|
||||
<div class="sky-vignette" aria-hidden="true"></div>
|
||||
<button
|
||||
type="button"
|
||||
class="tgl"
|
||||
(click)="toggleTheme()"
|
||||
[attr.aria-label]="isSunsetMode ? 'Switch to night mode' : 'Switch to sunset mode'"
|
||||
title="Toggle theme"
|
||||
>
|
||||
<span class="tgl-icon">{{ isSunsetMode ? '🌙' : '☀' }}</span>
|
||||
</button>
|
||||
|
||||
<div class="clouds-container">
|
||||
<div class="cloud cloud-left">
|
||||
<img src="/assets/arabian-chess/player-one.gif" alt="Player One" class="cloud-gif" />
|
||||
</div>
|
||||
<div class="plane plane-left">
|
||||
<img src="/assets/arabian-chess/plane.png" alt="Plane" class="plane-body" />
|
||||
<img src="/assets/arabian-chess/raf.gif" alt="Raf" class="plane-gif" />
|
||||
</div>
|
||||
<div class="cloud cloud-right">
|
||||
<div class="gif-with-halo">
|
||||
<img src="/assets/arabian-chess/player-two.gif" alt="Player Two" class="cloud-gif" />
|
||||
<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-intro">
|
||||
<h1>Welcome to NowChess</h1>
|
||||
<p>Pick a mode to begin.</p>
|
||||
</section>
|
||||
<div class="bg-layer">
|
||||
<div class="bg-bldg" *ngFor="let building of bgBuildings" [ngStyle]="building.style"></div>
|
||||
</div>
|
||||
|
||||
<section class="skyline-controls" aria-label="Game mode skyline">
|
||||
<article class="tower tower-bot">
|
||||
<button type="button" class="mode mode-active mode-billboard" (click)="toggleDifficultySelector()" [disabled]="creating">
|
||||
<span>Bot</span>
|
||||
<small>{{ creating ? 'Creating game...' : 'Choose difficulty' }}</small>
|
||||
</button>
|
||||
<div class="tower-windows" aria-hidden="true">
|
||||
<span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="tower tower-1v1">
|
||||
<button type="button" class="mode mode-active mode-billboard" (click)="startOneVsOne()" [disabled]="creating">
|
||||
<span>1 vs 1</span>
|
||||
<small>{{ creating ? 'Creating game...' : 'Start now' }}</small>
|
||||
</button>
|
||||
<div class="tower-windows" aria-hidden="true">
|
||||
<span></span><span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="tower tower-join">
|
||||
<button type="button" class="mode mode-active mode-billboard" (click)="toggleJoinGameForm()" [disabled]="joiningGame">
|
||||
<span>Join Game</span>
|
||||
<small>{{ joiningGame ? 'Joining...' : 'Enter game ID' }}</small>
|
||||
</button>
|
||||
<div class="tower-windows" aria-hidden="true">
|
||||
<span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="tower tower-import">
|
||||
<button type="button" class="mode mode-active mode-billboard" (click)="toggleImportGameForm()" [disabled]="importing">
|
||||
<span>Import Game</span>
|
||||
<small>{{ importing ? 'Importing...' : 'FEN or PGN' }}</small>
|
||||
</button>
|
||||
<div class="tower-windows" aria-hidden="true">
|
||||
<span></span><span></span><span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="interaction-deck">
|
||||
@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']"
|
||||
[class.lc]="win.state === 'lc'"
|
||||
[class.lw]="win.state === 'lw'"
|
||||
[ngStyle]="win.style"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<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']"
|
||||
[class.lc]="win.state === 'lc'"
|
||||
[class.lw]="win.state === 'lw'"
|
||||
[ngStyle]="win.style"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bpart" style="height:36vh;">
|
||||
<div style="padding:5px 5px 0;">
|
||||
<div class="bb">
|
||||
<div class="bb-tag">JOIN</div>
|
||||
<div class="bb-title">JOIN<br />GAME</div>
|
||||
<button type="button" class="bb-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']"
|
||||
[class.lc]="win.state === 'lc'"
|
||||
[class.lw]="win.state === 'lw'"
|
||||
[ngStyle]="win.style"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</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="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']"
|
||||
[class.lc]="win.state === 'lc'"
|
||||
[class.lw]="win.state === 'lw'"
|
||||
[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="bb-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']"
|
||||
[class.lc]="win.state === 'lc'"
|
||||
[class.lw]="win.state === 'lw'"
|
||||
[ngStyle]="win.style"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (showImportGameForm) {
|
||||
<div class="import-game-form">
|
||||
<p>Import game</p>
|
||||
<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']"
|
||||
[class.lc]="win.state === 'lc'"
|
||||
[class.lw]="win.state === 'lw'"
|
||||
[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']"
|
||||
[class.lc]="win.state === 'lc'"
|
||||
[class.lw]="win.state === 'lw'"
|
||||
[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="bb-btn" style="padding:7px 20px;font-size:11px;" (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']"
|
||||
[class.lc]="win.state === 'lc'"
|
||||
[class.lw]="win.state === 'lw'"
|
||||
[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']"
|
||||
[class.lc]="win.state === 'lc'"
|
||||
[class.lw]="win.state === 'lw'"
|
||||
[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="bb-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']"
|
||||
[class.lc]="win.state === 'lc'"
|
||||
[class.lw]="win.state === 'lw'"
|
||||
[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']"
|
||||
[class.lc]="win.state === 'lc'"
|
||||
[class.lw]="win.state === 'lw'"
|
||||
[ngStyle]="win.style"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="dialog-btn" (click)="startVsBot('easy')" [disabled]="creating">EASY</button>
|
||||
<button type="button" class="dialog-btn" (click)="startVsBot('medium')" [disabled]="creating">MEDIUM</button>
|
||||
<button type="button" class="dialog-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="dialog-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="dialog-btn" (click)="submitJoinGame()" [disabled]="joiningGame || !gameIdInput.trim()">
|
||||
{{ joiningGame ? 'JOINING...' : 'JOIN' }}
|
||||
</button>
|
||||
<button type="button" class="dialog-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"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
<input type="radio" name="importMode" [checked]="importMode === 'pgn'" (change)="setImportMode('pgn')" [disabled]="importing" />
|
||||
<span>PGN</span>
|
||||
</label>
|
||||
</div>
|
||||
<textarea
|
||||
class="import-game-text"
|
||||
class="dialog-input dialog-textarea"
|
||||
[(ngModel)]="importText"
|
||||
[placeholder]="importMode === 'fen' ? 'Paste FEN here' : 'Paste PGN here'"
|
||||
[disabled]="importing"
|
||||
rows="5"
|
||||
></textarea>
|
||||
<button
|
||||
type="button"
|
||||
class="join-game-btn join"
|
||||
(click)="submitImportedGame()"
|
||||
[disabled]="importing || !importText.trim()"
|
||||
>
|
||||
{{ importing ? 'Importing...' : 'Done' }}
|
||||
</button>
|
||||
<div class="dialog-actions">
|
||||
<button type="button" class="dialog-btn" (click)="submitImportGame()" [disabled]="importing || !importText.trim()">
|
||||
{{ importing ? 'IMPORTING...' : 'IMPORT' }}
|
||||
</button>
|
||||
<button type="button" class="dialog-btn" (click)="closeImportDialog()" [disabled]="importing">CANCEL</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (errorMessage) {
|
||||
<p class="error">{{ errorMessage }}</p>
|
||||
}
|
||||
</section>
|
||||
</main>
|
||||
@if (errorMessage) {
|
||||
<p class="error-banner">{{ errorMessage }}</p>
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,27 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component } from '@angular/core';
|
||||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { Router } from '@angular/router';
|
||||
import { finalize } from 'rxjs';
|
||||
import { getErrorMessage } from '../../core/http/error-message.util';
|
||||
import { GameApiService } from '../../services/game-api.service';
|
||||
|
||||
type Difficulty = 'easy' | 'medium' | 'hard';
|
||||
type ImportMode = 'fen' | 'pgn';
|
||||
|
||||
interface Star {
|
||||
style: Record<string, string>;
|
||||
}
|
||||
|
||||
interface BackgroundBuilding {
|
||||
style: Record<string, string>;
|
||||
}
|
||||
|
||||
interface WindowCell {
|
||||
state: 'off' | 'lc' | 'lw';
|
||||
style: Record<string, string>;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-welcome',
|
||||
standalone: true,
|
||||
@@ -13,18 +29,30 @@ import { GameApiService } from '../../services/game-api.service';
|
||||
templateUrl: './welcome.component.html',
|
||||
styleUrls: ['./welcome.component.css']
|
||||
})
|
||||
export class WelcomeComponent {
|
||||
export class WelcomeComponent implements OnInit, OnDestroy {
|
||||
creating = false;
|
||||
errorMessage = '';
|
||||
showDifficultySelector = false;
|
||||
showJoinGameForm = false;
|
||||
showImportGameForm = false;
|
||||
gameIdInput = '';
|
||||
joiningGame = false;
|
||||
importing = false;
|
||||
importMode: 'fen' | 'pgn' = 'fen';
|
||||
errorMessage = '';
|
||||
|
||||
showDifficultyDialog = false;
|
||||
showOptionsDialog = false;
|
||||
showJoinDialog = false;
|
||||
showImportDialog = false;
|
||||
|
||||
gameIdInput = '';
|
||||
importMode: ImportMode = 'fen';
|
||||
importText = '';
|
||||
|
||||
isSunsetMode = false;
|
||||
modeBadge = 'NIGHT MODE';
|
||||
|
||||
stars: Star[] = [];
|
||||
bgBuildings: BackgroundBuilding[] = [];
|
||||
windows: Record<string, WindowCell[]> = {};
|
||||
|
||||
private flickerIntervalId: ReturnType<typeof setInterval> | undefined;
|
||||
|
||||
constructor(
|
||||
private readonly router: Router,
|
||||
private readonly gameApi: GameApiService
|
||||
@@ -32,11 +60,83 @@ export class WelcomeComponent {
|
||||
this.initTheme();
|
||||
}
|
||||
|
||||
private initTheme(): void {
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
if (savedTheme === 'dark') {
|
||||
ngOnInit(): void {
|
||||
this.generateStars(220);
|
||||
this.generateBackgroundBuildings();
|
||||
this.generateWindowsForAllBuildings();
|
||||
this.startWindowFlicker();
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.stopWindowFlicker();
|
||||
}
|
||||
|
||||
toggleTheme(): void {
|
||||
this.isSunsetMode = !this.isSunsetMode;
|
||||
this.modeBadge = this.isSunsetMode ? 'SUNSET MODE' : 'NIGHT MODE';
|
||||
|
||||
if (!this.isSunsetMode) {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
localStorage.setItem('theme', 'dark');
|
||||
return;
|
||||
}
|
||||
|
||||
document.documentElement.removeAttribute('data-theme');
|
||||
localStorage.removeItem('theme');
|
||||
}
|
||||
|
||||
openDifficultyDialog(): void {
|
||||
this.closeAllDialogs();
|
||||
this.showDifficultyDialog = true;
|
||||
}
|
||||
|
||||
closeDifficultyDialog(): void {
|
||||
this.showDifficultyDialog = false;
|
||||
this.errorMessage = '';
|
||||
}
|
||||
|
||||
openOptionsDialog(): void {
|
||||
this.closeAllDialogs();
|
||||
this.showOptionsDialog = true;
|
||||
}
|
||||
|
||||
closeOptionsDialog(): void {
|
||||
this.showOptionsDialog = false;
|
||||
this.errorMessage = '';
|
||||
}
|
||||
|
||||
openJoinDialog(): void {
|
||||
this.closeAllDialogs();
|
||||
this.showJoinDialog = true;
|
||||
}
|
||||
|
||||
closeJoinDialog(): void {
|
||||
if (this.joiningGame) {
|
||||
return;
|
||||
}
|
||||
this.showJoinDialog = false;
|
||||
this.gameIdInput = '';
|
||||
this.errorMessage = '';
|
||||
}
|
||||
|
||||
openImportDialog(): void {
|
||||
this.closeAllDialogs();
|
||||
this.showImportDialog = true;
|
||||
}
|
||||
|
||||
closeImportDialog(): void {
|
||||
if (this.importing) {
|
||||
return;
|
||||
}
|
||||
this.showImportDialog = false;
|
||||
this.importText = '';
|
||||
this.importMode = 'fen';
|
||||
this.errorMessage = '';
|
||||
}
|
||||
|
||||
setImportMode(mode: ImportMode): void {
|
||||
this.importMode = mode;
|
||||
this.errorMessage = '';
|
||||
}
|
||||
|
||||
startOneVsOne(): void {
|
||||
@@ -52,7 +152,9 @@ export class WelcomeComponent {
|
||||
.pipe(finalize(() => (this.creating = false)))
|
||||
.subscribe({
|
||||
next: (game) => {
|
||||
void this.router.navigate(['/game', game.gameId]);
|
||||
void this.router.navigate(['/game', game.gameId], {
|
||||
state: { theme: this.isSunsetMode ? 'light' : 'dark' }
|
||||
});
|
||||
},
|
||||
error: (error) => {
|
||||
this.errorMessage = getErrorMessage(error, 'Unable to create a game.');
|
||||
@@ -60,21 +162,23 @@ export class WelcomeComponent {
|
||||
});
|
||||
}
|
||||
|
||||
startVsBot(difficulty: 'easy' | 'medium' | 'hard'): void {
|
||||
startVsBot(difficulty: Difficulty): void {
|
||||
if (this.creating) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.errorMessage = '';
|
||||
this.creating = true;
|
||||
this.showDifficultySelector = false;
|
||||
this.showDifficultyDialog = false;
|
||||
|
||||
this.gameApi
|
||||
.createGameVsBot(difficulty)
|
||||
.pipe(finalize(() => (this.creating = false)))
|
||||
.subscribe({
|
||||
next: (game) => {
|
||||
void this.router.navigate(['/game', game.gameId]);
|
||||
void this.router.navigate(['/game', game.gameId], {
|
||||
state: { theme: this.isSunsetMode ? 'light' : 'dark' }
|
||||
});
|
||||
},
|
||||
error: (error) => {
|
||||
this.errorMessage = getErrorMessage(error, 'Unable to create a game against bot.');
|
||||
@@ -82,39 +186,32 @@ export class WelcomeComponent {
|
||||
});
|
||||
}
|
||||
|
||||
toggleDifficultySelector(): void {
|
||||
this.showDifficultySelector = !this.showDifficultySelector;
|
||||
this.showJoinGameForm = false;
|
||||
this.showImportGameForm = false;
|
||||
this.errorMessage = '';
|
||||
}
|
||||
|
||||
toggleJoinGameForm(): void {
|
||||
this.showJoinGameForm = !this.showJoinGameForm;
|
||||
this.showDifficultySelector = false;
|
||||
this.showImportGameForm = false;
|
||||
this.errorMessage = '';
|
||||
this.gameIdInput = '';
|
||||
}
|
||||
|
||||
toggleImportGameForm(): void {
|
||||
this.showImportGameForm = !this.showImportGameForm;
|
||||
this.showDifficultySelector = false;
|
||||
this.showJoinGameForm = false;
|
||||
this.errorMessage = '';
|
||||
|
||||
if (!this.showImportGameForm) {
|
||||
this.importText = '';
|
||||
this.importMode = 'fen';
|
||||
submitJoinGame(): void {
|
||||
const gameId = this.gameIdInput.trim();
|
||||
if (this.joiningGame || !gameId) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
setImportMode(mode: 'fen' | 'pgn'): void {
|
||||
this.importMode = mode;
|
||||
this.errorMessage = '';
|
||||
this.joiningGame = true;
|
||||
|
||||
this.gameApi
|
||||
.getGame(gameId)
|
||||
.pipe(finalize(() => (this.joiningGame = false)))
|
||||
.subscribe({
|
||||
next: (game) => {
|
||||
this.closeJoinDialog();
|
||||
void this.router.navigate(['/game', game.gameId], {
|
||||
state: { theme: this.isSunsetMode ? 'light' : 'dark' }
|
||||
});
|
||||
},
|
||||
error: (error) => {
|
||||
this.errorMessage = getErrorMessage(error, 'Unable to find or join the game.');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
submitImportedGame(): void {
|
||||
submitImportGame(): void {
|
||||
const trimmedImport = this.importText.trim();
|
||||
if (this.importing || !trimmedImport) {
|
||||
return;
|
||||
@@ -128,9 +225,10 @@ export class WelcomeComponent {
|
||||
|
||||
importRequest.pipe(finalize(() => (this.importing = false))).subscribe({
|
||||
next: (game) => {
|
||||
this.importText = '';
|
||||
this.showImportGameForm = false;
|
||||
void this.router.navigate(['/game', game.gameId]);
|
||||
this.closeImportDialog();
|
||||
void this.router.navigate(['/game', game.gameId], {
|
||||
state: { theme: this.isSunsetMode ? 'light' : 'dark' }
|
||||
});
|
||||
},
|
||||
error: (error) => {
|
||||
const defaultMessage = this.importMode === 'fen' ? 'Unable to import FEN.' : 'Unable to import PGN.';
|
||||
@@ -139,47 +237,157 @@ export class WelcomeComponent {
|
||||
});
|
||||
}
|
||||
|
||||
joinGame(): void {
|
||||
if (this.joiningGame || !this.gameIdInput.trim()) {
|
||||
private closeAllDialogs(): void {
|
||||
this.showDifficultyDialog = false;
|
||||
this.showOptionsDialog = false;
|
||||
this.showJoinDialog = false;
|
||||
this.showImportDialog = false;
|
||||
this.errorMessage = '';
|
||||
}
|
||||
|
||||
private initTheme(): void {
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
this.isSunsetMode = savedTheme !== 'dark';
|
||||
this.modeBadge = this.isSunsetMode ? 'SUNSET MODE' : 'NIGHT MODE';
|
||||
|
||||
if (!this.isSunsetMode) {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
return;
|
||||
}
|
||||
|
||||
this.errorMessage = '';
|
||||
this.joiningGame = true;
|
||||
document.documentElement.removeAttribute('data-theme');
|
||||
}
|
||||
|
||||
this.gameApi
|
||||
.getGame(this.gameIdInput.trim())
|
||||
.pipe(finalize(() => (this.joiningGame = false)))
|
||||
.subscribe({
|
||||
next: (game) => {
|
||||
void this.router.navigate(['/game', game.gameId]);
|
||||
},
|
||||
error: (error) => {
|
||||
this.errorMessage = getErrorMessage(error, 'Unable to find or join the game.');
|
||||
private generateStars(count: number): void {
|
||||
this.stars = Array.from({ length: count }, () => {
|
||||
const size = Math.random() * 2 + 0.5;
|
||||
return {
|
||||
style: {
|
||||
width: `${size}px`,
|
||||
height: `${size}px`,
|
||||
left: `${Math.random() * 100}%`,
|
||||
top: `${Math.random() * 62}%`,
|
||||
'--d': `${(Math.random() * 3 + 1.5).toFixed(1)}s`,
|
||||
'--dl': `${-(Math.random() * 6).toFixed(1)}s`
|
||||
}
|
||||
});
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
clearJoinGameForm(): void {
|
||||
this.showJoinGameForm = false;
|
||||
this.gameIdInput = '';
|
||||
this.errorMessage = '';
|
||||
private generateBackgroundBuildings(): void {
|
||||
const specs = [
|
||||
{ l: '0%', w: '7%', h: '30vh' },
|
||||
{ l: '3%', w: '4%', h: '18vh' }, // New building
|
||||
{ l: '7%', w: '5%', h: '22vh' },
|
||||
{ l: '11%', w: '8%', h: '28vh' },
|
||||
{ l: '15%', w: '6%', h: '20vh' },
|
||||
{ l: '18.5%', w: '4%', h: '18vh' },
|
||||
{ l: '22.5%', w: '6%', h: '26vh' },
|
||||
{ l: '28%', w: '5%', h: '25vh' },
|
||||
{ l: '32%', w: '4%', h: '15vh' },
|
||||
{ l: '35.5%', w: '4.5%', h: '20vh' },
|
||||
{ l: '42%', w: '5%', h: '28vh' },
|
||||
{ l: '47%', w: '5%', h: '22vh' }, // New building
|
||||
{ l: '50%', w: '7%', h: '30vh' },
|
||||
{ l: '55%', w: '6%', h: '27vh' },
|
||||
{ l: '60.5%', w: '5%', h: '24vh' },
|
||||
{ l: '64.5%', w: '3.5%', h: '17vh' },
|
||||
{ l: '70%', w: '6%', h: '23vh' },
|
||||
{ l: '75%', w: '4%', h: '19vh' },
|
||||
{ l: '80.5%', w: '4%', h: '21vh' },
|
||||
{ l: '85.5%', w: '9%', h: '32vh' },
|
||||
{ l: '88%', w: '5%', h: '20vh' },
|
||||
{ l: '91%', w: '3%', h: '16vh' }, // New building
|
||||
{ l: '94%', w: '6%', h: '27vh' }
|
||||
];
|
||||
|
||||
this.bgBuildings = specs.map((spec) => ({
|
||||
style: { left: spec.l, width: spec.w, height: spec.h }
|
||||
}));
|
||||
}
|
||||
|
||||
toggleDarkMode(): void {
|
||||
const htmlElement = document.documentElement;
|
||||
const isDarkMode = htmlElement.getAttribute('data-theme') === 'dark';
|
||||
|
||||
if (isDarkMode) {
|
||||
htmlElement.removeAttribute('data-theme');
|
||||
localStorage.removeItem('theme');
|
||||
} else {
|
||||
htmlElement.setAttribute('data-theme', 'dark');
|
||||
localStorage.setItem('theme', 'dark');
|
||||
private generateWindowsForAllBuildings(): void {
|
||||
this.windows = {
|
||||
wA1: this.generateWindows(3, 4, 0.6),
|
||||
wA2: this.generateWindows(4, 5, 0.55),
|
||||
wA3: this.generateWindows(5, 18, 0.5),
|
||||
wB1: this.generateWindows(4, 3, 0.6),
|
||||
wB2: this.generateWindows(5, 20, 0.55),
|
||||
wC1: this.generateWindows(5, 3, 0.7),
|
||||
wC2: this.generateWindows(6, 5, 0.65),
|
||||
wC3: this.generateWindows(7, 24, 0.6),
|
||||
wD1: this.generateWindows(6, 3, 0.6),
|
||||
wD2: this.generateWindows(6, 20, 0.5),
|
||||
wE1: this.generateWindows(3, 16, 0.45)
|
||||
};
|
||||
}
|
||||
|
||||
private generateWindows(cols: number, rows: number, litRate: number): WindowCell[] {
|
||||
const total = cols * rows;
|
||||
return Array.from({ length: total }, () => this.createWindowCell(litRate));
|
||||
}
|
||||
|
||||
private createWindowCell(litRate: number): WindowCell {
|
||||
const random = Math.random();
|
||||
let state: WindowCell['state'] = 'off';
|
||||
if (random < litRate * 0.58) {
|
||||
state = 'lc';
|
||||
} else if (random < litRate) {
|
||||
state = 'lw';
|
||||
}
|
||||
|
||||
if (state === 'off') {
|
||||
return { state, style: {} };
|
||||
}
|
||||
|
||||
const baseDuration = state === 'lc' ? 3 : 4;
|
||||
return {
|
||||
state,
|
||||
style: {
|
||||
'--wd': `${(Math.random() * 4 + baseDuration).toFixed(1)}s`,
|
||||
'--wdl': `${-(Math.random() * 8).toFixed(1)}s`
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
private startWindowFlicker(): void {
|
||||
this.flickerIntervalId = setInterval(() => {
|
||||
this.randomFlicker();
|
||||
}, 2800);
|
||||
}
|
||||
|
||||
private stopWindowFlicker(): void {
|
||||
if (this.flickerIntervalId === undefined) {
|
||||
return;
|
||||
}
|
||||
clearInterval(this.flickerIntervalId);
|
||||
this.flickerIntervalId = undefined;
|
||||
}
|
||||
|
||||
private randomFlicker(): void {
|
||||
const allWindows = Object.values(this.windows).flat();
|
||||
if (allWindows.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const pickCount = Math.floor(Math.random() * 6) + 1;
|
||||
for (let i = 0; i < pickCount; i += 1) {
|
||||
const target = allWindows[Math.floor(Math.random() * allWindows.length)];
|
||||
if (!target) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (target.state === 'off') {
|
||||
const lit = Math.random() < 0.6 ? 'lc' : 'lw';
|
||||
target.state = lit;
|
||||
target.style = {
|
||||
'--wd': `${(Math.random() * 4 + (lit === 'lc' ? 3 : 4)).toFixed(1)}s`,
|
||||
'--wdl': `${-(Math.random() * 8).toFixed(1)}s`
|
||||
};
|
||||
} else {
|
||||
target.state = 'off';
|
||||
target.style = {};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
isDarkMode(): boolean {
|
||||
return document.documentElement.getAttribute('data-theme') === 'dark';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -22,11 +22,11 @@
|
||||
--color-bg-input: #B9DAD1;
|
||||
--color-bg-input-focus: #B9C2DA;
|
||||
--color-bg-button: #C19EF5;
|
||||
--color-bg-button-hover: #BA6D4B;
|
||||
--color-bg-button-hover: #ba4ba7;
|
||||
|
||||
--color-text-primary: #5A2C28;
|
||||
--color-text-button-hover: #F3C8A0;
|
||||
--color-border: #5A2C28;
|
||||
--color-border: #5a2843;
|
||||
}
|
||||
|
||||
/* Dark Mode Colors */
|
||||
|
||||
Reference in New Issue
Block a user