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

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

backend/src/main/java/com/alttd/altitudeweb/config/SecurityConfig.java

@@ -40,7 +40,7 @@ public class SecurityConfig {
                 .requestMatchers("/team/**", "/history/**").permitAll()
                 .requestMatchers("/form/**").hasAuthority(PermissionClaimDto.USER.getValue())
                 .requestMatchers("/head_mod/**").hasAuthority(PermissionClaimDto.HEAD_MOD.getValue())
-                .anyRequest().permitAll()
+                .anyRequest().authenticated()
             )
             .oauth2ResourceServer(oauth2 -> oauth2.jwt(Customizer.withDefaults()))
             .sessionManagement(session -> session.sessionCreationPolicy(SessionCreationPolicy.STATELESS))

frontend/package.json

@@ -22,10 +22,8 @@
     "@angular/platform-browser": "^19.2.0",
     "@angular/platform-browser-dynamic": "^19.2.0",
     "@angular/router": "^19.2.0",
-    "@types/three": "^0.177.0",
     "ngx-cookie-service": "^19.1.2",
     "rxjs": "~7.8.0",
-    "three": "^0.177.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
   },

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

@@ -2,13 +2,15 @@ import {Component} from '@angular/core';
 import {ScrollService} from '../scroll/scroll.service';
 import {CommonModule} from '@angular/common';
 import {HeaderComponent} from '../header/header.component';
