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,101 +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.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/particles.component.html

@@ -14,7 +14,8 @@
             <app-particle-properties></app-particle-properties>
           </div>
           <div class="flex middle-column">
-            <app-render-container></app-render-container>
+            <div #rendererContainer class="renderer-container">
+            </div>
             <div class="plane-controls">
               <label>Plane Position (Z-axis):</label>
               <mat-slider [min]="minOffset" [max]="maxOffset" step="1" #planeSlider>

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

@@ -4,6 +4,17 @@
   display: flex;
 }
 
+.renderer-container {
+  height: 1000px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  overflow: hidden;
+  background-color: #f0f0f0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .side-column {
   flex: 1;
   flex-direction: column;

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

@@ -1,4 +1,4 @@
-import {Component, ElementRef, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
@@ -13,15 +13,17 @@ import {MatIconModule} from '@angular/material/icon';
 import {HeaderComponent} from '../header/header.component';
 
 // Services
+import {RendererService} from './services/renderer.service';
+import {PlayerModelService} from './services/player-model.service';
 import {IntersectionPlaneService} from './services/intersection-plane.service';
 import {ParticleManagerService} from './services/particle-manager.service';
+import {InputHandlerService} from './services/input-handler.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',
@@ -43,21 +45,66 @@ import {RenderContainerComponent} from './components/render-container/render-con
     PropertiesComponent,
     ParticleComponent,
     FramesComponent,
-    RenderContainerComponent,
   ],
   templateUrl: './particles.component.html',
   styleUrl: './particles.component.scss'
 })
-export class ParticlesComponent {
+export class ParticlesComponent implements OnInit, AfterViewInit, OnDestroy {
+  @ViewChild('rendererContainer') rendererContainer!: ElementRef;
   @ViewChild('planeSlider') planeSlider!: ElementRef;
 
   constructor(
+    private rendererService: RendererService,
+    private playerModelService: PlayerModelService,
     private intersectionPlaneService: IntersectionPlaneService,
     private particleManagerService: ParticleManagerService,
+    private inputHandlerService: InputHandlerService,
     private matSnackBar: MatSnackBar,
   ) {
   }
 
+  /**
+   * Initialize component
+   */
+  ngOnInit(): void {
+    // No initialization needed here
+  }
+
+  /**
+   * Initialize Three.js scene after view is initialized
+   */
+  ngAfterViewInit(): void {
+    this.initializeScene();
+    this.animate();
+  }
+
+  /**
+   * Clean up resources when component is destroyed
+   */
+  ngOnDestroy(): void {
+    // Clean up event listeners
+    if (this.rendererService.renderer) {
+      this.inputHandlerService.cleanup(this.rendererService.renderer.domElement);
+    }
+  }
+
+  /**
+   * Initialize the 3D scene and all related components
+   */
+  private initializeScene(): void {
+    // Initialize renderer
+    this.rendererService.initializeRenderer(this.rendererContainer);
+
+    // Create player model
+    this.playerModelService.createPlayerModel();
+
+    // Create intersection plane
+    this.intersectionPlaneService.createIntersectionPlane();
+
+    // Initialize input handlers
+    this.inputHandlerService.initializeInputHandlers(this.rendererService.renderer.domElement);
+  }
+
   /**
    * Update plane position based on slider
    */
@@ -86,6 +133,20 @@ export class ParticlesComponent {
     return this.intersectionPlaneService.getMinOffset();
   }
 
+  /**
+   * Animation loop
+   */
+  private animate(): void {
+    requestAnimationFrame(this.animate.bind(this));
+
+    // Update plane orientation based on camera position
+    this.intersectionPlaneService.updatePlaneOrientation(this.rendererService.camera);
+
+    // Render the scene
+    this.rendererService.render();
+  }
+
+
   /**
    * Generate JSON output
    */

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

@@ -5,7 +5,7 @@ import {RendererService} from './renderer.service';
 /**
  * Represents the possible orientations of the intersection plane
  */
-export enum PlaneOrientation {
+enum PlaneOrientation {
   VERTICAL_ABOVE,
   VERTICAL_BELOW,
   HORIZONTAL_FRONT,
@@ -24,7 +24,6 @@ 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) {
   }
@@ -77,6 +76,7 @@ export class IntersectionPlaneService {
       // 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;
 
+      // Return the appropriate orientation based on quadrant
       switch (quadrant) {
         case 0:
           return PlaneOrientation.HORIZONTAL_FRONT;
@@ -98,11 +98,42 @@ export class IntersectionPlaneService {
   public updatePlaneOrientation(camera: THREE.Camera): void {
     if (!this.intersectionPlane) return;
 
-    if (!this.planeLocked) {
+    this.currentOrientation = this.determinePlaneOrientation(camera);
-      this.currentOrientation = this.determinePlaneOrientation(camera);
+
+    // Apply rotation and material based on orientation
+    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;
     }
 
-    this.updateIntersectionPlaneOrientation()
 
     //Restrict plane position to the new bounds and update it
     this.planePosition = Math.max(this.getMinOffset(), Math.min(this.getMaxOffset(), this.planePosition));
@@ -187,69 +218,4 @@ export class IntersectionPlaneService {
   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;
-  }
 }