started working on the attributes panel

.nx/cache/d/daemon.log

@@ -459329,3 +459329,40 @@ To fix this, set a unique name for each project in a project.json inside the pro
 [NX Daemon Server] - 2023-11-15T09:58:46.405Z - Time taken for 'hash changed files from watcher' 103.82279999926686ms
 [NX Daemon Server] - 2023-11-15T09:58:46.405Z - [WATCHER]: Processing file changes in outputs
 [NX Daemon Server] - 2023-11-15T09:58:46.405Z - Done responding to the client null
+[NX Daemon Server] - 2023-11-15T19:07:18.257Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\b99a3e5445b3962b8dd8\d.sock
+[NX Daemon Server] - 2023-11-15T19:07:18.260Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools (native)
+[NX Daemon Server] - 2023-11-15T19:07:18.271Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-15T19:07:18.273Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2023-11-15T19:07:18.274Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-15T19:07:18.275Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-11-15T19:07:18.407Z - 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] - 2023-11-15T19:07:18.407Z - [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:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\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:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2023-11-15T19:07:18.409Z - Time taken for 'hash changed files from watcher' 46.08940000087023ms
+[NX Daemon Server] - 2023-11-15T19:07:18.409Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-11-15T19:07:18.409Z - Done responding to the client null

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

@@ -1 +1 @@
-{"processId":18412}
+{"processId":19368}

project.json

@@ -8,7 +8,7 @@
     }
   },
   "sourceRoot": "src",
-  "prefix": "app",
+  "prefix": "",
   "targets": {
     "build": {
       "executor": "@angular-devkit/build-angular:browser",

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

@@ -0,0 +1 @@
+<p>attribute-panel works!</p>

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

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AttributePanelComponent } from './attribute-panel.component';
+
+describe('AttributePanelComponent', () => {
+  let component: AttributePanelComponent;
+  let fixture: ComponentFixture<AttributePanelComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AttributePanelComponent]
+    });
+    fixture = TestBed.createComponent(AttributePanelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'attribute-panel',
+  templateUrl: './attribute-panel.component.html',
+  styleUrls: ['./attribute-panel.component.scss'],
+})
+export class AttributePanelComponent {}

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

@@ -1,4 +1,4 @@
-<div class="attribute-skill-container">
+<!-- <div class="attribute-skill-container">
   <app-attribute-field
     [attributeName]="attributeObject.name"
   ></app-attribute-field>
@@ -8,4 +8,9 @@
       <app-skill-field [skillName]="skill"></app-skill-field>
     </ng-container>
   </div>
+</div> -->
+
+<div class="attribute-skill-container">
+  <attribute-panel></attribute-panel>
+  <skill-panel></skill-panel>
 </div>

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

@@ -1,13 +1,17 @@
 .attribute-skill-container{
     display: flex;
     flex-direction: row;
+    justify-content: space-between;
     border: solid 1px black;;
 
-    app-attribute-field{
-        width: 35%
+    attribute-panel{
+        width: 35%;
+        height: 50vh;
+        border: solid 1px green;
     }
 
-    .skills-container{
-        width: 62%;
+    skill-panel{
+        width: 60%;
+        border: solid 1px cyan;
     }
 }

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

@@ -1,7 +1,7 @@
 import { Component, Input } from '@angular/core';
 
 @Component({
-  selector: 'app-attribute-skill-container',
+  selector: 'attribute-skill-container',
   templateUrl: './attribute-skill-container.component.html',
   styleUrls: ['./attribute-skill-container.component.scss'],
 })

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

@@ -0,0 +1 @@
+<p>skill-panel works!</p>

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

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SkillPanelComponent } from './skill-panel.component';
+
+describe('SkillPanelComponent', () => {
+  let component: SkillPanelComponent;
+  let fixture: ComponentFixture<SkillPanelComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SkillPanelComponent]
+    });
+    fixture = TestBed.createComponent(SkillPanelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'skill-panel',
+  templateUrl: './skill-panel.component.html',
+  styleUrls: ['./skill-panel.component.scss'],
+})
+export class SkillPanelComponent {}

src/app/journal/journal-stats/journal-stats.component.html

@@ -2,18 +2,17 @@
   <div class="name-container">Eliane Langwasser</div>
 
   <div class="stats-container">
