chaarcter overview is fully functional

.nx/cache/d/daemon.log

@@ -461762,3 +461762,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] - 2023-12-19T07:59:25.239Z - Time taken for 'hash changed files from watcher' 28.08399999141693ms
 [NX Daemon Server] - 2023-12-19T07:59:25.240Z - Done responding to the client null
+[NX Daemon Server] - 2023-12-19T20:03:43.363Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2023-12-19T20:03:43.372Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2023-12-19T20:03:43.374Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-12-19T20:03:43.375Z - Established a connection. Number of open connections: 2
+[NX Daemon Server] - 2023-12-19T20:03:43.378Z - Closed a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-12-19T20:03:43.381Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-12-19T20:03:44.296Z - 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-12-19T20:03:44.296Z - [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] - 2023-12-19T20:03:44.297Z - Time taken for 'hash changed files from watcher' 15.42689996957779ms
+[NX Daemon Server] - 2023-12-19T20:03:44.298Z - Done responding to the client null

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

@@ -1 +1 @@
-{"processId":2836}
+{"processId":8916}

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

@@ -34,16 +34,12 @@ export class CharacterCreatorComponent {
       this.dataAccessor.addData(
         this.characterName,
         {
-          name: this.characterName,
           class: '',
-          race: '',
-          level: '',
           subclass: '',
-          proficiency: '',
+          race: '',
           background: '',
-          experience: '',
-          inspiration: '',
-          proficiencyBonus: '',
+          level: 1,
+          experience: 0,
         },
         'characterData'
       ),
@@ -188,17 +184,6 @@ export class CharacterCreatorComponent {
         },
         'appearance'
       ),
-      // Character Personality
-      this.dataAccessor.addData(
-        this.characterName,
-        {
-          personalityTraits: '',
-          ideals: '',
-          bonds: '',
-          flaws: '',
-        },
-        'personality'
-      ),
       // Weapons
       this.dataAccessor.addData(
         this.characterName,
@@ -207,7 +192,7 @@ export class CharacterCreatorComponent {
         },
         'favoriteWeapons'
       ),
