Merge branch 'release/0.12.1'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dndtools",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "scripts": {
     "ng": "ng",
     "start": "nx serve",

src/app/character/character-creator/character-creator.component.ts

@@ -208,7 +208,7 @@ export class CharacterCreatorComponent {
           martial: false,
           other: [],
           tools: [],
-          languages: ['common'],
+          languages: [],
         },
         'proficiencies',
       ),
@@ -228,9 +228,9 @@ export class CharacterCreatorComponent {
       this.dataAccessor.addData(
         this.characterName,
         {
-          totalPoints: 0,
+          totalPoints: 2,
           usedPoints: 0,
-          showKiPoints: false,
+          showKiPoints: this.characterClass === 'monk' ? true : false,
         },
         'kiPoints',
       ),

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

@@ -108,7 +108,8 @@
   background-image: url("/assets/images/texture-0.jpg");
   border-radius: 0 0 10px 10px;
   box-shadow: var(--shadow);
-  border: var(--gold-1);
+  border: var(--gold-2);
+  border-top: none;
 }
 
 spellcard {

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

@@ -11,6 +11,6 @@ export class AbilityPanelComponent {
   isMonk = false;
 
   public constructor(private dataAccessor: DataService) {
-    this.isMonk = this.dataAccessor.characterData.class === 'Monk';
+    this.isMonk = this.dataAccessor.characterData.class === 'monk';
   }
 }

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

@@ -58,6 +58,7 @@
             {{ "proficiencies.langAndTools" | translate }}
           </mat-panel-title>
         </mat-expansion-panel-header>
+        <divider [appearance]="'gold-1'" class="b-15"></divider>
         <h5 class="left">{{ "proficiencies.languages" | translate }}</h5>
         <div
           cdkDropList
@@ -71,8 +72,13 @@
             <div class="item" cdkDrag>
               {{ language }}
             </div>
+          } @empty {
+            <div class="empty">
+              {{ "proficiencies.emptyList" | translate }}
+            </div>
           }
         </div>
+        <divider [appearance]="'gold-1'" class="t-1 b-1"></divider>
         <h5 class="left">{{ "proficiencies.tools" | translate }}</h5>
         <div
           cdkDropList
@@ -83,6 +89,10 @@
             <div class="item" cdkDrag>
               {{ tool }}
             </div>
+          } @empty {
+            <div class="empty">
+              {{ "proficiencies.emptyList" | translate }}
+            </div>
           }
         </div>
       </mat-expansion-panel>

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

@@ -43,3 +43,11 @@ mat-expansion-panel {
   margin-bottom: 0.5rem;
   gap: 0.5rem;
 }
+
+.empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 1rem;
+  width: 100%;
+}

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

@@ -19,11 +19,16 @@
         </mat-form-field>
         <icon-button
           [icon]="'delete'"
+          style="margin-left: 0.25rem"
           (click)="deleteLanguage(languageIndex)"
         ></icon-button>
       </div>
     }
-    <icon-button [icon]="'add'" (click)="addLanguage()"></icon-button>
+    <icon-button
+      class="add-button"
+      [icon]="'add'"
+      (click)="addLanguage()"
+    ></icon-button>
   </div>
 
   <div class="heading left b-05">{{ "proficiencies.tools" | translate }}</div>
@@ -40,7 +45,11 @@
         ></icon-button>
       </div>
     }
-    <icon-button [icon]="'add'" (click)="addTool()"></icon-button>
+    <icon-button
+      class="add-button"
+      [icon]="'add'"
+      (click)="addTool()"
+    ></icon-button>
   </div>
 
   <div class="horizontal-buttons">

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

@@ -7,3 +7,7 @@
   gap: 0.25rem;
   align-items: center;
 }
+
+.add-button {
+  margin: 0.5rem 5rem;
+}

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

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, inject } from '@angular/core';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { ModalService } from 'src/services/modal/modal.service';
 
