started working on the spellbook

src/app/journal/journal-spellbook/journal-spellbook.component.html

@@ -1,15 +1,21 @@
-<div
-  style="
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-  "
->
-  <img
-    style="height: 100%"
-    src="assets/images/spellbook_coming_soon.jpeg"
-    alt=""
-  />
+<div class="spellbook-container">
+  <h1>Zauberbuch</h1>
+  <hr />
+  <div class="top-row">
+    <div class="class-picker">
+      @for (className of translator.magicClasses; track className) {
+        <div class="class">
+          <div
+            [id]="className"
+            [class]="className + '-icon'"
+            (click)="toggleClassSelection(className)"
+          ></div>
+          <label for="">{{ "classes." + className | translate }}</label>
+        </div>
+      }
+    </div>
+
+    <div class="button-container"></div>
+  </div>
+  <div class="selector-row"></div>
 </div>

src/app/journal/journal-spellbook/journal-spellbook.component.scss

@@ -1,2 +1,160 @@
-//
-@import url("src/responsive.scss");
+// @import url("src/responsive.scss");
+
+.spellbook-container {
+  width: 100%;
+  height: 100%;
+  padding: 2rem;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  background-image: url("/assets/images/bg.jpg");
+  //   position: relative;
+}
+
+.top-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: 2rem;
+  //   border: 1px solid red;
+}
+
+.class-picker {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  width: 80%;
+  height: 6rem;
+  div.class:first-child {
+    margin-right: 2rem;
+  }
+}
+
+.button-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 20%;
+  height: 6rem;
+  //   border: 1px solid green;
+}
+
+.selector-row {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  width: 100%;
+  height: 3rem;
+}
+
+// Classes
+
+@mixin class-icon {
+  width: 70px;
+  height: 70px;
+  background-size: cover;
+  background-position: center center;
+  border-radius: 50%;
+  opacity: 0.5;
+  transition: opacity 0.2s ease-in-out;
+  &:hover {
+    opacity: 0.75;
+  }
+}
+
+.icon-active {
+  opacity: 1 !important;
+  &::after {
+    border: 2px solid #b0826b;
+    content: "";
+    height: 78px;
+    width: 78px;
+    display: block;
+    border-radius: 50%;
+    position: relative;
+    top: -4px;
+    left: -4px;
+  }
+}
+
+.class {
+  width: 100px;
+  height: 100px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.all-icon {
+  @include class-icon;
+  background-image: url("/assets/images/classes/all.png");
+}
+
+.artificer-icon {
+  @include class-icon;
+  background-image: url("/assets/images/classes/artificer.jpg");
+}
+
+.cleric-icon {
+  @include class-icon;
+  background-image: url("/assets/images/classes/cleric.jpg");
+}
+
+.bard-icon {
+  @include class-icon;
+  background-image: url("/assets/images/classes/bard.jpg");
+}
+
+.druid-icon {
+  @include class-icon;
+  background-image: url("/assets/images/classes/druid.jpg");
+}
+
+.paladin-icon {
+  @include class-icon;
+  background-image: url("/assets/images/classes/paladin.jpg");
+}
+
+.ranger-icon {
+  @include class-icon;
+  background-image: url("/assets/images/classes/ranger.jpg");
+}
+
+.sorcerer-icon {
+  @include class-icon;
+  background-image: url("/assets/images/classes/sorcerer.jpg");
+}
+
+.warlock-icon {
+  @include class-icon;
+  background-image: url("/assets/images/classes/warlock.jpg");
+}
+
+.wizard-icon {
+  @include class-icon;
+  background-image: url("/assets/images/classes/wizard.jpg");
+}
+
+// Buttons
+
+.manage-spells {
+  position: absolute;
+  right: 2rem;
+  top: 1rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 10px;
+  padding: 0.5rem 1rem;
+  box-shadow: var(--shadow);
+  background: var(--edit);
+  &:hover {
+    background: var(--edit-hover);
+  }
+}

src/app/journal/journal-spellbook/journal-spellbook.component.ts

@@ -1,8 +1,132 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
+import { TranslatorService } from 'src/services/translator/translator.service';
 
 @Component({
   selector: 'app-journal-spellbook',
   templateUrl: './journal-spellbook.component.html',
   styleUrls: ['./journal-spellbook.component.scss'],
 })
-export class JournalSpellbookComponent {}
+export class JournalSpellbookComponent {
+  public filterArtificer = false;
+  public filterBard = false;
+  public filterCleric = false;
+  private filterDruid = false;
+  private filterPaladin = false;
+  private filterRanger = false;
+  private filterSorcerer = false;
+  private filterWarlock = false;
+  private filterWizard = false;
+
+  public translator = inject(TranslatorService);
+
+  // public classNames = [
+  //   'artificer',
+  //   'bard',
+  //   'cleric',
+  //   'druid',
+  //   'paladin',
+  //   'ranger',
+  //   'sorcerer',
+  //   'warlock',
+  //   'wizard',
+  // ];
+
+  /**
+   * Toggles the selection of a given class icon. It also updates the filtered spells.
+   * @param className The provided class which icon will be toggled.
+   */
+  public toggleClassSelection(className: string) {
+    const element = document.getElementById(className);
+    element!.classList.toggle('icon-active');
+    this.toggleClassFilter(className);
+    this.refreshFilteredSpells();
+  }
+
+  private refreshFilteredSpells() {
+    console.log('Refresh filtered spells');
+    console.log('Artificer: ' + this.filterArtificer);
+
+    // console.log('Bard: ' + this.filterBard);
+    console.log('Cleric: ' + this.filterCleric);
+    // console.log('Druid: ' + this.filterDruid);
+  }
+
+  // Utils
+
+  /**
+   * Toggles if a given class is used to filter the spells.
+   * @param className The class which icon will be toggled.
+   */
+  private toggleClassFilter(className: string) {
+    const isActive: boolean = this.getClassFilter(className);
+    this.setClassFilter(className, !isActive);
+  }
+
+  /**
+   * Allows to access the corresponding varibale to a classname
+   * @param className The class which varibale is looked for.
+   * @returns Returns the given class filter variable.
+   */
+  private getClassFilter(className: string): boolean {
+    switch (className) {
+      case 'artificer':
+        return this.filterArtificer;
+      case 'bard':
+        return this.filterBard;
+      case 'cleric':
+        return this.filterCleric;
+      case 'druid':
+        return this.filterDruid;
+      case 'paladin':
+        return this.filterPaladin;
+      case 'ranger':
+        return this.filterRanger;
+      case 'sorcerer':
+        return this.filterSorcerer;
+      case 'warlock':
+        return this.filterWarlock;
+      case 'wizard':
+        return this.filterWizard;
+      default:
+        return false;
+    }
+  }
+
+  /**
+   * Sets a value to the corresponding variable to a classname.
+   * Active classes will be used to filter the spells.
+   * @param className The class which variable is looked for.
+   * @param value The value to be set.
+   */
+  private setClassFilter(className: string, value: boolean) {
+    switch (className) {
+      case 'artificer':
+        this.filterArtificer = value;
+        break;
+      case 'bard':
+        this.filterBard = value;
+        break;
+      case 'cleric':
+        this.filterCleric = value;
+        break;
+      case 'druid':
+        this.filterDruid = value;
+        break;
+      case 'paladin':
+        this.filterPaladin = value;
+        break;
+      case 'ranger':
+        this.filterRanger = value;
+        break;
+      case 'sorcerer':
+        this.filterSorcerer = value;
+        break;
+      case 'warlock':
+        this.filterWarlock = value;
+        break;
+      case 'wizard':
+        this.filterWizard = value;
+        break;
+    }
+  }
+}

src/assets/i18n/de.json

@@ -183,6 +183,7 @@
     "yuanTi": "Yuan-Ti"
   },
   "classes": {
+    "artificer": "Magieschmied",
     "barbarian": "Barbar",
     "bard": "Barde",
     "cleric": "Kleriker",

src/assets/i18n/en.json

@@ -180,6 +180,7 @@
     "yuanTi": "Yuan-Ti"
   },
   "classes": {
+    "artificer": "Artificer",
     "barbarian": "Barbarian",
     "bard": "Bard",
     "cleric": "Cleric",

src/assets/images/classes/all.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.83 43.12"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Artboard 11</title><path class="cls-1" d="M31.55,33.15c-2.56-3.95-.19-6.42-.49-8.72a11.28,11.28,0,0,0-1.68-3.65h0c-1.3-2.1-2.93-4.21-3.26-4.73-1-1.5-.69-2.47-1.58-2.87s-1.94,2.06-1.86,3.26c.12,2,1.69,4.21,2,4.75a3.35,3.35,0,0,1-.2,2.53c-.43,1.21-1.61,1-3.11.36a25,25,0,0,1-6-4.92c-1.56-1.75-4-6.8-4.36-7.7S9.24,9,8.58,11.63c-.7,2.82,1.77,7.24,3.32,9.15s1.21,2.87.82,3.27-2.53-.77-3.84-1.85S5.76,18,5.12,16.86a5.27,5.27,0,0,0-2.41-2l-.22,0h0a1.38,1.38,0,0,0-.36.06H2a1.17,1.17,0,0,0-.36.2l0,0h0a1.07,1.07,0,0,0-.3,1.1,55.91,55.91,0,0,0,3.41,7.69c.35.41,4.71,3.58,4.72,3.91s.19.13-1.22-.66a22.31,22.31,0,0,1-4.8-3.87A13.17,13.17,0,0,0,1.8,21c-.33-.24-1.07-.71-1.62,0s.38,2.53.88,3.2A35.75,35.75,0,0,0,3.66,28a50.44,50.44,0,0,0,5.23,3.66c.49.26,1.38.5,1.27.92s-2.3-1-3-1.24a28.27,28.27,0,0,1-3.23-2.45c-.4-.27-1.06.06-1.42.38s.14,1.12,1.54,2.86,8.62,5,9.76,5.5,5.82,3.79,8.5,5.34S33.45,36.08,31.55,33.15Z"/><path class="cls-1" d="M2.88,13.85a8.17,8.17,0,0,1,.39-2.73,11.37,11.37,0,0,0,1.87,2.94L6.58,15.4l-.37-1.94c0-.06-1-5.44,2.15-8.57-.18,1.24-.18,2.8.68,3.69l.19.19H9.5A6,6,0,0,0,14.06,6.7,5.73,5.73,0,0,0,14.78,2a4.61,4.61,0,0,1,1.88,1.85c.74,1.39.68,3.22-.16,5.44a3.56,3.56,0,0,0,.27,3.61,2.13,2.13,0,0,0,2,.76A2.3,2.3,0,0,0,20.53,12a7.18,7.18,0,0,0,.21-1.68,9.14,9.14,0,0,1,1.13-4.63,5.79,5.79,0,0,0,.79,5l.88,1.06.26-1.36a4.25,4.25,0,0,1,.87-1.77A10.29,10.29,0,0,0,27.56,15a7.27,7.27,0,0,1,1.74,3.85c.51.75,1,1.49,1.38,2.18a9.24,9.24,0,0,0-2.16-6.91C25.41,10.69,26,7.63,26,7.5l.26-1.22-1.15.48a4.25,4.25,0,0,0-2.05,2,8.06,8.06,0,0,1,.71-4.61l.76-1.56-1.6.68c-3.16,1.34-3.37,4.9-3.5,7a7.3,7.3,0,0,1-.14,1.34,1,1,0,0,1-.73.76.84.84,0,0,1-.79-.32,2.35,2.35,0,0,1-.05-2.31c1-2.59,1-4.78.08-6.52A6.28,6.28,0,0,0,14,.26L12.86,0l.35,1.09c.68,2.12.62,3.75-.18,4.83a4.52,4.52,0,0,1-3.2,1.53c-.5-.89-.17-2.85.18-4l.51-1.61-1.46.85c-3.56,2.08-4.27,5.9-4.31,8.44-.39-.75-.73-1.51-.9-1.91L3.31,8,2.67,9.2A9.47,9.47,0,0,0,1.56,14a2.34,2.34,0,0,1,.91-.19A1.92,1.92,0,0,1,2.88,13.85Z"/></svg>

src/services/translator/translator.service.ts

@@ -120,6 +120,19 @@ export class TranslatorService {
     'test',
   ];
 
+  public magicClasses: string[] = [
+    'all',
+    'artificer',
+    'bard',
+    'cleric',
+    'druid',
+    'paladin',
+    'ranger',
+    'sorcerer',
+    'warlock',
+    'wizard',
+  ];
+
   public genders: string[] = ['male', 'female', 'diverse'];
 
   public schools: string[] = [