styled spellslots table and modal

.nx/cache/d/daemon.log

@@ -466711,3 +466711,75 @@ To fix this, set a unique name for each project in a project.json inside the pro
     at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
 [NX Daemon Server] - 2024-02-11T18:59:56.509Z - Time taken for 'hash changed files from watcher' 379.8712999820709ms
 [NX Daemon Server] - 2024-02-11T18:59:56.509Z - Done responding to the client null
+[NX Daemon Server] - 2024-02-12T16:32:22.402Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-02-12T16:32:22.404Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-02-12T16:32:22.409Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-12T16:32:22.410Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2024-02-12T16:32:22.410Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-12T16:32:22.416Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-02-12T16:32:23.464Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2024-02-12T16:32:23.464Z - [REQUEST]: Responding to the client with an error. Error when preparing serialized project graph. The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+Error: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+    at readProjectConfigurationsFromRootMap (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Softwareprojekte\DnD\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:58:12)
+    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at async processCollectedUpdatedAndDeletedFiles (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2024-02-12T16:32:23.465Z - Time taken for 'hash changed files from watcher' 330.7449999451637ms
+[NX Daemon Server] - 2024-02-12T16:32:23.465Z - Done responding to the client null
+[NX Daemon Server] - 2024-02-12T17:20:12.543Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-02-12T17:20:12.546Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-02-12T17:20:12.557Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-12T17:20:12.558Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2024-02-12T17:20:12.559Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-12T17:20:12.561Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-02-12T17:20:12.642Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2024-02-12T17:20:12.643Z - [REQUEST]: Responding to the client with an error. Error when preparing serialized project graph. The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+Error: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+    at readProjectConfigurationsFromRootMap (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Softwareprojekte\DnD\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:58:12)
+    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at async processCollectedUpdatedAndDeletedFiles (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2024-02-12T17:20:12.643Z - Time taken for 'hash changed files from watcher' 27.236500024795532ms
+[NX Daemon Server] - 2024-02-12T17:20:12.643Z - Done responding to the client null

.nx/cache/d/server-process.json

@@ -1 +1 @@
-{"processId":18404}
+{"processId":11504}

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

@@ -64,15 +64,15 @@
 
     <div class="horizontal-buttons">
       @if(isUpdate){
-      <ui-button [color]="'green'" [width]="'w20'" (click)="update()"
+      <ui-button [color]="'green'" style="width: 45%" (click)="update()"
         >Aktualisieren</ui-button
       >
       }@else{
-      <ui-button [color]="'green'" [width]="'w20'" (click)="add()"
+      <ui-button [color]="'green'" style="width: 45%" (click)="add()"
         >hinzufügen</ui-button
       >
       }
-      <ui-button [color]="'red'" [width]="'w20'" (click)="cancel()"
+      <ui-button [color]="'red'" style="width: 45%" (click)="cancel()"
         >Abbrechen</ui-button
       >
     </div>

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

@@ -1,74 +1,65 @@
-<div class="modal-dimensions">
-  <div class="add-form-group">
-    @if(!isMonk){
-    <h3>Spellslots</h3>
-    <mat-slide-toggle
-      [checked]="showSpellslots"
-      (change)="onSpellslotsSwitchChanged($event)"
-      >Zauberplätze in der Übersicht anzeigen</mat-slide-toggle
-    >
-    <!-- Zauberplätze in der Übersicht anzeigen -->
-    <div *ngIf="showSpellslots">
-      <div *ngFor="let level of spellslots; let levelIndex = index">
-        <div class="level-row">
-          Level {{ levelIndex + 1 }}
-          <select [(ngModel)]="spellslots[levelIndex].totalSlots">
-            <option *ngFor="let number of spellNumbersArray" [value]="number">
-              {{ number }}
-            </option>
-          </select>
-          <span>
-            <icon
-              [icon]="'remove'"
-              [size]="'s'"
-              [type]="'UI'"
-              [class]="'pointer'"
-              (click)="removeSpellLevel(levelIndex)"
-            ></icon>
-          </span>
-        </div>
-      </div>
-      <icon
-        [icon]="'add'"
-        [size]="'s'"
-        [type]="'UI'"
-        [class]="'pointer'"
-        (click)="addSpellLevel()"
-      ></icon>
+<div class="dimensions">
+  @if(!isMonk){
+  <div class="title">Zauberplätze</div>
+  <div class="content">
+    Hier kann die Anzahl der verfügbaren Zauberplätze je Zauberstufe angepasst
+    werden
+  </div>
+  <mat-slide-toggle
+    class="t-1"
+    [checked]="showSpellslots"
+    (change)="onSpellslotsSwitchChanged($event)"
+    >Zauberplätze in der Übersicht anzeigen
+  </mat-slide-toggle>
+  <!-- Zauberplätze in der Übersicht anzeigen -->
+  @if(showSpellslots){
+  <div class="t-1">
+    @for(level of spellslots; let levelIndex = $index; track level){
+    <div class="t-05">
+      Level {{ levelIndex + 1 }}
+      <select
+        [(ngModel)]="spellslots[levelIndex].totalSlots"
+        style="padding-left: 0.5rem"
+      >
+        <option *ngFor="let number of spellNumbersArray" [value]="number">
+          {{ number }}
+        </option>
+      </select>
+      <icon-button
+        style="display: inline; margin-left: 0.25rem"
+        [icon]="'delete'"
+        (click)="removeSpellLevel(levelIndex)"
+      ></icon-button>
     </div>
-    } @else{
+    }
+  </div>
+  <icon-button [icon]="'add'" (click)="addSpellLevel()"></icon-button>
+  } } @else{
 
-    <h3>KI-Punkte</h3>
-    <mat-slide-toggle
-      [checked]="kiPoints.showKiPoints"
-      (change)="onKiPointsSwitchChanged($event)"
-      >KI Punkte in der Übersicht anzeigen
-    </mat-slide-toggle>
-    <div *ngIf="kiPoints.showKiPoints">
-      Verfügbare KI Punkte
-      <div>
-        <select [(ngModel)]="kiPoints.totalPoints">
-          <option *ngFor="let number of kiNumbersArray" [value]="number">
-            {{ number }}
-          </option>
-        </select>
-      </div>
+  <div class="title">KI-Punkte</div>
+  <mat-slide-toggle
+    [checked]="kiPoints.showKiPoints"
+    (change)="onKiPointsSwitchChanged($event)"
+    >KI Punkte in der Übersicht anzeigen
+  </mat-slide-toggle>
+  <div *ngIf="kiPoints.showKiPoints">
+    Verfügbare KI Punkte
+    <div>
+      <select [(ngModel)]="kiPoints.totalPoints">
+        <option *ngFor="let number of kiNumbersArray" [value]="number">
+          {{ number }}
+        </option>
+      </select>
     </div>
-    }
   </div>
+  }
 
-  <div class="button-wrapper-2-block">
-    <ui-button
-      [type]="'update'"
-      [size]="'xlarge'"
-      [color]="'primary'"
-      (click)="update()"
-    ></ui-button>
-    <ui-button
-      [type]="'cancel'"
-      [size]="'xlarge'"
-      [color]="'primary'"
-      (click)="cancel()"
-    ></ui-button>
+  <div class="horizontal-buttons">
+    <ui-button [color]="'green'" style="width: 45%" (click)="update()">
+      Aktualisieren
+    </ui-button>
+    <ui-button [color]="'red'" style="width: 45%" (click)="cancel()">
+      Abbrechen
+    </ui-button>
   </div>
 </div>

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

@@ -1,13 +1,7 @@
-.modal-dimensions {
+.dimensions {
     width: 40vw;
     background-color: var(--modal-background);
     border-radius: 10px;
     border: 1px solid var(--border-color);
-    padding: 1rem;
-}
-
-.add-form-group {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
+    padding: 0 2rem;
 }

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

@@ -15,34 +15,44 @@
     </div>
 
     @if(showSpellslots){
-    <!-- <div *ngIf="showSpellslots" class="spellslot-list"> -->
-    @for(level of spellslots; let levelIndex = $index; track level){
-    <div class="level-row">
-      Level {{ levelIndex + 1 }}:
-      <div class="checkboxes">
-        @for ( checkbox of getArray(spellslots[levelIndex].totalSlots); let
-        slotIndex = $index; track checkbox){
-        <input
-          [id]="'checkbox' + levelIndex + '-' + slotIndex"
-          type="checkbox"
-          (change)="handleUsedSlots(levelIndex, slotIndex, $event.target)"
-        />
-        }
+    <div class="spell-container">
+      <div
+        style="
+          font-size: 1.5rem;
+          padding: 1.25rem 0 0.5rem 1.5rem;
+          font-weight: 600;
+        "
+      >
+        Zauberplätze
+      </div>
+      @for(level of spellslots; let levelIndex = $index; track level){
+      <div
+        class="level-row"
+        [ngClass]="{ used: level.usedSlots == level.totalSlots }"
+      >
+        <div style="width: 6rem">Level {{ levelIndex + 1 }}:</div>
+        <div class="checkboxes">
+          @for ( checkbox of getArray(spellslots[levelIndex].totalSlots); let
+          slotIndex = $index; track checkbox){
+          <input
+            [id]="'checkbox' + levelIndex + '-' + slotIndex"
+            type="checkbox"
+            (change)="handleUsedSlots(levelIndex, slotIndex, $event.target)"
+          />
+          }
+        </div>
       </div>
+      }
     </div>
-    }
 
-    <div class="modifier-container">
-      <div>
-        <div class="value-box">{{ spellSaveDC }}</div>
-        <div class="value-label">Rettungswurf-SG</div>
-      </div>
-      <div>
-        <div class="value-box">{{ spellAttackModifier }}</div>
-        <div class="value-label">Zauber-Angriffsbonus</div>
-      </div>
+    <div class="value-row">
+      <value-box [value]="spellSaveDC" [label]="'Rettungswurf-SG'"></value-box>
+      <value-box
+        [value]="spellAttackModifier"
+        [label]="'Zauber-Angriffsbonus'"
+      ></value-box>
     </div>
-    <!-- </div> -->
+
     } @if(!kiPoints.showKiPoints && !showSpellslots){
     <div class="empty-list">
       Noch keine {{ isMonk ? "Ki-Punkte" : "Zauberplätze" }} hinzugefügt
@@ -50,7 +60,10 @@
     }
   </div>
   <!-- MODAL BUTTON -->
+
   <div class="footer">
-    <button (click)="openModal()">Anpassen</button>
+    <ui-button [color]="'green'" [width]="'w25'" (click)="openModal()">
+      Anpassen
+    </ui-button>
   </div>
 </div>

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

@@ -8,24 +8,61 @@
     position: relative;
 }
 
-.level-row {
-    padding: 1rem 1.5rem 0 1.5rem;
-    display: flex;
-    font-size: 1.25rem;
-    font-weight: 600;
-
-    .checkboxes {
-        margin-left: 1rem;
+.spell-container {
+    margin: 15px 10px;
+    background-color: var(--items);
+    border: var(--border);
+    border-radius: 10px;
+    box-shadow: var(--shadow);
+    padding-bottom: 1.25rem;
+
+    .level-row {
+        padding: 1rem 1.5rem 0 1.5rem;
         display: flex;
-        align-items: center;
-        gap: 0.5rem;
+        font-size: 1.25rem;
+        font-weight: 600;
+
+        .checkboxes {
+            margin-left: 1rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
     }
 }
 
-.modifier-container {
+.value-row {
     position: absolute;
     width: 100%;
     bottom: 1.5rem;
-    display: flex;
-    justify-content: space-evenly;
+}
+
+.used {
+    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 {
+//     background: #651212;
+// }
+
+input[type="checkbox"]:checked::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 12px;
+    height: 12px;
+    background: #815139;
+    transform: translate(-50%, -50%);
 }

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

@@ -1,6 +1,6 @@
 <div class="title">{{ trait?.name }}</div>
 
-<div class="content">{{ trait?.longDescription }}</div>
+<div class="content" [innerHTML]="trait?.longDescription"></div>
 
 <div class="vertical-buttons bottom">
   <ui-button [color]="'green'" [width]="'w20'" (click)="close('update')">

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

@@ -4,16 +4,6 @@
     <h3 *ngIf="isUpdate">Eigenschaft anpassen</h3>
   </div>
   <div class="flex-form t-15">
-    <!-- <div class="modal-input">
-      <label for="traitName">Name</label>
-      <input
-        type="text"
-        class="modal-input"
-        id="traitName"
-        [(ngModel)]="name"
-      />
-    </div> -->
-
     <div>
       <div class="name">Name</div>
       <mat-form-field appearance="outline" class="w-50">
@@ -49,59 +39,17 @@
 
     <div class="horizontal-buttons">
       @if(isUpdate){
-      <ui-button [color]="'green'" [width]="'w20'" (click)="update()"
+      <ui-button [color]="'green'" style="width: 45%" (click)="update()"
         >Aktualisieren</ui-button
       >
       }@else{
-      <ui-button [color]="'green'" [width]="'w20'" (click)="add()"
+      <ui-button [color]="'green'" style="width: 45%" (click)="add()"
         >hinzufügen</ui-button
       >
       }
-      <ui-button [color]="'red'" [width]="'w20'" (click)="cancel()"
+      <ui-button [color]="'red'" style="width: 45%" (click)="cancel()"
         >Abbrechen</ui-button
       >
     </div>
-
-    <!-- <div class="modal-input">
-      <label for="traitShortDescription">Kurzbeschreibung</label>
-      <textarea
-        id="traitShortDescription"
-        [(ngModel)]="shortDescription"
-      ></textarea>
-    </div>
-
-    <div class="modal-input">
-      <label for="traitLongDescription">Ausführliche Beschreibung</label>
-      <textarea
-        id="traitLongDescription"
-        [(ngModel)]="longDescription"
-      ></textarea>
-    </div>
-  </div> -->
-
-    <!-- <div class="button-wrapper-2-block">
-    @if(isUpdate){
-    <ui-button
-      [type]="'update'"
-      [size]="'xlarge'"
-      [color]="'primary'"
-      (click)="update()"
-    ></ui-button>
-    }@else{
-    <ui-button
-      *ngIf="!isUpdate"
-      [type]="'add'"
-      [size]="'xlarge'"
-      [color]="'primary'"
-      (click)="add()"
-    ></ui-button>
-    }
-    <ui-button
-      [type]="'cancel'"
-      [size]="'xlarge'"
-      [color]="'primary'"
-      (click)="cancel()"
-    ></ui-button>
-  </div> -->
   </div>
 </div>

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

@@ -10,9 +10,3 @@
     flex-direction: column;
     gap: 0.5rem;
 }
-
-// .add-form-group {
-//     display: flex;
-//     flex-direction: column;
-//     gap: 1rem;
-// }

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

@@ -4,7 +4,7 @@
     @for(trait of traits; let index = $index; track trait){
     <div class="item" (click)="openDetailsPanel(index)" cdkDrag>
       <div class="name">{{ trait.name }}</div>
-      <p>{{ trait.shortDescription }}</p>
+      <p [innerHTML]="trait.shortDescription"></p>
     </div>
     }@empty{
     <div class="empty-list">Noch keine Eigenschaft hinzugefügt</div>