+import {RemoveTrailingPeriodPipe} from "../util/RemoveTrailingPeriodPipe";
 
 @Component({
   selector: 'app-about',
   standalone: true,
   imports: [
     CommonModule,
-    HeaderComponent
+    HeaderComponent,
+    RemoveTrailingPeriodPipe
   ],
   templateUrl: './about.component.html',
   styleUrl: './about.component.scss'

frontend/src/app/app.routes.ts

@@ -5,10 +5,6 @@ export const routes: Routes = [
     path: '',
     loadComponent: () => import('./home/home.component').then(m => m.HomeComponent)
   },
-  {
-    path: 'particles',
-    loadComponent: () => import('./particles/particles.component').then(m => m.ParticlesComponent)
-  },
   {
     path: 'map',
     loadComponent: () => import('./map/map.component').then(m => m.MapComponent)
@@ -109,8 +105,6 @@ export const routes: Routes = [
     path: 'forms',
     loadComponent: () => import('./forms/forms.component').then(m => m.FormsComponent)
   },
-  {
-    path: 'particles',
-    loadComponent: () => import('./particles/particles.component').then(m => m.ParticlesComponent)
-  },
 ];
+
+

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

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

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

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

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

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

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

frontend/src/app/particles/components/frames/frames.component.html

@@ -1,41 +0,0 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title>Frames</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <div class="frames-container">
-      <mat-tab-group [selectedIndex]="frames.indexOf(currentFrame)"
-                     (selectedIndexChange)="switchFrame(frames[$event])">
-        <mat-tab *ngFor="let frameId of frames" [label]="frameId">
-          <div class="frame-content">
-            <h3>Particles in {{ frameId }}</h3>
-            <div class="particles-list">
-              <div *ngFor="let particle of particleData.frames[frameId]; let i = index" class="particle-item">
-                    <span>Particle {{ i + 1 }}: ({{ particle.x.toFixed(2) }}, {{ particle.y.toFixed(2) }}
-                      , {{ particle.z.toFixed(2) }})</span>
-                <button mat-icon-button color="warn" (click)="removeParticle(frameId, i)">
-                  <mat-icon>delete</mat-icon>
-                </button>
-              </div>
-              <div *ngIf="!particleData.frames[frameId] || particleData.frames[frameId].length === 0"
-                   class="no-particles">
-                No particles in this frame. Click on the plane to add particles.
-              </div>
-            </div>
-            <div class="frame-actions">
-              <button mat-raised-button color="warn" (click)="removeFrame(frameId)"
-                      [disabled]="frames.length <= 1">
-                Remove Frame
-              </button>
-            </div>
-          </div>
-        </mat-tab>
-      </mat-tab-group>
-      <div class="add-frame">
-        <button mat-raised-button color="primary" (click)="addFrame()">
-          Add New Frame
-        </button>
-      </div>
-    </div>
-  </mat-card-content>
-</mat-card>

frontend/src/app/particles/components/frames/frames.component.scss

@@ -1,46 +0,0 @@
-.frames-container {
-  margin-top: 10px;
-}
-
-.frame-content {
-  padding: 15px;
-}
-
-.particles-list {
-  height: 550px;
-  overflow-y: auto;
-  border: 1px solid #eee;
-  border-radius: 4px;
-  padding: 10px;
-  margin-bottom: 15px;
-}
-
-.particle-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px;
-  border-bottom: 1px solid #eee;
-}
-
-.particle-item:last-child {
-  border-bottom: none;
-}
-
-.no-particles {
-  padding: 20px;
-  text-align: center;
-  color: #888;
-}
-
-.frame-actions {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 10px;
-}
-
-.add-frame {
-  margin-top: 15px;
-  display: flex;
-  justify-content: center;
-}

frontend/src/app/particles/components/frames/frames.component.ts

@@ -1,86 +0,0 @@
-import {Component} from '@angular/core';
-import {MatButton, MatIconButton} from "@angular/material/button";
-import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from "@angular/material/card";
-import {MatTab, MatTabGroup} from "@angular/material/tabs";
-import {NgForOf, NgIf} from "@angular/common";
-import {ParticleData} from '../../models/particle.model';
-import {MatIcon} from '@angular/material/icon';
-import {ParticleManagerService} from '../../services/particle-manager.service';
-import {FrameManagerService} from '../../services/frame-manager.service';
-
-@Component({
-  selector: 'app-frames',
-  imports: [
-    MatButton,
-    MatCard,
-    MatCardContent,
-    MatCardHeader,
-    MatCardTitle,
-    MatIcon,
-    MatIconButton,
-    MatTab,
-    MatTabGroup,
-    NgForOf,
-    NgIf
-  ],
-  templateUrl: './frames.component.html',
-  styleUrl: './frames.component.scss'
-})
-export class FramesComponent {
-
-  constructor(
-    private particleManagerService: ParticleManagerService,
-    private frameManagerService: FrameManagerService) {
-  }
-
-  /**
-   * Get the particle data
-   */
-  public get particleData(): ParticleData {
-    return this.particleManagerService.getParticleData();
-  }
-
-  /**
-   * Get the current frame
-   */
-  public get currentFrame(): string {
-    return this.particleManagerService.getCurrentFrame();
-  }
-
-  /**
-   * Get all frames
-   */
-  public get frames(): string[] {
-    return this.particleManagerService.getFrames();
-  }
-
-  /**
-   * Add a new frame
-   */
-  public addFrame(): void {
-    this.frameManagerService.addFrame();
-  }
-
-  /**
-   * Switch to a different frame
-   */
-  public switchFrame(frameId: string): void {
-    this.frameManagerService.switchFrame(frameId);
-  }
-
-  /**
-   * Remove a particle
-   */
-  public removeParticle(frameId: string, index: number): void {
-    this.particleManagerService.removeParticle(frameId, index);
-  }
-
-  /**
-   * Remove a frame
-   */
-  public removeFrame(frameId: string): void {
-    this.frameManagerService.removeFrame(frameId);
-  }
-
-
-}

frontend/src/app/particles/components/particle/particle.component.html

@@ -1,11 +0,0 @@
-<mat-card class="color-picker-card">
-  <mat-card-header>
-    <mat-card-title>Particle Color</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <div class="color-picker">
-      <input type="color" [(ngModel)]="selectedColor">
-      <span>Selected Color: {{ selectedColor }}</span>
-    </div>
-  </mat-card-content>
-</mat-card>

frontend/src/app/particles/components/particle/particle.component.scss

@@ -1,17 +0,0 @@
-.color-picker-card {
-  margin-top: 20px;
-}
-
-.color-picker {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-}
-
-.color-picker input[type="color"] {
-  width: 50px;
-  height: 50px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}

frontend/src/app/particles/components/particle/particle.component.spec.ts

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

frontend/src/app/particles/components/particle/particle.component.ts

@@ -1,40 +0,0 @@
-import {Component} from '@angular/core';
-import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from '@angular/material/card';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {ParticleManagerService} from '../../services/particle-manager.service';
-
-@Component({
-  selector: 'app-particle',
-  imports: [
-    MatCard,
-    MatCardContent,
-    MatCardHeader,
-    MatCardTitle,
-    ReactiveFormsModule,
-    FormsModule
-  ],
-  templateUrl: './particle.component.html',
-  styleUrl: './particle.component.scss'
-})
-export class ParticleComponent {
-
-  constructor(
-    private particleManagerService: ParticleManagerService,
-  ) {
-  }
-
-  /**
-   * Get the selected color
-   */
-  public get selectedColor(): string {
-    return this.particleManagerService.getSelectedColor();
-  }
-
-  /**
-   * Set the selected color
-   */
-  public set selectedColor(color: string) {
-    this.particleManagerService.setSelectedColor(color);
-  }
-
-}

frontend/src/app/particles/components/properties/properties.component.html

@@ -1,91 +0,0 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title>Particle Properties</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <div class="form-row">
-      <mat-form-field appearance="outline">
-        <mat-label>Particle Name</mat-label>
-        <input matInput [(ngModel)]="particleData.particle_name" placeholder="Enter particle name">
-      </mat-form-field>
-    </div>
-
-    <div class="form-row">
-      <mat-form-field appearance="outline">
-        <mat-label>Display Name</mat-label>
-        <input matInput [(ngModel)]="particleData.display_name" placeholder="Enter display name">
-      </mat-form-field>
-    </div>
-
-    <div class="form-row">
-      <mat-form-field appearance="outline">
-        <mat-label>Particle Type</mat-label>
-        <mat-select [(ngModel)]="particleData.particle_type">
-          <mat-option *ngFor="let type of particleTypes" [value]="type">{{ type }}</mat-option>
-        </mat-select>
-      </mat-form-field>
-    </div>
-
-    <div class="form-row">
-      <mat-form-field appearance="outline">
-        <mat-label>Lore</mat-label>
-        <textarea matInput [(ngModel)]="particleData.lore" placeholder="Enter lore"></textarea>
-      </mat-form-field>
-    </div>
-
-    <div class="form-row">
-      <mat-form-field appearance="outline">
-        <mat-label>Display Item</mat-label>
-        <input matInput [(ngModel)]="particleData.display_item" placeholder="Enter display item">
-      </mat-form-field>
-    </div>
-
-    <div class="form-row">
-      <mat-form-field appearance="outline">
-        <mat-label>Permission</mat-label>
-        <input matInput [(ngModel)]="particleData.permission" placeholder="Enter permission">
-      </mat-form-field>
-    </div>
-
-    <div class="form-row">
-      <mat-form-field appearance="outline">
-        <mat-label>Package Permission</mat-label>
-        <input matInput [(ngModel)]="particleData.package_permission" placeholder="Enter package permission">
-      </mat-form-field>
-    </div>
-
-    <div class="form-row">
-      <mat-form-field appearance="outline">
-        <mat-label>Frame Delay</mat-label>
-        <input matInput type="number" [(ngModel)]="particleData.frame_delay" placeholder="Enter frame delay">
-      </mat-form-field>
-    </div>
-
-    <div class="form-row">
-      <mat-form-field appearance="outline">
-        <mat-label>Repeat</mat-label>
-        <input matInput type="number" [(ngModel)]="particleData.repeat" placeholder="Enter repeat count">
-      </mat-form-field>
-    </div>
-
-    <div class="form-row">
-      <mat-form-field appearance="outline">
-        <mat-label>Repeat Delay</mat-label>
-        <input matInput type="number" [(ngModel)]="particleData.repeat_delay"
-               placeholder="Enter repeat delay">
-      </mat-form-field>
-    </div>
-
-    <div class="form-row">
-      <mat-form-field appearance="outline">
-        <mat-label>Random Offset</mat-label>
-        <input matInput type="number" [(ngModel)]="particleData.random_offset"
-               placeholder="Enter random offset">
-      </mat-form-field>
-    </div>
-
-    <div class="form-row">
-      <mat-checkbox [(ngModel)]="particleData.stationary">Stationary</mat-checkbox>
-    </div>
-  </mat-card-content>
-</mat-card>

frontend/src/app/particles/components/properties/properties.component.ts

@@ -1,43 +0,0 @@
-import {Component} from '@angular/core';
-import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from "@angular/material/card";
-import {MatCheckbox} from "@angular/material/checkbox";
-import {MatFormField, MatInput, MatLabel} from "@angular/material/input";
-import {NgForOf} from "@angular/common";
-import {FormsModule, ReactiveFormsModule} from "@angular/forms";
-import {ParticleData, ParticleType} from '../../models/particle.model';
-import {MatSelect} from '@angular/material/select';
-import {MatOption} from '@angular/material/core';
-import {ParticleManagerService} from '../../services/particle-manager.service';
-
-@Component({
-  selector: 'app-particle-properties',
-  imports: [
-    MatCard,
-    MatCardContent,
-    MatCardHeader,
-    MatCardTitle,
-    MatCheckbox,
-    MatFormField,
-    MatInput,
-    MatLabel,
-    MatOption,
-    MatSelect,
-    NgForOf,
-    ReactiveFormsModule,
-    FormsModule
-  ],
-  templateUrl: './properties.component.html',
-  styleUrl: './properties.component.scss'
-})
-export class PropertiesComponent {
-  public particleTypes = Object.values(ParticleType);
-
-  constructor(
-    private particleManagerService: ParticleManagerService,
-  ) {
-  }
-
-  public get particleData(): ParticleData {
-    return this.particleManagerService.getParticleData();
-  }
-}

frontend/src/app/particles/components/render-container/render-container.component.html

@@ -1,41 +0,0 @@
-<div #rendererContainer class="renderer-container">
-  <div class="plane-controls-overlay">
-    <button mat-mini-fab color="primary" (click)="togglePlaneLock()"
-            [matTooltip]="isPlaneLocked ? 'Unlock Plane' : 'Lock Plane'">
-      <mat-icon>{{ isPlaneLocked ? 'lock' : 'lock_open' }}</mat-icon>
-    </button>
-
-    <div *ngIf="isPlaneLocked" class="plane-orientation-buttons">
-      <button mat-mini-fab color="warn" (click)="setPlaneOrientation(planeOrientations.VERTICAL_ABOVE)"
-              [class.active]="currentPlaneOrientation === planeOrientations.VERTICAL_ABOVE"
-              matTooltip="Vertical Above">
-        <mat-icon>arrow_upward</mat-icon>
-      </button>
-      <button mat-mini-fab color="warn" (click)="setPlaneOrientation(planeOrientations.VERTICAL_BELOW)"
-              [class.active]="currentPlaneOrientation === planeOrientations.VERTICAL_BELOW"
-              matTooltip="Vertical Below">
-        <mat-icon>arrow_downward</mat-icon>
-      </button>
-      <button mat-mini-fab color="primary" (click)="setPlaneOrientation(planeOrientations.HORIZONTAL_FRONT)"
-              [class.active]="currentPlaneOrientation === planeOrientations.HORIZONTAL_FRONT"
-              matTooltip="Horizontal Front">
-        <mat-icon>arrow_forward</mat-icon>
-      </button>
-      <button mat-mini-fab color="primary" (click)="setPlaneOrientation(planeOrientations.HORIZONTAL_BEHIND)"
-              [class.active]="currentPlaneOrientation === planeOrientations.HORIZONTAL_BEHIND"
-              matTooltip="Horizontal Behind">
-        <mat-icon>arrow_back</mat-icon>
-      </button>
-      <button mat-mini-fab color="accent" (click)="setPlaneOrientation(planeOrientations.HORIZONTAL_RIGHT)"
-              [class.active]="currentPlaneOrientation === planeOrientations.HORIZONTAL_RIGHT"
-              matTooltip="Horizontal Right">
-        <mat-icon>arrow_right</mat-icon>
-      </button>
-      <button mat-mini-fab color="accent" (click)="setPlaneOrientation(planeOrientations.HORIZONTAL_LEFT)"
-              [class.active]="currentPlaneOrientation === planeOrientations.HORIZONTAL_LEFT"
-              matTooltip="Horizontal Left">
-        <mat-icon>arrow_left</mat-icon>
-      </button>
-    </div>
-  </div>
-</div>

frontend/src/app/particles/components/render-container/render-container.component.scss

@@ -1,46 +0,0 @@
-.renderer-container {
-  height: 1000px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  overflow: hidden;
-  background-color: #f0f0f0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative; /* Added for absolute positioning of overlay */
-}
-
-.plane-controls-overlay {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 10px;
-  z-index: 10;
-}
-
-.plane-orientation-buttons {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(3, 1fr);
-  gap: 10px;
-  margin-top: 10px;
-}
-
-.plane-orientation-buttons button {
-  opacity: 0.7;
-  transition: opacity 0.2s, transform 0.2s;
-}
-
-.plane-orientation-buttons button:hover {
-  opacity: 1;
-  transform: scale(1.1);
-}
-
-.plane-orientation-buttons button.active {
-  opacity: 1;
-  transform: scale(1.1);
-  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
-}

frontend/src/app/particles/components/render-container/render-container.component.spec.ts

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

frontend/src/app/particles/components/render-container/render-container.component.ts

@@ -1,105 +0,0 @@
-import {AfterViewInit, Component, ElementRef, OnDestroy, ViewChild} from '@angular/core';
-import {MatMiniFabButton} from '@angular/material/button';
-import {NgIf} from '@angular/common';
-import {IntersectionPlaneService, PlaneOrientation} from '../../services/intersection-plane.service';
-import {MatIcon} from '@angular/material/icon';
-import {MatTooltip} from '@angular/material/tooltip';
-import {RendererService} from '../../services/renderer.service';
-import {PlayerModelService} from '../../services/player-model.service';
-import {InputHandlerService} from '../../services/input-handler.service';
-
-@Component({
-  selector: 'app-render-container',
-  imports: [
-    MatIcon,
-    MatMiniFabButton,
-    MatTooltip,
-    NgIf
-  ],
-  templateUrl: './render-container.component.html',
-  styleUrl: './render-container.component.scss'
-})
-export class RenderContainerComponent implements AfterViewInit, OnDestroy {
-  @ViewChild('rendererContainer') rendererContainer!: ElementRef;
-
-  constructor(
-    private intersectionPlaneService: IntersectionPlaneService,
-    private playerModelService: PlayerModelService,
-    private inputHandlerService: InputHandlerService,
-    private rendererService: RendererService,
-  ) {
-  }
-
-  ngAfterViewInit(): void {
-    this.initializeScene();
-    this.animate();
-  }
-
-  /**
-   * Clean up resources when component is destroyed
-   */
-  ngOnDestroy(): void {
-    if (this.rendererService.renderer) {
-      this.inputHandlerService.cleanup(this.rendererService.renderer.domElement);
-    }
-  }
-
-  /**
-   * Initialize the 3D scene and all related components
-   */
-  private initializeScene(): void {
-    this.rendererService.initializeRenderer(this.rendererContainer);
-    this.playerModelService.loadSkinTexture('/public/img/skins/steve.png')
-      .then(() => {
-        // Then create the player model with the texture applied
-        this.playerModelService.createPlayerModel();
-      });
-    this.intersectionPlaneService.createIntersectionPlane();
-    this.inputHandlerService.initializeInputHandlers(this.rendererService.renderer.domElement);
-  }
-
-  /**
-   * Animation loop
-   */
-  private animate(): void {
-    requestAnimationFrame(this.animate.bind(this));
-    this.intersectionPlaneService.updatePlaneOrientation(this.rendererService.camera);
-    this.rendererService.render();
-  }
-
-  /**
-   * Get whether the plane is locked
-   */
-  public get isPlaneLocked(): boolean {
-    return this.intersectionPlaneService.isPlaneLocked();
-  }
-
-  /**
-   * Toggle the plane locked state
-   */
-  public togglePlaneLock(): void {
-    const newLockedState = !this.isPlaneLocked;
-    this.intersectionPlaneService.setPlaneLocked(newLockedState);
-  }
-
-  /**
-   * Get the current plane orientation
-   */
-  public get currentPlaneOrientation(): PlaneOrientation {
-    return this.intersectionPlaneService.getCurrentOrientation();
-  }
-
-  /**
-   * Set the plane orientation
-   */
-  public setPlaneOrientation(orientation: PlaneOrientation): void {
-    this.intersectionPlaneService.setPlaneOrientation(orientation);
-  }
-
-  /**
-   * Get all available plane orientations
-   */
-  public get planeOrientations(): typeof PlaneOrientation {
-    return PlaneOrientation;
-  }
-}

frontend/src/app/particles/models/particle.model.ts

@@ -1,40 +0,0 @@
-/**
- * Defines the types of particles available in the system
- */
-export enum ParticleType {
-  REDSTONE = 'REDSTONE',
-  // Other particle types can be added later
-}
-
-/**
- * Represents a single particle's information
- */
-export interface ParticleInfo {
-  particle_type: string;
-  x: number;
-  y: number;
-  z: number;
-  color: string;
-  extra: number;
-}
-
-/**
- * Represents the complete particle data structure
- */
-export interface ParticleData {
-  particle_name: string;
-  display_name: string;
-  particle_type: string;
-  lore: string;
-  display_item: string;
-  permission: string;
-  package_permission: string;
-  frame_delay: number;
-  repeat: number;
-  repeat_delay: number;
-  random_offset: number;
-  stationary: boolean;
-  frames: {
-    [frameId: string]: ParticleInfo[];
-  };
-}

frontend/src/app/particles/particles.component.html

@@ -1,40 +0,0 @@
-<app-header current_page="particles" height="200px" background_image="/public/img/backgrounds/staff.png"
-            [overlay_gradient]="0.5">
-  <div class="title" header-content>
-    <h1>Particle Creator</h1>
-  </div>
-</app-header>
-
-<main>
-  <section class="darkmodeSection">
-    <section class="column">
-      <div class="renderer-section column">
-        <div class="flex row">
-          <div class="flex side-column">
-            <app-particle-properties></app-particle-properties>
-          </div>
-          <div class="flex middle-column">
-            <app-render-container></app-render-container>
-            <div class="plane-controls">
-              <label>Plane Position (Z-axis):</label>
-              <mat-slider [min]="minOffset" [max]="maxOffset" step="1" #planeSlider>
-                <input matSliderThumb [(ngModel)]="planePosition" (input)="updatePlanePosition($event)">
-              </mat-slider>
-              <span>{{ planePosition }} offset from center</span>
-            </div>
-          </div>
-          <div class="flex side-column">
-            <app-particle></app-particle>
-            <app-frames></app-frames>
-            <div>
-              <button mat-fab extended (click)="copyJson()">
-                <mat-icon>content_copy</mat-icon>
-                Copy JSON to clipboard
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  </section>
-</main>

frontend/src/app/particles/particles.component.scss

@@ -1,39 +0,0 @@
-.renderer-section {
-  flex: 1;
-  min-width: 300px;
-  display: flex;
-}
-
-.side-column {
-  flex: 1;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.middle-column {
-  flex: 2;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.plane-controls {
-  margin-top: 10px;
-  padding: 10px;
-  background-color: #f5f5f5;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.plane-controls mat-slider {
-  flex: 1;
-}
-
-.form-row {
-  margin-bottom: 15px;
-}
-
-mat-form-field {
-  width: 100%;
-}

frontend/src/app/particles/particles.component.ts

@@ -1,101 +0,0 @@
-import {Component, ElementRef, ViewChild} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatButtonModule} from '@angular/material/button';
-import {MatInputModule} from '@angular/material/input';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatSelectModule} from '@angular/material/select';
-import {MatSliderModule} from '@angular/material/slider';
-import {MatCheckboxModule} from '@angular/material/checkbox';
-import {MatTabsModule} from '@angular/material/tabs';
-import {MatCardModule} from '@angular/material/card';
-import {MatIconModule} from '@angular/material/icon';
-import {HeaderComponent} from '../header/header.component';
-
-// Services
-import {IntersectionPlaneService} from './services/intersection-plane.service';
-import {ParticleManagerService} from './services/particle-manager.service';
-
-// Models
-import {PropertiesComponent} from './components/properties/properties.component';
-import {ParticleComponent} from './components/particle/particle.component';
-import {FramesComponent} from './components/frames/frames.component';
-import {MatSnackBar} from '@angular/material/snack-bar';
-import {RenderContainerComponent} from './components/render-container/render-container.component';
-
-@Component({
-  selector: 'app-particles',
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule,
-    MatButtonModule,
-    MatInputModule,
-    MatFormFieldModule,
-    MatSelectModule,
-    MatSliderModule,
-    MatCheckboxModule,
-    MatTabsModule,
-    MatCardModule,
-    MatIconModule,
-    HeaderComponent,
-    PropertiesComponent,
-    ParticleComponent,
-    FramesComponent,
-    RenderContainerComponent,
-  ],
-  templateUrl: './particles.component.html',
-  styleUrl: './particles.component.scss'
-})
-export class ParticlesComponent {
-  @ViewChild('planeSlider') planeSlider!: ElementRef;
-
-  constructor(
-    private intersectionPlaneService: IntersectionPlaneService,
-    private particleManagerService: ParticleManagerService,
-    private matSnackBar: MatSnackBar,
-  ) {
-  }
-
-  /**
-   * Update plane position based on slider
-   */
-  public updatePlanePosition(event: Event): void {
-    const slider = event.target as HTMLInputElement;
-    const value = Number(slider.value);
-    this.intersectionPlaneService.updatePlanePosition(value);
-  }
-
-  /**
-   * Get the current plane position
-   */
-  public get planePosition(): number {
-    return this.intersectionPlaneService.getPlanePosition();
-  }
-
-  public set planePosition(newPlanePosition: number) {
-    this.intersectionPlaneService.updatePlanePosition(newPlanePosition);
-  }
-
-  public get maxOffset(): number {
-    return this.intersectionPlaneService.getMaxOffset();
-  }
-
-  public get minOffset(): number {
-    return this.intersectionPlaneService.getMinOffset();
-  }
-
-  /**
-   * Generate JSON output
-   */
-  public generateJson(): string {
-    return this.particleManagerService.generateJson();
-  }
-
-  public copyJson() {
-    navigator.clipboard.writeText(this.generateJson()).then(() => {
-      this.matSnackBar.open('Copied to clipboard', '', {duration: 2000})
-    });
-  }
-}

