From eede85295e4496f03c3d268eeb30c272415a6a2d Mon Sep 17 00:00:00 2001
From: Jan-Marlon Leibl <jleibl@proton.me>
Date: Wed, 5 Feb 2025 14:43:04 +0100
Subject: [PATCH] refactor: improve code structure and add change detection

---
 .../src/app/landing/landing.component.html     |  4 ++--
 frontend/src/app/landing/landing.component.ts  | 18 ++++++++++++------
 .../animated-button.component.ts               | 10 +++++++++-
 .../game-card/game-card.component.ts           | 10 +++++++++-
 .../winner-ticker/winner-ticker.component.ts   | 10 +++++++++-
 5 files changed, 41 insertions(+), 11 deletions(-)

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