From 849f09d10a711adbe44842ba3a9d2ef8b6508ec1 Mon Sep 17 00:00:00 2001
From: Teriuihi <teriuihi@alttd.com>
Date: Sun, 6 Apr 2025 00:03:35 +0200
Subject: [PATCH] Update carousel to include opacity animation

Refactored slide navigation to integrate smooth fade animations using opacity changes. Introduced `carouselOpacity` and `triggerAnimation` to manage animation state, and replaced direct slide index changes with the `setSlide` method for improved modularity. Updated HTML and SCSS to support the new animation behavior.
---
 frontend/src/app/home/home.component.html |  9 ++++++---
 frontend/src/app/home/home.component.scss |  4 ----
 frontend/src/app/home/home.component.ts   | 24 ++++++++++++++++++++---
 3 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/home/home.component.html b/frontend/src/app/home/home.component.html
index 306a706..3449f6c 100644
--- a/frontend/src/app/home/home.component.html
+++ b/frontend/src/app/home/home.component.html
@@ -114,10 +114,13 @@
         <div class="sliderWrapper">
           <div class="sliderContent">
             <div class="indexSlider">
-              <div id="go-left" (click)="previousSlide()" class="circleBehind goLeft"></div><!-- show prev image -->
-              <div id="go-right" (click)="nextSlide()" class="circleBehind goRight"></div><!-- show  next image -->
+              <div id="go-left" (click)="previousSlide()" class="circleBehind goLeft"></div>
+              <div id="go-right" (click)="nextSlide()" class="circleBehind goRight"></div>
               <div class="display">
-                <span class="slide" [style.background-image]="'url(' + slide + ')'" [style.display]="'block'"></span>
+                <span class="slide"
+                      [style.background-image]="'url(' + slide + ')'"
+                      [style.opacity]="carouselOpacity"
+                      [style.display]="'block'"></span>
               </div>
             </div>
             <div class="dots">
diff --git a/frontend/src/app/home/home.component.scss b/frontend/src/app/home/home.component.scss
index 87c53f0..316673c 100644
--- a/frontend/src/app/home/home.component.scss
+++ b/frontend/src/app/home/home.component.scss
@@ -216,10 +216,6 @@ main .container {
   border-radius: 5px;
 }
 
-.display > span {
-  animation: fadein 1.5s;
-}
-
 .display > span {
   width: 700px;
   height: 400px;
diff --git a/frontend/src/app/home/home.component.ts b/frontend/src/app/home/home.component.ts
index 8c0cdf1..386d113 100644
--- a/frontend/src/app/home/home.component.ts
+++ b/frontend/src/app/home/home.component.ts
@@ -21,6 +21,8 @@ export class HomeComponent implements OnInit {
   ];
 
   private slideIndex = 0;
+  public carouselOpacity = 1;
+  public triggerAnimation = false;
 
   ngOnInit(): void {
     this.titleService.setTitle('Survival Minecraft Server on ' + ALTITUDE_VERSION + ' | Altitude Community');
@@ -44,14 +46,14 @@ export class HomeComponent implements OnInit {
 
   public previousSlide(): void {
     if (this.slideIndex > 0) {
-      this.slideIndex--;
+      this.setSlide(this.slideIndex - 1);
     } else {
-      this.slideIndex = this.slides.length - 1;
+      this.setSlide(this.slides.length - 1);
     }
   }
 
   public nextSlide(): void {
-    this.slideIndex = (this.slideIndex + 1) % this.slides.length;
+    this.setSlide((this.slideIndex + 1) % this.slides.length);
   }
 
   public getSlideIndices(): number[] {
@@ -60,6 +62,22 @@ export class HomeComponent implements OnInit {
 
   public setSlide(slide: number): void {
     this.slideIndex = slide;
+    this.triggerAnimation = true
+    this.carouselOpacity = 0;
+
+    const startTime = Date.now();
+    const duration = 1500;
+
+    const animate = () => {
+      const elapsed = Date.now() - startTime;
+
+      this.carouselOpacity = Math.min(elapsed / duration, 1);
+
+      if (this.carouselOpacity < 1) {
+        requestAnimationFrame(animate);
+      }
+    };
+    requestAnimationFrame(animate);
   }
 
   public getDotClass(slide: number): string {