frontend/src/app/particles/services/frame-manager.service.ts

@@ -1,64 +0,0 @@
-import { Injectable } from '@angular/core';
-import { ParticleManagerService } from './particle-manager.service';
-
-/**
- * Service responsible for managing animation frames
- */
-@Injectable({
-  providedIn: 'root'
-})
-export class FrameManagerService {
-
-  constructor(private particleManager: ParticleManagerService) {}
-
-  /**
-   * Adds a new frame
-   */
-  addFrame(): void {
-    const frames = this.particleManager.getFrames();
-    const frameId = `frame${frames.length + 1}`;
-
-    frames.push(frameId);
-    this.particleManager.setFrames(frames);
-
-    const particleData = this.particleManager.getParticleData();
-    particleData.frames[frameId] = [];
-    this.particleManager.setParticleData(particleData);
-
-    this.switchFrame(frameId);
-  }
-
-  /**
-   * Switches to a different frame
-   */
-  switchFrame(frameId: string): void {
-    this.particleManager.setCurrentFrame(frameId);
-    this.particleManager.clearParticleVisuals();
-    this.particleManager.renderFrameParticles(frameId);
-  }
-
-  /**
-   * Removes a frame
-   */
-  removeFrame(frameId: string): void {
-    const frames = this.particleManager.getFrames();
-    const index = frames.indexOf(frameId);
-
-    if (index !== -1) {
-      frames.splice(index, 1);
-      this.particleManager.setFrames(frames);
-
-      const particleData = this.particleManager.getParticleData();
-      delete particleData.frames[frameId];
-      this.particleManager.setParticleData(particleData);
-
-      // Switch to first frame if we removed the current one
-      if (frameId === this.particleManager.getCurrentFrame() && frames.length > 0) {
-        this.switchFrame(frames[0]);
-      } else if (frames.length === 0) {
-        // If no frames left, add one
-        this.addFrame();
-      }
-    }
-  }
-}

