diff --git a/src/app/pages/welcome/welcome.component.html b/src/app/pages/welcome/welcome.component.html
index 7e1b3c7..b7db787 100644
--- a/src/app/pages/welcome/welcome.component.html
+++ b/src/app/pages/welcome/welcome.component.html
@@ -38,8 +38,6 @@
@@ -49,8 +47,6 @@
@@ -69,8 +65,6 @@
@@ -83,8 +77,6 @@
@@ -106,8 +98,6 @@
@@ -124,8 +114,6 @@
@@ -135,8 +123,6 @@
@@ -156,8 +142,6 @@
@@ -171,8 +155,6 @@
@@ -192,8 +174,6 @@
@@ -206,8 +186,6 @@
diff --git a/src/app/pages/welcome/welcome.component.ts b/src/app/pages/welcome/welcome.component.ts
index b660cc0..cc4dc5f 100644
--- a/src/app/pages/welcome/welcome.component.ts
+++ b/src/app/pages/welcome/welcome.component.ts
@@ -18,7 +18,9 @@ interface BackgroundBuilding {
}
interface WindowCell {
- state: 'off' | 'lc' | 'lw';
+ state: 'off' | 'on';
+ color?: string;
+ glowColor?: string;
style: Record;
}
@@ -53,6 +55,12 @@ export class WelcomeComponent implements OnInit, OnDestroy {
private flickerIntervalId: ReturnType | 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 = {};
}
}