diff --git a/frontend/src/app/landing/landing.component.html b/frontend/src/app/landing/landing.component.html
index aeaa65c..8bb0c62 100644
--- a/frontend/src/app/landing/landing.component.html
+++ b/frontend/src/app/landing/landing.component.html
@@ -93,9 +93,9 @@
- €{{ currentJackpot$ | async | number }}
+ €{{ (currentJackpot$ | async) ?? 0 | number }}
↑
diff --git a/frontend/src/app/landing/landing.component.ts b/frontend/src/app/landing/landing.component.ts
index 1f0ff86..e2b0afb 100644
--- a/frontend/src/app/landing/landing.component.ts
+++ b/frontend/src/app/landing/landing.component.ts
@@ -112,14 +112,20 @@ export class LandingComponent implements OnInit, OnDestroy, AfterViewInit {
private initializeAnimations(): void {
this.animationService.createParticleEffect(this.particleContainer);
this.animationService.animateEntrance(this.heroSection);
- const gameCards = this.gamesGrid.nativeElement.querySelectorAll('.game-card');
- gameCards.forEach((card: HTMLElement, index: number) => {
- this.animationService.animateEntrance(new ElementRef(card), 0.1 * index);
- });
- autoAnimate(this.winnersMarquee.nativeElement);
+ const gameCards = this.gamesGrid?.nativeElement.querySelectorAll('.game-card');
+ if (gameCards) {
+ gameCards.forEach((card: HTMLElement, index: number) => {
+ this.animationService.animateEntrance(new ElementRef(card), 0.1 * index);
+ });
+ }
+
this.animationService.animateOnScroll(this.gamesGrid, 'slideUp');
+
this.currentJackpot$.pipe(takeUntil(this.destroy$)).subscribe((value) => {
- this.animationService.animateJackpotCounter(this.jackpotCounter, value - 1000, value);
+ if (this.jackpotCounter && value) {
+ const prevValue = value - Math.floor(Math.random() * 1000 + 500);
+ this.animationService.animateJackpotCounter(this.jackpotCounter, prevValue, value);
+ }
});
}
diff --git a/frontend/src/app/shared/components/animated-button/animated-button.component.ts b/frontend/src/app/shared/components/animated-button/animated-button.component.ts
index 959ef17..1ce932d 100644
--- a/frontend/src/app/shared/components/animated-button/animated-button.component.ts
+++ b/frontend/src/app/shared/components/animated-button/animated-button.component.ts
@@ -1,4 +1,11 @@
-import { Component, Input, Output, EventEmitter, ElementRef } from '@angular/core';
+import {
+ Component,
+ Input,
+ Output,
+ EventEmitter,
+ ElementRef,
+ ChangeDetectionStrategy,
+} from '@angular/core';
import { CommonModule } from '@angular/common';
import { AnimationService } from '../../../services/animation.service';
@@ -21,6 +28,7 @@ import { AnimationService } from '../../../services/animation.service';
`,
styles: [],
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AnimatedButtonComponent {
@Input() variant: 'primary' | 'secondary' = 'primary';
diff --git a/frontend/src/app/shared/components/game-card/game-card.component.ts b/frontend/src/app/shared/components/game-card/game-card.component.ts
index 7c8778a..78dacac 100644
--- a/frontend/src/app/shared/components/game-card/game-card.component.ts
+++ b/frontend/src/app/shared/components/game-card/game-card.component.ts
@@ -1,4 +1,11 @@
-import { Component, Input, Output, EventEmitter, ElementRef } from '@angular/core';
+import {
+ Component,
+ Input,
+ Output,
+ EventEmitter,
+ ElementRef,
+ ChangeDetectionStrategy,
+} from '@angular/core';
import { CommonModule } from '@angular/common';
import { Game } from '../../../services/game.service';
import { AnimatedButtonComponent } from '../animated-button/animated-button.component';
@@ -79,6 +86,7 @@ import { AnimationService } from '../../../services/animation.service';
`,
styles: [],
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class GameCardComponent {
@Input() game!: Game;
diff --git a/frontend/src/app/shared/components/winner-ticker/winner-ticker.component.ts b/frontend/src/app/shared/components/winner-ticker/winner-ticker.component.ts
index c22e661..7e0c733 100644
--- a/frontend/src/app/shared/components/winner-ticker/winner-ticker.component.ts
+++ b/frontend/src/app/shared/components/winner-ticker/winner-ticker.component.ts
@@ -1,4 +1,11 @@
-import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import {
+ Component,
+ Input,
+ ViewChild,
+ ElementRef,
+ AfterViewInit,
+ ChangeDetectionStrategy,
+} from '@angular/core';
import { CommonModule } from '@angular/common';
import { default as autoAnimate } from '@formkit/auto-animate';
import { Winner } from '../../../services/winner.service';
@@ -21,6 +28,7 @@ import { Winner } from '../../../services/winner.service';
`,
styles: [],
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class WinnerTickerComponent implements AfterViewInit {
@Input() winners: Winner[] = [];