frontend/src/app/particles/services/input-handler.service.ts

@@ -1,105 +0,0 @@
-import { Injectable, ElementRef } from '@angular/core';
-import * as THREE from 'three';
-import { RendererService } from './renderer.service';
-import { IntersectionPlaneService } from './intersection-plane.service';
-import { ParticleManagerService } from './particle-manager.service';
-
-/**
- * Service responsible for handling user input interactions
- */
-@Injectable({
-  providedIn: 'root'
-})
-export class InputHandlerService {
-  private raycaster = new THREE.Raycaster();
-  private mouse = new THREE.Vector2();
-  private isDragging = false;
-  private mouseDownTime = 0;
-
-  constructor(
-    private rendererService: RendererService,
-    private intersectionPlaneService: IntersectionPlaneService,
-    private particleManagerService: ParticleManagerService
-  ) {}
-
-  /**
-   * Initializes input event listeners
-   */
-  initializeInputHandlers(rendererElement: HTMLElement): void {
-    rendererElement.addEventListener('mousedown', this.onMouseDown.bind(this));
-    rendererElement.addEventListener('mouseup', this.onMouseUp.bind(this));
-    rendererElement.addEventListener('mousemove', this.onMouseMove.bind(this));
-    window.addEventListener('resize', this.onWindowResize.bind(this));
-  }
-
-  /**
-   * Handles mouse down event
-   */
-  private onMouseDown(event: MouseEvent): void {
-    this.isDragging = false;
-    this.mouseDownTime = Date.now();
-  }
-
-  /**
-   * Handles mouse up event
-   */
-  private onMouseUp(event: MouseEvent): void {
-    // If mouse was down for less than 200ms and didn't move much, consider it a click, not a drag
-    if (Date.now() - this.mouseDownTime < 200 && !this.isDragging) {
-      this.handlePlaneClick(event);
-    }
-    this.isDragging = false;
-  }
-
-  /**
-   * Handles mouse move event
-   */
-  private onMouseMove(event: MouseEvent): void {
-    // If mouse moves while button is pressed, it's a drag
-    if (event.buttons > 0) {
-      this.isDragging = true;
-    }
-  }
-
-  /**
-   * Handles mouse click on the plane
-   */
-  private handlePlaneClick(event: MouseEvent): void {
-    // Calculate mouse position in normalized device coordinates
-    const rect = this.rendererService.renderer.domElement.getBoundingClientRect();
-    this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
-    this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
-
-    // Update the picking ray with the camera and mouse position
-    this.raycaster.setFromCamera(this.mouse, this.rendererService.camera);
-
-    // Calculate objects intersecting the picking ray
-    const intersects = this.raycaster.intersectObject(this.intersectionPlaneService.getIntersectionPlane());
-
-    if (intersects.length > 0) {
-      const point = intersects[0].point;
-      this.particleManagerService.addParticle(point.x, point.y, point.z);
-    }
-  }
-
-  /**
-   * Handles window resize event
-   */
-  private onWindowResize(): void {
-    // This is delegated to the renderer service
-    const container = this.rendererService.renderer.domElement.parentElement;
-    if (container) {
-      this.rendererService.onWindowResize(new ElementRef(container));
-    }
-  }
-
-  /**
-   * Removes event listeners
-   */
-  cleanup(rendererElement: HTMLElement): void {
-    rendererElement.removeEventListener('mousedown', this.onMouseDown.bind(this));
-    rendererElement.removeEventListener('mouseup', this.onMouseUp.bind(this));
-    rendererElement.removeEventListener('mousemove', this.onMouseMove.bind(this));
-    window.removeEventListener('resize', this.onWindowResize.bind(this));
-  }
-}

