Updated the interface and data service. Creation and selection of characters is rudimentary finished.

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

@@ -3,21 +3,5 @@
     <label>Character Name</label>
     <input [(ngModel)]="characterName" />
   </div>
-  <div>
-    <label>Character Class</label>
-    <input [(ngModel)]="characterClass" />
-  </div>
-  <div>
-    <label>Chracter Race</label>
-    <input [(ngModel)]="characterRace" />
-  </div>
-  <div>
-    <label>Character Level</label>
-    <input [(ngModel)]="characterLevel" />
-  </div>
-  <div>
-    <label>Character Background</label>
-    <input [(ngModel)]="characterBackground" />
-  </div>
   <button (click)="createCharacter()">Create Character</button>
 </div>

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

@@ -13,22 +13,136 @@ export class CharacterCreatorComponent {
   public constructor(public dataService: DataService, private Router: Router) {}
 
   public characterName: string = '';
-  public characterClass: string = '';
-  public characterRace?: string = '';
-  public characterLevel: number = 1;
-  public characterBackground?: string = '';
 
   public createCharacter(): void {
-    const newCharacter: Character = {
-      name: this.characterName,
-      class: this.characterClass,
-      level: this.characterLevel,
-      race: this.characterRace,
-      background: this.characterBackground,
-    };
-    this.dataService.addData('characters', newCharacter);
+    this.dataService.addData('characters', { name: this.characterName });
     // TODO: Animation, dass der Character erstellt wurde
-    this.Router.navigate(['character/picker']);
-    // Collection erstellen
+    this.createNewCharacterInDatabase();
+    this.dataService.selectCharacter(this.characterName);
+  }
+
+  public createNewCharacterInDatabase(): void {
+    // TODO: Für alle Daten einen eigenen Key/Value Eintrag anlegen addData(collection: string, data: any, key?: string): void
+
+    // Character Daten
+    this.dataService.addData(
+      this.characterName,
+      {
+        name: this.characterName,
+        class: '',
+        race: '',
+        level: '',
+        subclass: '',
+        proficiency: '',
+        background: '',
+        experience: '',
+        inspiration: '',
+        proficiencyBonus: '',
+      },
+      'characterData'
+    );
+
+    // Character Attributes
+    this.dataService.addData(
+      this.characterName,
+      {
+        strength: ['', false],
+        dexterity: ['', false],
+        constitution: ['', false],
+        intelligence: ['', false],
+        wisdom: ['', false],
+        charisma: ['', false],
+      },
+      'attribute'
+    );
+
+    // Character Skills
+    this.dataService.addData(
+      this.characterName,
+      {
+        acrobatics: ['', false],
+        animalHandling: ['', false],
+        arcana: ['', false],
+        athletics: ['', false],
+        deception: ['', false],
+        history: ['', false],
+        insight: ['', false],
+        intimidation: ['', false],
+        investigation: ['', false],
+        medicine: ['', false],
+        nature: ['', false],
+        perception: ['', false],
+        performance: ['', false],
+        persuasion: ['', false],
+        religion: ['', false],
+        sleightOfHand: ['', false],
+        stealth: ['', false],
+        survival: ['', false],
+      },
+      'skill'
+    );
+    this.dataService.addData(
+      this.characterName,
+      {
+        armorClass: '',
+        initiative: '',
+        speed: '',
+        hitPointMaximum: '',
+        currentHitPoints: '',
+        temporaryHitPoints: '',
+        hitDice: '',
+        deathSaveSuccesses: '',
+        deathSaveFailures: '',
+      },
+      'combatStats'
+    );
+    this.dataService.addData(
+      this.characterName,
+      {
+        age: '',
+        height: '',
+        weight: '',
+        eyes: '',
+        skin: '',
+        hair: '',
+      },
+      'appearance'
+    );
+    this.dataService.addData(
+      this.characterName,
+      {
+        personalityTraits: '',
+        ideals: '',
+        bonds: '',
+        flaws: '',
+      },
+      'personality'
+    );
+    this.dataService.addData(
+      this.characterName,
+      {
+        name: '',
+        attackBonus: '',
+        damage: '',
+        type: '',
+        range: '',
+        description: '',
+      },
+      'weapons'
+    );
+
+    // Inventory
+
+    // Weapons
+
+    // Spells
+
+    // Notes
+
+    // Maps
+
+    // NPCs
+
+    // Quests
   }
 }

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

@@ -1,3 +1,3 @@
 <div class="character-card">
-  <div class="character-card__name">{{ character.name }}</div>
+  <div class="character-card__name">{{ character }}</div>
 </div>

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

