Merge remote-tracking branch 'origin/bans' into bans

# Conflicts:
#	frontend/src/app/app.routes.ts

frontend/src/app/community/community.component.html

@@ -0,0 +1,79 @@
+<ng-container>
+  <app-header [current_page]="'community'" height="460px" background_image="/public/img/backgrounds/community.jpg"
+              [overlay_gradient]="0.5">
+    <div class="title" header-content>
+      <h1>Community</h1>
+      <h2>Talented people who help Altitude in more than one way.</h2>
+    </div>
+  </app-header>
+
+  <main>
+    <section class="darkmodeSection">
+      <div class="customContainer">
+        <h2>Current Nitro Boosters</h2>
+      </div>
+    </section>
+    <section id="social" class="darkmodeSectionThree">
+      <div class="container" style="padding: 50px 0 0 0; justify-content: center;">
+        <h2 class="sectionTitle">Social Media</h2>
+      </div>
+      <div style="display: flex; justify-content: center; padding-bottom: 30px;">
+        <p style="text-align: center;">We're currently not looking for more people to help manage our socials.</p>
+      </div>
+    </section>
+    <section id="crateTeam" class="darkmodeSection">
+      <div class="container" style="padding: 50px 0 0 0; justify-content: center;">
+        <h2 class="sectionTitle">Crate Team</h2>
+      </div>
+    </section>
+    <section class="darkmodeSectionThree">
+      <div class="container" style="padding: 50px 0 0 0; justify-content: center;">
+        <h2 class="sectionTitle">Event Leaders</h2>
+      </div>
+      <div style="display: flex; justify-content: center; padding-bottom: 30px;">
+        <p style="text-align: center;">We're currently not looking for more Event Leaders.</p>
+      </div>
+    </section>
+    <section class="darkmodeSection">
+      <div class="container" style="padding: 50px 0 0 0; justify-content: center;">
+        <h2 class="sectionTitle">Event Team</h2>
+      </div>
+      <div style="display: flex; justify-content: center; padding-bottom: 30px;">
+        <div style="flex-direction: column;">
+          <p style="text-align: center;">We occasionally open applications for the event team.</p>
+          <p style="text-align: center;">If you're interested in joining you simply need to keep an eye on the Discord
+            announcements.</p>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSectionThree">
+      <div class="container" style="padding: 50px 0 0 0; justify-content: center;">
+        <h2 class="sectionTitle">YouTubers & Streamers</h2>
+      </div>
+      <div style="display: flex; justify-content: center; padding-bottom: 30px;">
+        <div style="flex-direction: column;">
+          <p style="text-align: center;"><a style="cursor: pointer;" id="reqButton">Show Requirements...</a></p>
+        </div>
+      </div>
+      <div id="req" class="hide" style="display: flex; justify-content: center; padding-bottom: 30px;">
+        <div style="flex-direction: column; justify-content: center; max-width: 800px;">
+          <p style="text-align: center;"><span style="font-family: 'opensans-bold', sans-serif;">Requirements:</span>
+          </p>
+          <p style="text-align: center;">You need to have at least one recent stream/video on Altitude which we can use
+            to gauge if your audience enjoys your content on Altitude.</p>
+          <br>
+          <p style="text-align: center;">Twitch: You need to be affiliate and get at least 5 viewers on average while
+            streaming on Altitude.</p>
+          <p style="text-align: center;">YouTube videos: You need at least 500 subs and have at least 200 views per
+            video within a week on average for Altitude content.</p>
+          <p style="text-align: center;">YouTube streamers: You need at least 500 subs and have at least 5 viewers on
+            average while streaming on Altitude.</p>
+          <br>
+          <p style="text-align: center;"><span style="font-family: 'opensans-bold', sans-serif;">Note:</span> Before
+            accepting or denying you we will watch your latest video/stream on Altitude (so keep your broadcasts public
+            on twitch).</p>
+        </div>
+      </div>
+    </section>
+  </main>
+</ng-container>

frontend/src/app/community/community.component.scss

@@ -0,0 +1,12 @@
+.customContainer {
+  width: 80%;
+  max-width: 1020px;
+  margin: auto;
+  padding: 80px 0;
+  text-align: center;
+}
+
+.hide {
+  display: none !important;
+}
+