frontend/src/app/particles/services/intersection-plane.service.ts

@@ -1,256 +0,0 @@
-import {Injectable} from '@angular/core';
-import * as THREE from 'three';
-import {RendererService} from './renderer.service';
-
-/**
- * Represents the possible orientations of the intersection plane
- */
-export enum PlaneOrientation {
-  VERTICAL_ABOVE,
-  VERTICAL_BELOW,
-  HORIZONTAL_FRONT,
-  HORIZONTAL_BEHIND,
-  HORIZONTAL_RIGHT,
-  HORIZONTAL_LEFT
-}
-
-/**
- * Service responsible for managing the intersection plane
- */
-@Injectable({
-  providedIn: 'root'
-})
-export class IntersectionPlaneService {
-  private intersectionPlane!: THREE.Mesh;
-  private planePosition: number = 0; // Position in 1/16th of a block
-  private currentOrientation: PlaneOrientation = PlaneOrientation.HORIZONTAL_FRONT;
-  private planeLocked: boolean = false;
-
-  constructor(private rendererService: RendererService) {
-  }
-
-  /**
-   * Creates the intersection plane and adds it to the scene
-   */
-  createIntersectionPlane(): THREE.Mesh {
-    const planeGeometry = new THREE.PlaneGeometry(3, 3);
-    const planeMaterial = new THREE.MeshBasicMaterial({
-      color: 0x00AA00,
-      transparent: true,
-      opacity: 0.05,
-      side: THREE.DoubleSide
-    });
-
-    this.intersectionPlane = new THREE.Mesh(planeGeometry, planeMaterial);
-    this.intersectionPlane.position.z = 0;
-    // Center the plane vertically with the player (player is about 2 blocks tall)
-    this.intersectionPlane.position.y = 1;
-    this.rendererService.scene.add(this.intersectionPlane);
-    this.intersectionPlane.renderOrder = 1;
-
-    return this.intersectionPlane;
-  }
-
-  /**
-   * Determines the plane orientation based on camera position
-   */
-  private determinePlaneOrientation(camera: THREE.Camera): PlaneOrientation {
-    // Check if camera is looking from above or below first
-    const verticalAngle = Math.atan2(
-      camera.position.y,
-      Math.sqrt(camera.position.x * camera.position.x + camera.position.z * camera.position.z)
-    );
-
-    // Threshold angle for considering the camera to be above/below (about 45 degrees)
-    const verticalThreshold = Math.PI / 4;
-
-    if (verticalAngle > verticalThreshold) {
-      return PlaneOrientation.VERTICAL_ABOVE;
-    } else if (verticalAngle < -verticalThreshold) {
-      return PlaneOrientation.VERTICAL_BELOW;
-    } else {
-      // Calculate the angle between camera and player (in the XZ plane)
-      const cameraAngle = Math.atan2(
-        camera.position.x,
-        camera.position.z
-      );
-
-      // Determine which quadrant the camera is in with a 45-degree offset
-      const quadrant = Math.floor((cameraAngle + Math.PI + Math.PI / 4) / (Math.PI / 2)) % 4;
-
-      switch (quadrant) {
-        case 0:
-          return PlaneOrientation.HORIZONTAL_FRONT;
-        case 1:
-          return PlaneOrientation.HORIZONTAL_RIGHT;
-        case 2:
-          return PlaneOrientation.HORIZONTAL_BEHIND;
-        case 3:
-          return PlaneOrientation.HORIZONTAL_LEFT;
-        default:
-          return PlaneOrientation.HORIZONTAL_FRONT;
-      }
-    }
-  }
-
-  /**
-   * Updates the plane orientation based on camera position
-   */
-  public updatePlaneOrientation(camera: THREE.Camera): void {
-    if (!this.intersectionPlane) return;
-
-    if (!this.planeLocked) {
-      this.currentOrientation = this.determinePlaneOrientation(camera);
-    }
-
-    this.updateIntersectionPlaneOrientation()
-
-    //Restrict plane position to the new bounds and update it
-    this.planePosition = Math.max(this.getMinOffset(), Math.min(this.getMaxOffset(), this.planePosition));
-    this.updatePlanePosition(this.planePosition);
-  }
-
-  /**
-   * Updates the plane position based on slider value
-   */
-  public updatePlanePosition(value: number): void {
-    this.planePosition = value;
-    // Convert from 1/16th block to Three.js units
-    const position = (this.planePosition / 16)
-
-    this.intersectionPlane.position.y = 0.8;
-    this.intersectionPlane.position.x = 0;
-    this.intersectionPlane.position.z = 0;
-
-    // Position based on the current orientation
-    switch (this.currentOrientation) {
-      case PlaneOrientation.VERTICAL_ABOVE:
-        this.intersectionPlane.position.y = 0.8 - position;
-        break;
-      case PlaneOrientation.VERTICAL_BELOW:
-        this.intersectionPlane.position.y = 0.8 + position;
-        break;
-      case PlaneOrientation.HORIZONTAL_FRONT:
-        this.intersectionPlane.position.z = position;
-        break;
-      case PlaneOrientation.HORIZONTAL_BEHIND:
-        this.intersectionPlane.position.z = -position;
-        break;
-      case PlaneOrientation.HORIZONTAL_RIGHT:
-        this.intersectionPlane.position.x = position;
-        break;
-      case PlaneOrientation.HORIZONTAL_LEFT:
-        this.intersectionPlane.position.x = -position;
-        break;
-    }
-  }
-
-  /**
-   * Updates the plane material color
-   */
-  private updatePlaneMaterial(color: number): void {
-    this.intersectionPlane.material = new THREE.MeshBasicMaterial({
-      color: color,
-      transparent: true,
-      opacity: 0.05,
-      side: THREE.DoubleSide
-    });
-  }
-
-  /**
-   * Gets the intersection plane
-   */
-  public getIntersectionPlane(): THREE.Mesh {
-    return this.intersectionPlane;
-  }
-
-  /**
-   * Gets the current plane position
-   */
-  public getPlanePosition(): number {
-    return this.planePosition;
-  }
-
-  public getMaxOffset(): number {
-    switch (this.currentOrientation) {
-      case PlaneOrientation.VERTICAL_ABOVE:
-      case PlaneOrientation.VERTICAL_BELOW:
-        return 16;
-      case PlaneOrientation.HORIZONTAL_FRONT:
-      case PlaneOrientation.HORIZONTAL_BEHIND:
-        return 8;
-      case PlaneOrientation.HORIZONTAL_RIGHT:
-      case PlaneOrientation.HORIZONTAL_LEFT:
-        return 8;
-    }
-  }
-
-  public getMinOffset(): number {
-    return this.getMaxOffset() * -1;
-  }
-
-  /**
-   * Gets the current plane orientation
-   */
-  public getCurrentOrientation(): PlaneOrientation {
-    return this.currentOrientation;
-  }
-
-  /**
-   * Sets the plane orientation manually
-   */
-  public setPlaneOrientation(orientation: PlaneOrientation): void {
-    this.currentOrientation = orientation;
-    this.updateIntersectionPlaneOrientation();
-    this.updatePlanePosition(this.planePosition);
-  }
-
-  private updateIntersectionPlaneOrientation() {
-    switch (this.currentOrientation) {
-      case PlaneOrientation.VERTICAL_ABOVE:
-        this.intersectionPlane.rotation.x = -Math.PI / 2;
-        this.intersectionPlane.rotation.y = 0;
-        this.updatePlaneMaterial(0xAA0000);
-        break;
-      case PlaneOrientation.VERTICAL_BELOW:
-        this.intersectionPlane.rotation.x = Math.PI / 2;
-        this.intersectionPlane.rotation.y = 0;
-        this.updatePlaneMaterial(0xAA0000);
-        break;
-      case PlaneOrientation.HORIZONTAL_FRONT:
-        this.intersectionPlane.rotation.x = 0;
-        this.intersectionPlane.rotation.y = 0;
-        this.updatePlaneMaterial(0x00AA00);
-        break;
-      case PlaneOrientation.HORIZONTAL_BEHIND:
-        this.intersectionPlane.rotation.x = 0;
-        this.intersectionPlane.rotation.y = Math.PI;
-        this.updatePlaneMaterial(0x00AA00);
-        break;
-      case PlaneOrientation.HORIZONTAL_RIGHT:
-        this.intersectionPlane.rotation.x = 0;
-        this.intersectionPlane.rotation.y = Math.PI / 2;
-        this.updatePlaneMaterial(0x0000AA);
-        break;
-      case PlaneOrientation.HORIZONTAL_LEFT:
-        this.intersectionPlane.rotation.x = 0;
-        this.intersectionPlane.rotation.y = -Math.PI / 2;
-        this.updatePlaneMaterial(0x0000AA);
-        break;
-    }
-  }
-
-  /**
-   * Gets whether the plane orientation is locked
-   */
-  public isPlaneLocked(): boolean {
-    return this.planeLocked;
-  }
-
-  /**
-   * Sets whether the plane orientation is locked
-   */
-  public setPlaneLocked(locked: boolean): void {
-    this.planeLocked = locked;
-  }
-}