@@ -7,5 +7,5 @@ import { Character } from 'src/interfaces/character';
   styleUrls: ['./character-card.component.scss'],
 })
 export class CharacterCardComponent {
-  @Input() character: Character = { name: '' };
+  @Input() character: string = '';
 }

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

@@ -10,26 +10,17 @@ import { Character } from 'src/interfaces/character';
 })
 export class CharacterPickerComponent {
   public constructor(public dataService: DataService, private Router: Router) {
-    console.log('before;', this.characters);
     this.getCharacters();
-    console.log('after: ', this.characters);
   }
 
-  public ngOnInit(): void {
-    console.log('init', this.characters);
-  }
-
-  public ngOnDestroy(): void {
-    console.log('destroy');
-  }
-
-  public characters: Character[] = [];
+  public characters: string[] = [];
   public index = 0;
 
   public getCharacters() {
     this.dataService.getCollection('characters').then((characters: any) => {
-      this.characters = characters;
-      console.log(this.characters);
+      characters.forEach((character: any) => {
+        this.characters.push(character.name);
+      });
     });
   }
 
@@ -37,7 +28,7 @@ export class CharacterPickerComponent {
     this.Router.navigate(['character/creator']);
   }
 
-  public selectCharacter(character: Character) {
+  public selectCharacter(character: string) {
     this.dataService.selectCharacter(character);
   }
 }

src/interfaces/character.ts

@@ -1,9 +1,74 @@
 export interface Character {
-  name: string;
-  class?: string;
-  level?: number;
-  race?: string;
-  background?: string;
-  subclass?: string;
-  imagePath?: string;
+  characterData: {
+    name: string;
+    race: string;
+    class: string;
+    subclass: string;
+    level: string;
+    background: string;
+    experience: string;
+    inspiration: string;
+    proficiencyBonus: string;
+  };
+  appearance: {
+    age: string;
+    height: string;
+    weight: string;
+    eyes: string;
+    skin: string;
+    hair: string;
+  };
+  attributes: {
+    strength: [string, boolean];
+    dexterity: [string, boolean];
+    constitution: [string, boolean];
+    intelligence: [string, boolean];
+    wisdom: [string, boolean];
+    charisma: [string, boolean];
+  };
+  skills: {
+    acrobatics: [string, boolean];
+    animalHandling: [string, boolean];
+    arcana: [string, boolean];
+    athletics: [string, boolean];
+    deception: [string, boolean];
+    history: [string, boolean];
+    insight: [string, boolean];
+    intimidation: [string, boolean];
+    investigation: [string, boolean];
+    medicine: [string, boolean];
+    nature: [string, boolean];
+    perception: [string, boolean];
+    performance: [string, boolean];
+    persuasion: [string, boolean];
+    religion: [string, boolean];
+    sleightOfHand: [string, boolean];
+    stealth: [string, boolean];
+    survival: [string, boolean];
+  };
+  combatStats: {
+    armorClass: string;
+    initiative: string;
+    speed: string;
+    hitPointMaximum: string;
+    currentHitPoints: string;
+    temporaryHitPoints: string;
+    hitDice: string;
+    deathSaveSuccesses: string;
+    deathSaveFailures: string;
+  };
+  weapons: {
+    name: string;
+    attackBonus: string;
+    damage: string;
+    damageType: string;
+    range: string;
+    description: string;
+  };
+  personality: {
+    personalityTraits: string;
+    ideals: string;
+    bonds: string;
+    flaws: string;
+  };
 }

src/services/data/data.service.ts

@@ -11,10 +11,10 @@ export class DataService {
 
   constructor(private Router: Router) {
     this.db = new Localbase('myDatabase');
+    // TODO: Fetch all data from database and write it to a character object
   }
 
-  public character: Character = { name: '' };
-  public characterData: any = {};
+  public character: any;
 
   public addData(collection: string, data: any, key?: string): void {
     if (key) {
@@ -24,24 +24,116 @@ export class DataService {
     }
   }
 
-  getData(collection: string, key: string) {
+  public getData(collection: string, key: string) {
     return this.db.collection(collection).doc(key).get();
   }
 
-  getCollection(collection: string) {
+  public getCollection(collection: string) {
     return this.db.collection(collection).get();
   }
 
-  public async selectCharacter(character: any) {
-    this.character = character;
-    await this.getCharacterData(character.name);
-    this.Router.navigate(['journal']);
+  public getCollectionWithKeys(collection: string) {
+    return this.db.collection(collection).get({ keys: true });
   }
 
-  public getCharacterData(characterName: string) {
-    this.getCollection(characterName).then((characterData: any) => {
-      this.characterData = characterData;
-      console.log(this.characterData);
-    });
+  public deleteCollection(collection: string) {
+    this.db.collection(collection).delete();
+  }
+
+  public async selectCharacter(character: string) {
+    // die durch character definierten daten in einer varibale laden
+    const characterData = await this.getCollectionWithKeys(character);
+    this.character = this.buildNewCharacter(characterData);
+    // this.Router.navigate(['journal']);
+    console.log('navigation zu journal');
+  }
+
+  private buildNewCharacter(currentCharacterData: any) {
+    console.log(currentCharacterData[0]);
+    console.log(currentCharacterData[0].data);
+    const appearance = {
+      age: currentCharacterData[0].data.age,
+      height: currentCharacterData[0].data.height,
+      weight: currentCharacterData[0].data.weight,
+      eyes: currentCharacterData[0].data.eyes,
+      skin: currentCharacterData[0].data.skin,
+      hair: currentCharacterData[0].data.hair,
+    };
+    const attributes = {
+      strength: currentCharacterData[1].data.strength,
+      dexterity: currentCharacterData[1].data.dexterity,
+      constitution: currentCharacterData[1].data.constitution,
+      intelligence: currentCharacterData[1].data.intelligence,
+      wisdom: currentCharacterData[1].data.wisdom,
+      charisma: currentCharacterData[1].data.charisma,
+    };
+    const characterData = {
+      name: currentCharacterData[2].data.name,
+      race: currentCharacterData[2].data.race,
+      class: currentCharacterData[2].data.class,
+      subclass: currentCharacterData[2].data.subclass,
+      level: currentCharacterData[2].data.level,
+      background: currentCharacterData[2].data.background,
+      experience: currentCharacterData[2].data.experience,
+      inspiration: currentCharacterData[2].data.inspiration,
+      proficiencyBonus: currentCharacterData[2].data.proficiencyBonus,
+    };
+    const combatStats = {
+      armorClass: currentCharacterData[3].data.armorClass,
+      initiative: currentCharacterData[3].data.initiative,
+      speed: currentCharacterData[3].data.speed,
+      hitPointMaximum: currentCharacterData[3].data.hitPointMaximum,
+      currentHitPoints: currentCharacterData[3].data.currentHitPoints,
+      temporaryHitPoints: currentCharacterData[3].data.temporaryHitPoints,
+      hitDice: currentCharacterData[3].data.hitDice,
+      deathSaveSuccesses: currentCharacterData[3].data.deathSaveSuccesses,
+      deathSaveFailures: currentCharacterData[3].data.deathSaveFailures,
+    };
+    const personality = {
+      personalityTraits: currentCharacterData[4].data.personalityTraits,
+      ideals: currentCharacterData[4].data.ideals,
+      bonds: currentCharacterData[4].data.bonds,
+      flaws: currentCharacterData[4].data.flaws,
+    };
+    const skills = {
+      acrobatics: currentCharacterData[5].data.acrobatics,
+      animalHandling: currentCharacterData[5].data.animalHandling,
+      arcana: currentCharacterData[5].data.arcana,
+      athletics: currentCharacterData[5].data.athletics,
+      deception: currentCharacterData[5].data.deception,
+      history: currentCharacterData[5].data.history,
+      insight: currentCharacterData[5].data.insight,
+      intimidation: currentCharacterData[5].data.intimidation,
+      investigation: currentCharacterData[5].data.investigation,
+      medicine: currentCharacterData[5].data.medicine,
+      nature: currentCharacterData[5].data.nature,
+      perception: currentCharacterData[5].data.perception,
+      performance: currentCharacterData[5].data.performance,
+      persuasion: currentCharacterData[5].data.persuasion,
+      religion: currentCharacterData[5].data.religion,
+      sleightOfHand: currentCharacterData[5].data.sleightOfHand,
+      stealth: currentCharacterData[5].data.stealth,
+      survival: currentCharacterData[5].data.survival,
+    };
+    const weapons = {
+      name: currentCharacterData[6].data.name,
+      attackBonus: currentCharacterData[6].data.attackBonus,
+      damage: currentCharacterData[6].data.damage,
+      damageType: currentCharacterData[6].data.damageType,
+      range: currentCharacterData[6].data.range,
+      description: currentCharacterData[6].data.damageDice,
+    };
+    const newCharacter: Character = {
+      appearance: appearance,
+      attributes: attributes,
+      characterData: characterData,
+      combatStats: combatStats,
+      personality: personality,
+      skills: skills,
+      weapons: weapons,
+    };
+    this.character = newCharacter;
+    console.log(this.character);
+    console.log(typeof this.character);
   }
 }