refactor: improve code structure and add change detection

frontend/src/app/landing/landing.component.html

@@ -93,9 +93,9 @@
             <div class="flex items-center justify-center gap-2">
               <span
                 #jackpotCounter
-                class="text-6xl font-bold text-white tracking-tight animate-pulseGlow drop-shadow-[0_0_8px_rgba(34,197,94,0.3)]"
+                class="text-6xl font-bold text-white tracking-tight animate-pulseGlow drop-shadow-[0_0_8px_rgba(34,197,94,0.3)] will-change-transform"
               >
-                €{{ currentJackpot$ | async | number }}
+                €{{ (currentJackpot$ | async) ?? 0 | number }}
               </span>
               <span class="text-emerald-500 text-lg animate-bounce">↑</span>
             </div>

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);
+      }
     });
   }
 

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';
     </button>
   `,
   styles: [],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AnimatedButtonComponent {
   @Input() variant: 'primary' | 'secondary' = 'primary';

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';
     </div>
   `,
   styles: [],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class GameCardComponent {
   @Input() game!: Game;

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';
     </div>
   `,
   styles: [],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class WinnerTickerComponent implements AfterViewInit {
   @Input() winners: Winner[] = [];