frontend/src/app/particles/services/particle-manager.service.ts

@@ -1,185 +0,0 @@
-import { Injectable } from '@angular/core';
-import * as THREE from 'three';
-import { RendererService } from './renderer.service';
-import { ParticleData, ParticleInfo, ParticleType } from '../models/particle.model';
-
-/**
- * Service responsible for managing particles in the scene
- */
-@Injectable({
-  providedIn: 'root'
-})
-export class ParticleManagerService {
-  private particles: THREE.Mesh[] = [];
-  private particleData: ParticleData = {
-    particle_name: '',
-    display_name: '',
-    particle_type: ParticleType.REDSTONE,
-    lore: '',
-    display_item: 'REDSTONE',
-    permission: '',
-    package_permission: '',
-    frame_delay: 1,
-    repeat: 1,
-    repeat_delay: 0,
-    random_offset: 0,
-    stationary: true,
-    frames: {
-      'frame1': []
-    }
-  };
-  private currentFrame: string = 'frame1';
-  private frames: string[] = ['frame1'];
-  private selectedColor: string = '#ff0000';
-
-  constructor(private rendererService: RendererService) {}
-
-  /**
-   * Adds a particle at the specified position
-   */
-  addParticle(x: number, y: number, z: number): void {
-    // Create a visual representation of the particle
-    const particleGeometry = new THREE.SphereGeometry(0.03, 16, 16);
-    const particleMaterial = new THREE.MeshBasicMaterial({color: this.selectedColor});
-    const particleMesh = new THREE.Mesh(particleGeometry, particleMaterial);
-
-    particleMesh.position.set(x, y, z);
-    this.rendererService.scene.add(particleMesh);
-    this.particles.push(particleMesh);
-
-    // Add to particle data
-    const hexColor = this.selectedColor.replace('#', '');
-    const r = parseInt(hexColor.substring(0, 2), 16) / 255;
-    const g = parseInt(hexColor.substring(2, 4), 16) / 255;
-    const b = parseInt(hexColor.substring(4, 6), 16) / 255;
-
-    const particleInfo: ParticleInfo = {
-      particle_type: ParticleType.REDSTONE,
-      x: x,
-      y: y,
-      z: z,
-      color: `${r},${g},${b}`,
-      extra: 1
-    };
-
-    if (!this.particleData.frames[this.currentFrame]) {
-      this.particleData.frames[this.currentFrame] = [];
-    }
-
-    this.particleData.frames[this.currentFrame].push(particleInfo);
-  }
-
-  /**
-   * Clears all particle visuals from the scene
-   */
-  clearParticleVisuals(): void {
-    for (const particle of this.particles) {
-      this.rendererService.scene.remove(particle);
-    }
-    this.particles = [];
-  }
-
-  /**
-   * Renders particles for a specific frame
-   */
-  renderFrameParticles(frameId: string): void {
-    if (!this.particleData.frames[frameId]) return;
-
-    for (const particleInfo of this.particleData.frames[frameId]) {
-      const particleGeometry = new THREE.SphereGeometry(0.03, 16, 16);
-
-      // Parse color
-      const colorParts = particleInfo.color.split(',');
-      const color = new THREE.Color(
-        parseFloat(colorParts[0]),
-        parseFloat(colorParts[1]),
-        parseFloat(colorParts[2])
-      );
-
-      const particleMaterial = new THREE.MeshBasicMaterial({color});
-      const particleMesh = new THREE.Mesh(particleGeometry, particleMaterial);
-
-      particleMesh.position.set(particleInfo.x, particleInfo.y, particleInfo.z);
-      this.rendererService.scene.add(particleMesh);
-      this.particles.push(particleMesh);
-    }
-  }
-
-  /**
-   * Removes a particle from a specific frame
-   */
-  removeParticle(frameId: string, index: number): void {
-    if (this.particleData.frames[frameId] && this.particleData.frames[frameId].length > index) {
-      this.particleData.frames[frameId].splice(index, 1);
-
-      // Update visuals if this is the current frame
-      if (frameId === this.currentFrame) {
-        this.clearParticleVisuals();
-        this.renderFrameParticles(frameId);
-      }
-    }
-  }
-
-  /**
-   * Sets the selected color for new particles
-   */
-  setSelectedColor(color: string): void {
-    this.selectedColor = color;
-  }
-
-  /**
-   * Gets the selected color
-   */
-  getSelectedColor(): string {
-    return this.selectedColor;
-  }
-
-  /**
-   * Gets the particle data
-   */
-  getParticleData(): ParticleData {
-    return this.particleData;
-  }
-
-  /**
-   * Sets the particle data
-   */
-  setParticleData(data: ParticleData): void {
-    this.particleData = data;
-  }
-
-  /**
-   * Gets the current frame
-   */
-  getCurrentFrame(): string {
-    return this.currentFrame;
-  }
-
-  /**
-   * Sets the current frame
-   */
-  setCurrentFrame(frameId: string): void {
-    this.currentFrame = frameId;
-  }
-
-  /**
-   * Gets all frames
-   */
-  getFrames(): string[] {
-    return this.frames;
-  }
-
-  /**
-   * Sets all frames
-   */
-  setFrames(frames: string[]): void {
-    this.frames = frames;
-  }
-
-  /**
-   * Generates JSON output of the particle data
-   */
-  generateJson(): string {
-    return JSON.stringify(this.particleData, null, 2);
-  }
-}

