finished styling info row

.nx/cache/d/daemon.log

@@ -466639,3 +466639,39 @@ 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-10T15:48:51.176Z - Time taken for 'hash changed files from watcher' 45.212000012397766ms
 [NX Daemon Server] - 2024-02-10T15:48:51.176Z - Done responding to the client null
+[NX Daemon Server] - 2024-02-11T09:01:43.066Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-02-11T09:01:43.071Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-02-11T09:01:43.081Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-11T09:01:43.082Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2024-02-11T09:01:43.082Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-11T09:01:43.084Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-02-11T09:01:43.192Z - 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-11T09:01:43.192Z - [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-11T09:01:43.193Z - Time taken for 'hash changed files from watcher' 31.82649999856949ms
+[NX Daemon Server] - 2024-02-11T09:01:43.193Z - Done responding to the client null

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

@@ -1 +1 @@
-{"processId":16240}
+{"processId":14556}

src/app/journal/journal-stats/info-row/armor-class/armor-class-details/armor-class-details.component.html

@@ -8,4 +8,4 @@
   Angriff abgewehrt.
 </div>
 
-<value-box [(ngModel)]="armorClass" [label]="'Wert'"></value-box>
+<value-box [value]="armorClass" [label]="'Wert'"></value-box>

src/app/journal/journal-stats/info-row/conditions/conditions-details/conditions-details.component.scss

@@ -14,34 +14,6 @@
   text-align: center;
 }
 
