From 5cfd0fa72a9ea04452badda6139573c84473e0e7 Mon Sep 17 00:00:00 2001
From: Tim Schneider <43130816+DerStimmler@users.noreply.github.com>
Date: Fri, 28 Jul 2023 00:25:39 +0200
Subject: [PATCH] feat(demo): add randomizer button
---
.../demo/src/app/config/config.component.html | 4 ++
.../demo/src/app/config/config.component.scss | 14 ++++-
apps/demo/src/app/config/config.component.ts | 55 ++++++++++---------
.../app/config/layer-randomizer.service.ts | 42 ++++++++++++++
4 files changed, 87 insertions(+), 28 deletions(-)
create mode 100644 apps/demo/src/app/config/layer-randomizer.service.ts
diff --git a/apps/demo/src/app/config/config.component.html b/apps/demo/src/app/config/config.component.html
index 1a4ff4a..744d877 100644
--- a/apps/demo/src/app/config/config.component.html
+++ b/apps/demo/src/app/config/config.component.html
@@ -101,6 +101,10 @@
content_copy
Copy to clipboard
+
+
diff --git a/apps/demo/src/app/config/config.component.scss b/apps/demo/src/app/config/config.component.scss
index 21b306b..08036e4 100644
--- a/apps/demo/src/app/config/config.component.scss
+++ b/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 {
diff --git a/apps/demo/src/app/config/config.component.ts b/apps/demo/src/app/config/config.component.ts
index 9a614fe..30e3571 100644
--- a/apps/demo/src/app/config/config.component.ts
+++ b/apps/demo/src/app/config/config.component.ts
@@ -10,7 +10,7 @@ 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';
@@ -18,7 +18,8 @@ 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(
diff --git a/apps/demo/src/app/config/layer-randomizer.service.ts b/apps/demo/src/app/config/layer-randomizer.service.ts
new file mode 100644
index 0000000..45b85ea
--- /dev/null
+++ b/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(array: T[]): T {
+ return array[Math.floor(Math.random() * array.length)];
+ }
+
+ private getRandomBoolean(): boolean {
+ return Math.random() < 0.5;
+ }
+}