frontend/src/app/particles/services/player-model.service.ts

@@ -1,254 +0,0 @@
-import {Injectable} from '@angular/core';
-import * as THREE from 'three';
-import {RendererService} from './renderer.service';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class PlayerModelService {
-  private playerModel!: THREE.Group;
-  private skinTexture!: THREE.Texture;
-  private textureLoaded = false;
-
-  constructor(private rendererService: RendererService) {
-  }
-
-  /**
-   * Loads a Minecraft skin texture from a URL
-   * @param textureUrl The URL of the skin texture to load
-   * @returns A promise that resolves when the texture is loaded
-   */
-  loadSkinTexture(textureUrl: string): Promise<void> {
-    return new Promise((resolve) => {
-      const loader = new THREE.TextureLoader();
-      loader.load(textureUrl, (texture) => {
-        // Set texture parameters
-        texture.magFilter = THREE.NearestFilter;
-        texture.minFilter = THREE.NearestFilter;
-        this.skinTexture = texture;
-        this.textureLoaded = true;
-
-        // If the player model already exists, rebuild it with textures
-        if (this.playerModel) {
-          // Remove old model
-          this.rendererService.scene.remove(this.playerModel);
-          // Create new model with textures
-          this.createPlayerModel();
-        }
-
-        resolve();
-      });
-    });
-  }
-
-  /**
-   * Creates a player model with Minecraft-style textures and adds it to the scene
-   */
-  createPlayerModel(): THREE.Group {
-    this.playerModel = new THREE.Group();
-
-    if (this.textureLoaded) {
-      // Create textured model if texture is loaded
-      this.createTexturedPlayerModel();
-    } else {
-      // Create simple colored model if no texture is loaded
-      this.createSimplePlayerModel();
-    }
-
-    this.playerModel.renderOrder = 0;
-    this.rendererService.scene.add(this.playerModel);
-    return this.playerModel;
-  }
-
-  /**
-   * Creates a simple colored player model (without textures)
-   */
-  private createSimplePlayerModel(): void {
-    // Head
-    const headGeometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
-    const headMaterial = new THREE.MeshLambertMaterial({color: 0xffccaa});
-    const head = new THREE.Mesh(headGeometry, headMaterial);
-    head.position.y = 1.35;
-    this.playerModel.add(head);
-
-    // Body
-    const bodyGeometry = new THREE.BoxGeometry(0.5, 0.7, 0.25);
-    const bodyMaterial = new THREE.MeshLambertMaterial({color: 0x0000ff});
-    const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
-    body.position.y = 0.75;
-    this.playerModel.add(body);
-
-    // Arms
-    const armGeometry = new THREE.BoxGeometry(0.2, 0.7, 0.25);
-    const armMaterial = new THREE.MeshLambertMaterial({color: 0xffccaa});
-
-    const leftArm = new THREE.Mesh(armGeometry, armMaterial);
-    leftArm.position.set(-0.35, 0.75, 0);
-    this.playerModel.add(leftArm);
-
-    const rightArm = new THREE.Mesh(armGeometry, armMaterial);
-    rightArm.position.set(0.35, 0.75, 0);
-    this.playerModel.add(rightArm);
-
-    // Legs
-    const legGeometry = new THREE.BoxGeometry(0.25, 0.7, 0.25);
-    const legMaterial = new THREE.MeshLambertMaterial({color: 0x000000});
-
-    const leftLeg = new THREE.Mesh(legGeometry, legMaterial);
-    leftLeg.position.set(-0.125, 0.15, 0);
-    this.playerModel.add(leftLeg);
-
-    const rightLeg = new THREE.Mesh(legGeometry, legMaterial);
-    rightLeg.position.set(0.125, 0.15, 0);
-    this.playerModel.add(rightLeg);
-  }
-
-  /**
-   * Creates a textured player model using the Minecraft skin
-   */
-  private createTexturedPlayerModel(): void {
-    // Create the player with properly mapped textures
-
-    // Head - 8x8x8 pixels in the texture
-    this.playerModel.add(this.createBoxWithUvMapping(
-      0.5, 0.5, 0.5, // width, height, depth
-      [
-        {x: 8, y: 0, w: 8, h: 8},   // top
-        {x: 16, y: 0, w: 8, h: 8},  // bottom
-        {x: 16, y: 8, w: 8, h: 8},  // right
-        {x: 0, y: 8, w: 8, h: 8},   // left
-        {x: 8, y: 8, w: 8, h: 8},   // front
-        {x: 24, y: 8, w: 8, h: 8}   // back
-      ],
-      {x: 0, y: 1.35, z: 0}         // position
-    ));
-
-    // Body - 8x12x4 pixels in the texture
-    this.playerModel.add(this.createBoxWithUvMapping(
-      0.5, 0.7, 0.25, // width, height, depth
-      [
-        {x: 20, y: 16, w: 8, h: 4},  // top
-        {x: 28, y: 16, w: 8, h: 4},  // bottom
-        {x: 28, y: 20, w: 4, h: 12}, // right
-        {x: 16, y: 20, w: 4, h: 12}, // left
-        {x: 20, y: 20, w: 8, h: 12}, // front
-        {x: 32, y: 20, w: 8, h: 12}  // back
-      ],
-      {x: 0, y: 0.75, z: 0}          // position
-    ));
-
-    // Left Arm - 4x12x4 pixels in the texture
-    this.playerModel.add(this.createBoxWithUvMapping(
-      0.2, 0.7, 0.25, // width, height, depth
-      [
-        {x: 44, y: 16, w: 4, h: 4},  // top
-        {x: 48, y: 16, w: 4, h: 4},  // bottom
-        {x: 48, y: 20, w: 4, h: 12}, // right
-        {x: 40, y: 20, w: 4, h: 12}, // left
-        {x: 44, y: 20, w: 4, h: 12}, // front
-        {x: 52, y: 20, w: 4, h: 12}  // back
-      ],
-      {x: -0.35, y: 0.75, z: 0}      // position
-    ));
-
-    // Right Arm - 4x12x4 pixels in the texture
-    this.playerModel.add(this.createBoxWithUvMapping(
-      0.2, 0.7, 0.25, // width, height, depth
-      [
-        {x: 44, y: 16, w: 4, h: 4},  // top - mirror of left arm
-        {x: 48, y: 16, w: 4, h: 4},  // bottom - mirror of left arm
-        {x: 40, y: 20, w: 4, h: 12}, // right - mirror of left arm's left
-        {x: 48, y: 20, w: 4, h: 12}, // left - mirror of left arm's right
-        {x: 44, y: 20, w: 4, h: 12}, // front - same as left arm
-        {x: 52, y: 20, w: 4, h: 12}  // back - same as left arm
-      ],
-      {x: 0.35, y: 0.75, z: 0}       // position
-    ));
-
-    // Left Leg - 4x12x4 pixels in the texture
-    this.playerModel.add(this.createBoxWithUvMapping(
-      0.26, 0.7, 0.26, // width, height, depth
-      [
-        {x: 4, y: 16, w: 4, h: 4},   // top
-        {x: 8, y: 16, w: 4, h: 4},   // bottom
-        {x: 8, y: 20, w: 4, h: 12},  // right
-        {x: 0, y: 20, w: 4, h: 12},  // left
-        {x: 4, y: 20, w: 4, h: 12},  // front
-        {x: 12, y: 20, w: 4, h: 12}  // back
-      ],
-      {x: -0.125, y: 0.15, z: 0}     // position
-    ));
-
-    // Right Leg - 4x12x4 pixels in the texture
-    this.playerModel.add(this.createBoxWithUvMapping(
-      0.26, 0.7, 0.26, // width, height, depth
-      [
-        {x: 4, y: 16, w: 4, h: 4},   // top - mirror of left leg
-        {x: 8, y: 16, w: 4, h: 4},   // bottom - mirror of left leg
-        {x: 0, y: 20, w: 4, h: 12},  // right - mirror of left leg's left
-        {x: 8, y: 20, w: 4, h: 12},  // left - mirror of left leg's right
-        {x: 4, y: 20, w: 4, h: 12},  // front - same as left leg
-        {x: 12, y: 20, w: 4, h: 12}  // back - same as left leg
-      ],
-      {x: 0.125, y: 0.15, z: 0}      // position
-    ));
-  }
-
-  /**
-   * Creates a box with proper UV mapping for a Minecraft character part
-   * @param width Width of the box
-   * @param height Height of the box
-   * @param depth Depth of the box
-   * @param uvMapping Array of UV coordinates for each face (top, bottom, right, left, front, back)
-   * @param position Position of the box
-   * @returns THREE.Mesh with properly mapped textures
-   */
-  private createBoxWithUvMapping(
-    width: number,
-    height: number,
-    depth: number,
-    uvMapping: Array<{ x: number, y: number, w: number, h: number }>,
-    position: { x: number, y: number, z: number }
-  ): THREE.Mesh {
-    const geometry = new THREE.BoxGeometry(width, height, depth);
-
-    // Remap the custom face order to BoxGeometry face order: px, nx, py, ny, pz, nz
-    const faceOrder = [2, 3, 0, 1, 4, 5]; // right, left, top, bottom, front, back
-    const textureWidth = 64;
-    const textureHeight = 64;
-    const uv = geometry.attributes['uv'];
-
-    for (let i = 0; i < 6; i++) {
-      const face = uvMapping[faceOrder[i]];
-      const x1 = face.x / textureWidth;
-      const y1 = 1 - face.y / textureHeight;
-      const x2 = (face.x + face.w) / textureWidth;
-      const y2 = 1 - (face.y + face.h) / textureHeight;
-
-      let uvs: [number, number][] = [
-        [x1, y1], // top-left
-        [x2, y1], // top-right
-        [x1, y2], // bottom-left
-        [x2, y2]  // bottom-right
-      ];
-
-      const uvOffset = i * 8;
-      for (let j = 0; j < 4; j++) {
-        uv.array[uvOffset + j * 2] = uvs[j][0];
-        uv.array[uvOffset + j * 2 + 1] = uvs[j][1];
-      }
-    }
-
-    uv.needsUpdate = true;
-
-    const material = new THREE.MeshBasicMaterial({
-      map: this.skinTexture,
-      transparent: true,
-    });
-
-    const mesh = new THREE.Mesh(geometry, material);
-    mesh.position.set(position.x, position.y, position.z);
-
-    return mesh;
-  }
-}

