abilities with charges over 10 now are handled with add and remove buttons instead of individual checkboxes

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

@@ -64,10 +64,14 @@
         <mat-form-field appearance="outline" class="w-100">
           <!-- <mat-label>Nutzungen</mat-label> -->
           <mat-select [(ngModel)]="charges">
-            @for (charge of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; track charge) {
+            @for (charge of chargesArray; track charge) {
               <mat-option [value]="charge">
-                {{ "uses." + charge | translate }}</mat-option
-              >
+                @if (charge === 0) {
+                  {{ "uses." + charge | translate }}
+                } @else {
+                  {{ charge }}
+                }
+              </mat-option>
             }
           </mat-select>
         </mat-form-field>

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

@@ -30,6 +30,7 @@ export class AbilityModalComponent {
   public shortDescription: string = '';
   public longDescription: string = '';
   public costs: string[] = ['none', 'action', 'bonus', 'reaction'];
+  public chargesArray: number[] = Array.from({ length: 101 }, (_, i) => i);
 
   public constructor(private modalAccessor: ModalService) {}
 

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

@@ -22,20 +22,40 @@
 
         <div class="charges-box" *ngIf="ability.charges != 0">
           {{ "abilities.uses" | translate }}
-          @for (
-            _ of getArray(ability.charges);
-            let chargeIndex = $index;
-            track _
-          ) {
-            <input
-              [id]="'checkbox' + index + '-' + chargeIndex"
-              type="checkbox"
-              (click)="$event.stopPropagation()"
-              (change)="
-                $event.stopPropagation();
-                handleChangedCharges(index, $event.target)
-              "
-            />
+          @if (ability.charges > 9) {
+            <div class="usage-box">
+              <icon-button
+                [icon]="'remove'"
+                [disabled]="ability.currentlyUsedCharges === ability.charges"
+                (click)="addUsage(index); $event.stopPropagation()"
+              ></icon-button>
+              <div class="usage">
+                {{ ability.charges - ability.currentlyUsedCharges }}/{{
+                  ability.charges
+                }}
+              </div>
+              <icon-button
+                [icon]="'add'"
+                [disabled]="ability.currentlyUsedCharges === 0"
+                (click)="removeUsage(index); $event.stopPropagation()"
+              ></icon-button>
+            </div>
+          } @else {
+            @for (
+              _ of getArray(ability.charges);
+              let chargeIndex = $index;
+              track _
+            ) {
+              <input
+                [id]="'checkbox' + index + '-' + chargeIndex"
+                type="checkbox"
+                (click)="$event.stopPropagation()"
+                (change)="
+                  $event.stopPropagation();
+                  handleChangedCharges(index, $event.target)
+                "
+              />
+            }
           }
         </div>
       </div>

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

@@ -32,6 +32,22 @@
   }
 }
 
+.usage-box {
+  display: flex;
+  align-items: center;
+}
+
+.usage {
+  background-color: white;
+  border: var(--border);
+  border-radius: 10px;
+  padding: 0.125rem 0.25rem;
+}
+
+.used {
+  opacity: 0.5;
+}
+
 .used {
   opacity: 0.5;
 }

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

@@ -159,4 +159,21 @@ export class AbilityTableComponent {
     moveItemInArray(this.abilities, event.previousIndex, event.currentIndex);
     this.updateDatabase();
   }
+
+  public removeUsage(abilityIndex: number): void {
+    if (this.abilities[abilityIndex].currentlyUsedCharges > 0) {
+      this.abilities[abilityIndex].currentlyUsedCharges--;
+      this.updateDatabase();
+    }
+  }
+
+  public addUsage(abilityIndex: number): void {
+    if (
+      this.abilities[abilityIndex].currentlyUsedCharges <
+      this.abilities[abilityIndex].charges
+    ) {
+      this.abilities[abilityIndex].currentlyUsedCharges++;
+      this.updateDatabase();
+    }
+  }
 }