-.condition-row {
-  display: flex;
-}
-
-.condition {
-  width: 100%;
-}
-
-.condition-selection {
-  margin-top: 0.5rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 1rem;
-}
-
-.condition-description {
-  margin-top: 1rem;
-}
-
-.status-item-description {
-  margin: 0.5rem 0 0 0.5rem;
-}
-
-icon-button {
-  margin: auto;
-}
-
 ::ng-deep mat-accordion {
   :first-child {
     border-radius: 10px 10px 0 0 !important;
@@ -78,7 +50,7 @@ mat-expansion-panel {
   }
 }
 
-// Auslagern
+// TODO: Auslagern
 .button-container {
   height: 9rem;
   width: 27rem;

src/app/journal/journal-stats/info-row/conditions/exhaustion-details/exhaustion-details.component.html

@@ -1,20 +1,15 @@
-<div class="details-title">Erschöpfung</div>
+<div class="title">Erschöpfung</div>
 
-<div class="details-content">
+<div class="content">
   Einige Spezialfähigkeiten und Umweltgefahren, wie Hunger oder extreme
   Temperaturen können zu Erschöpfung führen. Jede Stufe fügt einen weiteren
   Malus hinzu, sodass mehrere Mali gleichzeitig möglich sind. Erschöpfung kann
   z.B. durch eine lange Rast reduziert werden.
 </div>
 
-<div class="details-value-container">
-  <div class="details-value" style="margin-top: 1.5rem">
-    {{ exhaustion }}
-  </div>
-  <div class="details-label">aktuelle Erschöpfung</div>
-</div>
+<value-box [value]="exhaustion" [label]="'aktuelle Erschöpfung'"></value-box>
 
-<div class="exhaustion-table">
+<div class="t-2">
   <table class="table table-striped">
     <thead>
       <tr>
@@ -23,23 +18,27 @@
       </tr>
     </thead>
     <tbody>
-      <tr>
+      <tr [ngClass]="{ highlighted: exhaustion === 0 }">
+        <td>0</td>
+        <td>Keine Einschränkung</td>
+      </tr>
+      <tr [ngClass]="{ highlighted: exhaustion === 1 }">
         <td>1</td>
         <td>Nachteil auf Attributwürfe</td>
       </tr>
-      <tr>
+      <tr [ngClass]="{ highlighted: exhaustion === 2 }">
         <td>2</td>
         <td>Bewegungsrate halbiert</td>
       </tr>
-      <tr>
+      <tr [ngClass]="{ highlighted: exhaustion === 3 }">
         <td>3</td>
         <td>Nachteil auf Angriffs- und Rettungswürfe</td>
       </tr>
-      <tr>
+      <tr [ngClass]="{ highlighted: exhaustion === 4 }">
         <td>4</td>
         <td>Bewegungsrate fällt auf 0</td>
       </tr>
-      <tr>
+      <tr [ngClass]="{ highlighted: exhaustion === 5 }">
         <td>5</td>
         <td>Sofortiger Tod</td>
       </tr>

src/app/journal/journal-stats/info-row/conditions/exhaustion-details/exhaustion-details.component.scss

@@ -1,3 +1,3 @@
-.exhaustion-table{
-    margin-top: 2rem,
-}
+.highlighted {
+    border: 2px solid black !important;
+}

src/app/journal/journal-stats/info-row/death-save/death-save-details/death-save-details.component.html

@@ -1,6 +1,6 @@
-<div class="details-title">Todesrettungswürfe</div>
+<div class="title">Todesrettungswürfe</div>
 
-<div class="details-content">
+<div class="content">
   Immer wenn ein Charakter seinen Zug mit 0 Trefferpunkten beginnt und nicht
   stabilisiert wurde, muss er einen Todesrettungswurf ablegen. Ist das Ergebnis
   10 oder höher, ist der Wurf erfolgreich, ansonsten fehlgeschlagen. Beim
@@ -8,11 +8,8 @@
   er.
 </div>
 
-<div class="details-value-container">
-  <div style="font-size: 1.25rem; font-weight: 600">Eine 1 oder 20 würfeln</div>
-  <div class="details-content">
-    Würfelt ein Charakter eine 1, zählt der Wurf als zwei Fehlschläge. Würfelt
-    er eine 20, erhält er sofort einen Lebenspunkt dazu und ist nicht mehr
-    bewustlos.
-  </div>
+<div class="subheading left">Eine 1 oder 20 würfeln</div>
+<div class="content t-05">
+  Würfelt ein Charakter eine 1, zählt der Wurf als zwei Fehlschläge. Würfelt er
+  eine 20, erhält er sofort einen Lebenspunkt dazu und ist nicht mehr bewustlos.
 </div>

src/app/journal/journal-stats/info-row/initiative/initiative-details/initiative-details.component.html

@@ -1,15 +1,10 @@
-<div class="details-title">Initiative</div>
+<div class="title">Initiative</div>
 
-<div class="details-content">
+<div class="content">
   Der Initiativebonus wird verwendet, um die Initiative des aktuellen Kampfes
   oder einer zeitkritischen Situation zu bestimmen. Jeder Charakter wirft einen
   W20 und addiert seinen Initiativebonus. Der Charakter mit dem höchsten
   Ergebnis darf zuerst agieren.
 </div>
 
-<div class="details-value-container">
-  <div class="details-value" style="margin-top: 1.5rem">
-    {{ initiative }}
-  </div>
-  <div class="details-label">Wert</div>
-</div>
+<value-box [value]="initiative" [label]="'Wert'"></value-box>

src/app/journal/journal-stats/info-row/movement/movement-details/movement-details.component.html

@@ -1,7 +1,7 @@
-<div class="details-title">Bewegung</div>
+<div class="title">Bewegung</div>
 
-<h4>Laufen</h4>
-<div class="details-content">
+<div class="heading left">Laufen</div>
+<div class="content t-05">
   Die Bewegungsrate gibt an, wie weit ein Charakter pro Runde laufen kann. Die
   Bewegungsrate wird in Fuß angegeben, wobei 5 Fuß 1,5 Metern und somit einem
   Feld entsprechen. Die Bewegung kann an einem Stück verwendet werden, oder in
@@ -9,38 +9,19 @@
   Bewegungsrate.
 </div>
 
-<div class="details-value-container">
-  <div>
-    <div class="details-value" style="margin-top: 1.5rem">
-      {{ movement }}
-    </div>
-    <div class="details-label">Fuß</div>
-  </div>
-  <div>
-    <div class="details-value" style="margin-top: 1.5rem">
-      {{ movement / 5 }}
-    </div>
-    <div class="details-label">Felder</div>
-  </div>
+<div class="value-row">
+  <value-box [value]="movement" [label]="'Fuß'"></value-box>
+  <value-box [value]="movement / 5" [label]="'Felder'"></value-box>
 </div>
 
-<h4>Springen</h4>
-Ein Charakter kann basierend auf seiner Stärke springen. Wenn man sich vor dem
-Sprung 10 Fuß (3 Meter) bewegt hat, kann man die doppelte Distanz springen.
-
-<div class="details-value-container">
-  <div>
-    <div class="details-value" style="margin-top: 1.5rem">
-      {{ strength / 2 }}
-    </div>
-    <div class="details-label">Fuß</div>
-  </div>
-  <div>
-    <div class="details-value" style="margin-top: 1.5rem">
-      {{ strength / 2 / 5 }}
-    </div>
-    <div class="details-label">Felder</div>
-  </div>
+<div class="heading left">Springen</div>
+<div class="content t-05">
+  Ein Charakter kann basierend auf seiner Stärke springen. Wenn man sich vor dem
+  Sprung 10 Fuß (2 Felder) bewegt hat, kann man die doppelte Distanz springen.
+</div>
+<div class="value-row">
+  <value-box [value]="strength / 2" [label]="'Fuß'"></value-box>
+  <value-box [value]="strength / 10" [label]="'Felder'"></value-box>
 </div>
 
 <mat-expansion-panel>

src/app/journal/journal-stats/info-row/movement/movement-details/movement-details.component.scss

@@ -10,14 +10,14 @@ td {
     margin-left: 1rem;
 }
 
-.details-value-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
-    align-items: center;
-    // margin-bottom: 1.5rem;
-    margin-top: 0.5rem;
-}
+// .details-value-container {
+//     display: flex;
+//     flex-direction: row;
+//     justify-content: space-around;
+//     align-items: center;
+//     // margin-bottom: 1.5rem;
+//     margin-top: 0.5rem;
+// }
 h4 {
     margin-top: 1rem;
 }

src/app/journal/journal-stats/info-row/proficiency/proficiency-details/proficiency-details.component.html

@@ -1,14 +1,9 @@
-<div class="details-title">Übungsbonus</div>
+<div class="title">Übungsbonus</div>
 
-<div class="details-content">
+<div class="content">
   Der Übungsbonus wird auf alle Rettungs-, Angriffs- und Fertigkeitswürfe
   addiert, in denen ein Spieler geübt ist. Der Übungsbonus steigt mit der
   Charakterstufe.
 </div>
 
-<div class="details-value-container">
-  <div class="details-value" style="margin-top: 1.5rem">
-    {{ proficiency }}
-  </div>
-  <div class="details-label">Wert</div>
-</div>
+<value-box [value]="proficiency" [label]="'Wert'"></value-box>

src/styles.scss

@@ -316,6 +316,12 @@ input[type="checkbox"] {
     margin-bottom: 1.5rem;
 }
 
+.value-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+}
+
 // .details-title {
 //     text-align: center;
 //     font-size: 2rem;