From de989ad5a0e5174c4458390073d595ffb351379d Mon Sep 17 00:00:00 2001
From: Teriuihi <teriuihi@alttd.com>
Date: Sat, 5 Apr 2025 21:22:59 +0200
Subject: [PATCH] Add rules page and enhance home slider functionality

Introduced a new "Rules" component with its routing, templates, and styles, outlining server rules. Enhanced the home slider with navigation dots, updated click events, and improved styling for active/inactive indicators. Also modified the header component to support dynamic height styling.
---
 frontend/src/app/app.module.ts                |   5 +-
 frontend/src/app/header/header.component.html |   2 +-
 frontend/src/app/header/header.component.ts   |   1 +
 frontend/src/app/home/home.component.html     |  10 +-
 frontend/src/app/home/home.component.scss     |   8 +
 frontend/src/app/home/home.component.ts       |  18 +-
 frontend/src/app/rules/rules.component.html   | 263 ++++++++++++++++++
 frontend/src/app/rules/rules.component.scss   |  58 ++++
 .../src/app/rules/rules.component.spec.ts     |  23 ++
 frontend/src/app/rules/rules.component.ts     |  11 +
 frontend/src/styles.scss                      |  17 ++
 11 files changed, 408 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/app/rules/rules.component.html
 create mode 100644 frontend/src/app/rules/rules.component.scss
 create mode 100644 frontend/src/app/rules/rules.component.spec.ts
 create mode 100644 frontend/src/app/rules/rules.component.ts

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 93f49a5..ee59719 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -8,10 +8,12 @@ import {NgOptimizedImage} from '@angular/common';
 import {ThemeComponent} from "./theme/theme.component";
 import {CookieService} from 'ngx-cookie-service';
 import {MapComponent} from './map/map.component';
