update: Sat 06 Apr 2024 20:27:59 CEST

src/app/home/home.component.html

@@ -3,10 +3,12 @@
   alt="home"
   class="smallLogo backgroundBox"
   (click)="getObjectService().setSelectedObject(null)"
+  *ngIf="getSettingsService().isLogoVisible()"
 />
 <i
   class="bi bi-gear settings-button backgroundBox"
   (click)="goToSettings()"
+  *ngIf="getSettingsService().isSettingsVisible()"
 ></i>
 <app-coordinate-system></app-coordinate-system>
 <app-object

src/app/play-bar/play-bar.component.html

@@ -1,31 +1,27 @@
 <div class="bg glass" cdkDrag>
   <div class="container" *ngIf="isVisible">
     <app-my-icon
-      [name]="'x' + getZoomFactor().toFixed(2)"
-      [textIcon]="true"
-      [size]="16"
-      (click)="resetZoom()"
-      description="Reset zoom"
+      name="bi bi-gear"
+      (click)="goToSettings()"
+      description="Go to settings"
     ></app-my-icon>
     <app-my-icon
       name="bi bi-zoom-in"
-      description="This is a test"
       (click)="zoomIn()"
       (dblclick)="zoomIn(true)"
       description="Zoom in"
     ></app-my-icon>
   </div>
   <div class="container" *ngIf="isVisible">
     <app-my-icon
-      name="bi bi-zoom-in"
-      description="This is a test"
-      (click)="zoomIn()"
-      (dblclick)="zoomIn(true)"
-      description="Zoom in"
+      [name]="'x' + getZoomFactor().toFixed(2)"
+      [textIcon]="true"
+      [size]="16"
+      (click)="resetZoom()"
+      description="Reset zoom"
     ></app-my-icon>
     <app-my-icon
       name="bi bi-zoom-out"
-      description="This is a test"
       (click)="zoomOut()"
       (dblclick)="zoomOut(true)"
       description="Zoom out"

src/app/play-bar/play-bar.component.ts

@@ -5,6 +5,7 @@ import { CdkDrag } from '@angular/cdk/drag-drop';
 import { NgIf } from '@angular/common';
 import { MyIconComponent } from '../my-icon/my-icon.component';
 import { ScaleService } from '../service/scale.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-play-bar',
@@ -19,7 +20,8 @@ export class PlayBarComponent {
 
   constructor(
     private moveService: MoveService,
-    private objectService: ObjectService
+    private objectService: ObjectService,
+    private router: Router
   ) {}
 
   nextStep() {
@@ -124,4 +126,8 @@ export class PlayBarComponent {
   getZoomFactor() {
     return ScaleService.currentScale;
   }
+
+  goToSettings() {
+    this.router.navigate(['settings']);
+  }
 }

src/app/service/settings.service.ts

@@ -11,6 +11,8 @@ export class SettingsService {
   private static gridSize = 50;
   private static showObjectNames = true;
   private static showVelocityArrow = true;
+  private static showLogo = true;
+  private static showSettings = true;
 
   static init() {
     if (this.isInit) {
@@ -21,6 +23,8 @@ export class SettingsService {
       this.gridSize = settings.gridSize;
       this.showObjectNames = settings.showObjectNames;
       this.showVelocityArrow = settings.showVelocityArrow;
+      this.showLogo = settings.showLogo;
+      this.showSettings = settings.showSettings;
     }
     this.isInit = true;
   }
@@ -31,6 +35,8 @@ export class SettingsService {
       gridSize: this.gridSize,
       showObjectNames: this.showObjectNames,
       showVelocityArrow: this.showVelocityArrow,
+      showLogo: this.showLogo,
+      showSettings: this.showSettings,
     });
   }
 
@@ -61,6 +67,28 @@ export class SettingsService {
     this.saveSettings();
   }
 
+  static isLogoVisible(): boolean {
+    this.init();
+    return this.showLogo;
+  }
+
+  static toggleLogoVisibility(): void {
+    this.init();
+    this.showLogo = !this.showLogo;
+    this.saveSettings();
+  }
+
+  static isSettingsVisible(): boolean {
+    this.init();
+    return this.showSettings;
+  }
+
+  static toggleSettingsVisibility(): void {
+    this.init();
+    this.showSettings = !this.showSettings;
+    this.saveSettings();
+  }
+
   static toggleGridSize(): void {
     this.init();
 

src/app/settings/settings/settings.component.html

@@ -43,6 +43,31 @@ <h2>View</h2>
       }}
     </button>
   </div>
+  <div class="row">
+    <p class="label">Logo</p>
+    <button class="actionButton" (click)="getSettings().toggleLogoVisibility()">
+      {{ getSettings().isLogoVisible() ? "ON" : "OFF" }}
+    </button>
+  </div>
+  <div class="row">
+    <p class="label">Settings Icon</p>
+    <button
+      class="actionButton"
+      (click)="getSettings().toggleSettingsVisibility()"
+    >
+      {{ getSettings().isSettingsVisible() ? "ON" : "OFF" }}
+    </button>
+  </div>
+  <h2>Behavior</h2>
+  <div class="row">
+    <p class="label">Collision Mode</p>
+    <button
+      class="actionButton"
+      (click)="getSettings().toggleSettingsVisibility()"
+    >
+      {{ getSettings().isSettingsVisible() ? "ON" : "OFF" }}
+    </button>
+  </div>
   <h2>Examples</h2>
   <div class="row">
     <p class="label">Earth & Moon</p>