Conditionally adjust size slider to display velocity slider based on supportsColor flag and introduce velocity property in particle management.

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

@@ -27,12 +27,21 @@
           </mat-form-field>
         </div>
 
-        <div class="size-slider">
-          <mat-slider min="0.5" max="4" step="0.1" class="full-width">
-            <input matSliderThumb [(ngModel)]="selectedSize">
-          </mat-slider>
-          <span>Size: {{ selectedSize }}</span>
-        </div>
+        @if (supportsColor) {
+          <div class="size-slider">
+            <mat-slider min="0.5" max="4" step="0.1" class="full-width">
+              <input matSliderThumb [(ngModel)]="selectedSize">
+            </mat-slider>
+            <span>Size: {{ selectedSize }}</span>
+          </div>
+        } @else {
+          <div class="size-slider">
+            <mat-slider min="0" max="4" step="0.1" class="full-width">
+              <input matSliderThumb [(ngModel)]="selectedVelocity">
+            </mat-slider>
+            <span>Velocity: {{ selectedVelocity }}</span>
+          </div>
+        }
       </div>
     </mat-card-content>
   </mat-card>

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

@@ -115,4 +115,18 @@ export class ParticleComponent implements OnInit {
   public set selectedSize(size: number) {
     this.particleManagerService.size = size;
   }
+
+  /**
+   * Get the selected particle size
+   */
+  public get selectedVelocity(): number {
+    return this.particleManagerService.velocity;
+  }
+
+  /**
+   * Set the selected particle size
+   */
+  public set selectedVelocity(velocity: number) {
+    this.particleManagerService.velocity = velocity;
+  }
 }

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

@@ -42,6 +42,7 @@ export class ParticleManagerService {
   private selectedColor: string = '#ff0000';
   private selectedParticle: Particle = Particle.DUST;
   private supports_color: boolean = true;
+  private selectedVelocity: number = 1;
   private selectedSize: number = 1;
 
   private onlyIntersecting: boolean = false;
@@ -91,7 +92,7 @@ export class ParticleManagerService {
       z: z,
       color: hexColor,
       // color_gradient_end: hexColor2,
-      extra: 1,
+      extra: this.selectedVelocity,
       size: this.selectedSize
     };
 
@@ -265,6 +266,14 @@ export class ParticleManagerService {
     this.selectedSize = selectedSize;
   }
 
+  public get velocity(): number {
+    return this.selectedVelocity;
+  }
+
+  public set velocity(velocity: number) {
+    this.selectedVelocity = velocity;
+  }
+
   /**
    * Gets the particle data
    */