Altitude/AltitudeWeb
5
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Add rules page and enhance home slider functionality

Browse Source 
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.
This commit is contained in:
Teriuihi 2025-04-05 21:22:59 +02:00
parent 44a7a2140e
commit de989ad5a0
11 changed files with 408 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/app/app.module.ts
View File

@ -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,

2
frontend/src/app/header/header.component.html
View File

@ -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">

1
frontend/src/app/header/header.component.ts
View File

@ -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 = '';

10
frontend/src/app/home/home.component.html
View File

@ -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>

8
frontend/src/app/home/home.component.scss
View File

@ -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 {

18
frontend/src/app/home/home.component.ts
View File

@ -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) {

263
frontend/src/app/rules/rules.component.html Normal file
View File

@ -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>

58
frontend/src/app/rules/rules.component.scss Normal file
View File

@ -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;
}

23
frontend/src/app/rules/rules.component.spec.ts Normal file
View File

@ -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();
});
});

11
frontend/src/app/rules/rules.component.ts Normal file
View File

@ -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 {
}

17
frontend/src/styles.scss
View File

@ -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 */