stats panel finished

src/app/journal/journal-stats/attribute-skill-container/attribute-field/attribute-field.component.html

@@ -2,6 +2,7 @@
   <div>
     <label class="attribute-name">{{ attributeNames[attributeName] }}</label>
   </div>
+  <div class="attribute-modifier">{{ attributeModifier }}</div>
   <div>
     <input
       class="attribute-value"
@@ -9,13 +10,4 @@
       (change)="updateValue()"
     />
   </div>
-  <div class="modifier-container">
-    <label class="modifier">{{ attributeModifier }}</label>
-    <input
-      type="checkbox"
-      [(ngModel)]="attribute.proficiency"
-      (change)="updateValue()"
-    />
-    <label class="modifier">{{ saveModifier }}</label>
-  </div>
 </div>

src/app/journal/journal-stats/attribute-skill-container/attribute-field/attribute-field.component.scss

@@ -1,5 +1,6 @@
 .attribute-box{
     border: solid 1px black;
+    text-align: center;
 
     input{
         border: none;
@@ -8,25 +9,13 @@
         text-align: center;
         background-color: transparent;
         width: 100%;
-        font-size: 1.5rem;
+        font-size: 1.25rem;
         font-weight: 600;
     }
 
-    .modifier-container{
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        border: solid 1px black;
-
-        input{
-            width: 2rem;
-        }
-
-        .modifier{
-            width: 2rem;
-            text-align: center;
-            border: solid 1px black;
-        }
+    .attribute-modifier{
+        font-size: 2rem;
+        font-weight: 700;
     }
 }
         

src/app/journal/journal-stats/attribute-skill-container/attribute-field/attribute-field.component.ts

@@ -4,7 +4,7 @@ import { DataService } from 'src/services/data/data.service';
 import { Observable } from 'rxjs';
 
 @Component({
-  selector: 'app-attribute-field',
+  selector: 'attribute-field',
   templateUrl: './attribute-field.component.html',
   styleUrls: ['./attribute-field.component.scss'],
 })

src/app/journal/journal-stats/attribute-skill-container/attribute-panel/attribute-panel.component.html

@@ -1 +1,6 @@
-<p>attribute-panel works!</p>
+<div class="attribute-panel">
+  <attribute-field
+    *ngFor="let attribute of attributes"
+    [attributeName]="attribute"
+  ></attribute-field>
+</div>

src/app/journal/journal-stats/attribute-skill-container/attribute-panel/attribute-panel.component.scss

@@ -0,0 +1,5 @@
+.attribute-panel{
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}

src/app/journal/journal-stats/attribute-skill-container/attribute-panel/attribute-panel.component.ts

@@ -5,4 +5,13 @@ import { Component } from '@angular/core';
   templateUrl: './attribute-panel.component.html',
   styleUrls: ['./attribute-panel.component.scss'],
 })
-export class AttributePanelComponent {}
+export class AttributePanelComponent {
+  public attributes: any = [
+    'strength',
+    'dexterity',
+    'constitution',
+    'intelligence',
+    'wisdom',
+    'charisma',
+  ];
+}

src/app/journal/journal-stats/attribute-skill-container/attribute-skill-container.component.scss

@@ -6,7 +6,6 @@
 
     attribute-panel{
         width: 35%;
-        height: 50vh;
         border: solid 1px green;
     }