Bugfix/apply themes (#75)

* fix: applies themes correctly

* chore: removed console.log

* feat: added settings modal workaround

* fix: failing test

src/app/common/modals/settingsmodals/general-settings.modal.ts

@@ -23,10 +23,16 @@ export class GeneralSettingsModal {
       theme: [settingsService.theme],
       language: [settingsService.language],
     });
-    console.log(settingsService.theme);
   }
 
-  onApply() {}
+  onApply() {
+    const theme = this.formGroup.get('theme').value as unknown as
+      | THEMES
+      | 'auto';
+    const language = this.formGroup.get('language')
+      .value as unknown as LANGUAGES;
+    this.settingsService.saveGeneralSettings(theme, language);
+  }
 
   originalOrder = (a: any, b: any): number => {
     return 0;

src/app/common/settings.service.ts

@@ -71,7 +71,7 @@ export class SettingsService implements OnInit {
   private loadGeneralSettings() {
     const savedTheme = window.localStorage.getItem(THEME_KEY) as THEMES;
     if (Object.values(THEMES).includes(savedTheme)) this.saveTheme(savedTheme);
-    this.theme = 'auto';
+    else this.theme = 'auto';
 
     this.language =
       navigator.language == LANGUAGES.German
@@ -80,11 +80,14 @@ export class SettingsService implements OnInit {
   }
 
   private saveTheme(theme: THEMES | 'auto') {
-    if (theme != 'auto') {
-      this.theme = theme;
+    this.theme = theme;
 
+    if (theme != 'auto') {
       this.document.documentElement.setAttribute('light-color-scheme', theme);
       this.document.documentElement.setAttribute('dark-color-scheme', theme);
+    } else {
+      this.document.documentElement.setAttribute('light-color-scheme', 'light');
+      this.document.documentElement.setAttribute('dark-color-scheme', 'dark');
     }
 
     this.window.localStorage.setItem(THEME_KEY, theme);

src/app/gameboard/gameboard-controls/gameboard-controls.component.ts

@@ -1,11 +1,6 @@
 import { DOCUMENT } from '@angular/common';
 import { AfterViewInit, Component, Inject } from '@angular/core';
-import {
-  ExportModal,
-  ResizeModal,
-  SettingsModal,
-  WarningModal,
-} from 'src/app/common/modals';
+import { ExportModal, ResizeModal, WarningModal } from 'src/app/common/modals';
 import { AdditionalWorldData, Coordinates3 } from '../utils';
 import { GameboardController } from '../utils/gameboard.controller';
 
@@ -61,9 +56,7 @@ export class GameboardControlsComponent implements AfterViewInit {
     public controller: GameboardController
   ) {}
 
-  ngAfterViewInit(): void {
-    this.controller.openModal(SettingsModal);
-  }
+  ngAfterViewInit(): void {}
 
   onColorMenu() {
     this.colorStyle = this.colorExpanded

src/app/gameboard/utils/gameboard.controller.ts

@@ -59,7 +59,6 @@ export class GameboardController {
     } catch (error) {
       this.toastr.error(error);
     }
-    console.log(this.model.currentSlabs);
   }
 
   private placeSlab(coo: Coordinates2, color: string) {

src/app/gameboard/utils/world.import.export.ts

@@ -94,7 +94,7 @@ export class WorldImport {
     const errors = validate(world, WorldSchema).errors;
     if (errors.length == 0) return;
 
-    console.log('Encountered errors while parsing world:\n' + errors);
+    console.error('Encountered errors while parsing world:\n' + errors);
     throw new Error(
       'Could not read world file.\nCheck console for additional details'
     );

src/app/titlebar/titlebar.component.html

@@ -1,12 +1,19 @@
 <div class="app-titlebar-logo-area">
-    <input type="image" src="assets/logo_monochrome_white.svg" class="app-titlebar-logo" disabled=True />
+  <input
+    type="image"
+    src="assets/logo_monochrome_white.svg"
+    class="app-titlebar-logo"
+    disabled="True"
+  />
 </div>
 
 <div class="app-titlebar-button-container">
-    <button class="app-titelbar-button">Datei</button>
-    <button class="app-titelbar-button">Bearbeiten</button>
-    <button class="app-titelbar-button">Ausführen</button>
-    <button class="app-titelbar-button">Editor</button>
-    <button class="app-titelbar-button">Welt</button>
-    <button class="app-titelbar-button">Hilfe</button>
+  <button class="app-titelbar-button">Datei</button>
+  <button class="app-titelbar-button" (click)="openSettings()">
+    Bearbeiten
+  </button>
+  <button class="app-titelbar-button">Ausführen</button>
+  <button class="app-titelbar-button">Editor</button>
+  <button class="app-titelbar-button">Welt</button>
+  <button class="app-titelbar-button">Hilfe</button>
 </div>

src/app/titlebar/titlebar.component.spec.ts

@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { GameboardController } from '../gameboard/utils';
 import { TitlebarComponent } from './titlebar.component';
 
 describe('TitlebarComponent', () => {
@@ -8,9 +8,16 @@ describe('TitlebarComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ TitlebarComponent ]
-    })
-    .compileComponents();
+      declarations: [TitlebarComponent],
+      providers: [
+        {
+          provide: GameboardController,
+          useValue: {
+            openModal: () => {},
+          },
+        },
+      ],
+    }).compileComponents();
   });
 
   beforeEach(() => {

src/app/titlebar/titlebar.component.ts

@@ -1,15 +1,16 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { SettingsModal } from '../common/modals';
+import { GameboardController } from '../gameboard/utils';
 
 @Component({
   selector: 'app-titlebar',
   templateUrl: './titlebar.component.html',
-  styleUrls: ['./titlebar.component.scss']
+  styleUrls: ['./titlebar.component.scss'],
 })
-export class TitlebarComponent implements OnInit {
+export class TitlebarComponent {
+  constructor(public controller: GameboardController) {}
 
-  constructor() { }
-
-  ngOnInit(): void {
+  openSettings() {
+    this.controller.openModal(SettingsModal);
   }
-
 }

src/styles.scss

@@ -1,5 +1,6 @@
 @use "themes" as themes;
 @import "~ngx-toastr/toastr";
+@import "~bootstrap/scss/bootstrap";
 
 // Theme loading
 @media (prefers-color-scheme: light) {
@@ -52,4 +53,3 @@ app-root {
 }
 
 /* Importing Bootstrap SCSS file. */
-@import "~bootstrap/scss/bootstrap";