feat: character creation

src/app/components/characters/character-dashboard/character-dashboard.component.html

@@ -1,4 +1,7 @@
-<pap-h1>{{ character().name }}</pap-h1>
+<pap-h1
+    >{{ character().name }}
+    <pap-secondary-h1>{{ character().age }}, {{ character().gender }}, {{ character().nation }} , {{ character().religion }} </pap-secondary-h1>
+</pap-h1>
 
 <section class="flex flex-col xl:flex-row xl:space-x-4">
     <div class="flex w-full xl:w-2/5">
@@ -39,10 +42,10 @@
     <div class="mt-4 w-full xl:mt-0 xl:w-3/5">
         <pap-content-group class="flex-1" label="Werte Tabelle">
             <div
-                class="flex "
-                [class.space-x-4]="!editModeStore.isEnabled()"
                 [class.flex-col]="editModeStore.isEnabled()"
-                [class.space-y-2]="editModeStore.isEnabled()">
+                [class.space-x-4]="!editModeStore.isEnabled()"
+                [class.space-y-2]="editModeStore.isEnabled()"
+                class="flex ">
                 <div class="flex-1 space-y-2">
                     <pap-character-statistic
                         (incrementChange)="updateLife(character(), $event)"

src/app/components/characters/character-dashboard/character-dashboard.component.ts

@@ -8,11 +8,13 @@ import { CharacterStatisticComponent } from '../character-statistic/character-st
 import { CharacterEntity } from '../../../models/character/character.entity';
 import { ContentGroupComponent } from '../../content-group/content-group.component';
 import { EditModeStore } from '../../../stores/edit-mode.store';
