From 8b76a729b8001b863a0906b9bda3014c7ed80b35 Mon Sep 17 00:00:00 2001
From: Teriuihi <teriuihi@alttd.com>
Date: Fri, 4 Apr 2025 22:29:42 +0200
Subject: [PATCH] Add Angular-based carousel and improve clipboard
 functionality

Replaced JavaScript-powered carousel and clipboard copying with Angular implementations for better integration and code maintainability. Introduced slide navigation and display using Angular bindings and streamlined the "Copy IP" functionality to utilize the new Angular method.
---
 frontend/src/app/home/home.component.html | 13 +++++-----
 frontend/src/app/home/home.component.ts   | 29 +++++++++++++++++++++++
 2 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/home/home.component.html b/frontend/src/app/home/home.component.html
index 78067f5..90d7ee6 100644
--- a/frontend/src/app/home/home.component.html
+++ b/frontend/src/app/home/home.component.html
@@ -6,7 +6,7 @@
       <h2 style="color: white;"><span class="player-count">Loading...</span></h2>
       <h2 style="color: white;">Server IP: play.alttd.com</h2>
 <!--      TODO make copy be angular not js-->
-      <button type="button" style="margin-top: 50px;" class="button-outer" onclick="copyToClipboard()">
+      <button type="button" style="margin-top: 50px;" class="button-outer" onclick="copyToClipboard('play.alttd.com')">
         <span class="button-inner" id="copybutton">Copy IP</span>
       </button>
     </section>
@@ -85,15 +85,14 @@
         </div>
       </div>
     </section>
-<!--    TODO make section below use angular not js-->
     <section class="removemobile darkmodeSection">
       <div class="customcontainer">
         <div id="slider-wrapper">
-          <div  class="slider-content">
+          <div class="slider-content">
             <div class="indexslider">
-              <div id="go-left" onclick="changeSlide(-1)" class="circleBehind go-left"></div><!-- show prev image -->
-              <div id="go-right" onclick="changeSlide(1)" class="circleBehind go-right"></div><!-- show  next image -->
-              <!-- display/slides here from js-->
+              <div id="go-left" onclick="previousSlide()" class="circleBehind go-left"></div><!-- show prev image -->
+              <div id="go-right" onclick="nextSlide()" class="circleBehind go-right"></div><!-- show  next image -->
+              <span class="slide" [style.background-image]="'url(' + slide + ')'" [style.display]="'block'"></span>
             </div>
             <!-- dots/indicators controls here from js-->
           </div>
@@ -112,7 +111,7 @@
              width="120">
         <h2 style="margin: 20px 0; font-size: 1.8em;">play.alttd.com</h2>
 <!--        TODO make this use angular not js-->
-        <button type="button" class="button-outer" onclick="copyToClipboard()">
+        <button type="button" class="button-outer" onclick="copyToClipboard('play.alttd.com')">
           <span class="button-inner" id="copybutton2">Copy IP</span>
         </button>
       </div>
diff --git a/frontend/src/app/home/home.component.ts b/frontend/src/app/home/home.component.ts
index ba1597a..a13ce67 100644
--- a/frontend/src/app/home/home.component.ts
+++ b/frontend/src/app/home/home.component.ts
@@ -15,5 +15,34 @@ export class HomeComponent implements OnInit {
     this.titleService.setTitle('Survival Minecraft Server on ' + ALTITUDE_VERSION + ' | Altitude Community');
   }
 
+  private slides: string[] = ["/public/img/backgrounds/caruselimage2.png",
+    "/public/img/backgrounds/caruselimage4.png",
+    "/public/img/backgrounds/caruselimage1.png",
+    "/public/img/backgrounds/caruselimage5.png",
+    "/public/img/backgrounds/caruselimage3.png"
+  ];
+
+  private slideIndex = 0;
+  get slide(): string {
+    return this.slides[this.slideIndex];
+  }
+
+  public previousSlide() {
+    if (this.slideIndex > 0) {
+      this.slideIndex--;
+    } else {
+      this.slideIndex = this.slides.length - 1;
+    }
+  }
+
+  public nextSlide() {
+    this.slideIndex = (this.slideIndex + 1) % this.slides.length;
+  }
+
+  public copyToClipboard(text: string) {
+    navigator.clipboard.writeText(text);
+  }
+
+
   protected readonly ALTITUDE_VERSION = ALTITUDE_VERSION;
 }