Next: rearrange character general

.nx/cache/d/daemon.log

@@ -462122,3 +462122,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-01-08T07:10:38.189Z - Time taken for 'hash changed files from watcher' 1.509899616241455ms
 [NX Daemon Server] - 2024-01-08T07:10:38.190Z - Done responding to the client null
+[NX Daemon Server] - 2024-01-09T09:03:38.264Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-01-09T09:03:38.267Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-01-09T09:03:38.278Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-01-09T09:03:38.279Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2024-01-09T09:03:38.280Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-01-09T09:03:38.281Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-01-09T09:03:38.949Z - 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-01-09T09:03:38.949Z - [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-01-09T09:03:38.951Z - Time taken for 'hash changed files from watcher' 15.533100128173828ms
+[NX Daemon Server] - 2024-01-09T09:03:38.951Z - Done responding to the client null

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

@@ -1 +1 @@
-{"processId":9652}
+{"processId":15032}

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

@@ -118,6 +118,14 @@ export class CharacterCreatorComponent {
         },
         'characterData'
       ),
+      // Character Image
+      this.dataAccessor.addData(
+        this.characterName,
+        {
+          value: undefined,
+        },
+        'image'
+      ),
       // Character Attributes
       this.dataAccessor.addData(
         this.characterName,
@@ -245,20 +253,6 @@ export class CharacterCreatorComponent {
         },
         'kiPoints'
       ),