+import { CharactersService } from '../../../services/characters.service';
+import { SecondaryH1Component } from '../../headings/secondary-h1/secondary-h1.component';
 
 @Component({
     selector: 'pap-character-dashboard',
     standalone: true,
-    imports: [H1Component, CharacterStatisticComponent, ContentGroupComponent],
+    imports: [H1Component, CharacterStatisticComponent, ContentGroupComponent, SecondaryH1Component],
     templateUrl: './character-dashboard.component.html',
     styleUrl: './character-dashboard.component.css',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -21,6 +23,7 @@ export default class CharacterDashboardComponent {
     protected readonly editModeStore = inject(EditModeStore);
     private readonly activatedRoute = inject(ActivatedRoute);
     private readonly characterStore = inject(CharacterStore);
+    private readonly charactersService = inject(CharactersService);
     private readonly id = toSignal(
         this.activatedRoute.paramMap.pipe(
             map(params => params.get('id')),
@@ -33,133 +36,133 @@ export default class CharacterDashboardComponent {
     });
 
     protected updateStrength(character: CharacterEntity, increment: number) {
-        void this.characterStore.update({
+        void this.charactersService.update({
             ...character,
             main: { ...character.main, strength: character.main.strength + increment },
         });
     }
 
     protected updateAgility(character: CharacterEntity, increment: number) {
-        void this.characterStore.update({
+        void this.charactersService.update({
             ...character,
             main: { ...character.main, agility: character.main.agility + increment },
         });
     }
 
     protected updateStamina(character: CharacterEntity, increment: number) {
-        void this.characterStore.update({
+        void this.charactersService.update({
             ...character,
             main: { ...character.main, stamina: character.main.stamina + increment },
         });
     }
 
     protected updateMagic(character: CharacterEntity, increment: number) {
-        void this.characterStore.update({
+        void this.charactersService.update({
             ...character,
             main: { ...character.main, magic: character.main.magic + increment },
         });
     }
 
     protected updateSpirit(character: CharacterEntity, increment: number) {
-        void this.characterStore.update({
+        void this.charactersService.update({
             ...character,
             main: { ...character.main, spirit: character.main.spirit + increment },
         });
     }
 
     protected updateIntelligence(character: CharacterEntity, increment: number) {
-        void this.characterStore.update({
+        void this.charactersService.update({
             ...character,
             main: { ...character.main, intelligence: character.main.intelligence + increment },
         });
     }
 
     protected updateLife(character: CharacterEntity, increment: number) {
-        void this.characterStore.update({
+        void this.charactersService.update({
             ...character,
             value: { ...character.value, life: character.value.life + increment },
         });
     }
 
     protected updatePower(character: CharacterEntity, increment: number) {
-        void this.characterStore.update({
+        void this.charactersService.update({
             ...character,
             value: { ...character.value, power: character.value.power + increment },
         });
     }
 
     protected updateEnergy(character: CharacterEntity, increment: number) {
-        void this.characterStore.update({
+        void this.charactersService.update({
             ...character,
             value: { ...character.value, energy: character.value.energy + increment },
         });
     }
 
     protected updateStrike(character: CharacterEntity, increment: number) {
-        void this.characterStore.update({
+        void this.charactersService.update({
             ...character,
             value: { ...character.value, strike: character.value.strike + increment },
         });
     }
 
     protected updatePerception(character: CharacterEntity, increment: number) {
-        void this.characterStore.update({
+        void this.charactersService.update({
             ...character,
             value: { ...character.value, perception: character.value.perception + increment },
         });
     }
 
     protected updateMagicDefense(character: CharacterEntity, increment: number) {
-        void this.characterStore.update({
+        void this.charactersService.update({
             ...character,
             value: { ...character.value, magicDefense: character.value.magicDefense + increment },
         });
     }
 
     protected updateMagicTolerance(character: CharacterEntity, increment: number) {
-        void this.characterStore.update({
+        void this.charactersService.update({
             ...character,
             value: { ...character.value, magicTolerance: character.value.magicTolerance + increment },
         });
     }
 
     protected updateMagicControl(character: CharacterEntity, increment: number) {
-        void this.characterStore.update({
+        void this.charactersService.update({
             ...character,
             value: { ...character.value, magicControl: character.value.magicControl + increment },
         });
     }
 
     protected updateMana(character: CharacterEntity, increment: number) {
-        void this.characterStore.update({
+        void this.charactersService.update({
             ...character,
             value: { ...character.value, mana: character.value.mana + increment },
         });
     }
 
     protected updateManaRegeneration(character: CharacterEntity, increment: number) {
-        void this.characterStore.update({
+        void this.charactersService.update({
             ...character,
             value: { ...character.value, manaRegeneration: character.value.manaRegeneration + increment },
         });
     }
 
     protected updateReaction(character: CharacterEntity, increment: number) {
-        void this.characterStore.update({
+        void this.charactersService.update({
             ...character,
             value: { ...character.value, reaction: character.value.reaction + increment },
         });
     }
 
     protected updateCover(character: CharacterEntity, increment: number) {
-        void this.characterStore.update({
+        void this.charactersService.update({
             ...character,
             value: { ...character.value, cover: character.value.cover + increment },
         });
     }
 
     protected updateAuthority(character: CharacterEntity, increment: number) {
-        void this.characterStore.update({
+        void this.charactersService.update({
             ...character,
             value: { ...character.value, authority: character.value.authority + increment },
         });

src/app/components/characters/create-character/create-character.component.html

@@ -1,15 +1,19 @@
-@if (characterStore.count() > 0) {
+@if (charactersStore.count() > 0) {
     <pap-h1>Keine Charaktererstellung möglich</pap-h1>
 
     <p>
         Du hast bereits einen Charakter erstellt, gehe daher bitte zu seinem
-        <a class="underline" [routerLink]="['/characters', characterStore.entities()[0].id, 'dashboard']">Dashboard</a>.
+        <a class="underline" [routerLink]="['/characters', charactersStore.entities()[0].id, 'dashboard']">Dashboard</a>.
     </p>
 } @else {
     <pap-h1>Neuen Charakter erstellen</pap-h1>
 
-    <form [formGroup]="formGroup" (ngSubmit)="submit()">
-        <pap-text-input [control]="formGroup.controls['name']" label="Name" autoComplete="nickname" />
+    <form [formGroup]="formGroup" (ngSubmit)="submit()" class="space-y-4">
+        <pap-text-input class="block" [control]="formGroup.controls['name']" label="Name" [autofocus]="true" autoComplete="nickname" />
+        <pap-text-input class="block" [control]="formGroup.controls['age']" label="Alter" valueType="number" [min]="0" />
+        <pap-text-input class="block" [control]="formGroup.controls['gender']" label="Geschlecht" />
+        <pap-text-input class="block" [control]="formGroup.controls['nation']" label="Volk" />
+        <pap-text-input class="block" [control]="formGroup.controls['religion']" label="Religion" />
 
         <pap-submit-button class="mt-4" [disabled]="formGroup.invalid">Charakter erstellen</pap-submit-button>
     </form>

src/app/components/characters/create-character/create-character.component.ts

@@ -4,6 +4,7 @@ import { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from '@angu
 import { TextInputComponent } from '../../inputs/text-input/text-input.component';
 import { SubmitButtonComponent } from '../../inputs/submit-button/submit-button.component';
 import { Router, RouterLink } from '@angular/router';
+import { CharactersService } from '../../../services/characters.service';
 import { CharacterStore } from '../../../stores/character.store';
 
 @Component({
@@ -17,16 +18,28 @@ import { CharacterStore } from '../../../stores/character.store';
 export default class CreateCharacterComponent {
     protected readonly formGroup = inject(FormBuilder).group({
         name: ['', Validators.required],
+        nation: ['', Validators.required],
+        gender: ['', Validators.required],
+        age: [0, [Validators.required, Validators.min(0)]],
+        religion: ['', Validators.required],
     });
-    protected readonly characterStore = inject(CharacterStore);
+    protected readonly charactersService = inject(CharactersService);
+    protected readonly charactersStore = inject(CharacterStore);
     private readonly router = inject(Router);
 
     protected async submit(): Promise<void> {
         if (this.formGroup.invalid) {
             return;
         }
 
-        const id = await this.characterStore.create(this.formGroup.value.name!);
-        await this.router.navigate(['/characters', id, 'dashboard']);
+        const character = await this.charactersService.add(
+            this.formGroup.value.name!,
+            this.formGroup.value.gender!,
+            this.formGroup.value.age!,
+            this.formGroup.value.nation!,
+            this.formGroup.value.religion!,
+        );
+
+        await this.router.navigate(['/characters', character.id, 'dashboard']);
     }
 }

src/app/components/headings/secondary-h1/secondary-h1.component.html

@@ -0,0 +1 @@
+<small class="ms-2 font-semibold text-gray-500 dark:text-gray-400"><ng-content></ng-content></small>

src/app/components/headings/secondary-h1/secondary-h1.component.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+    selector: 'pap-secondary-h1',
+    standalone: true,
+    imports: [],
+    templateUrl: './secondary-h1.component.html',
+    styleUrl: './secondary-h1.component.css',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SecondaryH1Component {}

src/app/components/inputs/text-input/text-input.component.html

@@ -1,8 +1,10 @@
 <label [for]="id" class="mb-2 block text-sm font-medium">{{ label }}</label>
 <input
     [attr.id]="id"
+    [autofocus]="autofocus"
+    [autocomplete]="autoComplete"
     [formControl]="control"
+    [min]="min"
     [placeholder]="placeholder"
-    [autocomplete]="autoComplete"
-    class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-    type="text" />
+    [type]="valueType"
+    class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500" />

src/app/components/inputs/text-input/text-input.component.ts

@@ -16,6 +16,9 @@ export class TextInputComponent {
     @Input({ required: true }) label!: string;
     @Input({ required: true }) control!: FormControl;
     @Input() autoComplete = 'off';
+    @Input() valueType: 'text' | 'number' = 'text';
+    @Input() min?: number;
+    @Input() autofocus?: boolean;
 
     protected readonly id = `control_${controlId++}`;
 }

src/app/models/character/character.entity.ts

@@ -4,6 +4,10 @@ import { ValueStatistics } from './value-statistics';
 export interface CharacterEntity {
     id: number;
     name: string;
+    gender: string;
+    nation: string;
+    age: number;
+    religion: string;
     main: MainStatistics;
     value: ValueStatistics;
 }

src/app/services/characters.service.ts

@@ -1,25 +1,24 @@
 import { inject, Injectable } from '@angular/core';
-import { DatabaseService } from './database.service';
 import { CharacterEntity } from '../models/character/character.entity';
+import { CharacterStore } from '../stores/character.store';
 
 @Injectable({
     providedIn: 'root',
 })
 export class CharactersService {
-    private readonly databaseService = inject(DatabaseService);
-
-    list(): Promise<CharacterEntity[]> {
-        return this.databaseService.characters.toArray();
-    }
+    private readonly charactersStore = inject(CharacterStore);
 
     async update(character: CharacterEntity) {
-        await this.databaseService.characters.update(character.id, character);
+        await this.charactersStore.update(character);
     }
 
-    async add(name: string): Promise<CharacterEntity> {
-        const id = await this.databaseService.characters.add({
+    async add(name: string, gender: string, age: number, nation: string, religion: string): Promise<CharacterEntity> {
+        return this.charactersStore.add({
             name,
-            id: 1, // prevent creating more than one character
+            gender,
+            age,
+            nation,
+            religion,
             main: {
                 agility: 0,
                 magic: 0,
@@ -44,11 +43,5 @@ export class CharactersService {
                 authority: 0,
             },
         });
-        const character = await this.item(id);
-        return character!;
-    }
-
-    private item(id: number): Promise<CharacterEntity | undefined> {
-        return this.databaseService.characters.get(id);
     }
 }

src/app/services/tables/characters.table.ts

@@ -0,0 +1,26 @@
+import { inject, Injectable } from '@angular/core';
+import { DatabaseService } from '../database.service';
+import { CharacterEntity } from '../../models/character/character.entity';
+
+@Injectable({ providedIn: 'root' })
+export class CharactersTable {
+    private readonly databaseService = inject(DatabaseService);
+
+    list(): Promise<CharacterEntity[]> {
+        return this.databaseService.characters.toArray();
+    }
+
+    async add(character: Omit<CharacterEntity, 'id'>) {
+        const id = await this.databaseService.characters.add({
+            ...character,
+            id: 1, // prevent creating more than one character
+        });
+
+        const newCharacter = await this.databaseService.characters.get(id);
+        return newCharacter!;
+    }
+
+    update(character: CharacterEntity) {
+        return this.databaseService.characters.update(character.id, character);
+    }
+}