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

feat: NCS-69 Challenge request #3

Merged
shosho996 merged 35 commits from feat/NCS-69 into main 2026-05-12 22:38:57 +02:00
Conversation 0 Commits 35 Files Changed 16
+40 -31
2 changed files with 40 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 19f3359106 - Show all commits
src/app/pages/welcome/welcome.component.html
-22
View File
@@ -38,8 +38,6 @@
<div
class="w"
*ngFor="let win of windows['wA1']"
[class.lc]="win.state === 'lc'"
[class.lw]="win.state === 'lw'"
[ngStyle]="win.style"
></div>
</div>
@@ -49,8 +47,6 @@
<div
class="w"
*ngFor="let win of windows['wA2']"
[class.lc]="win.state === 'lc'"
[class.lw]="win.state === 'lw'"
[ngStyle]="win.style"
></div>
</div>
@@ -69,8 +65,6 @@
<div
class="w"
*ngFor="let win of windows['wA3']"
[class.lc]="win.state === 'lc'"
[class.lw]="win.state === 'lw'"
[ngStyle]="win.style"
></div>
</div>
@@ -83,8 +77,6 @@
<div
class="w"
*ngFor="let win of windows['wB1']"
[class.lc]="win.state === 'lc'"
[class.lw]="win.state === 'lw'"
[ngStyle]="win.style"
></div>
</div>
@@ -106,8 +98,6 @@
<div
class="w"
*ngFor="let win of windows['wB2']"
[class.lc]="win.state === 'lc'"
[class.lw]="win.state === 'lw'"
[ngStyle]="win.style"
></div>
</div>
@@ -124,8 +114,6 @@
<div
class="w"
*ngFor="let win of windows['wC1']"
[class.lc]="win.state === 'lc'"
[class.lw]="win.state === 'lw'"
[ngStyle]="win.style"
></div>
</div>
@@ -135,8 +123,6 @@
<div
class="w"
*ngFor="let win of windows['wC2']"
[class.lc]="win.state === 'lc'"
[class.lw]="win.state === 'lw'"
[ngStyle]="win.style"
></div>
</div>
@@ -156,8 +142,6 @@
<div
class="w"
*ngFor="let win of windows['wC3']"
[class.lc]="win.state === 'lc'"
[class.lw]="win.state === 'lw'"
[ngStyle]="win.style"
></div>
</div>
@@ -171,8 +155,6 @@
<div
class="w"
*ngFor="let win of windows['wD1']"
[class.lc]="win.state === 'lc'"
[class.lw]="win.state === 'lw'"
[ngStyle]="win.style"
></div>
</div>
@@ -192,8 +174,6 @@
<div
class="w"
*ngFor="let win of windows['wD2']"
[class.lc]="win.state === 'lc'"
[class.lw]="win.state === 'lw'"
[ngStyle]="win.style"
></div>
</div>
@@ -206,8 +186,6 @@
<div
class="w"
*ngFor="let win of windows['wE1']"
[class.lc]="win.state === 'lc'"
[class.lw]="win.state === 'lw'"
[ngStyle]="win.style"
></div>
</div>
src/app/pages/welcome/welcome.component.ts
+40 -9
View File
@@ -18,7 +18,9 @@ interface BackgroundBuilding {
}
interface WindowCell {
state: 'off' | 'lc' | 'lw';
state: 'off' | 'on';
color?: string;
glowColor?: string;
style: Record<string, string>;
}
@@ -53,6 +55,12 @@ export class WelcomeComponent implements OnInit, OnDestroy {
private flickerIntervalId: ReturnType<typeof setInterval> | undefined;
private coolColors = ['#7de8ff', '#00d5ff', '#5bc0de', '#31b0d5', '#4fc3f7', '#29b6f6'];
private coolGlowColors = ['#00d5ff', '#00d5ff', '#31b0d5', '#31b0d5', '#03a9f4', '#0288d1'];
private warmColors = ['#ffe88a', '#ffcc30', '#f0ad4e', '#ec971f', '#ffb74d', '#ffa726'];
private warmGlowColors = ['#ffcc30', '#ffcc30', '#ec971f', '#ec971f', '#ff9800', '#fb8c00'];
constructor(
private readonly router: Router,
private readonly gameApi: GameApiService
@@ -330,20 +338,33 @@ export class WelcomeComponent implements OnInit, OnDestroy {
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';
let color: string | undefined;
let glowColor: string | undefined;
if (random < litRate * 0.58) { // Cool color
state = 'on';
const coolIndex = Math.floor(Math.random() * this.coolColors.length);
color = this.coolColors[coolIndex];
glowColor = this.coolGlowColors[coolIndex];
} else if (random < litRate) { // Warm color
state = 'on';
const warmIndex = Math.floor(Math.random() * this.warmColors.length);
color = this.warmColors[warmIndex];
glowColor = this.warmGlowColors[warmIndex];
}
if (state === 'off') {
return { state, style: {} };
}
const baseDuration = state === 'lc' ? 3 : 4;
const baseDuration = (color && this.coolColors.includes(color)) ? 3 : 4;
return {
state,
color,
glowColor,
style: {
'background-color': color || '',
'box-shadow': glowColor ? `0 0 6px ${glowColor}, 0 0 16px ${glowColor}35` : '',
'--wd': `${(Math.random() * 4 + baseDuration).toFixed(1)}s`,
'--wdl': `${-(Math.random() * 8).toFixed(1)}s`
}
@@ -378,14 +399,24 @@ export class WelcomeComponent implements OnInit, OnDestroy {
}
if (target.state === 'off') {
const lit = Math.random() < 0.6 ? 'lc' : 'lw';
target.state = lit;
target.state = 'on';
const isCool = Math.random() < 0.5;
const colors = isCool ? this.coolColors : this.warmColors;
const glowColors = isCool ? this.coolGlowColors : this.warmGlowColors;
const index = Math.floor(Math.random() * colors.length);
target.color = colors[index];
target.glowColor = glowColors[index];
target.style = {
'--wd': `${(Math.random() * 4 + (lit === 'lc' ? 3 : 4)).toFixed(1)}s`,
'background-color': target.color || '',
'box-shadow': target.glowColor ? `0 0 6px ${target.glowColor}, 0 0 16px ${target.glowColor}35` : '',
'--wd': `${(Math.random() * 4 + (isCool ? 3 : 4)).toFixed(1)}s`,
'--wdl': `${-(Math.random() * 8).toFixed(1)}s`
};
} else {
target.state = 'off';
target.color = undefined;
target.glowColor = undefined;
target.style = {};
}
}