Add new particle types and enhance particle attributes handling

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

@@ -1,21 +1,35 @@
 /**
  * Defines the types of particles available in the system
  */
-export enum ParticleType {
+export enum Particle {
-  REDSTONE = 'REDSTONE',
+  DUST = 'DUST',
+  DUST_COLOR_TRANSITION = 'DUST_COLOR_TRANSITION',
+  TINTED_LEAVES = 'TINTED_LEAVES'
   // Other particle types can be added later
 }
 
+export enum ParticleType {
+  HEAD = 'HEAD',
+  TRAIL = 'TRAIL',
+  BREAK_PLACE_BLOCK = 'BREAK_PLACE_BLOCK',
+  DEATH = 'DEATH',
+  KILL = 'KILL',
+  CLICK_BLOCK = 'CLICK_BLOCK',
+  TELEPORT_ARRIVE = 'TELEPORT',
+}
+
 /**
  * Represents a single particle's information
  */
 export interface ParticleInfo {
-  particle_type: string;
+  particle_type: Particle;
   x: number;
   y: number;
   z: number;
-  color: string;
+  extra?: number;
-  extra: number;
+  color?: string;
+  color_gradient_end?: string;
+  size?: number;
 }
 
 /**

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

@@ -1,7 +1,7 @@
 import {Injectable} from '@angular/core';
 import * as THREE from 'three';
 import {RendererService} from './renderer.service';
-import {ParticleData, ParticleInfo, ParticleType} from '../models/particle.model';
+import {Particle, ParticleData, ParticleInfo, ParticleType} from '../models/particle.model';
 
 /**
  * Service responsible for managing particles in the scene
@@ -14,9 +14,9 @@ export class ParticleManagerService {
   private particleData: ParticleData = {
     particle_name: '',
     display_name: '',
-    particle_type: ParticleType.REDSTONE,
+    particle_type: ParticleType.TRAIL,
     lore: '',
-    display_item: 'REDSTONE',
+    display_item: 'DIRT',
     permission: '',
     package_permission: '',
     frame_delay: 1,
@@ -31,6 +31,8 @@ export class ParticleManagerService {
   private currentFrame: string = 'frame1';
   private frames: string[] = ['frame1'];
   private selectedColor: string = '#ff0000';
+  private selectedParticle: Particle = Particle.DUST;
+  private selectedSize: number = 1;
 
   constructor(private rendererService: RendererService) {
   }
@@ -50,17 +52,17 @@ export class ParticleManagerService {
 
     // 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;
 
+    //TODO make this work for more than just type DUST
     const particleInfo: ParticleInfo = {
-      particle_type: ParticleType.REDSTONE,
+      particle_type: this.selectedParticle,
       x: x,
       y: y,
       z: z,
-      color: `${r},${g},${b}`,
+      color: hexColor,
-      extra: 1
+      // color_gradient_end: hexColor2,
+      extra: 1,
+      size: this.selectedSize
     };
 
     if (!this.particleData.frames[this.currentFrame]) {
@@ -89,14 +91,7 @@ export class ParticleManagerService {
     for (const particleInfo of this.particleData.frames[frameId]) {
       const particleGeometry = new THREE.SphereGeometry(0.03, 16, 16);
 
-      // Parse color
+      const color = this.getColor(particleInfo);
-      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);
 
@@ -126,12 +121,7 @@ export class ParticleManagerService {
       return;
     }
     const particleInfo = this.particleData.frames[frameId][index];
-    const colorParts = particleInfo.color.split(',');
+    const color = this.getColor(particleInfo);
-    const color = new THREE.Color(
-      parseFloat(colorParts[0]),
-      parseFloat(colorParts[1]),
-      parseFloat(colorParts[2])
-    );
     const particleMaterial = new THREE.MeshBasicMaterial({color});
     const particleGeometry = new THREE.SphereGeometry(0.03, 16, 16);
     const particleMesh = new THREE.Mesh(particleGeometry, particleMaterial);
@@ -145,6 +135,17 @@ export class ParticleManagerService {
     });
   }
 
+  private getColor(particleInfo: ParticleInfo) {
+    if (particleInfo.color) {
+      const r = parseInt(particleInfo.color.substring(0, 2), 16) / 255;
+      const g = parseInt(particleInfo.color.substring(2, 4), 16) / 255;
+      const b = parseInt(particleInfo.color.substring(4, 6), 16) / 255;
+      return new THREE.Color(r, g, b);
+    } else {
+      return new THREE.Color(255, 0, 0);
+    }
+  }
+
   private animatePulse(mesh: THREE.Mesh, cycles: number, onComplete: () => void): void {
     const duration = 300;
     const maxScale = 0.08 / 0.03;