Added click listener to charcter cars and loaded the data for the selected character

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

@@ -1,13 +1,23 @@
 <div>
-  <input [(ngModel)]="characterName" />
-  <label>Character Name</label>
-  <input [(ngModel)]="characterClass" />
-  <label>Character Class</label>
-  <input [(ngModel)]="characterRace" />
-  <label>Chracter Race</label>
-  <input [(ngModel)]="characterLevel" />
-  <label>Character Level</label>
-  <input [(ngModel)]="characterBackground" />
-  <label>Character Background</label>
+  <div>
+    <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

@@ -18,7 +18,7 @@ export class CharacterCreatorComponent {
   public characterLevel: number = 1;
   public characterBackground?: string = '';
 
-  public createCharacter() {
+  public createCharacter(): void {
     const newCharacter: Character = {
       name: this.characterName,
       class: this.characterClass,
@@ -29,5 +29,6 @@ export class CharacterCreatorComponent {
     this.dataService.addData('characters', newCharacter);
     // TODO: Animation, dass der Character erstellt wurde
     this.Router.navigate(['character/picker']);
+    // Collection erstellen
   }
 }

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

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

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

@@ -1,30 +1,6 @@
 .character-card{
     width: 30vw;
-    height: 80vh;
+    height: 30vh;
     border-radius: 10px;
-    // border: solid 1px black;
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
-    // cursor: pointer;
-    // transition: all 0.3s ease-in-out;
-    // &:hover{
-    //     transform: scale(1.05);
-    // }
-    // .character-card__image{
-    //     width: 100%;
-    //     height: 100%;
-    //     border-radius: 10px;
-    //     object-fit: cover;
-    // }
-    // .character-card__name{
-    //     margin-top: 10px;
-    //     font-size: 1.2rem;
-    //     font-weight: 600;
-    //     color: #000;
-    // }
-    // .character-card__description{
-    //     margin-top: 5px;
-    //     font-size: 1rem;
-    //     font-weight: 400;
-    //     color: #000;
-    // }
 }

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

@@ -1,10 +1,11 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { Character } from 'src/interfaces/character';
 
 @Component({
   selector: 'app-character-card',
   templateUrl: './character-card.component.html',
-  styleUrls: ['./character-card.component.scss']
+  styleUrls: ['./character-card.component.scss'],
 })
 export class CharacterCardComponent {
-
+  @Input() character: Character = { name: '' };
 }

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

@@ -1,13 +1,11 @@
 <div class="charater-picker-page">
-  <!-- <div class="character-card-container">
-    <app-character-card></app-character-card>
-    <app-character-card></app-character-card>
-    <app-character-card></app-character-card>
-  </div> -->
-  <div *ngFor="let character of characters">
-    {{ character.name }}
-    {{ character.class }}
-    {{ character.race }}
+  <div class="character-card-container">
+    <ng-container *ngFor="let character of characters">
+      <app-character-card
+        [character]="character"
+        (click)="selectCharacter(character)"
+      ></app-character-card>
+    </ng-container>
   </div>
 
   <button (click)="addCharacter()">Add Character</button>

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

@@ -2,7 +2,9 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    column-gap:  2.5vw ;
+    flex-wrap: wrap;
+    column-gap: 2.5vw;
+    row-gap: 2.5vh;
     justify-content: center;
     width: 100%;
 }

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

@@ -10,8 +10,19 @@ 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 index = 0;
 
@@ -25,4 +36,8 @@ export class CharacterPickerComponent {
   public addCharacter() {
     this.Router.navigate(['character/creator']);
   }
+
+  public selectCharacter(character: Character) {
+    this.dataService.selectCharacter(character);
+  }
 }

src/services/data/data.service.ts

@@ -1,5 +1,7 @@
 import { Injectable } from '@angular/core';
 import Localbase from 'localbase';
+import { Character } from 'src/interfaces/character';
+import { Router } from '@angular/router';
 
 @Injectable({
   providedIn: 'root',
@@ -7,10 +9,13 @@ import Localbase from 'localbase';
 export class DataService {
   db: any;
 
-  constructor() {
+  constructor(private Router: Router) {
     this.db = new Localbase('myDatabase');
   }
 
+  public character: Character = { name: '' };
+  public characterData: any = {};
+
   public addData(collection: string, data: any, key?: string): void {
     if (key) {
       this.db.collection(collection).add(data, key);
@@ -19,17 +24,24 @@ export class DataService {
     }
   }
 
-  // public addData(collection: string, data: any): void {
-  //   this.db.collection(collection).add(data);
-  // }
-
   getData(collection: string, key: string) {
     return this.db.collection(collection).doc(key).get();
   }
 
   getCollection(collection: string) {
-    const res = this.db.collection(collection).get();
-    console.log(res);
-    return res;
+    return this.db.collection(collection).get();
+  }
+
+  public async selectCharacter(character: any) {
+    this.character = character;
+    await this.getCharacterData(character.name);
+    this.Router.navigate(['journal']);
+  }
+
+  public getCharacterData(characterName: string) {
+    this.getCollection(characterName).then((characterData: any) => {
+      this.characterData = characterData;
+      console.log(this.characterData);
+    });
   }
 }