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 = {}; } }