-      // Inventory
+      // WEAPONS AND ARMOR
       this.dataAccessor.addData(
         this.characterName,
         {
@@ -215,6 +200,7 @@ export class CharacterCreatorComponent {
         },
         'weaponsAndArmor'
       ),
+      // MISCELLANEOUS
       this.dataAccessor.addData(
         this.characterName,
         {
@@ -222,6 +208,7 @@ export class CharacterCreatorComponent {
         },
         'miscellaneous'
       ),
+      // CONSUMABLES
       this.dataAccessor.addData(
         this.characterName,
         {
@@ -229,13 +216,7 @@ export class CharacterCreatorComponent {
         },
         'consumables'
       ),
-      this.dataAccessor.addData(
-        this.characterName,
-        {
-          data: [],
-        },
-        'money'
-      ),
+      // MONEY
       this.dataAccessor.addData(
         this.characterName,
         {
@@ -247,6 +228,7 @@ export class CharacterCreatorComponent {
         },
         'money'
       ),
+      // FOOD
       this.dataAccessor.addData(
         this.characterName,
         {

src/app/journal/journal-character/general/general.component.html

@@ -0,0 +1,114 @@
+<div class="general-container">
+  <div class="image-container">
+    <img src="assets/images/tel.jpg" alt="character" />
+  </div>
+  <div class="looks">
+    <div class="looks-entry">
+      <div class="looks-label">Geschlecht</div>
+      <input
+        type="text"
+        class="looks-input"
+        [(ngModel)]="characterData.gender"
+        (change)="updateCharacterData()"
+      />
+    </div>
+    <div class="looks-entry">
+      <div class="looks-label">Alter</div>
+      <input
+        type="text"
+        class="looks-input"
+        [(ngModel)]="characterData.age"
+        (change)="updateCharacterData()"
+      />
+    </div>
+    <div class="looks-entry">
+      <div class="looks-label">Größe</div>
+      <input
+        type="text"
+        class="looks-input"
+        [(ngModel)]="characterData.height"
+        (change)="updateCharacterData()"
+      />
+    </div>
+    <div class="looks-entry">
+      <div class="looks-label">Gewicht</div>
+      <input
+        type="text"
+        class="looks-input"
+        [(ngModel)]="characterData.weight"
+        (change)="updateCharacterData()"
+      />
+    </div>
+    <div class="looks-entry">
+      <div class="looks-label">Haarfarbe</div>
+      <input
+        type="text"
+        class="looks-input"
+        [(ngModel)]="characterData.hair"
+        (change)="updateCharacterData()"
+      />
+    </div>
+    <div class="looks-entry">
+      <div class="looks-label">Augenfarbe</div>
+      <input
+        type="text"
+        class="looks-input"
+        [(ngModel)]="characterData.eyes"
+        (change)="updateCharacterData()"
+      />
+    </div>
+    <div class="looks-entry">
+      <div class="looks-label">Hautfarbe</div>
+      <input
+        type="text"
+        class="looks-input"
+        [(ngModel)]="characterData.skin"
+        (change)="updateCharacterData()"
+      />
+    </div>
+  </div>
+
+  <div class="description">
+    <textarea
+      class="description-area"
+      [(ngModel)]="characterData.description"
+      (change)="updateCharacterData()"
+    ></textarea>
+    <label class="description-label">Beschreibung</label>
+  </div>
+
+  <div class="personality">
+    <div class="personality-box">
+      <textarea
+        class="personality-area"
+        [(ngModel)]="characterData.personalityTraits"
+        (change)="updateCharacterData()"
+      ></textarea>
+      <label class="personality-label">Persönlichkeitsmerkmale</label>
+    </div>
+    <div class="personality-box">
+      <textarea
+        class="personality-area"
+        [(ngModel)]="characterData.ideals"
+        (change)="updateCharacterData()"
+      ></textarea>
+      <label class="personality-label">Ideale</label>
+    </div>
+    <div class="personality-box">
+      <textarea
+        class="personality-area"
+        [(ngModel)]="characterData.bonds"
+        (change)="updateCharacterData()"
+      ></textarea>
+      <label class="personality-label">Bindungen</label>
+    </div>
+    <div class="personality-box">
+      <textarea
+        class="personality-area"
+        [(ngModel)]="characterData.flaws"
+        (change)="updateCharacterData()"
+      ></textarea>
+      <label class="personality-label">Makel</label>
+    </div>
+  </div>
+</div>

src/app/journal/journal-character/general/general.component.scss

@@ -0,0 +1,97 @@
+.general-container {
+    height: 100%;
+    display: grid;
+    grid-template-columns: repeat(20, 1fr);
+    grid-template-rows: repeat(20, 1fr);
+}
+
+.image-container {
+    grid-column: 1 / 8;
+    grid-row: 1 / 12;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    img {
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: cover;
+        border-radius: 10px;
+    }
+}
+
+.looks {
+    padding: 0 2rem;
+    grid-column: 8 / 14;
+    grid-row: 1 / 12;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    .looks-entry {
+        display: flex;
+        justify-content: space-between;
+
+        .looks-input {
+            border-radius: 4px;
+            border: 1px solid var(--border-color);
+            box-shadow: var(--shadow);
+            padding-left: 1rem;
+        }
+    }
+}
+
+.description {
+    grid-column: 14 / 21;
+    grid-row: 1 / 12;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+
+    .description-area {
+        width: 75%;
+        height: 75%;
+        border: 1px solid var(--border-color);
+        border-radius: 10px;
+        box-shadow: var(--shadow);
+        resize: none;
+        padding: 1rem;
+    }
+
+    .description-label {
+        font-weight: 500;
+    }
+}
+
+.personality {
+    grid-column: 1 / 21;
+    grid-row: 13 / 21;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+
+    .personality-box {
+        width: 25%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.75rem;
+        margin-top: 1rem;
+
+        .personality-area {
+            width: 85%;
+            height: 70%;
+            border: 1px solid var(--border-color);
+            border-radius: 10px;
+            box-shadow: var(--shadow);
+            resize: none;
+            padding: 1rem;
+        }
+
+        .personality-label {
+            font-weight: 500;
+        }
+    }
+}

src/app/journal/journal-character/general/general.component.spec.ts

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

src/app/journal/journal-character/general/general.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { DataService } from 'src/services/data/data.service';
+
+@Component({
+  selector: 'general',
+  templateUrl: './general.component.html',
+  styleUrl: './general.component.scss',
+})
+export class GeneralComponent {
+  public characterData: any = {};
+
+  public constructor(public dataAccessor: DataService) {}
+
+  ngOnInit(): void {
+    this.characterData = this.dataAccessor.appearance;
+  }
+
+  public updateCharacterData(): void {
+    this.dataAccessor.appearance = this.characterData;
+  }
+}

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

@@ -1,15 +1,75 @@
-<div
-  style="
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-  "
->
-  <img
-    style="height: 100%"
-    src="assets/images/character_coming_soon.jpeg"
-    alt=""
-  />
+<div class="header">
+  <div class="header-data">
+    <input type="number" />
+    <div class="horizontal-ruler"></div>
+    Stufe
+  </div>
+  <div class="name">Tel´Var</div>
+  <div class="header-data">
+    <input type="number" />
+    <div class="horizontal-ruler"></div>
+    Erfahrungspunkte
+  </div>
+</div>
+<div class="character-body">
+  <div class="d-flex">
+    <div
+      ngbNav
+      #nav="ngbNav"
+      [(activeId)]="activeTab"
+      class="flex-column navigation-bar"
+      orientation="vertical"
+    >
+      <ng-container ngbNavItem="general">
+        <button ngbNavLink>Allgemeines</button>
+        <ng-template ngbNavContent>
+          <general></general>
+        </ng-template>
+      </ng-container>
+      <ng-container ngbNavItem="species">
+        <button ngbNavLink>Volk</button>
+        <ng-template ngbNavContent>
+          <!-- <species></species> -->
+          species works!
+        </ng-template>
+      </ng-container>
+      <ng-container ngbNavItem="class">
+        <button ngbNavLink>Klasse</button>
+        <ng-template ngbNavContent>
+          <!-- <class></class> -->
+          class works!
+        </ng-template>
+      </ng-container>
+      <ng-container ngbNavItem="subclass">
+        <button ngbNavLink>Unterklasse</button>
+        <ng-template ngbNavContent>
+          <!-- <class></class> -->
+          subclass works!
+        </ng-template>
+      </ng-container>
+      <ng-container ngbNavItem="combined">
+        <button ngbNavLink>Kombinierte Ansicht</button>
+        <ng-template ngbNavContent>
+          <!-- <class></class> -->
+          combined works!
+        </ng-template>
+      </ng-container>
+      <ng-container ngbNavItem="background">
+        <button ngbNavLink>Hintergrund</button>
+        <ng-template ngbNavContent>
+          <!-- <class></class> -->
+          background works!
+        </ng-template>
+      </ng-container>
+      <ng-container ngbNavItem="stroy">
+        <button ngbNavLink>Geschichte</button>
+        <ng-template ngbNavContent>
+          <!-- <class></class> -->
+          story works!
+        </ng-template>
+      </ng-container>
+    </div>
+
+    <div [ngbNavOutlet]="nav" class="outlet"></div>
+  </div>
 </div>

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

@@ -0,0 +1,101 @@
+.header {
+    display: flex;
+    justify-content: space-between;
+    height: 6.5rem;
+    background-color: var(--header);
+    box-shadow: var(--shadow);
+
+    .header-data {
+        margin: 0 5rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+
+        input {
+            width: 6rem;
+            border: none;
+            background: none;
+            font-size: 1.75rem;
+            font-weight: 600;
+            text-align: center;
+        }
+
+        input[type="number"]::-webkit-inner-spin-button,
+        input[type="number"]::-webkit-outer-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+        input[type="number"] {
+            -moz-appearance: textfield;
+        }
+    }
+
+    .name {
+        text-align: center;
+        font-size: 3em;
+        font-weight: bold;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+    }
+
+    .horizontal-ruler {
+        width: 8rem;
+        height: 1px;
+        border-top: 1px solid var(--border-color);
+    }
+}
+
+.character-body {
+    height: calc(100% - 11.5rem);
+
+    .navigation-bar {
+        padding-top: 1.5rem;
+        gap: 2rem;
+        box-shadow: var(--shadow);
+        height: calc(100% + 20rem);
+        align-items: center;
+
+        .nav-link {
+            // width: 80%;
+            // background-color: var(--button-color);
+            // border-radius: 10px;
+            // border: 1px solid var(--border-color);
+            // box-shadow: var(--shadow);
+
+            width: 90%;
+            border-radius: 10px;
+            transition: all 0.25s ease-in-out;
+            font-size: 1.25rem;
+            font-weight: 600;
+            color: var(--text);
+
+            &:hover {
+                background-color: var(--button-color-hover);
+                box-shadow: var(--shadow-hover);
+            }
+
+            &.active {
+                background-color: var(--button-color-hover);
+                box-shadow: var(--shadow-hover);
+            }
+        }
+    }
+
+    .outlet {
+        margin: 2.5rem 1.5rem 0 1.5rem;
+        width: 100%;
+    }
+
+    .d-flex {
+        height: 100%;
+    }
+
+    ::ng-deep .tab-pane {
+        height: 100%;
+        width: 100%;
+    }
+}

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

@@ -3,8 +3,12 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-journal-character',
   templateUrl: './journal-character.component.html',
-  styleUrls: ['./journal-character.component.scss']
+  styleUrls: ['./journal-character.component.scss'],
 })
 export class JournalCharacterComponent {
+  public activeTab: string = 'general';
 
+  // public setActiveTab(tab: number): void {
+  //   this.activeTab = tab;
+  // }
 }

src/app/journal/journal.module.ts

@@ -11,6 +11,7 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatSelectModule } from '@angular/material/select';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatTabsModule } from '@angular/material/tabs';
 
 import { JournalRoutingModule } from './journal-routing.module';
 import { JournalHomeComponent } from './journal-home/journal-home.component';
@@ -84,6 +85,7 @@ import { FoodDetailsComponent } from './journal-inventory/food-details/food-deta
 import { TabBarComponent } from './journal-home/tab-bar/tab-bar.component';
 import { SpellcardComponent } from './journal-spellcards/spellcard/spellcard.component';
 import { AddCardComponent } from './journal-spellcards/add-card/add-card.component';
+import { GeneralComponent } from './journal-character/general/general.component';
 
 @NgModule({
   declarations: [
@@ -156,6 +158,7 @@ import { AddCardComponent } from './journal-spellcards/add-card/add-card.compone
     WeaponModalComponent,
     SpellcardComponent,
     AddCardComponent,
+    GeneralComponent,
   ],
   imports: [
     CommonModule,
@@ -170,6 +173,7 @@ import { AddCardComponent } from './journal-spellcards/add-card/add-card.compone
     MatSelectModule,
     MatInputModule,
     MatFormFieldModule,
+    MatTabsModule,
   ],
 })
 export class JournalModule {}

src/services/data/data.service.ts

@@ -20,7 +20,7 @@ export class DataService {
   public dataLoaded = false;
   public characterName: string = '';
 
-  constructor(private Router: Router) {
+  constructor() {
     this.db = new Localbase('DNDTools');
     // this.db.config.debug = false;
   }
@@ -53,7 +53,6 @@ export class DataService {
       kiPointsData,
       miscellaneousData,
       moneyData,
-      personalityData,
       proficienciesData,
       skillsData,
       spellLevel0,
@@ -71,6 +70,12 @@ export class DataService {
       weaponsAndArmorData,
     ] = currentCharacterData.map((entry: any) => entry.data);
 
+    // Character Data
+    this.characterData = characterData;
+
+    // Appearance
+    this.appearance = appearanceData;
+
     // Attributes
     Object.keys(attributesData).forEach((key: string) => {
       this.updateAttribute(attributesData[key]);
@@ -126,6 +131,52 @@ export class DataService {
 
   // #endregion
 
+  // #region # Character AND APPEARANCE DATA
+
+  private _appearance: any = {
+    personalityTraits: '',
+    ideals: '',
+    bonds: '',
+    flaws: '',
+    gender: '',
+    age: 0,
+    height: '',
+    weight: '',
+    eyes: '',
+    skin: '',
+    hair: '',
+    description: '',
+  };
+
+  public get appearance(): any {
+    return this._appearance;
+  }
+
+  public set appearance(newValue: any) {
+    this._appearance = newValue;
+    this.setData('appearance', newValue);
+  }
+
+  private _characterData: any = {
+    class: '',
+    subclass: '',
+    race: '',
+    background: '',
+    level: 1,
+    experience: 0,
+  };
+
+  public get characterData(): any {
+    return this._characterData;
+  }
+
+  public set characterData(newValue: any) {
+    this._characterData = newValue;
+    this.setData('characterData', newValue);
+  }
+
+  // #endregion
+
   // #region # SPELLS
 
   private _favoriteSpells: Spell[] = [];
@@ -271,7 +322,7 @@ export class DataService {
 
   // #endregion
 
-  // #region ABILITIES
+  // #region # ABILITIES
 
   private _abilities: Ability[] = [];
 

src/styles.scss

@@ -5,7 +5,7 @@
 @import "bootstrap/scss/bootstrap";
 
 :root {
-    // COLORS
+    // COLORS to use but not official
     --primary-color: #d8ac96;
     --primary-color-light: #e8c7b5;
     --primary-color-dark: #d89777;
@@ -25,6 +25,15 @@
 
     --border-color: #8d8c8c;
 
+    --modal-background: antiquewhite;
+
+    --button-color: #efc8af;
+    --button-color-hover: #e7b295;
+
+    --header: #ffdec6;
+
+    --text: #000000;
+
     // OFFICIAL COLORS
     --accept: #84a36f;
     --accept-hover: #6f9158;
@@ -33,14 +42,15 @@
     --edit: #86a5b7;
     --edit-hover: #6f8e9f;
 
-    --modal-background: antiquewhite;
-
     // shadows
     --shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
+    --shadow-hover: 0px 5px 10px 0px rgba(0, 0, 0, 0.7);
     --shadow-small: 4px 4px 10px 4px rgba(0, 0, 0, 0.2);
     --shadow-medium: 4px 4px 10px 6px rgba(0, 0, 0, 0.2);
     --shadow-large: 4px 4px 10px 8px rgba(0, 0, 0, 0.2);
 
+    // MIXINS
+
     @mixin field-styling {
         border: solid 1px var(--border-color);
         background-color: var(--field-background-color);
@@ -48,6 +58,12 @@
         border-radius: 10px;
     }
 
+    @mixin button-styling {
+        border: solid 1px var(--border-color);
+        box-shadow: var(--shadow);
+        border-radius: 10px;
+    }
+
     //
     .responsive-small {
         display: none;