Add toggle functionality for exceptions in Rules component

frontend/src/app/about/about.component.ts

@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {ScrollService} from '../scroll/scroll.service';
 
 @Component({
   selector: 'app-about',
@@ -7,5 +8,6 @@ import {Component} from '@angular/core';
   styleUrl: './about.component.scss'
 })
 export class AboutComponent {
-  scrollService: any;
+  constructor(public scrollService: ScrollService) {
+  }
 }

frontend/src/app/privacy/privacy.component.ts

@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {ScrollService} from '../scroll/scroll.service';
 
 @Component({
   selector: 'app-privacy',
@@ -7,6 +8,7 @@ import {Component} from '@angular/core';
   styleUrl: './privacy.component.scss'
 })
 export class PrivacyComponent {
-  scrollService: any;
+  constructor(public scrollService: ScrollService) {
+  }
 
 }

frontend/src/app/rules/rules.component.html

@@ -193,8 +193,9 @@
             chunkloaders are prohibited.</p>
           <p style="margin-bottom: 0;">We have a system in place to restrict the number of mobs that can be in a
             certain area. Please do not try to circumvent this system. Additionally, mob grinder holding chambers must
-            be either 1x1 or 1x2 blocks in size. <a style="cursor: pointer;" id="ruleButton">Show exceptions...</a></p>
-          <ul id="exceptions" class="full-page-list hide">
+            be either 1x1 or 1x2 blocks in size. <a style="cursor: pointer;" (click)="toggleExceptions()">Show
+              exceptions...</a></p>
+          <ul id="exceptions" class="full-page-list" [ngClass]="{'hide': !showExceptions}">
             <li>Magma kill chamber may be up to 3x3</li>
             <li>Hoglin kill chamber may be up to 2x2</li>
             <li>Enderman kill chamber may be up to 3x3</li>

frontend/src/app/rules/rules.component.ts

@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {ScrollService} from '../scroll/scroll.service';
 
 @Component({
   standalone: false,
@@ -7,5 +8,12 @@ import {Component} from '@angular/core';
   styleUrl: './rules.component.scss'
 })
 export class RulesComponent {
-  scrollService: any;
+  showExceptions: boolean = false;
+
+  constructor(public scrollService: ScrollService) {
+  }
+
+  public toggleExceptions() {
+    this.showExceptions = !this.showExceptions;
+  }
 }

frontend/src/app/socials/socials.component.ts

@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {ScrollService} from '../scroll/scroll.service';
 
 @Component({
   selector: 'app-socials',
@@ -7,5 +8,6 @@ import {Component} from '@angular/core';
   styleUrl: './socials.component.scss'
 })
 export class SocialsComponent {
-  scrollService: any;
+  constructor(public scrollService: ScrollService) {
+  }
 }

frontend/src/app/team/team.component.ts

@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {ScrollService} from '../scroll/scroll.service';
 
 @Component({
   selector: 'app-team',
@@ -7,5 +8,6 @@ import {Component} from '@angular/core';
   styleUrl: './team.component.scss'
 })
 export class TeamComponent {
-  scrollService: any;
+  constructor(public scrollService: ScrollService) {
+  }
 }

frontend/src/app/terms/terms.component.ts

@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {ScrollService} from '../scroll/scroll.service';
 
 @Component({
   selector: 'app-terms',
@@ -7,6 +8,7 @@ import {Component} from '@angular/core';
   styleUrl: './terms.component.scss'
 })
 export class TermsComponent {
-  scrollService: any;
+  constructor(public scrollService: ScrollService) {
+  }
 
 }