aboutsummaryrefslogtreecommitdiff
path: root/frontend/src
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src')
-rw-r--r--frontend/src/app/_elements/reactive-background/reactive-background.component.ts52
-rw-r--r--frontend/src/app/_pages/playground/playground.component.html19
-rw-r--r--frontend/src/app/_pages/playground/playground.component.ts18
-rw-r--r--frontend/src/app/app.component.html7
-rw-r--r--frontend/src/app/app.component.ts15
-rw-r--r--frontend/src/app/material.module.ts6
-rw-r--r--frontend/src/styles/helper.css12
7 files changed, 100 insertions, 29 deletions
diff --git a/frontend/src/app/_elements/reactive-background/reactive-background.component.ts b/frontend/src/app/_elements/reactive-background/reactive-background.component.ts
index 73cdb326..4cafbc6d 100644
--- a/frontend/src/app/_elements/reactive-background/reactive-background.component.ts
+++ b/frontend/src/app/_elements/reactive-background/reactive-background.component.ts
@@ -1,4 +1,5 @@
import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { CookieService } from 'ngx-cookie-service';
@Component({
selector: 'app-reactive-background',
@@ -22,6 +23,9 @@ export class ReactiveBackgroundComponent implements AfterViewInit {
@Input() pointColor: string = '#ffffff';
@Input() cursorLineColor: string = '#ff0000';
+ @Input() animate: boolean = true;
+ @Input() fill: number = 1.0;
+
private fleeSpeed = 0.005;
private points: Point[] = [];
@@ -35,7 +39,7 @@ export class ReactiveBackgroundComponent implements AfterViewInit {
private time: number = 0;
- constructor() { }
+ constructor(private cookie: CookieService) { }
private mouseX = 0;
private mouseY = 0;
@@ -77,6 +81,13 @@ export class ReactiveBackgroundComponent implements AfterViewInit {
this.resize();
setInterval(() => {
+ if (this.cookie.check('animateBackground')) {
+ this.animate = this.cookie.get('animateBackground') == 'true';
+ }
+ if (this.cookie.check('backgroundFill')) {
+ this.fill = parseFloat(this.cookie.get('backgroundFill'));
+ }
+
this.drawBackground();
}, 1000 / 60);
}
@@ -85,7 +96,8 @@ export class ReactiveBackgroundComponent implements AfterViewInit {
scrollBackground(e: Event) {
const scrolledAmount = window.scrollY - this.lastScrollY;
- this.points.forEach((point) => {
+ this.points.forEach((point, index) => {
+ if (index > this.numPoints * this.fill) return;
point.y = point.y - (scrolledAmount / this.height) * this.scrollSpeed;
this.keepPointWithinBounds(point);
})
@@ -100,19 +112,21 @@ export class ReactiveBackgroundComponent implements AfterViewInit {
//this.ctx.fillRect(0, 0, this.width, this.height);
this.points.forEach((point, index) => {
- this.updatePoint(point);
+ if (index > this.numPoints * this.fill) return;
+
this.drawLines(point, index);
this.drawPoint(point);
+
+ if (this.animate)
+ this.updatePoint(point);
});
//this.drawPoint(new Point(this.mouseX, this.mouseY, 12, 0));
-
- this.time += 1;
}
drawLines(p: Point, index: number) {
let i = index + 1;
- while (i < this.points.length) {
+ while (i < this.points.length * this.fill) {
const otherPoint = this.points[i];
const dist = this.distance(p.x, p.y, otherPoint.x, otherPoint.y);
@@ -151,24 +165,22 @@ export class ReactiveBackgroundComponent implements AfterViewInit {
}
updatePoint(p: Point) {
- const vx = Math.sin(p.direction);
- const vy = Math.cos(p.direction);
-
- p.x = p.x + vx * this.speed;
- p.y = p.y + vy * this.speed;
-
const mx = this.mouseX;
const my = this.mouseY;
const distToCursor = this.distance(p.x, p.y, mx, my);
+
if (distToCursor < this.cursorDistance) {
- p.x -= ((mx - p.x) / distToCursor) * this.fleeSpeed;
- p.y -= ((my - p.y) / distToCursor) * this.fleeSpeed;
+ const t = (distToCursor / this.cursorDistance);
+ p.x -= ((mx - p.x) / distToCursor) * this.speed * (1 + t * 2);
+ p.y -= ((my - p.y) / distToCursor) * this.speed * (1 + t * 2);
+
+ p.direction = this.lerp(p.direction, Math.atan2(my - p.y, mx - p.x) * 180 / Math.PI, t);
const grd = this.ctx.createLinearGradient(p.x * this.width, p.y * this.height, mx * this.width, my * this.height);
const alpha = HEX[Math.round(p.size / this.maxSize * (HEX.length - 1))];
grd.addColorStop(0, this.cursorLineColor + alpha);
- grd.addColorStop(1, this.cursorLineColor + '00');
+ grd.addColorStop(0.5, this.cursorLineColor + '00');
this.ctx.strokeStyle = grd;
this.ctx.beginPath();
this.ctx.moveTo(p.x * this.width, p.y * this.height);
@@ -176,9 +188,19 @@ export class ReactiveBackgroundComponent implements AfterViewInit {
this.ctx.stroke();
}
+ const vx = Math.sin(p.direction);
+ const vy = Math.cos(p.direction);
+
+ p.x = p.x + vx * this.speed;
+ p.y = p.y + vy * this.speed;
+
this.keepPointWithinBounds(p);
}
+ lerp(start: number, end: number, amt: number) {
+ return (1 - amt) * start + amt * end
+ }
+
keepPointWithinBounds(p: Point) {
p.x = p.x % 1.0;
p.y = p.y % 1.0;
diff --git a/frontend/src/app/_pages/playground/playground.component.html b/frontend/src/app/_pages/playground/playground.component.html
index 5622cd83..d3751d5c 100644
--- a/frontend/src/app/_pages/playground/playground.component.html
+++ b/frontend/src/app/_pages/playground/playground.component.html
@@ -1 +1,18 @@
-<div style="height: 5000px;"> \ No newline at end of file
+<div class="position-fixed d-flex flex-col align-items-center justify-content-center" style="top: 50%; left: 50%; transform: translateX(-50%);">
+ <div class="d-flex flex-row align-items-center justify-content-center mt-5">
+ <h2 class="text-light my-2">
+ Broj tačaka:
+ </h2>
+ <mat-slider class="mx-3" [(ngModel)]="backgroundFill" min="0" max="1" step="0.01" (change)="updateBGPrefs()">
+ </mat-slider>
+
+ </div>
+ <div class="d-flex flex-row align-items-center justify-content-center mt-5">
+ <h2 class="text-light my-2">
+ Animacija: </h2>
+ <mat-slide-toggle class="mx-3" [(ngModel)]="animateBackground" (change)="updateBGPrefs()"></mat-slide-toggle>
+
+ </div>
+</div>
+<div style="height: 5000px;">
+</div> \ No newline at end of file
diff --git a/frontend/src/app/_pages/playground/playground.component.ts b/frontend/src/app/_pages/playground/playground.component.ts
index 007a455e..f8ea8bb4 100644
--- a/frontend/src/app/_pages/playground/playground.component.ts
+++ b/frontend/src/app/_pages/playground/playground.component.ts
@@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';
+import { CookieService } from 'ngx-cookie-service';
@Component({
selector: 'app-playground',
@@ -7,9 +8,24 @@ import { Component, OnInit } from '@angular/core';
})
export class PlaygroundComponent implements OnInit {
- constructor() { }
+ animateBackground = true;
+ backgroundFill = 1.0;
+
+ constructor(private cookie: CookieService) { }
+
+ updateBGPrefs() {
+ this.cookie.set('animateBackground', "" + this.animateBackground);
+ this.cookie.set('backgroundFill', "" + this.backgroundFill);
+ console.log(this.animateBackground, this.backgroundFill);
+ }
ngOnInit(): void {
+ if (this.cookie.check('animateBackground')) {
+ this.animateBackground = this.cookie.get('animateBackground') == 'true';
+ }
+ if (this.cookie.check('backgroundFill')) {
+ this.backgroundFill = parseFloat(this.cookie.get('backgroundFill'));
+ }
}
}
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index ba7743b5..984389c4 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -1,11 +1,12 @@
<app-gradient-background colorHorizontal1="rgba(0, 8, 45, 0.5)" colorHorizontal2="rgba(0, 52, 89, 0.5)" colorVertical1="rgba(0, 52, 89, 0.5)" colorVertical2="rgba(0, 152, 189, 0.5)"></app-gradient-background>
-<app-reactive-background [speed]="0.0005" [scrollSpeed]="0.25" [minDistance]="0.1" [maxSize]="4" [cursorDistance]="0.07" lineColor="#00a8e8" pointColor="rgba(0, 188, 252, 0.33)" cursorLineColor="#00a8e8" [numPoints]="200">
+<app-reactive-background [speed]="0.0005" [scrollSpeed]="0.25" [minDistance]="0.1" [maxSize]="4" [cursorDistance]="0.17" lineColor="#00a8e8" pointColor="rgba(0, 188, 252, 0.33)" cursorLineColor="#00a8e8" [numPoints]="200">
</app-reactive-background>
-<app-reactive-background [speed]="0.0008" [scrollSpeed]="0.5" [minDistance]="0.12" [maxSize]="6" [cursorDistance]="0.09" lineColor="#00a8e8" pointColor="rgba(0, 188, 252, 0.66)" cursorLineColor="#00a8e8" [numPoints]="100">
+<app-reactive-background [speed]="0.0008" [scrollSpeed]="0.5" [minDistance]="0.12" [maxSize]="6" [cursorDistance]="0.19" lineColor="#00a8e8" pointColor="rgba(0, 188, 252, 0.66)" cursorLineColor="#00a8e8" [numPoints]="100">
</app-reactive-background>
-<app-reactive-background [speed]="0.001" [scrollSpeed]="1" [minDistance]="0.14" [maxSize]="8" [cursorDistance]="0.12" lineColor="#00a8e8" pointColor="rgba(0, 188, 252, 1)" cursorLineColor="#00a8e8" [numPoints]="50">
+<app-reactive-background [speed]="0.001" [scrollSpeed]="1" [minDistance]="0.14" [maxSize]="8" [cursorDistance]="0.22" lineColor="#00a8e8" pointColor="rgba(0, 188, 252, 1)" cursorLineColor="#00a8e8" [numPoints]="50">
</app-reactive-background>
<app-navbar></app-navbar>
+<a class="bg-controls" routerLink="playground">pozadina</a>
<div class="container h-100">
<router-outlet></router-outlet>
<!--<app-barchart></app-barchart>
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index 59f247ed..bd9a3b0d 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -6,14 +6,16 @@ import { AuthService } from './_services/auth.service';
import { SignalRService } from './_services/signal-r.service';
import { HttpClient } from '@angular/common/http';
import Shared from './Shared';
+import { CookieService } from 'ngx-cookie-service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
+ constructor(private router: Router, private titleService: Title, private authService: AuthService, private signalRService: SignalRService, private http: HttpClient) {
- constructor(private router: Router, private titleService: Title,private authService:AuthService,private signalRService:SignalRService,private http:HttpClient) { }
+ }
ngOnInit() {
this.router.events
@@ -36,12 +38,11 @@ export class AppComponent implements OnInit {
this.titleService.setTitle(`${title} - Igrannonica`);
}
});
- if(!this.authService.isAuthenticated())
- {
- this.authService.addGuestToken();
- }
- this.signalRService.startConnection();
- //this.startHttpRequest();
+ if (!this.authService.isAuthenticated()) {
+ this.authService.addGuestToken();
+ }
+ this.signalRService.startConnection();
+ //this.startHttpRequest();
diff --git a/frontend/src/app/material.module.ts b/frontend/src/app/material.module.ts
index d16cef3d..4cee3146 100644
--- a/frontend/src/app/material.module.ts
+++ b/frontend/src/app/material.module.ts
@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
import { MatDialogModule } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatInputModule } from '@angular/material/input';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatIconModule } from '@angular/material/icon';
@@ -15,7 +16,8 @@ import { MatIconModule } from '@angular/material/icon';
MatFormFieldModule,
MatInputModule,
MatCheckboxModule,
- MatIconModule
+ MatIconModule,
+ MatSlideToggleModule
]
})
-export class MaterialModule {} \ No newline at end of file
+export class MaterialModule { } \ No newline at end of file
diff --git a/frontend/src/styles/helper.css b/frontend/src/styles/helper.css
index bed289e4..bcd02646 100644
--- a/frontend/src/styles/helper.css
+++ b/frontend/src/styles/helper.css
@@ -12,4 +12,16 @@
animation-duration: 3140ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
+}
+
+.bg-controls {
+ position: fixed;
+ bottom: 10px;
+ right: 10px;
+}
+
+.center-horizontal {
+ margin-top: 50%;
+ margin-left: auto;
+ transform: translateX(-50%);
} \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2025-04-20 04:00:56 +0000