-
-      // Character Appearance
-      this.dataAccessor.addData(
-        this.characterName,
-        {
-          age: '',
-          height: '',
-          weight: '',
-          eyes: '',
-          skin: '',
-          hair: '',
-        },
-        'appearance'
-      ),
       // Weapons
       this.dataAccessor.addData(
         this.characterName,

src/app/character/character-picker/character-card/character-card.component.html

@@ -10,7 +10,9 @@
     />
   </div>
   <!-- The characterData is not loaded initially, so this is a workaround. Maybe add a resolver first -->
-  @if(characterData.gender){
+  @if(image){
+  <img [src]="image" alt="portrait" />
+  } @else {
   <img
     [src]="'assets/images/' + characterData.gender + '.jpg'"
     alt="character"

src/app/character/character-picker/character-card/character-card.component.ts

@@ -11,6 +11,7 @@ export class CharacterCardComponent {
   @Output() delete: EventEmitter<string> = new EventEmitter<string>();
   @Output() select: EventEmitter<string> = new EventEmitter<string>();
   public characterData: any = {};
+  public image: any;
 
   constructor(private dataAccessor: DataService) {}
 
@@ -19,17 +20,17 @@ export class CharacterCardComponent {
       .getData(this.character, 'characterData')
       .then((characterData: any) => {
         this.characterData = characterData;
-        console.log(this.characterData);
       });
+    this.dataAccessor.getData(this.character, 'image').then((image: any) => {
+      this.image = image.value;
+    });
   }
 
   public deleteCharacter(): void {
     this.delete.emit();
-    // console.warn('Delete character: ' + this.character);
   }
 
   public selectCharacter(): void {
     this.select.emit();
-    // console.warn('Select character: ' + this.character);
   }
 }

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

@@ -14,6 +14,7 @@ export class CharacterPickerComponent {
   private modalService = inject(NgbModal);
 
   public constructor(public dataService: DataService, private Router: Router) {
+    this.dataService.dataLoaded = false;
     this.dataService.getCollection('characters').then((characters: any) => {
       this.characters = characters;
     });

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

@@ -1,6 +1,23 @@
 <div class="general-container">
-  <div class="image-container">
-    <img src="assets/images/tel.jpg" alt="character" />
+  <div class="image-container" (click)="onPortraitClicked()">
+    <input
+      id="fileInput"
+      class="upload-input"
+      type="file"
+      (change)="onImageUpload($event)"
+    />
+    <img
+      class="portrait"
+      *ngIf="image"
+      [src]="image"
+      alt="portrait"
+      (click)="onPortraitClicked()"
+    />
+    <img
+      class="upload-icon"
+      src="assets/icons/UIIcons/upload.svg"
+      alt="upload"
+    />
   </div>
   <div class="looks">
     <div class="looks-entry">

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

@@ -8,15 +8,45 @@
 .image-container {
     grid-column: 1 / 8;
     grid-row: 1 / 12;
+    position: relative;
+    cursor: pointer;
+    &:hover {
+        .upload-icon {
+            opacity: 1;
+        }
+        .portrait {
+            filter: brightness(0.8);
+        }
+    }
 
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    img {
-        max-width: 100%;
-        max-height: 100%;
+    .portrait {
+        width: 24rem;
+        height: 24rem;
         object-fit: cover;
         border-radius: 10px;
+        box-shadow: var(--shadow);
+        transition: all 0.2s ease-in-out;
+    }
+
+    .upload-icon {
+        position: absolute;
+        opacity: 0;
+        left: 12rem;
+        top: 12rem;
+        width: 3rem;
+        height: 3rem;
+        transform: translate(-50%, -50%);
+        transition: all 0.2s ease-in-out;
+        background-color: #b7b7b763;
+        border-radius: 10px;
+    }
+
+    .upload-input {
+        width: 0rem;
+        height: 0rem;
+        position: absolute;
+        top: 0;
+        left: 0;
     }
 }
 
@@ -51,7 +81,7 @@
 
     .description-area {
         width: 75%;
-        height: 75%;
+        height: 90%;
         border: 1px solid var(--border-color);
         border-radius: 10px;
         box-shadow: var(--shadow);

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

@@ -7,21 +7,31 @@ import { DataService } from 'src/services/data/data.service';
   styleUrl: './general.component.scss',
 })
 export class GeneralComponent {
-  // public appearance: any = {};
-  public data: any = {};
+  public data: any;
+  public image: any;
 
   public constructor(public dataAccessor: DataService) {}
 
   ngOnInit(): void {
-    // this.appearance = this.dataAccessor.appearance;
     this.data = this.dataAccessor.characterData;
+    this.image = this.dataAccessor.image.value;
   }
 
-  // public updateAppearance(): void {
-  //   this.dataAccessor.appearance = this.appearance;
-  // }
-
   public updateData(): void {
     this.dataAccessor.characterData = this.data;
   }
+
+  public onImageUpload(event: any): void {
+    const file = event.target.files[0];
+    const reader = new FileReader();
+    reader.onload = () => {
+      this.image = reader.result;
+      this.dataAccessor.image = { value: reader.result };
+    };
+    reader.readAsDataURL(file);
+  }
+
+  public onPortraitClicked(): void {
+    document.getElementById('fileInput')?.click();
+  }
 }

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

@@ -1,12 +1,16 @@
 <div class="header">
   <div class="header-data">
-    <input type="number" />
+    <input type="number" [(ngModel)]="data.level" (change)="updateData()" />
     <div class="horizontal-ruler"></div>
     Stufe
   </div>
-  <div class="name">Tel´Var</div>
+  <div class="name">{{ name }}</div>
   <div class="header-data">
-    <input type="number" />
+    <input
+      type="number"
+      [(ngModel)]="data.experience"
+      (change)="updateData()"
+    />
     <div class="horizontal-ruler"></div>
     Erfahrungspunkte
   </div>

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

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { DataService } from 'src/services/data/data.service';
 
 @Component({
   selector: 'app-journal-character',
@@ -8,7 +9,16 @@ import { Component } from '@angular/core';
 export class JournalCharacterComponent {
   public activeTab: string = 'general';
 
-  // public setActiveTab(tab: number): void {
-  //   this.activeTab = tab;
-  // }
+  public data: any = {};
+  public name = sessionStorage.getItem('characterName');
+
+  public constructor(public dataAccessor: DataService) {}
+
+  ngOnInit(): void {
+    this.data = this.dataAccessor.characterData;
+  }
+
+  public updateData(): void {
+    this.dataAccessor.characterData = this.data;
+  }
 }

src/assets/icons/UIIcons/upload.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M440-320v-326L336-542l-56-58 200-200 200 200-56 58-104-104v326h-80ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"/></svg>

src/services/data/data.service.ts

@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core';
 import Localbase from 'localbase';
-import { Router } from '@angular/router';
 import { BehaviorSubject } from 'rxjs';
 import { Attribute } from 'src/interfaces/attribute';
 import { Skill } from 'src/interfaces/skill';
@@ -41,7 +40,6 @@ export class DataService {
   private buildCurrentCharacter(currentCharacterData: any): void {
     const [
       abilitiesData,
-      appearanceData,
       attributesData,
       characterData,
       combatStatsData,
@@ -50,6 +48,7 @@ export class DataService {
       favoriteWeaponsData,
       foodData,
       hitPointsData,
+      imageData,
       kiPointsData,
       miscellaneousData,
       moneyData,
@@ -73,8 +72,9 @@ export class DataService {
     // Character Data
     this.characterData = characterData;
 
-    // Appearance
-    this.appearance = appearanceData;
+    //Character Image
+
+    this.image = imageData;
 
     // Attributes
     Object.keys(attributesData).forEach((key: string) => {
@@ -131,30 +131,19 @@ 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: '',
+  // #region # Character and Image DATA
+
+  private _image: any = {
+    value: '',
   };
 
-  public get appearance(): any {
-    return this._appearance;
+  public get image(): any {
+    return this._image;
   }
 
-  public set appearance(newValue: any) {
-    this._appearance = newValue;
-    this.setData('appearance', newValue);
+  public set image(newValue: any) {
+    this._image = newValue;
+    this.setData('image', newValue);
   }
 
   private _characterData: any = {