-    <div class="attribute-skill-container" style="width: 20vw">
-      <ng-container *ngFor="let attribute of attributes">
-        <app-attribute-skill-container
-          [attributeObject]="attribute"
-        ></app-attribute-skill-container>
-      </ng-container>
-    </div>
+    <!-- Attribute and skill container -->
+
+    <attribute-skill-container></attribute-skill-container>
 
-    <div class="life-weapon-container" style="width: 35vw">
+    <!-- Life and Weapon Container -->
+    <div class="life-weapon-container">
       <app-life-container></app-life-container>
       <app-weapons-container></app-weapons-container>
     </div>
-    <ability-panel style="width: 35vw"></ability-panel>
+
+    <!-- Ability Panel -->
+    <ability-panel></ability-panel>
   </div>
 </div>

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

@@ -2,6 +2,7 @@
     display: flex;
     flex-direction: column;
     width: 100vw;
+    height: 100vh;
     gap: 2rem;
 
     .name-container{
@@ -21,54 +22,78 @@
 .stats-container{
     display: flex;
     flex-direction: row;
-    width: 100vw;
-    gap: 2rem;
+    justify-content: space-between;
+    width: 96%;
+    margin: 0 2rem 0 2rem;
+
     border: 1px solid #882121;
-    border-radius: 5px;
+}
 
-    .attribute-skill-container{
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-        width: 25%;
-        padding: 10px;
-        border: 1px solid #8d8c8c;
-        border-radius: 5px;
+attribute-skill-container{
+    width: 25%;
+}
 
-        .aatribute-skill-box{
-            display: flex;
-            flex-direction: row;
-            // gap: 0.5rem;
-            width: 100%;
-            border: 1px solid #8d8c8c;
-            border-radius: 5px;
-        }
-    }
+.life-weapon-container{
+    width: 35%;
+}
 
-    .save-skill-container{
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-        width: 20%;
-        border: 1px solid #8d8c8c;
-        border-radius: 5px;
-    }
+ability-panel{
+    width: 35%;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//     .attribute-skill-container{
+//         display: flex;
+//         flex-direction: column;
+//         gap: 1rem;
+//         width: 25%;
+//         padding: 10px;
+//         border: 1px solid #8d8c8c;
+//         border-radius: 5px;
+
+//         .aatribute-skill-box{
+//             display: flex;
+//             flex-direction: row;
+//             // gap: 0.5rem;
+//             width: 100%;
+//             border: 1px solid #8d8c8c;
+//             border-radius: 5px;
+//         }
+//     }
+
+//     .save-skill-container{
+//         display: flex;
+//         flex-direction: column;
+//         gap: 0.5rem;
+//         width: 20%;
+//         border: 1px solid #8d8c8c;
+//         border-radius: 5px;
+//     }
     
-    .life-weapon-container{
-        display:flex;
-        flex-direction: column;
-        width: 30vw;
-        gap: 2rem;
-        border: 1px solid #8d8c8c;
-        border-radius: 5px;
-    }
+//     .life-weapon-container{
+//         border: 1px solid #8d8c8c;
+//         border-radius: 5px;
+//     }
 
-    .platzhalter{
-        width: 30vw;
-        height: 80vh;
-        border: 1px solid #8d8c8c;
-        border-radius: 5px;
-    }
-}
+//     .platzhalter{
+//         width: 30vw;
+//         height: 80vh;
+//         border: 1px solid #8d8c8c;
+//         border-radius: 5px;
+//     }
+// }
 
 

src/app/journal/journal.module.ts

@@ -51,6 +51,8 @@ import { AbilityDetailsComponent } from './journal-stats/ability-panel/ability-t
 import { LifeDetailsComponent } from './journal-stats/life-container/life/life-details/life-details.component';
 import { WeaponDetailsComponent } from './journal-stats/weapons-container/weapon-table/weapon-details/weapon-details.component';
 import { SpellDetailsComponent } from './journal-stats/weapons-container/spell-table/spell-details/spell-details.component';
+import { AttributePanelComponent } from './journal-stats/attribute-skill-container/attribute-panel/attribute-panel.component';
+import { SkillPanelComponent } from './journal-stats/attribute-skill-container/skill-panel/skill-panel.component';
 
 @NgModule({
   declarations: [
@@ -96,6 +98,8 @@ import { SpellDetailsComponent } from './journal-stats/weapons-container/spell-t
     LifeDetailsComponent,
     WeaponDetailsComponent,
     SpellDetailsComponent,
+    AttributePanelComponent,
+    SkillPanelComponent,
   ],
   imports: [
     CommonModule,