@@ -10,14 +10,16 @@ import { ModalService } from 'src/services/modal/modal.service';
 export class ToolsModalComponent {
   @Input() public proficiencies: any = { tools: [], languages: [] };
 
-  public tools: any;
-  public languages: any;
+  public tools: string[] = [];
+  public languages: string[] = [];
 
-  public constructor(public modalAccessor: ModalService) {}
+  private modalAccessor: ModalService = inject(ModalService);
 
   ngOnInit(): void {
     this.tools = JSON.parse(JSON.stringify(this.proficiencies.tools));
     this.languages = JSON.parse(JSON.stringify(this.proficiencies.languages));
+    this.proficiencies.tools = this.tools;
+    this.proficiencies.languages = this.languages;
   }
 
   public dropTools(event: CdkDragDrop<string[]>): void {

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

@@ -1,6 +1,8 @@
 <div class="dimensions">
   @if (!isMonk) {
-    <div class="title">{{ "magic.spellslots" | translate }}</div>
+    <div class="title">
+      {{ "magic.spellslots" | translate }}
+    </div>
     <divider [appearance]="'gold-1'" style="margin-top: 1rem"></divider>
     <div class="content">{{ "magic.description" | translate }}</div>
     <mat-slide-toggle
@@ -12,20 +14,23 @@
     </mat-slide-toggle>
     <!-- Zauberplätze in der Übersicht anzeigen -->
     @if (showSpellslots) {
-      <div class="t-1">
+      <div class="t-2">
         @for (level of spellslots; let levelIndex = $index; track level) {
-          <div class="t-05">
-            {{ "general.level" | translate }} {{ levelIndex + 1 }}
-            <select
-              [(ngModel)]="spellslots[levelIndex].totalSlots"
-              style="padding-left: 0.5rem"
-            >
-              @for (number of [1, 2, 3, 4]; track number) {
-                <option [value]="number">
-                  {{ number }}
-                </option>
-              }
-            </select>
+          <div class="t-1">
+            <mat-form-field appearance="outline">
+              <mat-label
+                >{{ "general.level" | translate }}
+                {{ levelIndex + 1 }}</mat-label
+              >
+              <mat-select
+                [(ngModel)]="spellslots[levelIndex].totalSlots"
+                name="class"
+              >
+                @for (number of [1, 2, 3, 4]; track number) {
+                  <mat-option [value]="number">{{ number }}</mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
             <icon-button
               style="display: inline; margin-left: 0.25rem"
               [icon]="'delete'"
@@ -35,7 +40,11 @@
         }
       </div>
       @if (spellslots.length < 9) {
-        <icon-button [icon]="'add'" (click)="addSpellLevel()"></icon-button>
+        <icon-button
+          class="add-level"
+          [icon]="'add'"
+          (click)="addSpellLevel()"
+        ></icon-button>
       }
     }
   } @else {

src/app/journal/journal-stats/ability-panel/spellslots/spellslots-modal/spellslots-modal.component.scss

@@ -1,3 +1,11 @@
 .dimensions {
   width: 35rem;
 }
+
+::ng-deep .mat-mdc-text-field-wrapper {
+  width: 10rem !important;
+}
+
+.add-level {
+  margin: 0.75rem 3.5rem;
+}

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

@@ -1,6 +1,5 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, inject } from '@angular/core';
 import { ModalService } from 'src/services/modal/modal.service';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 
 @Component({
   selector: 'spellslots-modal',
@@ -15,7 +14,7 @@ export class SpellslotsModalComponent {
 
   public kiNumbersArray: number[] = Array.from({ length: 20 }, (_, i) => i + 1);
 
-  public constructor(public modalAccessor: ModalService) {}
+  private modalAccessor: ModalService = inject(ModalService);
 
   // Shows the spellslot container
   public onSpellslotsSwitchChanged(event: any): void {

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

@@ -1,12 +1,20 @@
 <div class="slots-box">
   <div class="slots-container">
     @if (kiPoints.showKiPoints) {
-      <div class="ki-container">
+      <div class="points-container">
+        <div
+          style="
+            font-size: 1.5rem;
+            padding: 1.25rem 0 0.5rem 1.5rem;
+            font-weight: 600;
+          "
+        >
+          {{ "magic.ki" | translate }}
+        </div>
         <div
           class="level-row"
           [ngClass]="{ used: kiPoints.usedPoints == kiPoints.totalPoints }"
         >
-          {{ "magic.ki" | translate }}
           <div class="checkboxes">
             @for (
               _ of getArray(kiPoints.totalPoints);
@@ -26,7 +34,7 @@
     }
 
     @if (showSpellslots) {
-      <div class="spell-container">
+      <div class="points-container">
         <div
           style="
             font-size: 1.5rem;

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

@@ -8,16 +8,15 @@
   position: relative;
 }
 
-.spell-container {
+.points-container {
   margin: 15px 10px;
-  // background-color: var(--items);
-  // border: var(--border);;
   border-radius: 10px;
   box-shadow: var(--shadow);
   padding-bottom: 1.25rem;
   border: var(--gold-2);
   background-image: url("/assets/images/texture-15.jpg");
 }
+
 .level-row {
   padding: 1rem 1.5rem 0 1.5rem;
   display: flex;
@@ -25,7 +24,6 @@
   font-weight: 600;
 
   .checkboxes {
-    margin-left: 1rem;
     display: flex;
     align-items: center;
     gap: 0.5rem;
@@ -42,28 +40,6 @@
   opacity: 0.6;
 }
 
-input[type="checkbox"] {
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  width: 20px;
-  height: 20px;
-  background: white;
-  border: 1px solid #000;
-  position: relative;
-}
-
-input[type="checkbox"]:checked::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 12px;
-  height: 12px;
-  background: var(--gold-dark);
-  transform: translate(-50%, -50%);
-}
-
 .value-box {
   max-width: 8rem;
   padding: 0 0.25rem 0 0.25rem;

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

@@ -26,7 +26,7 @@ export class SpellslotsComponent {
     public dataAccessor: DataService,
     public modalAccessor: ModalService,
   ) {
-    this.isMonk = this.dataAccessor.characterData.class === 'Monk';
+    this.isMonk = this.dataAccessor.characterData.class === 'monk';
   }
 
   public ngOnInit(): void {

src/app/journal/journal-stats/life/death-save/death-save.component.html

@@ -7,7 +7,7 @@
 
 <div class="save-row">
   <div class="save-label">{{ "life.success" | translate }}</div>
-  <div class="save-checkbox" (click)="$event.stopPropagation()">
+  <div class="save-checkbox success" (click)="$event.stopPropagation()">
     <input
       type="checkbox"
       [(ngModel)]="deathSaveSucc1"

src/app/journal/journal-stats/life/death-save/death-save.component.scss

@@ -37,7 +37,13 @@
 }
 
 .fail {
-  input[type="checkbox"] {
-    accent-color: var(--delete) !important;
+  input[type="checkbox"]:checked::after {
+    background: var(--delete);
+  }
+}
+
+.success {
+  input[type="checkbox"]:checked::after {
+    background: var(--accept);
   }
 }

src/app/journal/journal-stats/life/hit-dice/hit-dice.component.scss

@@ -13,25 +13,3 @@
     column-gap: 3rem;
   }
 }
-
-input[type="checkbox"] {
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  width: 20px;
-  height: 20px;
-  background: white;
-  border: 1px solid #000;
-  position: relative;
-}
-
-input[type="checkbox"]:checked::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 11px;
-  height: 11px;
-  background: var(--gold);
-  transform: translate(-50%, -50%);
-}

src/app/journal/journal-stats/save-throw-panel/save-throw-field/save-throw-field.component.scss

@@ -4,7 +4,7 @@
   align-items: center;
 
   .save-throw-field__input {
-    width: 2rem;
+    margin: 0 0.5rem;
   }
 
   .save-throw-field__name {

src/app/journal/journal-stats/skill-panel/skill-field/skill-field.component.scss

@@ -3,7 +3,7 @@
   align-items: center;
 
   .skill-proficiency-input {
-    width: 2rem;
+    margin: 0 0.5rem;
   }
 
   .skill-attribute-name {

src/assets/i18n/de.json

@@ -631,7 +631,8 @@
     "langAndTools": "Sprachen und Werkzeuge",
     "languages": "Sprachen",
     "tools": "Werkzeuge",
-    "modalHeader": "Sprachen und Werkzeuge"
+    "modalHeader": "Sprachen und Werkzeuge",
+    "emptyList": "Noch kein Eintrag"
   },
   "navigation": {
     "menu": "Menü",
@@ -835,6 +836,6 @@
     "hint": "Die App befindet sich immer noch in einem Entwicklungsstadium und es können Fehler auftreten",
     "issues": "<p>Fehler und Anmerkungen bitte auf dem <a href='https://gogs.koljastrohm-games.com/Warafear/DNDTools/issues'>Git-Server in Issues</a> vermerken.<p>",
     "okay": "Verstanden",
-    "version": "0.12.0"
+    "version": "0.12.1"
   }
 }

src/assets/i18n/en.json

@@ -626,7 +626,8 @@
     "langAndTools": "Languages and Tools",
     "languages": "Languages",
     "tools": "Tools",
-    "modalHeader": "Languages and Tools"
+    "modalHeader": "Languages and Tools",
+    "emptyList": "No entry added"
   },
   "navigation": {
     "menu": "Menu",
@@ -829,7 +830,7 @@
     "hint": "The app is still in a development stage and errors may occur",
     "issues": "<p>Please note errors and comments on the <a href='https://gogs.koljastrohm-games.com/Warafear/DNDTools/issues'>Git server in Issues</a>.<p>",
     "okay": "Understood",
-    "version": "0.12.0",
+    "version": "0.12.1",
     "test": "Test"
   }
 }

src/colors.scss

@@ -19,6 +19,7 @@
   --gold-dark: #c0a042;
   --gold-active: #98895c;
 
+  --grey-light: #d4d4d4;
   --grey: #8d8c8c;
   --grey-dark: #6e6d6d;
 

src/services/species/species.service.ts

@@ -2870,7 +2870,7 @@ export class SpeciesService {
     <p><b>Magical Detection:</b> You can cast the Detect Magic and the Detect Poison and Disease spells with this trait. Starting at 3rd level, you can also cast the See Invisibility spell with it. Once you cast either spell with this trait, you can't cast that spell again until you finish a Long Rest. Intelligence is your Spellcasting Ability for these spells, and you don't require material components for them.</p>
     <p><b>Spells of the Mark:</b> If you have the Spellcasting or Pact Magic class feature, the spells on the Mark of Detection Spells table are added to the spell list of your Spellcasting class.</p>
     <p><b>Mark of Detection Spells</b></p>
-    <table class='table'>>
+    <table class='table'>
       <tr>
         <th>Spell Level</th>
         <th>Spells</th>

src/styles.scss

@@ -137,12 +137,29 @@
 
 // GENERAL STYLES
 
-//  Checkbox
+//  CHECKBOXES
 
 input[type="checkbox"] {
-  accent-color: var(--gold) !important;
-  height: 1.25rem;
-  width: 1.25rem;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 20px !important;
+  height: 20px;
+  background: white;
+  border: 1px solid #000;
+  border-radius: 2px;
+  position: relative;
+}
+
+input[type="checkbox"]:checked::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 13px;
+  height: 13px;
+  background: var(--gold-dark);
+  transform: translate(-50%, -50%);
 }
 
 // Scrollbar
@@ -260,6 +277,10 @@ input[type="checkbox"] {
   overflow: auto;
 }
 
+.NgxEditor__Wrapper {
+  border: var(--gold-1) !important;
+}
+
 // Used to remove the empty space under form fields
 .mat-mdc-form-field-subscript-wrapper {
   display: none;
@@ -338,3 +359,15 @@ body {
 .mat-mdc-radio-button.mat-mdc-radio-checked .mat-ripple-element {
   background-color: var(--primary) !important;
 }
+
+.mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle::after,
+.mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle::after {
+  background-color: var(--gold) !important;
+}
+
+.mdc-switch:enabled .mdc-switch__track::before {
+  background-color: var(--grey-light) !important;
+}
+.mdc-switch:enabled .mdc-switch__track::after {
+  background-color: var(--grey) !important;
+}