From 984bbae7e383d917c4b1be94f7664c1925386d2b Mon Sep 17 00:00:00 2001
From: akastijn <akastijn@alttd.com>
Date: Mon, 19 Jan 2026 23:43:20 +0100
Subject: [PATCH] Fix grid sizing/snap

---
 .../render-container/render-container.component.html |  2 +-
 .../particles/services/intersection-plane.service.ts | 12 ++++++++----
 .../particles/services/particle-manager.service.ts   |  8 ++++++++
 .../pages/particles/services/player-model.service.ts |  1 +
 4 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/pages/particles/components/render-container/render-container.component.html b/frontend/src/app/pages/particles/components/render-container/render-container.component.html
index d90af58..ecf727c 100644
--- a/frontend/src/app/pages/particles/components/render-container/render-container.component.html
+++ b/frontend/src/app/pages/particles/components/render-container/render-container.component.html
@@ -7,7 +7,7 @@
       </mat-form-field>
       <mat-form-field appearance="outline" style="width: 12ch; margin-left: 8px;">
         <mat-label>Grid density</mat-label>
-        <input matInput type="number" [(ngModel)]="gridDensity" min="1" max="64" step="1" placeholder="">
+        <input matInput type="number" [(ngModel)]="gridDensity" min="2" max="64" step="2" placeholder="">
       </mat-form-field>
     </div>
     <div class="button-row">
diff --git a/frontend/src/app/pages/particles/services/intersection-plane.service.ts b/frontend/src/app/pages/particles/services/intersection-plane.service.ts
index c287bbe..8ef90c0 100644
--- a/frontend/src/app/pages/particles/services/intersection-plane.service.ts
+++ b/frontend/src/app/pages/particles/services/intersection-plane.service.ts
@@ -40,6 +40,10 @@ export class IntersectionPlaneService {
   constructor(private rendererService: RendererService) {
   }
 
+  public get stepSize() {
+    return 5
+  }
+
   /**
    * Creates or updates the grid helper attached to the intersection plane
    * without affecting raycasting/placement.
@@ -56,7 +60,7 @@ export class IntersectionPlaneService {
       this.gridHelper = undefined;
     }
 
-    const size = 5;
+    const size = this.stepSize;
     const divisions = Math.max(1, Math.floor(size * this.gridDensity));
 
     this.gridHelper = new THREE.GridHelper(size, divisions, 0x888888, 0xcccccc);
@@ -200,17 +204,17 @@ export class IntersectionPlaneService {
     // Convert from 1/16th block to Three.js units
     const position = (this.planePosition / 16)
 
-    this.intersectionPlane.position.y = 0.8;
+    this.intersectionPlane.position.y = 1;
     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;
+        this.intersectionPlane.position.y = position;
         break;
       case PlaneOrientation.VERTICAL_BELOW:
-        this.intersectionPlane.position.y = 0.8 + position;
+        this.intersectionPlane.position.y = position;
         break;
       case PlaneOrientation.HORIZONTAL_FRONT:
         this.intersectionPlane.position.z = position;
diff --git a/frontend/src/app/pages/particles/services/particle-manager.service.ts b/frontend/src/app/pages/particles/services/particle-manager.service.ts
index 4aead4f..ead536f 100644
--- a/frontend/src/app/pages/particles/services/particle-manager.service.ts
+++ b/frontend/src/app/pages/particles/services/particle-manager.service.ts
@@ -53,6 +53,13 @@ export class ParticleManagerService {
    * Adds a particle at the specified position
    */
   addParticle(x: number, y: number, z: number): void {
+    const planeSize = this.intersectionPlaneService.stepSize;
+    const divisions = Math.max(1, Math.floor(planeSize * this.intersectionPlaneService.getGridDensity()));
+    const gridStepPlane = planeSize / divisions;
+
+    x = Math.round(x / gridStepPlane) * gridStepPlane;
+    y = Math.round(y / gridStepPlane) * gridStepPlane;
+    z = Math.round(z / gridStepPlane) * gridStepPlane;
     // Create a visual representation of the particle
     const particleGeometry = new THREE.SphereGeometry(0.03 * this.selectedSize, 16, 16);
     const particleMaterial = new THREE.MeshBasicMaterial({color: this.selectedColor});
@@ -66,6 +73,7 @@ export class ParticleManagerService {
     const hexColor = this.selectedColor.replace('#', '');
 
     //TODO make this work for more than just type DUST
+
     const particleInfo: ParticleInfo = {
       particle_type: this.selectedParticle,
       x: x,
diff --git a/frontend/src/app/pages/particles/services/player-model.service.ts b/frontend/src/app/pages/particles/services/player-model.service.ts
index 9785fca..0c4e889 100644
--- a/frontend/src/app/pages/particles/services/player-model.service.ts
+++ b/frontend/src/app/pages/particles/services/player-model.service.ts
@@ -56,6 +56,7 @@ export class PlayerModelService {
     }
 
     this.playerModel.renderOrder = 0;
+    this.playerModel.position.y = 0.2;
     this.rendererService.scene.add(this.playerModel);
     return this.playerModel;
   }