From dee84cc1a9f3d4bfbac58e2dbd0fde0fbbeb07ba Mon Sep 17 00:00:00 2001
From: Teriuihi <teriuihi@alttd.com>
Date: Sat, 5 Apr 2025 21:50:54 +0200
Subject: [PATCH] Refactor scrolling and enhance UI accessibility.

Replaced inline JavaScript for scrolling and copy functionality with Angular methods. Introduced `ScrollService` for smooth scroll-to-top functionality and added associated styles. Removed unused `isHomePage` method and cleaned up components for better maintainability.
---
 frontend/src/app/app.component.ts             |  3 --
 frontend/src/app/home/home.component.html     |  7 ++-
 frontend/src/app/home/home.component.ts       |  5 +-
 frontend/src/app/rules/rules.component.html   |  2 +-
 .../src/app/scroll/scroll.service.spec.ts     | 16 ++++++
 frontend/src/app/scroll/scroll.service.ts     | 14 ++++++
 frontend/src/styles.scss                      | 50 +++++++++++++++++++
 7 files changed, 87 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/app/scroll/scroll.service.spec.ts
 create mode 100644 frontend/src/app/scroll/scroll.service.ts

diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index bf2c8e2..86cc2da 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -35,7 +35,4 @@ export class AppComponent implements OnInit {
     this.metaService.updateTag({name: 'keywords', content: this.keywords})
   }
 
-  public isHomePage(): boolean {
-    return this.router.url === '/';
-  }
 }
diff --git a/frontend/src/app/home/home.component.html b/frontend/src/app/home/home.component.html
index f4cf1a8..6750e5a 100644
--- a/frontend/src/app/home/home.component.html
+++ b/frontend/src/app/home/home.component.html
@@ -18,7 +18,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('play.alttd.com')">
+      <button type="button" style="margin-top: 50px;" class="button-outer" (click)="copyToClipboard('play.alttd.com')">
         <span class="button-inner" id="copybutton">Copy IP</span>
       </button>
     </section>
@@ -140,13 +140,12 @@
         <img ngSrc="/public/img/logos/log.png" alt="Alternative Altitude Server Logo" height="129"
              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('play.alttd.com')">
+        <button type="button" class="button-outer" (click)="copyToClipboard('play.alttd.com')">
           <span class="button-inner" id="copybutton2">Copy IP</span>
         </button>
       </div>
     </section>
-    <a href="#top" id="scrollupbutton">
+    <a (click)="this.scrollService.scrollToTop()" class="scroll-up-button, active">
       <span></span>
       <p style="display: none;">Scroll Down</p>
     </a>
diff --git a/frontend/src/app/home/home.component.ts b/frontend/src/app/home/home.component.ts
index 7451544..ddc81bd 100644
--- a/frontend/src/app/home/home.component.ts
+++ b/frontend/src/app/home/home.component.ts
@@ -1,6 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {Title} from '@angular/platform-browser';
 import {ALTITUDE_VERSION} from '../constant';
+import {ScrollService} from '../scroll/scroll.service';
 
 @Component({
   standalone: false,
@@ -9,7 +10,7 @@ import {ALTITUDE_VERSION} from '../constant';
   styleUrl: './home.component.scss'
 })
 export class HomeComponent implements OnInit {
-  constructor(private titleService: Title) {
+  constructor(private titleService: Title, public scrollService: ScrollService) {
   }
 
   private slides: string[] = ["/public/img/backgrounds/caruselimage2.png",
@@ -70,7 +71,7 @@ export class HomeComponent implements OnInit {
     return slide == this.slideIndex ? 'active-dot' : 'inactive-dot';
   }
 
-  scrollToSection(): void {
+  public scrollToSection(): void {
     const element = document.getElementById('scrollingpoint');
     if (element) {
       element.scrollIntoView({behavior: 'smooth', block: 'start'});
diff --git a/frontend/src/app/rules/rules.component.html b/frontend/src/app/rules/rules.component.html
index 0d7dc7a..0155939 100644
--- a/frontend/src/app/rules/rules.component.html
+++ b/frontend/src/app/rules/rules.component.html
@@ -255,7 +255,7 @@
         </div>
       </div>
     </section>
-    <a href="#top" id="scrollupbutton">
+    <a href="#top" id="scroll-up-button">
       <span></span>
       <p style="display: none;">Scroll Down</p>
     </a>
diff --git a/frontend/src/app/scroll/scroll.service.spec.ts b/frontend/src/app/scroll/scroll.service.spec.ts
new file mode 100644
index 0000000..725042d
--- /dev/null
+++ b/frontend/src/app/scroll/scroll.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ScrollService } from './scroll.service';
+
+describe('ScrollService', () => {
+  let service: ScrollService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ScrollService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/scroll/scroll.service.ts b/frontend/src/app/scroll/scroll.service.ts
new file mode 100644
index 0000000..71507a7
--- /dev/null
+++ b/frontend/src/app/scroll/scroll.service.ts
@@ -0,0 +1,14 @@
+import {Injectable} from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ScrollService {
+  scrollToTop(): void {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    });
+  }
+}
+
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 67d4a1f..6ac414a 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -337,4 +337,54 @@ tr {
   transition: 0.5s background ease;
 }
 
+
+.scroll-up-button.active:hover {
+  opacity: 1.0;
+}
+
+.scroll-up-button.active {
+  opacity: 0.5;
+}
+
+.scroll-up-button {
+  opacity: 0.0;
+  width: 60px;
+  height: 60px;
+  border-radius: 5px;
+  background-color: var(--link-color);
+  position: fixed;
+  right: 30px;
+  bottom: 30px;
+  transition: opacity 0.3s, 0.5s ease;
+}
+
+.scroll-up-button span::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  content: '';
+  width: 8px;
+  height: 8px;
+  margin: -2px 0 0 -5px;
+  border-left: 2px solid #fff;
+  border-bottom: 2px solid #fff;
+  -webkit-transform: rotate(135deg);
+  transform: rotate(135deg);
+  box-sizing: border-box;
+}
+
+.scroll-up-button span::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  content: '';
+  width: 60px;
+  height: 60px;
+  box-shadow: 0 0 0 0 rgba(255, 255, 255, .1);
+  border-radius: 100%;
+  opacity: 0;
+  box-sizing: border-box;
+}
+
 /* main css end */