added localization for abilities

.gitignore

@@ -62,3 +62,5 @@ Thumbs.db
 .nx/cache/d/daemon.log
 .nx/cache/d/server-process.json
 .nx/cache/d/daemon.log
+.nx/cache/d/daemon.log
+.nx/cache/d/server-process.json

src/app/journal/journal-stats/ability-panel/ability-panel.component.html

@@ -5,14 +5,14 @@
       (click)="active = 1"
       [class]="active === 1 ? 'active' : ''"
     >
-      Fähigkeiten
+      {{ "abilities.label" | translate }}
     </button>
     <button
       class="tab-button"
       (click)="active = 2"
       [class]="active === 2 ? 'active' : ''"
     >
-      Eigenschaften
+      {{ "traits.label" | translate }}
     </button>
     <button
       class="tab-button"
@@ -26,7 +26,7 @@
       (click)="active = 4"
       [class]="active === 4 ? 'active' : ''"
     >
-      Übungen
+      {{ "proficiencies.label" | translate }}
     </button>
   </div>
   @switch (active) {

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

@@ -3,9 +3,11 @@
 <div class="content" [innerHTML]="ability?.longDescription"></div>
 
 <div class="details-cost-charge">
-  <div class="details-cost">{{ costTranslator[ability!.cost] }}</div>
+  <div class="details-cost">{{ "cost." + ability!.cost | translate }}</div>
 
-  <div class="details-charges">Aufladungen: {{ ability?.charges }}</div>
+  <div class="details-charges">
+    {{ "abilities.uses" | translate }} {{ ability?.charges }}
+  </div>
 </div>
 
 <div class="vertical-buttons bottom">

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

@@ -1,72 +1,73 @@
 <div class="dimensions">
   <div class="title">
-    Fähigkeit
     @if (isUpdate && !isAddedFromCharacter) {
-      anpassen
+      {{ "abilities.modal.editAbility" | translate }}
     } @else {
-      erstellen
+      {{ "abilities.modal.addAbility" | translate }}
     }
   </div>
 
   <div class="flex-form t-15">
     <div>
-      <div class="input-label">Name</div>
+      <div class="input-label">{{ "modal.name" | translate }}</div>
       <mat-form-field appearance="outline" class="w-50">
         <input matInput [(ngModel)]="name" />
       </mat-form-field>
     </div>
 
     <div>
-      <div class="input-label">Kurze Beschreibung</div>
+      <div class="input-label">{{ "modal.shortDescription" | translate }}</div>
       <div class="NgxEditor__Wrapper">
         <ngx-editor-menu [editor]="shortEditor" [toolbar]="toolbar">
         </ngx-editor-menu>
         <ngx-editor
           [editor]="shortEditor"
           [(ngModel)]="shortDescription"
-          placeholder="Kurze Beschreibung der Fähigkeit"
+          [placeholder]="'abilities.modal.shortPlaceholder' | translate"
         ></ngx-editor>
       </div>
-      <div class="hint">Wird in der Übersicht angezeigt</div>
+      <div class="hint">{{ "modal.shortHint" | translate }}</div>
     </div>
 
     <div>
-      <div class="input-label">Ausführliche Beschreibung</div>
+      <div class="input-label">{{ "modal.longDescription" | translate }}</div>
       <div class="NgxEditor__Wrapper">
         <ngx-editor-menu [editor]="longEditor" [toolbar]="toolbar">
         </ngx-editor-menu>
         <ngx-editor
           [editor]="longEditor"
           [(ngModel)]="longDescription"
-          placeholder="Ausführliche Beschreibung der Fähigkeit"
+          [placeholder]="'abilities.modal.shortPlaceholder' | translate"
         ></ngx-editor>
       </div>
-      <div class="hint">Wird in der Detailansicht angezeigt</div>
+      <div class="hint">{{ "modal.longHint" | translate }}</div>
     </div>
 
     <div class="flex-row">
       <div class="w-100">
-        <div class="input-label">Kosten</div>
+        <div class="input-label">{{ "modal.cost" | translate }}</div>
 
         <mat-form-field appearance="outline" class="w-100">
           <!-- <mat-label>Kosten</mat-label> -->
           <mat-select [(ngModel)]="cost">
             @for (cost of costs; track cost) {
-              <mat-option [value]="cost.value">{{ cost.display }}</mat-option>
+              <mat-option [value]="cost">{{
+                "cost." + cost | translate
+              }}</mat-option>
             }
           </mat-select>
         </mat-form-field>
       </div>
 
       <div class="w-100">
-        <div class="input-label">Nutzungen</div>
+        <div class="input-label">{{ "modal.uses" | translate }}</div>
         <mat-form-field appearance="outline" class="w-100">
           <!-- <mat-label>Nutzungen</mat-label> -->
           <mat-select [(ngModel)]="charges">
-            @for (charge of chargesTranslator; track charge) {
-              <mat-option [value]="charge.value">{{
-                charge.display
-              }}</mat-option>
+            @for (charge of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; track charge) {
+              <mat-option [value]="charge">
+                {{ "uses." + charge | translate }}</mat-option
+              >
             }
           </mat-select>
         </mat-form-field>

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

@@ -29,26 +29,7 @@ export class AbilityModalComponent {
   public cost: string = 'none';
   public shortDescription: string = '';
   public longDescription: string = '';
-  public costs: any[] = [
-    { display: 'keine', value: 'none' },
-    { display: 'Aktion', value: 'action' },
-    { display: 'Bonusaktion', value: 'bonus' },
-    { display: 'Reaktion', value: 'reaction' },
-  ];
-
-  public chargesTranslator: any[] = [
-    { display: 'unbegrenzt', value: 0 },
-    { display: '1', value: 1 },
-    { display: '2', value: 2 },
-    { display: '3', value: 3 },
-    { display: '4', value: 4 },
-    { display: '5', value: 5 },
-    { display: '6', value: 6 },
-    { display: '7', value: 7 },
-    { display: '8', value: 8 },
-    { display: '9', value: 9 },
-    { display: '10', value: 10 },
-  ];
+  public costs: string[] = ['none', 'action', 'bonus', 'reaction'];
 
   public constructor(private modalAccessor: ModalService) {}
 

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

@@ -15,13 +15,13 @@
       >
         <div class="header">
           <div class="name">{{ ability.name }}</div>
-          <div class="cost">{{ costTranslator[ability.cost] }}</div>
+          <div class="cost">{{ "cost." + ability.cost | translate }}</div>
         </div>
 
         <p [innerHTML]="ability.shortDescription"></p>
 
         <div class="charges-box" *ngIf="ability.charges != 0">
-          Nutzungen:
+          {{ "abilities.uses" | translate }}
           @for (
             _ of getArray(ability.charges);
             let chargeIndex = $index;
@@ -40,7 +40,7 @@
         </div>
       </div>
     } @empty {
-      <div class="empty-list">Noch keine Fähigkeit hinzugefügt</div>
+      <div class="empty-list">{{ "abilities.empty" | translate }}</div>
     }
   </div>
   <div class="footer">

src/assets/i18n/de.json

@@ -21,7 +21,37 @@
     "german": "Deutsch",
     "english": "Englisch",
     "light": "Hell",
-    "dark": "Dunkel"
+    "dark": "Dunkel",
+    "round": "Runde(n)"
+  },
+  "modal": {
+    "name": "Name",
+    "shortDescription": "Kurze Beschreibung",
+    "shortHint": "Wird in der Übersicht angezeigt",
+    "longDescription": "Ausführliche Beschreibung",
+    "longHint": "Wird in der Detailansicht angezeigt",
+    "cost": "Kosten:",
+    "uses": "Nutzungen"
+  },
+  "cost": {
+    "none": "Keine",
+    "action": "Aktion",
+    "bonus": "Bonusaktion",
+    "reaction": "Reaktion",
+    "ritual": "Ritual"
+  },
+  "uses": {
+    "0": "Unbegrenzt",
+    "1": "1",
+    "2": "2",
+    "3": "3",
+    "4": "4",
+    "5": "5",
+    "6": "6",
+    "7": "7",
+    "8": "8",
+    "9": "9",
+    "10": "10"
   },
   "damageTypes": {
     "acid": "Säure",
@@ -337,12 +367,26 @@
     "concentration": "Konzentration"
   },
   "abilities": {
-    "label": "Fähigkeiten"
+    "label": "Fähigkeiten",
+    "empty": "Noch keine Fähigkeiten hinzugefügt",
+    "uses": "Nutzungen:",
+    "modal": {
+      "addAbility": "Fähigkeit erstellen",
+      "editAbility": "Fähigkeit bearbeiten",
+      "shortPlaceholder": "Kurze Beschreibung der Fähigkeit",
+      "longPlaceholder": "Ausführliche Beschreibung der Fähigkeit"
+    }
   },
   "traits": {
-    "label": "Eigenschaften"
+    "label": "Eigenschaften",
+    "empty": "Noch keine Eigenschaften hinzugefügt"
+  },
+  "magic": {
+    "spellCasting": "Zaubern",
+    "ki": "Ki",
+    "empty": "Noch keine Zauberplätze hinzugefügt"
   },
   "proficiencies": {
-    "label": "Übung"
+    "label": "Übungen"
   }
 }