frontend/src/app/particles/services/renderer.service.ts

@@ -1,91 +0,0 @@
-import {ElementRef, Injectable} from '@angular/core';
-import * as THREE from 'three';
-import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
-
-/**
- * Service responsible for managing the Three.js rendering environment
- */
-@Injectable({
-  providedIn: 'root'
-})
-export class RendererService {
-  scene!: THREE.Scene;
-  camera!: THREE.PerspectiveCamera;
-  renderer!: THREE.WebGLRenderer;
-  controls!: OrbitControls;
-
-  /**
-   * Initializes the Three.js scene, camera, renderer, and controls
-   */
-  initializeRenderer(container: ElementRef): void {
-    // Create scene
-    this.scene = new THREE.Scene();
-    this.scene.background = new THREE.Color(0xf0f0f0);
-
-    // Get container dimensions
-    const containerWidth = container.nativeElement.clientWidth;
-    const containerHeight = container.nativeElement.clientHeight;
-
-    // Create camera
-    this.camera = new THREE.PerspectiveCamera(75, containerWidth / containerHeight, 0.1, 1000);
-    this.camera.position.set(-1, 2, 3);
-    this.camera.lookAt(0, 1, 0);
-
-    // Create renderer
-    this.renderer = new THREE.WebGLRenderer({antialias: true});
-    this.renderer.setSize(containerWidth, containerHeight);
-
-    // Center the canvas in the container
-    this.renderer.domElement.style.display = 'block';
-    this.renderer.domElement.style.margin = 'auto';
-
-    container.nativeElement.appendChild(this.renderer.domElement);
-
-    // Initialize orbit controls
-    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
-    this.controls.enableDamping = true;
-    this.controls.dampingFactor = 0.05;
-    this.controls.minDistance = 0.5;
-    this.controls.maxDistance = 4;
-    this.controls.target.set(0, 1, 0);
-    this.controls.update();
-
-    // Add lights
-    this.addLights();
-  }
-
-  /**
-   * Adds lighting to the scene
-   */
-  private addLights(): void {
-    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
-    this.scene.add(ambientLight);
-
-    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
-    directionalLight.position.set(1, 1, 1);
-    this.scene.add(directionalLight);
-  }
-
-  /**
-   * Handles window resize events
-   */
-  onWindowResize(container: ElementRef): void {
-    const containerWidth = container.nativeElement.clientWidth;
-    const containerHeight = 400; // Fixed height as defined in CSS
-
-    this.camera.aspect = containerWidth / containerHeight;
-    this.camera.updateProjectionMatrix();
-    this.renderer.setSize(containerWidth, containerHeight);
-  }
-
-  /**
-   * Renders the scene
-   */
-  render(): void {
-    if (this.controls) {
-      this.controls.update();
-    }
-
-    this.renderer.render(this.scene, this.camera);
-  }
-}

frontend/src/styles.scss

@@ -1,5 +1,4 @@
 @import '@angular/material/prebuilt-themes/azure-blue.css';
-@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
 :root {
   --white: #FFFFFF;