feat(demo): add randomizer button

apps/demo/src/app/config/config.component.html

@@ -101,6 +101,10 @@
           <mat-icon>content_copy</mat-icon>
           Copy to clipboard
         </button>
+        <i></i>
+        <button mat-mini-fab color="primary" matTooltip="Create random layers" (click)="randomizeLayers()">
+          <mat-icon>auto_mode</mat-icon>
+        </button>
       </div>
     </div>
   </mat-card-content>

apps/demo/src/app/config/config.component.scss

@@ -35,12 +35,20 @@
 }
 
 .others-form {
-  align-items: center;
   border-top: 1px solid lightgrey;
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  grid-gap: 0.5rem;
+  grid-template-columns: 1fr 1fr;
   padding: 1rem 0;
   width: 100%;
+
+  :nth-child(odd){
+    justify-self: start;
+  }
+
+  :nth-child(even){
+    justify-self: end;
+  }
 }
 
 .card {

apps/demo/src/app/config/config.component.ts

@@ -10,15 +10,16 @@ import {
 } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatIconModule } from '@angular/material/icon';
-import { defaultStarLayers } from 'ngx-parallax-stars';
+import { defaultStarLayers, StarLayer } from 'ngx-parallax-stars';
 import { debounceTime, tap } from 'rxjs';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatSelectModule } from '@angular/material/select';
 import { ConfigForm } from './config-form';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { Clipboard } from '@angular/cdk/clipboard';
-import {MatTooltipModule} from "@angular/material/tooltip";
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { LayerRandomizerService } from './layer-randomizer.service';
 
 @Component({
   selector: 'ngx-parallax-stars-config',
@@ -46,7 +47,8 @@ export class ConfigComponent implements OnInit {
 
   constructor(
     private fb: NonNullableFormBuilder,
-    private clipboard: Clipboard
+    private clipboard: Clipboard,
+    private layerRandomizerService: LayerRandomizerService
   ) {
     this.form = this.buildForm();
   }
@@ -56,18 +58,9 @@ export class ConfigComponent implements OnInit {
   }
 
   addLayer(): void {
-    const starLayer = defaultStarLayers[0];
-
-    const layerGroup = this.fb.group({
-      color: [starLayer.color],
-      speed: [starLayer.speed],
-      density: [starLayer.density],
-      size: [starLayer.size],
-      direction: [starLayer.direction],
-      blur: [starLayer.blur],
-      glow: [starLayer.glow],
-      isRound: [starLayer.isRound],
-    });
+    const layer = defaultStarLayers[0];
+
+    const layerGroup = this.createLayerFormGroup(layer);
 
     this.layers.push(layerGroup);
   }
@@ -82,16 +75,7 @@ export class ConfigComponent implements OnInit {
 
   private buildForm(): FormGroup {
     const layerForms = defaultStarLayers.map((layer) =>
-      this.fb.group({
-        color: [layer.color],
-        speed: [layer.speed],
-        density: [layer.density],
-        size: [layer.size],
-        direction: [layer.direction],
-        blur: [layer.blur],
-        glow: [layer.glow],
-        isRound: [layer.isRound],
-      })
+      this.createLayerFormGroup(layer)
     );
 
     return this.fb.group({
@@ -100,6 +84,19 @@ export class ConfigComponent implements OnInit {
     });
   }
 
+  private createLayerFormGroup(layer: StarLayer) {
+    return this.fb.group({
+      color: [layer.color],
+      speed: [layer.speed],
+      density: [layer.density],
+      size: [layer.size],
+      direction: [layer.direction],
+      blur: [layer.blur],
+      glow: [layer.glow],
+      isRound: [layer.isRound],
+    });
+  }
+
   ngOnInit(): void {
     this.registerFormChanges();
   }
@@ -109,6 +106,14 @@ export class ConfigComponent implements OnInit {
     this.clipboard.copy(layers);
   }
 
+  randomizeLayers(): void {
+    const layers = this.layerRandomizerService.generateRandomLayers();
+
+    const layerForms = layers.map((layer) => this.createLayerFormGroup(layer));
+
+    this.form.setControl('layers', this.fb.array(layerForms));
+  }
+
   private registerFormChanges(): void {
     this.form.valueChanges
       .pipe(

apps/demo/src/app/config/layer-randomizer.service.ts

@@ -0,0 +1,42 @@
+import { Injectable } from '@angular/core';
+import { StarLayer } from 'ngx-parallax-stars';
+
+@Injectable({ providedIn: 'root' })
+export class LayerRandomizerService {
+  generateRandomLayers(): StarLayer[] {
+    const layerCount = this.generateRandomInteger(3, 4);
+
+    const layers = [];
+
+    for (let i = 1; i <= layerCount; i++) {
+      layers.push(this.generateRandomLayer());
+    }
+
+    return layers;
+  }
+
+  private generateRandomLayer(): StarLayer {
+    return {
+      color: '#ffffff',
+      blur: this.generateRandomInteger(0, 5),
+      density: this.generateRandomInteger(1, 5),
+      glow: this.generateRandomInteger(0, 5),
+      size: this.generateRandomInteger(1, 6),
+      speed: this.generateRandomInteger(5, 20),
+      isRound: this.getRandomBoolean(),
+      direction: this.getRandomItem(['up', 'down', 'left', 'right']),
+    };
+  }
+
+  private generateRandomInteger(min: number, max: number) {
+    return Math.floor(min + Math.random() * (max - min + 1));
+  }
+
+  private getRandomItem<T>(array: T[]): T {
+    return array[Math.floor(Math.random() * array.length)];
+  }
+
+  private getRandomBoolean(): boolean {
+    return Math.random() < 0.5;
+  }
+}