feat: Abilities and traits are now addable from the species, class and subclass screens.

src/app/journal/journal-character/species/species.component.html

@@ -1,21 +1,50 @@
 <div class="species-container">
   <div class="title">{{ "species." + speciesName | translate }}</div>
 
-  <div [innerHTML]="species.description"></div>
-
-  <div class="abilities">
-    @for (ability of species.abilities; track ability) {
-      <div class="ability">
-        <hr />
-        <div class="ability-name">{{ ability.name }}</div>
-        <div class="ability-level">{{ ability.level }}</div>
-        <icon-button
-          [icon]="'add'"
-          class="feature-button"
-          (click)="addFeature(ability)"
-        ></icon-button>
-        <div [innerHTML]="ability.description"></div>
-      </div>
-    }
-  </div>
+  @for (entry of species.content; let index = $index; track entry) {
+    <div class="entry">
+      @if (index === 0 || showContent[index]) {
+        <div class="title-row">
+          <div>
+            <h2 class="b-1">{{ entry.title }}</h2>
+          </div>
+          @if (index !== 0) {
+            <icon-button
+              class="hide-button"
+              [icon]="'visible'"
+              style="margin-right: 1rem"
+              (click)="toggleContentVisibility(index)"
+            ></icon-button>
+          }
+        </div>
+        <div [innerHTML]="entry.description"></div>
+        <div class="abilities">
+          @for (feature of entry.features; track feature) {
+            <div class="ability">
+              <hr />
+              <div class="ability-name">{{ feature.name }}</div>
+              <icon-button
+                [icon]="'add'"
+                class="feature-button"
+                (click)="addFeature(feature)"
+              ></icon-button>
+              <div
+                class="feature-description"
+                [innerHTML]="feature.description"
+              ></div>
+            </div>
+          }
+        </div>
+      } @else {
+        <div class="hidden-title-row">
+          <div class="hidden-title">{{ entry.title }}</div>
+          <icon-button
+            [icon]="'hidden'"
+            (click)="toggleContentVisibility(index)"
+          ></icon-button>
+        </div>
+      }
+    </div>
+    <hr />
+  }
 </div>

src/app/journal/journal-character/species/species.component.scss

@@ -4,7 +4,7 @@
   overflow: auto;
   margin: auto;
   border: 1px solid black;
-  padding: 2rem;
+  padding: 2rem 1rem 2rem 1rem;
   border-radius: 10px;
   background-color: var(--items-hover);
   box-shadow: var(--shadow-large);
@@ -16,45 +16,87 @@
 
 .title {
   text-align: center;
-  font-size: 2em;
+  font-size: 2.5em;
   font-weight: bold;
   margin: 0 0 2rem 0;
 }
+
+.entry {
+  padding: 0 1rem;
+  border-radius: 10px;
+}
+
 .abilities {
   margin-top: 1.5rem;
   position: relative;
 }
 
+.ability {
+  position: relative;
+}
+
 .ability-name {
-  font-size: 1.5rem;
-  font-weight: 600;
+  font-size: 1.125rem;
+  font-weight: bold;
   margin-bottom: 1rem;
   margin-left: 1rem;
 }
 
-.ability-level {
-  position: absolute;
-  left: -1.5rem;
-  top: 1rem;
-  font-size: 1.5rem;
-  font-weight: 600;
-}
-
 .feature-button {
   position: absolute;
   right: 0;
   top: 1.5rem;
 }
 