frontend/src/app/community/community.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommunityComponent } from './community.component';
+
+describe('CommunityComponent', () => {
+  let component: CommunityComponent;
+  let fixture: ComponentFixture<CommunityComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CommunityComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CommunityComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/community/community.component.ts

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {HeaderComponent} from "../header/header.component";
+
+@Component({
+  selector: 'app-community',
+  imports: [
+    HeaderComponent
+  ],
+  templateUrl: './community.component.html',
+  styleUrl: './community.component.scss'
+})
+export class CommunityComponent {
+
+}

frontend/src/app/nickgenerator/nickgenerator.component.html

@@ -0,0 +1,53 @@
+<ng-container>
+  <app-header [current_page]="'nickgenerator'" height="460px" background_image="/public/img/backgrounds/trees.jpg"
+              [overlay_gradient]="0.5">
+    <div class="title" header-content>
+      <h1>Nickname Generator</h1>
+      <h2>Customize your in-game nickname</h2>
+      <h3 style="font-family: 'minecraft-text', sans-serif; font-size: 0.8rem; margin-top: 10px;">Made by TheParm</h3>
+    </div>
+  </app-header>
+
+  <main>
+    <!-- <section class="darkmodeSection">
+      <div class="container containerNick">
+        <div style="padding: 0 5% 0 5%;">
+          <div id="parts" class="previewNickDiv">
+          </div>
+          <div class="previewNickDiv">
+            <input type="button" class="button" value="Add Part" onclick="addPart()"/>
+            <input type="button" class="button" value="Remove Part" onclick="deletePart()"/>
+          </div>
+          <br><br><br><br>
+          <div id="commandTry" class="previewNickDiv">
+            <div id="try" class="command darkBg"></div>
+            <input type="button" class="button copy" value="Copy" onclick="copy(this)"/>
+          </div>
+          <div id="commandRequest" class="previewNickDiv">
+            <div id="request" class="command darkBg"></div>
+            <input type="button" class="button copy" value="Copy" onclick="copy(this)"/>
+          </div>
+          <div id="preview" class="preview darkBg previewNickDiv">
+          </div>
+          <div id="template" class='part' style="display: none">
+            <p style="font-family: 'minecraft-text', sans-serif">
+              Text: <input type="text" id="text" class="textPart" size=18 oninput="inputChanged()"/>
+              Gradient: <input type="checkbox" id="grad" class="gradPart" oninput="onGradient(this)"/>
+              <input id="colorA" type="text" class="coloris colorAPart color" value="#ffffff" oninput="inputChanged()"/>
+              <input id="colorB" type="text" class="coloris colorBPart color" value="#ffffff" oninput="inputChanged()"/>
+              Continuation: <input type="checkbox" id="cont" class="contPart" disabled oninput="onContinuation(this)"/>
+              <span id="invalid" class="invalidPart" style="display: none">(min 1 - max 16 chars)</span>
+            </p>
+          </div>
+          <div style="margin-top: 20px; text-align: center;">
+            <p style="font-family: 'minecraft-text', sans-serif">
+              Usage: Add as many parts as you wish, then apply the color and/or gradient, and copy/paste the command
+              into the minecraft chat. The total length of the nickname should be between 3 and 16 characters. Use the
+              continuation checkbox to continue the gradient from the last gradient color.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section> -->
+  </main>
+</ng-container>

frontend/src/app/nickgenerator/nickgenerator.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NickgeneratorComponent } from './nickgenerator.component';
+
+describe('NickgeneratorComponent', () => {
+  let component: NickgeneratorComponent;
+  let fixture: ComponentFixture<NickgeneratorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NickgeneratorComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NickgeneratorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/nickgenerator/nickgenerator.component.ts

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {HeaderComponent} from "../header/header.component";
+
+@Component({
+  selector: 'app-nickgenerator',
+  imports: [
+    HeaderComponent
+  ],
+  templateUrl: './nickgenerator.component.html',
+  styleUrl: './nickgenerator.component.scss'
+})
+export class NickgeneratorComponent {
+
+}

frontend/src/app/nicknames/nicknames.component.html

@@ -0,0 +1,82 @@
+<ng-container>
+  <app-header [current_page]="'nicknames'" height="460px" background_image="/public/img/backgrounds/trees.jpg"
+              [overlay_gradient]="0.5">
+    <div class="title" header-content>
+      <h1>How To Get A Nickname</h1>
+      <h2>Personalize your writing and nickname in-game by choosing some of the millions of custom colors that we have
+        to offer!</h2>
+    </div>
+  </app-header>
+
+  <main>
+    <section class="darkmodeSection">
+      <section class="columnSection">
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <h2>Creating a Nickname</h2>
+            <p>Donors that have the Duke or Archduke rank have the ability to create custom nicknames for themselves. A
+              nickname should be similar enough to the player’s username for that player to be identifiable, and it
+              <span style="font-family: 'opensans-bold', sans-serif;">must not exceed 16 characters in length</span>. In
+              general, a nickname should include the main part of a player’s actual username to avoid confusion.</p>
+          </div>
+          <div class="columnParagraph">
+            <h2>Make it Your Own</h2>
+            <p>Altitude now supports the full range of RGB colors, which includes more than 16 million different hues.
+              In addition, the previous basic color codes still exist and are able to be used in combination with the
+              RGB colors. You can still use <span style="font-family: 'opensans-bold', sans-serif;">/colors</span> to
+              see the basic color codes that are available for use. You can also make use of <span
+                style="font-family: 'opensans-bold', sans-serif;">/colorsextra</span> which shows many different RGB
+              color options. These colors will be in the form of <span
+                style="font-family: 'opensans-bold', sans-serif;">#XXXXXX</span>; write down the colors that you like so
+              that you can easily use them later.</p>
+            <img ngSrc="/public/img/random/colors.png" alt="RGB colors" style="width: 100%; padding:0;" height="130"
+                 width="480">
+            <p>Output of /colorsextra</p>
+            <p>Furthermore, you can also use the <a [routerLink]="['/nickgenerator']">nickname generation tool</a> to
+              make and preview potential nicknames - as well as copying the commands to use in-game.</p>
+            <p>Players are encouraged to play around and personalize their nicknames, as long as they follow the rules
+              and are legible! There are endless possibilities beyond simple gradients as well; players can create any
+              combination of standard colors and gradients that they choose.</p>
+            <p>Even if you aren’t a Duke or Archduke, you can try out colors like this on signs in-game.</p>
+          </div>
+        </div>
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <h2>Request Your Nickname</h2>
+            <p>Players can only submit a new nickname request using <span
+              style="font-family: 'opensans-bold', sans-serif;">/nick request &lt;name&gt;</span> once per day. When a
+              nickname is requested, it will notify staff for near-instant approval. Creating custom nicknames using RGB
+              can be difficult, so we have implemented <span style="font-family: 'opensans-bold', sans-serif;">/nick try &lt;name&gt;</span>
+              so that you can experiment with your nicknames as many times as you want. It is highly encouraged to use
+              this command before submitting a formal request to staff. You can select an RGB color by putting the <span
+                style="font-family: 'opensans-bold', sans-serif;">#XXXXXX</span> code into curly braces before your
+              text.</p>
+            <p>We also support gradients in nicknames. You can specify the start and finish color and your nickname will
+              automatically find a gradient that goes between the two endpoints. <span
+                style="font-family: 'opensans-bold', sans-serif;">The symbol &gt; is used to start a gradient, and the symbol &lt; is used to close a gradient.</span>
+              You can have as many gradients as you want in your nickname, as long as it is readable.</p>
+            <p><span style="font-family: 'opensans-bold', sans-serif;">/nick try &lbrace;#003380&rbrace;Player</span>
+              would result in a blue name that read as “Player”.</p>
+            <p><span style="font-family: 'opensans-bold', sans-serif;">/nick try &lbrace;#003380>&rbrace;Player&lbrace;#0000FF<&rbrace;</span>
+              would result in the nickname reading as “Player” with a blue gradient fading across the letters in the
+              name.</p>
+          </div>
+          <div class="columnParagraph">
+            <h2>Useful Commands</h2>
+            <ul>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/nick help</span> - Shows a list of all useful
+                nickname commands and how to use them.
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/nick try name</span> - Allows players to see
+                how a nickname would look as many times as you like.
+              </li>
+              <li><span style="font-family: 'opensans-bold', sans-serif;">/nick request name</span> - Allows players to
+                submit a new nickname to staff for approval. This function can only be used once per day.
+              </li>
+            </ul>
+          </div>
+        </div>
+      </section>
+    </section>
+  </main>
+</ng-container>

frontend/src/app/nicknames/nicknames.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NicknamesComponent } from './nicknames.component';
+
+describe('NicknamesComponent', () => {
+  let component: NicknamesComponent;
+  let fixture: ComponentFixture<NicknamesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NicknamesComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NicknamesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/nicknames/nicknames.component.ts

@@ -0,0 +1,18 @@
+import {Component} from '@angular/core';
+import {HeaderComponent} from "../header/header.component";
+import {NgOptimizedImage} from '@angular/common';
+import {RouterLink} from '@angular/router';
+
+@Component({
+  selector: 'app-nicknames',
+  imports: [
+    HeaderComponent,
+    NgOptimizedImage,
+    RouterLink
+  ],
+  templateUrl: './nicknames.component.html',
+  styleUrl: './nicknames.component.scss'
+})
+export class NicknamesComponent {
+
+}