+import {RulesComponent} from './rules/rules.component';
 
 const routes: Routes = [
   {path: '', component: HomeComponent},
   {path: 'map', component: MapComponent},
+  {path: 'rules', component: RulesComponent},
 ];
 
 @NgModule({
@@ -20,7 +22,8 @@ const routes: Routes = [
     HeaderComponent,
     HomeComponent,
     ThemeComponent,
-    MapComponent
+    MapComponent,
+    RulesComponent
   ],
   imports: [
     BrowserModule,
diff --git a/frontend/src/app/header/header.component.html b/frontend/src/app/header/header.component.html
index 1cde2a5..d28b424 100644
--- a/frontend/src/app/header/header.component.html
+++ b/frontend/src/app/header/header.component.html
@@ -1,5 +1,5 @@
 <ng-container>
-  <header id="top" [ngStyle]="{ 'background-image': 'url(' + background_image + ')'}">
+  <header id="top" [ngStyle]="{ 'background-image': 'url(' + background_image + ')', 'height': height }">
     <nav id="nav" [ngClass]="active">
       <div class="container">
         <div id="mobile_nav">
diff --git a/frontend/src/app/header/header.component.ts b/frontend/src/app/header/header.component.ts
index 262c294..1009cdd 100644
--- a/frontend/src/app/header/header.component.ts
+++ b/frontend/src/app/header/header.component.ts
@@ -9,6 +9,7 @@ import {Component, HostListener, Input} from '@angular/core';
 export class HeaderComponent {
   @Input() current_page: string = '';
   @Input() background_image: string = '';
+  @Input() height: string = '';
 
   public active: string = '';
 
diff --git a/frontend/src/app/home/home.component.html b/frontend/src/app/home/home.component.html
index 8f4cfbd..f4cf1a8 100644
--- a/frontend/src/app/home/home.component.html
+++ b/frontend/src/app/home/home.component.html
@@ -112,13 +112,17 @@
         <div class="sliderWrapper">
           <div class="sliderContent">
             <div class="indexSlider">
-              <div id="go-left" onclick="previousSlide()" class="circleBehind goLeft"></div><!-- show prev image -->
-              <div id="go-right" onclick="nextSlide()" class="circleBehind goRight"></div><!-- show  next image -->
+              <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 class="display">
                 <span class="slide" [style.background-image]="'url(' + slide + ')'" [style.display]="'block'"></span>
               </div>
             </div>
-            <!-- dots/indicators controls here from js-->
+            <div class="dots">
+              <ng-container *ngFor="let slide of getSlideIndices();">
+                <span class="dot" (click)="setSlide(slide)" [ngClass]="getDotClass(slide)"></span>
+              </ng-container>
+            </div>
           </div>
         </div>
       </div>
diff --git a/frontend/src/app/home/home.component.scss b/frontend/src/app/home/home.component.scss
index a145c1c..87c53f0 100644
--- a/frontend/src/app/home/home.component.scss
+++ b/frontend/src/app/home/home.component.scss
@@ -257,6 +257,14 @@ main .container {
   transform: scale(1.2);
 }
 
+.active-dot {
+  background-color: var(--link-color);
+}
+
+.inactive-dot {
+  background-color: rgba(0, 0, 0, 0);
+}
+
 // Different resolution changes
 @media (max-width: 1150px) {
   .container {
diff --git a/frontend/src/app/home/home.component.ts b/frontend/src/app/home/home.component.ts
index 0ef589d..7e9387f 100644
--- a/frontend/src/app/home/home.component.ts
+++ b/frontend/src/app/home/home.component.ts
@@ -29,7 +29,7 @@ export class HomeComponent implements OnInit {
     return this.slides[this.slideIndex];
   }
 
-  public previousSlide() {
+  public previousSlide(): void {
     if (this.slideIndex > 0) {
       this.slideIndex--;
     } else {
@@ -37,14 +37,26 @@ export class HomeComponent implements OnInit {
     }
   }
 
-  public nextSlide() {
+  public nextSlide(): void {
     this.slideIndex = (this.slideIndex + 1) % this.slides.length;
   }
 
-  public copyToClipboard(text: string) {
+  public copyToClipboard(text: string): void {
     navigator.clipboard.writeText(text);
   }
 
+  public getSlideIndices(): number[] {
+    return Array.from({length: this.slides.length}, (_, i) => i);
+  }
+
+  public setSlide(slide: number): void {
+    this.slideIndex = slide;
+  }
+
+  public getDotClass(slide: number): string {
+    return slide == this.slideIndex ? 'active-dot' : 'inactive-dot';
+  }
+
   scrollToSection(): void {
     const element = document.getElementById('scrollingpoint');
     if (element) {
diff --git a/frontend/src/app/rules/rules.component.html b/frontend/src/app/rules/rules.component.html
new file mode 100644
index 0000000..0d7dc7a
--- /dev/null
+++ b/frontend/src/app/rules/rules.component.html
@@ -0,0 +1,263 @@
+<ng-container>
+  <app-header [current_page]="'rules'" background_image="/public/img/backgrounds/trees.jpg" height="460px">
+    <div class="title" header-content>
+      <h1>Server Rules</h1>
+      <h2>We aim to be an inclusive community server where players of all ages can find something to enjoy.</h2>
+    </div>
+  </app-header>
+
+  <main>
+    <section class="darkmodeSection">
+      <div class="container">
+        <div class="paragraph">
+          <div class="highlighted-content">
+            <h3 style="padding-top: 15px;">Zero Tolerance Policy</h3>
+            <p>Altitude is committed to providing a safe and welcoming environment for all players, regardless of
+              gender, race, ethnicity, sexual orientation, disability, religion, or any other aspect of their identity.
+              The staff team reserves the right to remove a player from our services in situations where staff has
+              significant reason to believe a player threatens the safety of our community members.</p>
+            <p style="font-size: 0.85em;">Note: We want players from all countries to be able to play, but unfortunately
+              we can only moderate english. Therefore we require that all conversations in public chat are in
+              English.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+    <div id="respect"></div>
+    <section class="darkmodeSectionThree">
+      <div class="container">
+        <div class="paragraph">
+          <h2><span class="copy-link" data-link="respect">Treat Others With Respect</span></h2>
+          <ul class="full-page-list">
+            <li>Personal attacks and harassment targeting players or staff will not be tolerated.</li>
+            <li>Sexist, racist, homophobic, and broad, offensive generalizations about groups of people are simply not
+              allowed.
+            </li>
+            <li>Any word blocked by a filter is never allowed no matter how it's written, even if it gets around the
+              filter itself.
+            </li>
+            <li>You can talk about current events and real-world topics. However, if staff recognizes the topic is
+              causing players to become uncomfortable, they may shut the conversation down.
+              <ul class="full-page-list-2">
+                <li>You are welcome to take conversations regarding sensitive topics to dm's and party chat with people
+                  who want to be involved, or off the server.
+                </li>
+              </ul>
+            </li>
+            <li>Don't spam. This includes excessive use of chat, caps, player-related commands, or any other medium.
+            </li>
+            <li>Don't endorse drug use on the server. This includes renaming items after drugs and then selling them in
+              shops, or dropping them to random players.
+            </li>
+            <li>Keep others in mind when talking in public chat. Personal and/or exclusive conversations are often
+              better suited for DMs or party chat. Staff may direct you there if they feel your conversation is clogging
+              chat.
+              <ul class="full-page-list-2">
+                <li>Since messages in global chat get sent to every server we want to avoid spam and unnecessary
+                  messages. If you send advertisements they cannot require a bid in response, all bidding needs to be
+                  done in a single server chat or through the Discord. Other conversation that can clog up the global
+                  chat should also be kept to a single server, you can have minor conversations in global chat but it
+                  should not become long or clog up the entire chat. We highly encourage the use of private messages or
+                  party chats if you want to have longer conversations across the different servers!
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+    <div id="goodneighbour"></div>
+    <section class="darkmodeSection">
+      <div class="container">
+        <div class="paragraph">
+          <h2><span class="copy-link" data-link="goodneighbour">Be a Good Neighbour</span></h2>
+          <p>Altitude should be a place where everyone can enjoy themselves. Keep everyone in mind when you do
+            something, and avoid behavior that would make others feel unwelcome or uncomfortable.</p>
+          <ul class="full-page-list">
+            <li>Follow the 50/100 claiming rule: you may claim up to 50 blocks beyond the furthest point of your build,
+              and you must claim at least 100 blocks away from other players claim borders. Don’t claim unnecessarily
+              large areas, don’t claim things just to sell them, and don't claim land you don’t plan to build on (within
+              a month). Due to players trying to place just a few blocks to claim land, it is up to staff discretion if
+              a build is significant enough to justify a claim.
+              <ul class="full-page-list-2">
+                <li>Excessive and/or unnecessary claiming WILL result in staff intervention, and unused claims will be
+                  removed.
+                </li>
+                <li>Claims that go unused for 30 days (30 days since claim creation, not player login) will be removed
+                  if a player notifies staff that they would like to be able to use the area. These claims will be
+                  removed without warning due to the fact that they will have been sitting empty for 30 days. We will
+                  still give a 7 day warning for any unused claim that was created less than 30 days prior to the
+                  complaint. We will notify you when the claim is removed.
+                </li>
+              </ul>
+            </li>
+            <li>Respect other's builds! You may take resources from unclaimed builds, claim them as your own, or even
+              completely remove them - but please avoid making things unnecessarily ugly. Please do not "grief" (damage
+              with intent to harm).
+              <ul class="full-page-list-2">
+                <li>Don't leave unneeded towers and spammed blocks in the world.</li>
+                <li>Do not break structures meant to be traveled on, such as railroads or iceroads - they should never
+                  be destroyed even if unclaimed.
+                </li>
+              </ul>
+            <li>Do not steal or copy another player's build designs. This includes all official Altitude builds (spawns,
+              lobby, events, etc.), player bases, custom farms, custom grinders, mapart, and any other creation that a
+              player put time or effort into. Designs pulled off of the internet (Youtube, schematics from build
+              inspiration sites, Pinterest, etc.) do not fall under this rule, we will only issue a punishment when
+              someone is copying a custom build.
+            </li>
+            <li>Do not steal (take without permission) from a claim you are trusted in, or from a player after they’ve
+              just died (with PVP disabled) or set something down.
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+    <div id="playfair"></div>
+    <section class="darkmodeSectionThree">
+      <div class="container">
+        <div class="paragraph">
+          <h2><span class="copy-link" data-link="playfair">Play Fair</span></h2>
+          <p>Everyone should be able to feel proud of their achievements on the server. This is only possible if
+            everyone plays fair. One player cheating can diminish the accomplishments of everyone else.</p>
+          <ul class="full-page-list">
+            <li>Altitude is a "PvP free" server. Although, we do allow you to toggle PvP on and off. By enabling PvP you
+              are acknowledging the risk of losing your items in a fight. Staff will not help retrieve any items you
+              lose while PvP is enabled. Never use any means of bypassing PvP protection such as player traps, lava,
+              fire, explosions, mobs, and pushing players into deadly items.
+            </li>
+            <li>Do not attempt to trick or scam others during item trades or economy transactions. Additionally, do not
+              bid on an item you do not plan to buy - if you offer to pay more for something that someone else has
+              already made an offer on, that is considered "bidding" and all bids are final! As soon as an auction goes
+              public, all bids must remain public.
+            </li>
+            <li>Alternate (“alt”) accounts are generally not allowed. We may approve their use on a case-by-case basis.
+              Using an alt account to bypass a punishment can result in a longer ban. You are responsible for the
+              activity of your account, as well as any consequences brought forward from breaking our rules.
+              <ul class="full-page-list-2">
+                <li>Please notify the staff team if there are multiple people who play on Altitude in your household, so
+                  there are no questions about whether you are different people or one person using alt accounts. This
+                  makes our job easier and means we don't have to bother you about it in the future!
+                </li>
+                <li>You must be the legal owner of your Minecraft account, or have permission to use it by the legal
+                  owner.
+                </li>
+              </ul>
+            </li>
+            <li>Bypassing the automatic AFK kick system is prohibited. This includes the use of an auto-joiner to
+              automatically log back in after being AFK kicked. You may be expected to reply to a staff member if you
+              repeatedly rejoin the server shortly after being kicked by the AFK timer, or we suspect you of avoiding
+              the timer.
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+    <div id="hacksandmods"></div>
+    <section class="darkmodeSection">
+      <div class="container">
+        <div class="paragraph">
+          <h2><span class="copy-link" data-link="hacksandmods">Hacks and Mods Policy</span></h2>
+          <p>Any hack or mod that gives you an unfair advantage in the game is not allowed. Additionally, most vanilla
+            exploits are allowed – unless they give you materials you are not supposed to have (such as duplication
+            glitches). Exploiting any non-vanilla features (our plugins) is prohibited. Additionally, tools that bypass
+            our AFK system are not allowed. You may use any mods that fit into the categories below.</p>
+          <p style="font-family: 'opensans-bold', sans-serif;">We allow modifications in the following categories:</p>
+          <ul class="list">
+            <li>Mods that improve client performance (Optifine)</li>
+            <li>Minimaps, as long as it doesn't show anything you can't normally see (caves, dungeon locations, etc.)
+            </li>
+            <li>Aesthetic modifications that do not give you an unfair advantage or change gameplay (Shaders)</li>
+            <li>Inventory management systems, such as automatic organization</li>
+            <li>Mods for recording gameplay (ReplayMod)</li>
+            <li>The Litematica mod (auto-build and easy place features are prohibited in survival, but is allowed in
+              creative)
+            </li>
+            <li>Armor and status HUDs (as long as info shown is accessible in vanilla)</li>
+            <li>Macros (setting certain actions to specific buttons)
+            <li>Scripts that don't act based on something happening in game (essentially more complex macros). You can
+              not be AFK while using scripts or macros.
+          </ul>
+        </div>
+      </div>
+    </section>
+    <div id="lag"></div>
+    <section class="darkmodeSectionThree">
+      <div class="container">
+        <div class="paragraph">
+          <h2><span class="copy-link" data-link="lag">Reducing Lag</span></h2>
+          <p>It is up to everyone in the community to help keep lag to a minimum. There are many factors that cause lag
+            and you can read about them <a [routerLink]="['/lag']">here</a>. If we find something on the server that is
+            causing a
+            problem with lag (such as large animal farms or grinders) we may have to shut it down. Furthermore,
+            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">
+            <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>
+            <li>Ravagers during pillager raids must be killed automatically and the kill chamber should still be 2x1 for
+              the rest of the mobs.
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+    <div id="impersonate"></div>
+    <section class="darkmodeSection">
+      <div class="container">
+        <div class="paragraph">
+          <h2><span class="copy-link" data-link="impersonate">Do Not Impersonate Staff</span></h2>
+          <p>Do not impersonate staff members or portray yourself as one when you are not. It is ok to share the rules
+            with others, but please do not try to force others to follow them - reach out to a staff member if you need
+            help.</p>
+          <p>Do not mini-mod. If a staff member is already helping a player please don't interfere. We appreciate
+            players trying to help out other players but if staff is already helping it can cause confusion. You can
+            remind players of the rules, but remember that you cannot enforce them or punish players.</p>
+          <p>Do not make "official" Altitude products or events. If you make something related to Altitude please make
+            sure it's clear that it is not an official Altitude thing. We cannot moderate unofficial things and cannot
+            be responsible for what happens related to them!</p>
+        </div>
+      </div>
+    </section>
+    <div id="selfpromotion"></div>
+    <section class="darkmodeSectionThree">
+      <div class="container">
+        <div class="paragraph">
+          <h2><span class="copy-link" data-link="selfpromotion">No Self-Promotion*</span></h2>
+          <p>Creators are awesome! Creators leeching off of others to promote their own work are not. You may share
+            content you've created as long as you are not using our services merely as a means of promoting your own
+            content. We may deny an individual from promoting their work if we feel this is being abused.</p>
+          <p>Never promote other Minecraft servers, Realms, or Discord servers in any of our public chats. You may share
+            this type of content in a private message, but only if the recipient requested the information first</p>
+        </div>
+      </div>
+    </section>
+    <div id="dispute"></div>
+    <section class="darkmodeSection">
+      <div class="container">
+        <div class="paragraph">
+          <h2><span class="copy-link" data-link="dispute">Disputing a Rule or Punishment</span></h2>
+          <p>If you would like to dispute a moderator’s decision, a punishment you’ve received, or one of our rules,
+            please contact us privately. We understand that things can get frustrating and sometimes a discussion is
+            necessary to make sure we are doing the right thing, but we don’t want a potentially sensitive discussion to
+            interrupt everyone else who is playing. Please help us keep things peaceful and reach out at <a
+              href="alttd.com/appeal">alttd.com/appeal</a>.<br>
+            Before appealing, please remember that all players are responsible for reading and understanding our rules
+            when they use our services.</p>
+          <p>If they deem it necessary staff can impose stricter, temporary rules than the ones written here to control
+            a situation that is affecting player enjoyment. If you feel this power is abused feel free to contact us.
+            But you still have to follow the rule once you're made aware of it.</p>
+          <p>Please remember our rules only apply to our services. We cannot enforce our rules nor control what others
+            do outside of our services.</p>
+        </div>
+      </div>
+    </section>
+    <a href="#top" id="scrollupbutton">
+      <span></span>
+      <p style="display: none;">Scroll Down</p>
+    </a>
+  </main>
+</ng-container>
diff --git a/frontend/src/app/rules/rules.component.scss b/frontend/src/app/rules/rules.component.scss
new file mode 100644
index 0000000..b047d40
--- /dev/null
+++ b/frontend/src/app/rules/rules.component.scss
@@ -0,0 +1,58 @@
+@media (max-width: 1000px) {
+  main .container {
+    text-align: left;
+  }
+
+  .list {
+    text-align: left;
+  }
+}
+
+@media (max-width: 670px) {
+  main .container {
+    text-align: center;
+  }
+
+  .list {
+    margin-left: 50px;
+  }
+}
+
+.highlighted-content {
+  width: 70%;
+  background: var(--color-quaternary);
+  padding: 20px;
+  margin: auto auto 30px;
+  text-align: center;
+  border-radius: 5px;
+  transition: 0.5s ease;
+}
+
+.highlighted-content p {
+  margin-bottom: 0 !important;
+}
+
+.full-page-list {
+  margin-left: 70px;
+  font-family: 'opensans', sans-serif;
+  margin-bottom: 30px;
+  color: var(--font-color);
+  transition: 0.5s ease;
+}
+
+.full-page-list-2 {
+  margin-left: 70px;
+  font-family: 'opensans', sans-serif;
+  margin-bottom: 0;
+}
+
+.list > li {
+  margin-left: 70px;
+  font-family: 'opensans', sans-serif;
+  color: var(--font-color);
+  transition: 0.5s ease;
+}
+
+.copy-link {
+  cursor: pointer;
+}
diff --git a/frontend/src/app/rules/rules.component.spec.ts b/frontend/src/app/rules/rules.component.spec.ts
new file mode 100644
index 0000000..9649a00
--- /dev/null
+++ b/frontend/src/app/rules/rules.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RulesComponent } from './rules.component';
+
+describe('RulesComponent', () => {
+  let component: RulesComponent;
+  let fixture: ComponentFixture<RulesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RulesComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(RulesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/rules/rules.component.ts b/frontend/src/app/rules/rules.component.ts
new file mode 100644
index 0000000..d28cac7
--- /dev/null
+++ b/frontend/src/app/rules/rules.component.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+@Component({
+  standalone: false,
+  selector: 'app-rules',
+  templateUrl: './rules.component.html',
+  styleUrl: './rules.component.scss'
+})
+export class RulesComponent {
+
+}
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 3c983a8..67d4a1f 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -321,3 +321,20 @@ tr {
   }
 
 }
+
+.darkmodeSection {
+  background-color: var(--color-secondary);
+  transition: 0.5s background ease;
+}
+
+.darkmodeSectionTwo {
+  background-color: var(--color-tertiary);
+  transition: 0.5s background ease;
+}
+
+.darkmodeSectionThree {
+  background-color: var(--color-quaternary);
+  transition: 0.5s background ease;
+}
+
+/* main css end */