2 files changed, 35 insertions, 2 deletions
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'));
+    }
   }
 
 }