-.ability-description {
-  margin-top: 1rem;
+.feature-description {
+  padding: 0 2rem 0 3rem;
 }
 
-// :host ::ng-deep p {
-//   margin: 0;
-// }
+.title-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.hidden-title-row {
+  background-color: rgba(211, 211, 211, 0.3);
+  border-radius: 15px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+}
+
+.hidden-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: darkgrey;
+}
 
 :host ::ng-deep h3,
 :host ::ng-deep h4 {
   margin-top: 1rem;
 }
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+/* Style the table header */
+th {
+  background-color: #f2f2f2;
+  text-align: left;
+  padding: 8px;
+}
+
+/* Style the table cells */
+td {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+
+/* Style the table rows */
+tr:nth-child(even) {
+  background-color: #f2f2f2;
+}

src/app/journal/journal-character/species/species.component.ts

@@ -13,20 +13,49 @@ import { TraitModalComponent } from '../../journal-stats/ability-panel/trait-tab
   styleUrl: './species.component.scss',
 })
 export class SpeciesComponent {
+  public characterData: any;
   species: any;
   speciesName: string = '';
+  public showContent: boolean[] = [];
 
   public constructor(
     public speciesAccessor: SpeciesService,
     public dataAccessor: DataService,
     public modalAccessor: ModalService,
   ) {
-    this.speciesName = this.dataAccessor.characterData.race;
+    this.characterData = this.dataAccessor.characterData;
+    this.speciesName = this.characterData.race;
     this.species = speciesAccessor.getSpeciesDetails(this.speciesName);
+    this.showContent = this.characterData.speciesArray;
+    if (this.showContent === undefined) {
+      this.showContent = new Array(this.species.content.length).fill(true);
+    }
+    this.updateDatabase();
+  }
+
+  /**
+   * Toggles the visibility of the content at the given index.
+   * @param index The index of the content to be toggled.
+   */
+  public toggleContentVisibility(index: number) {
+    this.showContent[index] = !this.showContent[index];
+    this.updateDatabase();
   }
 
+  /**
+   * Updates the database with the new content visibility.
+   */
+  private updateDatabase() {
+    this.characterData.speciesArray = this.showContent;
+    this.dataAccessor.characterData = this.characterData;
+  }
+
+  /**
+   * Checks if it is an ability or a trait. If the key ability is present, it is an ability, otherwise it is a trait.
+   * @param feature The feature or trait to be added to the character dashboard.
+   */
   public addFeature(feature: any) {
-    if ('ability' in feature) {
+    if (feature.isAbility) {
       this.addAbility(feature);
     } else {
       this.addTrait(feature);
@@ -91,3 +120,51 @@ export class SpeciesComponent {
     );
   }
 }
+
+// public characterData: any;
+//   species: any;
+//   speciesName: string = '';
+//   public showContent: boolean[] = [];
+
+//   public constructor(
+//     public speciesAccessor: SpeciesService,
+//     public dataAccessor: DataService,
+//     public modalAccessor: ModalService,
+//   ) {
+//     this.characterData = this.dataAccessor.characterData;
+//     this.speciesName = this.characterData.species;
+//     this.species = speciesAccessor.getSpeciesDetails(this.speciesName);
+//     this.showContent = this.characterData.speciesArray;
+//     console.log('speciesName: ', this.speciesName);
+
+//     console.log('species: ', this.species);
+
+//     if (this.showContent === undefined) {
+//       this.showContent = new Array(this.species.content.length - 1);
+//     }
+//     this.updateDatabase();
+//   }
+
+//   public updateShowContentArray(index: number) {
+//     this.showContent[index] = !this.showContent[index];
+//     this.updateDatabase();
+//   }
+
+//   private updateDatabase() {
+//     console.log('arry: ', this.showContent);
+
+//     this.characterData.speciesArray = this.showContent;
+//     this.dataAccessor.characterData = this.characterData;
+//   }
+
+//   /**
+//    * Checks if it is an ability or a trait. If the key ability is present, it is an ability, otherwise it is a trait.
+//    * @param feature The feature or trait to be added to the character dashboard.
+//    */
+//   public addFeature(feature: any) {
+//     if ('ability' in feature) {
+//       this.addAbility(feature);
+//     } else {
+//       this.addTrait(feature);
+//     }
+//   }

src/app/journal/journal-stats/ability-panel/trait-table/trait-modal/trait-modal.component.html

@@ -1,9 +1,9 @@
 <div class="dimensions">
   <div class="title">
     @if (isUpdate && !isAddedFromCharacter) {
-      {{ "trait.modal.editTrait" | translate }}
+      {{ "traits.modal.editTrait" | translate }}
     } @else {
-      {{ "trait.modal.addTrait" | translate }}
+      {{ "traits.modal.addTrait" | translate }}
     }
   </div>
   <div class="flex-form t-15">

src/assets/i18n/de.json

@@ -655,7 +655,7 @@
       "label": "Klasse"
     },
     "subclass": {
-      "barabarian": "Pfad",
+      "barbarian": "Pfad",
       "bard": "Kolleg",
       "druid": "Zirkel",
       "monk": "Klostertradition",