From b893b367fa688f5677ef98b1096e0e93cc1dfcb7 Mon Sep 17 00:00:00 2001
From: Manuel Rauber <manuel.rauber@boundfoxstudios.com>
Date: Mon, 11 Mar 2024 16:02:31 +0100
Subject: [PATCH] feat: improve character editor

---
 .../button/button.component.css}              |   0
 .../button/button.component.html}             |  11 +-
 .../buttons/button/button.component.ts        |  17 ++
 .../character-dashboard.component.html        |  53 +-----
 .../character-dashboard.component.ts          |  18 +-
 .../character-main-statistics.component.css   |   0
 .../character-main-statistics.component.html  |   8 +
 .../character-main-statistics.component.ts    |  19 ++
 .../character-statistic.component.css         |   0
 .../character-statistic.component.html        |  12 +-
 .../character-statistic.component.ts          |   3 +-
 .../character-statistics.component.css        |   3 +
 .../character-statistics.component.html       |  29 +++
 .../character-statistics.component.ts         | 166 ++++++++++++++++++
 .../character-value-statistics.component.css  |   0
 .../character-value-statistics.component.html |  88 ++++++++++
 .../character-value-statistics.component.ts   |  21 +++
 .../create-character.component.html           |  23 +--
 .../create-character.component.ts             |  69 ++++----
 .../submit-button/submit-button.component.ts  |  15 --
 .../backup-restore.component.html             |   6 +-
 .../backup-restore.component.ts               |   4 +-
 .../components/tools/dice/dice.component.html |   2 +-
 .../components/tools/dice/dice.component.ts   |   4 +-
 src/app/models/character/value-statistics.ts  |   2 +-
 src/app/services/characters.service.ts        |  41 ++++-
 ...required-points-to-distribute-validator.ts |   7 +-
 27 files changed, 488 insertions(+), 133 deletions(-)
 rename src/app/components/{inputs/submit-button/submit-button.component.css => buttons/button/button.component.css} (100%)
 rename src/app/components/{inputs/submit-button/submit-button.component.html => buttons/button/button.component.html} (80%)
 create mode 100644 src/app/components/buttons/button/button.component.ts
 create mode 100644 src/app/components/characters/character-statistics/character-main-statistics/character-main-statistics.component.css
 create mode 100644 src/app/components/characters/character-statistics/character-main-statistics/character-main-statistics.component.html
 create mode 100644 src/app/components/characters/character-statistics/character-main-statistics/character-main-statistics.component.ts
 rename src/app/components/characters/{ => character-statistics}/character-statistic/character-statistic.component.css (100%)
 rename src/app/components/characters/{ => character-statistics}/character-statistic/character-statistic.component.html (89%)
 rename src/app/components/characters/{ => character-statistics}/character-statistic/character-statistic.component.ts (95%)
 create mode 100644 src/app/components/characters/character-statistics/character-statistics.component.css
 create mode 100644 src/app/components/characters/character-statistics/character-statistics.component.html
 create mode 100644 src/app/components/characters/character-statistics/character-statistics.component.ts
 create mode 100644 src/app/components/characters/character-statistics/character-value-statistics/character-value-statistics.component.css
 create mode 100644 src/app/components/characters/character-statistics/character-value-statistics/character-value-statistics.component.html
 create mode 100644 src/app/components/characters/character-statistics/character-value-statistics/character-value-statistics.component.ts
 delete mode 100644 src/app/components/inputs/submit-button/submit-button.component.ts

diff --git a/src/app/components/inputs/submit-button/submit-button.component.css b/src/app/components/buttons/button/button.component.css
similarity index 100%
rename from src/app/components/inputs/submit-button/submit-button.component.css
rename to src/app/components/buttons/button/button.component.css
diff --git a/src/app/components/inputs/submit-button/submit-button.component.html b/src/app/components/buttons/button/button.component.html
similarity index 80%
rename from src/app/components/inputs/submit-button/submit-button.component.html
rename to src/app/components/buttons/button/button.component.html
index 6dcb578..833ff58 100644
--- a/src/app/components/inputs/submit-button/submit-button.component.html
+++ b/src/app/components/buttons/button/button.component.html
@@ -1,14 +1,15 @@
 <button
-    [disabled]="disabled"
-    [ngClass]="{'bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700': !danger,
-    'bg-red-700 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700': danger}"
+    [disabled]="disabled()"
+    [ngClass]="{'bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700': !danger(),
+    'bg-red-700 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700': danger()}"
+    [type]="type()"
+    (click)="tap.emit()"
     class="w-full rounded-lg border border-transparent px-5 py-2.5 text-center text-sm font-medium
     text-white
     focus:outline-none
     disabled:cursor-not-allowed
     disabled:border-gray-200 disabled:bg-white disabled:text-gray-400 dark:bg-blue-600
     dark:hover:bg-blue-700 dark:focus:ring-blue-800
-    disabled:dark:border-gray-400 disabled:dark:bg-gray-950 sm:w-auto"
-    type="submit">
+    disabled:dark:border-gray-400 disabled:dark:bg-gray-950 sm:w-auto">
     <ng-content></ng-content>
 </button>
diff --git a/src/app/components/buttons/button/button.component.ts b/src/app/components/buttons/button/button.component.ts
new file mode 100644
index 0000000..7193e04
--- /dev/null
+++ b/src/app/components/buttons/button/button.component.ts
@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, input, Output } from '@angular/core';
+import { NgClass } from '@angular/common';
+
+@Component({
+    selector: 'pap-button',
+    standalone: true,
+    imports: [NgClass],
+    templateUrl: './button.component.html',
+    styleUrl: './button.component.css',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ButtonComponent {
+    disabled = input(false);
+    danger = input(false);
+    type = input<'button' | 'submit'>('button');
+    @Output() tap = new EventEmitter();
+}
diff --git a/src/app/components/characters/character-dashboard/character-dashboard.component.html b/src/app/components/characters/character-dashboard/character-dashboard.component.html
index 439a393..c207311 100644
--- a/src/app/components/characters/character-dashboard/character-dashboard.component.html
+++ b/src/app/components/characters/character-dashboard/character-dashboard.component.html
@@ -4,49 +4,12 @@
 </pap-h1>
 
 <form [formGroup]="formGroup">
-    <section class="flex flex-col xl:flex-row xl:space-x-4">
-        <div class="flex w-full xl:w-2/5">
-            <pap-content-group class="flex-1" formGroupName="main" title="Main Stats">
-                <pap-character-statistic [allowEdit]="editModeStore.isEnabled()" formControlName="strength" label="Stärke" />
-                <pap-character-statistic [allowEdit]="editModeStore.isEnabled()" formControlName="agility" label="Beweglichkeit" />
-                <pap-character-statistic [allowEdit]="editModeStore.isEnabled()" formControlName="stamina" label="Ausdauer" />
-                <pap-character-statistic [allowEdit]="editModeStore.isEnabled()" formControlName="magic" label="Magie" />
-                <pap-character-statistic [allowEdit]="editModeStore.isEnabled()" formControlName="spirit" label="Geist" />
-                <pap-character-statistic [allowEdit]="editModeStore.isEnabled()" formControlName="intelligence" label="Intelligenz" />
-            </pap-content-group>
-        </div>
-
-        <div class="mt-4 w-full xl:mt-0 xl:w-3/5">
-            <pap-content-group class="flex-1" formGroupName="value" title="Werte Tabelle">
-                <div
-                    [class.flex-col]="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 [allowEdit]="editModeStore.isEnabled()" formControlName="life" label="Leben" />
-                        <pap-character-statistic [allowEdit]="editModeStore.isEnabled()" formControlName="power" label="Kraft" />
-                        <pap-character-statistic [allowEdit]="editModeStore.isEnabled()" formControlName="energy" label="Energie" />
-                        <pap-character-statistic [allowEdit]="editModeStore.isEnabled()" formControlName="strike" label="Treffen" />
-                        <pap-character-statistic [allowEdit]="editModeStore.isEnabled()" formControlName="perception" label="Wahrnehmung" />
-                    </div>
-                    <div class="flex-1 space-y-2">
-                        <pap-character-statistic [allowEdit]="editModeStore.isEnabled()" formControlName="magicDefense" label="Magieabwehr" />
-                        <pap-character-statistic [allowEdit]="editModeStore.isEnabled()" formControlName="magicTolerance" label="Magietoleranz" />
-                        <pap-character-statistic [allowEdit]="editModeStore.isEnabled()" formControlName="magicControl" label="Magielenkung" />
-                        <pap-character-statistic [allowEdit]="editModeStore.isEnabled()" formControlName="mana" label="Mana" />
-                        <pap-character-statistic
-                            [allowEdit]="editModeStore.isEnabled()"
-                            formControlName="manaRegeneration"
-                            label="Manaregeneration" />
-                    </div>
-                    <div class="flex-1 space-y-2">
-                        <pap-character-statistic [allowEdit]="editModeStore.isEnabled()" formControlName="reaction" label="Reaktion" />
-                        <pap-character-statistic [allowEdit]="editModeStore.isEnabled()" formControlName="cover" label="Warnung" />
-                        <pap-character-statistic [allowEdit]="editModeStore.isEnabled()" formControlName="authority" label="Kontrolle" />
-                    </div>
-                </div>
-            </pap-content-group>
-        </div>
-    </section>
+    <pap-character-statistics
+        class="mt-4"
+        [mainAllowEdit]="editModeStore.isEnabled()"
+        [mainFormGroup]="formGroup.controls['main']"
+        [mainStatistics]="character().main"
+        [pointsToDistribute]="0"
+        [valueFormGroup]="formGroup.controls['value']"
+        [valueAllowEdit]="editModeStore.isEnabled()" />
 </form>
diff --git a/src/app/components/characters/character-dashboard/character-dashboard.component.ts b/src/app/components/characters/character-dashboard/character-dashboard.component.ts
index ae1415d..158ef16 100644
--- a/src/app/components/characters/character-dashboard/character-dashboard.component.ts
+++ b/src/app/components/characters/character-dashboard/character-dashboard.component.ts
@@ -4,16 +4,26 @@ import { CharactersStore } from '../../../stores/characters.store';
 import { filter, map } from 'rxjs';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { H1Component } from '../../headings/h1/h1.component';
-import { CharacterStatisticComponent } from '../character-statistic/character-statistic.component';
+import { CharacterStatisticComponent } from '../character-statistics/character-statistic/character-statistic.component';
 import { ContentGroupComponent } from '../../content-group/content-group.component';
 import { EditModeStore } from '../../../stores/edit-mode.store';
 import { SecondaryH1Component } from '../../headings/secondary-h1/secondary-h1.component';
 import { NonNullableFormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { CharacterMainStatisticsComponent } from '../character-statistics/character-main-statistics/character-main-statistics.component';
+import { CharacterStatisticsComponent } from '../character-statistics/character-statistics.component';
 
 @Component({
     selector: 'pap-character-dashboard',
     standalone: true,
-    imports: [H1Component, CharacterStatisticComponent, ContentGroupComponent, SecondaryH1Component, ReactiveFormsModule],
+    imports: [
+        H1Component,
+        CharacterStatisticComponent,
+        ContentGroupComponent,
+        SecondaryH1Component,
+        ReactiveFormsModule,
+        CharacterMainStatisticsComponent,
+        CharacterStatisticsComponent,
+    ],
     templateUrl: './character-dashboard.component.html',
     styleUrl: './character-dashboard.component.css',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -48,7 +58,7 @@ export default class CharacterDashboardComponent {
             life: [0],
             power: [0],
             energy: [0],
-            strike: [0],
+            precision: [0],
             perception: [0],
             magicDefense: [0],
             magicTolerance: [0],
@@ -87,8 +97,6 @@ export default class CharacterDashboardComponent {
             // We might want to save the changes
             const statistics = this.formGroup.getRawValue();
 
-            console.log('effect');
-
             void this.characterStore.updateStatistics({ ...character, main: statistics.main, value: statistics.value });
         });
     }
diff --git a/src/app/components/characters/character-statistics/character-main-statistics/character-main-statistics.component.css b/src/app/components/characters/character-statistics/character-main-statistics/character-main-statistics.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/characters/character-statistics/character-main-statistics/character-main-statistics.component.html b/src/app/components/characters/character-statistics/character-main-statistics/character-main-statistics.component.html
new file mode 100644
index 0000000..3f3a30c
--- /dev/null
+++ b/src/app/components/characters/character-statistics/character-main-statistics/character-main-statistics.component.html
@@ -0,0 +1,8 @@
+<pap-content-group [footer]="footer()" [formGroup]="formGroup()" title="Main Stats">
+    <pap-character-statistic [allowEdit]="allowEdit()" [remainingPoints]="remainingPoints()" formControlName="strength" label="Stärke" />
+    <pap-character-statistic [allowEdit]="allowEdit()" [remainingPoints]="remainingPoints()" formControlName="agility" label="Beweglichkeit" />
+    <pap-character-statistic [allowEdit]="allowEdit()" [remainingPoints]="remainingPoints()" formControlName="stamina" label="Ausdauer" />
+    <pap-character-statistic [allowEdit]="allowEdit()" [remainingPoints]="remainingPoints()" formControlName="magic" label="Magie" />
+    <pap-character-statistic [allowEdit]="allowEdit()" [remainingPoints]="remainingPoints()" formControlName="spirit" label="Geist" />
+    <pap-character-statistic [allowEdit]="allowEdit()" [remainingPoints]="remainingPoints()" formControlName="intelligence" label="Intelligenz" />
+</pap-content-group>
diff --git a/src/app/components/characters/character-statistics/character-main-statistics/character-main-statistics.component.ts b/src/app/components/characters/character-statistics/character-main-statistics/character-main-statistics.component.ts
new file mode 100644
index 0000000..c38c09c
--- /dev/null
+++ b/src/app/components/characters/character-statistics/character-main-statistics/character-main-statistics.component.ts
@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { CharacterStatisticComponent } from '../character-statistic/character-statistic.component';
+import { ContentGroupComponent } from '../../../content-group/content-group.component';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+
+@Component({
+    selector: 'pap-character-main-statistics',
+    standalone: true,
+    imports: [CharacterStatisticComponent, ContentGroupComponent, ReactiveFormsModule],
+    templateUrl: './character-main-statistics.component.html',
+    styleUrl: './character-main-statistics.component.css',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CharacterMainStatisticsComponent {
+    formGroup = input.required<FormGroup>();
+    footer = input('');
+    remainingPoints = input(0);
+    allowEdit = input(false);
+}
diff --git a/src/app/components/characters/character-statistic/character-statistic.component.css b/src/app/components/characters/character-statistics/character-statistic/character-statistic.component.css
similarity index 100%
rename from src/app/components/characters/character-statistic/character-statistic.component.css
rename to src/app/components/characters/character-statistics/character-statistic/character-statistic.component.css
diff --git a/src/app/components/characters/character-statistic/character-statistic.component.html b/src/app/components/characters/character-statistics/character-statistic/character-statistic.component.html
similarity index 89%
rename from src/app/components/characters/character-statistic/character-statistic.component.html
rename to src/app/components/characters/character-statistics/character-statistic/character-statistic.component.html
index 6f65bf7..ed0b083 100644
--- a/src/app/components/characters/character-statistic/character-statistic.component.html
+++ b/src/app/components/characters/character-statistics/character-statistic/character-statistic.component.html
@@ -2,12 +2,20 @@
     <p>{{ label() }}</p>
 
     @if (!allowEdit()) {
-        <p>{{ value() }}</p>
+        @if (displayValue(); as displayValue) {
+            <p>{{ displayValue }}</p>
+        } @else {
+            <p>{{ value() }}</p>
+        }
     }
 
     @if (allowEdit()) {
         <div class="flex items-center">
-            <p>{{ value() }}</p>
+            @if (displayValue(); as displayValue) {
+                <p>{{ displayValue }} ({{ value() }})</p>
+            } @else {
+                <p>{{ value() }}</p>
+            }
             <div class="ml-4 inline-flex rounded-md" role="group">
                 @if (showTens()) {
                     <button
diff --git a/src/app/components/characters/character-statistic/character-statistic.component.ts b/src/app/components/characters/character-statistics/character-statistic/character-statistic.component.ts
similarity index 95%
rename from src/app/components/characters/character-statistic/character-statistic.component.ts
rename to src/app/components/characters/character-statistics/character-statistic/character-statistic.component.ts
index 0e70f44..a1815b5 100644
--- a/src/app/components/characters/character-statistic/character-statistic.component.ts
+++ b/src/app/components/characters/character-statistics/character-statistic/character-statistic.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, forwardRef, input, signal } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { ValueUpdater } from '../../../types';
+import { ValueUpdater } from '../../../../types';
 
 @Component({
     selector: 'pap-character-statistic',
@@ -24,6 +24,7 @@ export class CharacterStatisticComponent implements ControlValueAccessor {
     maxValue = input(Number.MAX_SAFE_INTEGER);
     showTens = input(true);
     remainingPoints = input(Number.MAX_SAFE_INTEGER);
+    displayValue = input<number>();
     protected value = signal(0);
     protected canUseTenIncrement = computed(() => this.remainingPoints() >= 10 && this.value() + 10 <= this.maxValue());
     protected canUseOneIncrement = computed(() => this.remainingPoints() >= 1 && this.value() + 1 <= this.maxValue());
diff --git a/src/app/components/characters/character-statistics/character-statistics.component.css b/src/app/components/characters/character-statistics/character-statistics.component.css
new file mode 100644
index 0000000..52d0451
--- /dev/null
+++ b/src/app/components/characters/character-statistics/character-statistics.component.css
@@ -0,0 +1,3 @@
+:host {
+    @apply block;
+}
diff --git a/src/app/components/characters/character-statistics/character-statistics.component.html b/src/app/components/characters/character-statistics/character-statistics.component.html
new file mode 100644
index 0000000..d15bf0f
--- /dev/null
+++ b/src/app/components/characters/character-statistics/character-statistics.component.html
@@ -0,0 +1,29 @@
+<section class="flex flex-col xl:flex-row xl:space-x-4">
+    <div class="flex w-full flex-col xl:w-2/5">
+        <pap-character-main-statistics
+            [allowEdit]="mainAllowEdit()"
+            [footer]="pointsToDistribute() > 0 ? 'Du kannst noch ' + mainRemainingPoints() + ' Statuspunkte verteilen.' : ''"
+            [formGroup]="mainFormGroup()"
+            [remainingPoints]="mainRemainingPoints()" />
+
+        @if (mainAllowEdit() && valueAllowEdit()) {
+            <pap-content-group class="mt-4" title="Punkte tauschen">
+                <pap-button [disabled]="!canConvertToValuePoints()" (tap)="convertMainToValuePoint()"
+                    >1 Statuspunkt in 3 Wertepunkte tauschen</pap-button
+                >
+                <pap-button [disabled]="!canConverToMainPoint()" (tap)="convertValueToMainPoint()"
+                    >3 Wertepunkte in 1 Statuspunkt tauschen</pap-button
+                >
+            </pap-content-group>
+        }
+    </div>
+
+    <div class="mt-4 w-full xl:mt-0 xl:w-3/5">
+        <pap-character-value-statistics
+            [allowEdit]="valueAllowEdit()"
+            [calculatedValueStatistics]="calculatedValueStatistics()"
+            [formGroup]="valueFormGroup()"
+            [remainingPoints]="valueRemainingPoints()"
+            [footer]="pointsToDistribute() > 0 ? 'Du kannst noch ' + valueRemainingPoints() + ' Wertepunkte verteilen.' : ''" />
+    </div>
+</section>
diff --git a/src/app/components/characters/character-statistics/character-statistics.component.ts b/src/app/components/characters/character-statistics/character-statistics.component.ts
new file mode 100644
index 0000000..8c8638f
--- /dev/null
+++ b/src/app/components/characters/character-statistics/character-statistics.component.ts
@@ -0,0 +1,166 @@
+import { ChangeDetectionStrategy, Component, computed, effect, inject, input, signal } from '@angular/core';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { CharacterMainStatisticsComponent } from './character-main-statistics/character-main-statistics.component';
+import { CharacterStatisticComponent } from './character-statistic/character-statistic.component';
+import { ContentGroupComponent } from '../../content-group/content-group.component';
+import { CharacterValueStatisticsComponent } from './character-value-statistics/character-value-statistics.component';
+import { CharactersService } from '../../../services/characters.service';
+import { map, Subscription } from 'rxjs';
+import { MainStatistics } from '../../../models/character/main-statistics';
+import { ValueStatistics } from '../../../models/character/value-statistics';
+import { JsonPipe } from '@angular/common';
+import { ButtonComponent } from '../../buttons/button/button.component';
+
+@Component({
+    selector: 'pap-character-statistics',
+    standalone: true,
+    imports: [
+        CharacterMainStatisticsComponent,
+        CharacterStatisticComponent,
+        ContentGroupComponent,
+        ReactiveFormsModule,
+        CharacterValueStatisticsComponent,
+        JsonPipe,
+        ButtonComponent,
+    ],
+    templateUrl: './character-statistics.component.html',
+    styleUrl: './character-statistics.component.css',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CharacterStatisticsComponent {
+    pointsToDistribute = input(0);
+    mainFormGroup = input.required<FormGroup>();
+    mainAllowEdit = input(false);
+    valueFormGroup = input.required<FormGroup>();
+    valueAllowEdit = input(false);
+
+    mainStatistics = input<MainStatistics>({
+        strength: 0,
+        stamina: 0,
+        intelligence: 0,
+        magic: 0,
+        spirit: 0,
+        agility: 0,
+    });
+
+    valueStatistics = input<ValueStatistics>({
+        precision: 0,
+        manaRegeneration: 0,
+        magicTolerance: 0,
+        magicControl: 0,
+        authority: 0,
+        magicDefense: 0,
+        perception: 0,
+        cover: 0,
+        reaction: 0,
+        energy: 0,
+        mana: 0,
+        power: 0,
+        life: 0,
+    });
+
+    convertedMainPoints = signal(0);
+    valuePointsToDistribute = signal(0);
+    protected readonly canConvertToValuePoints = computed(() => this.mainRemainingPoints() >= 1);
+    protected readonly canConverToMainPoint = computed(() => this.valueRemainingPoints() >= 3);
+    private readonly mainStatisticsChange = signal<MainStatistics>({
+        agility: 0,
+        spirit: 0,
+        magic: 0,
+        intelligence: 0,
+        stamina: 0,
+        strength: 0,
+    });
+
+    private readonly valueStatisticsChange = signal<ValueStatistics>({
+        life: 0,
+        power: 0,
+        mana: 0,
+        energy: 0,
+        reaction: 0,
+        cover: 0,
+        perception: 0,
+        magicDefense: 0,
+        authority: 0,
+        magicControl: 0,
+        magicTolerance: 0,
+        manaRegeneration: 0,
+        precision: 0,
+    });
+    private readonly charactersService = inject(CharactersService);
+    protected readonly mainRemainingPoints = computed(() => {
+        const mainStatisticsChange = this.mainStatisticsChange();
+
+        const initialPoints = this.charactersService.sumMainStatistics(this.mainStatistics());
+        const mainDistributedPoints = this.charactersService.sumMainStatistics(mainStatisticsChange);
+
+        return this.pointsToDistribute() - (mainDistributedPoints - initialPoints) - this.convertedMainPoints();
+    });
+    protected readonly valueRemainingPoints = computed(() => {
+        const valueStatisticsChange = this.valueStatisticsChange();
+
+        const initialPoints = this.charactersService.sumValueStatistics(this.valueStatistics());
+        const valueDistributedPoints = this.charactersService.sumValueStatistics(valueStatisticsChange);
+
+        return this.valuePointsToDistribute() - valueDistributedPoints - initialPoints;
+    });
+    protected readonly calculatedValueStatistics = computed(() => {
+        const mainStatistics = this.mainStatisticsChange();
+        const valueStatistics = this.valueStatisticsChange();
+
+        return this.charactersService.calculateValueStatistics({ main: mainStatistics, value: valueStatistics });
+    });
+
+    constructor() {
+        this.subscribeToMainFormGroupChanges();
+        this.subscribeToValueFormGroupChanges();
+    }
+
+    protected convertMainToValuePoint(): void {
+        const remainingMainPoints = this.mainRemainingPoints();
+
+        if (remainingMainPoints >= 1) {
+            this.convertedMainPoints.update(current => current + 1);
+            this.valuePointsToDistribute.update(current => current + 3);
+        }
+    }
+
+    protected convertValueToMainPoint(): void {
+        const remainingValuePoints = this.valueRemainingPoints();
+
+        if (remainingValuePoints >= 3) {
+            this.convertedMainPoints.update(current => current - 1);
+            this.valuePointsToDistribute.update(current => current - 3);
+        }
+    }
+
+    private subscribeToMainFormGroupChanges(): void {
+        let subscription: Subscription | undefined;
+
+        effect(() => {
+            const formGroup = this.mainFormGroup();
+
+            subscription?.unsubscribe();
+            subscription = formGroup.valueChanges
+                .pipe(map(() => formGroup.getRawValue() as MainStatistics))
+                .subscribe(value => this.mainStatisticsChange.set(value));
+
+            return () => subscription?.unsubscribe();
+        });
+    }
+
+    private subscribeToValueFormGroupChanges(): void {
+        let subscription: Subscription | undefined;
+
+        effect(() => {
+            const formGroup = this.valueFormGroup();
+
+            subscription?.unsubscribe();
+            subscription = formGroup.valueChanges
+                .pipe(map(() => formGroup.getRawValue() as ValueStatistics))
+                .subscribe(value => this.valueStatisticsChange.set(value));
+
+            return () => subscription?.unsubscribe();
+        });
+    }
+}
diff --git a/src/app/components/characters/character-statistics/character-value-statistics/character-value-statistics.component.css b/src/app/components/characters/character-statistics/character-value-statistics/character-value-statistics.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/characters/character-statistics/character-value-statistics/character-value-statistics.component.html b/src/app/components/characters/character-statistics/character-value-statistics/character-value-statistics.component.html
new file mode 100644
index 0000000..54a73b4
--- /dev/null
+++ b/src/app/components/characters/character-statistics/character-value-statistics/character-value-statistics.component.html
@@ -0,0 +1,88 @@
+<pap-content-group [footer]="footer()" [formGroup]="formGroup()" class="flex-1" title="Werte Tabelle">
+    <div [class.flex-col]="allowEdit()" [class.space-x-4]="!allowEdit()" [class.space-y-2]="allowEdit()" class="flex ">
+        <div class="flex-1 space-y-2">
+            <pap-character-statistic
+                [allowEdit]="allowEdit()"
+                [displayValue]="calculatedValueStatistics().life"
+                [remainingPoints]="remainingPoints()"
+                formControlName="life"
+                label="Leben" />
+            <pap-character-statistic
+                [allowEdit]="allowEdit()"
+                [displayValue]="calculatedValueStatistics().power"
+                [remainingPoints]="remainingPoints()"
+                formControlName="power"
+                label="Kraft" />
+            <pap-character-statistic
+                [allowEdit]="allowEdit()"
+                [displayValue]="calculatedValueStatistics().energy"
+                [remainingPoints]="remainingPoints()"
+                formControlName="energy"
+                label="Energie" />
+            <pap-character-statistic
+                [allowEdit]="allowEdit()"
+                [displayValue]="calculatedValueStatistics().precision"
+                [remainingPoints]="remainingPoints()"
+                formControlName="precision"
+                label="Präzision" />
+            <pap-character-statistic
+                [allowEdit]="allowEdit()"
+                [displayValue]="calculatedValueStatistics().perception"
+                [remainingPoints]="remainingPoints()"
+                formControlName="perception"
+                label="Wahrnehmung" />
+        </div>
+        <div class="flex-1 space-y-2">
+            <pap-character-statistic
+                [allowEdit]="allowEdit()"
+                [displayValue]="calculatedValueStatistics().magicDefense"
+                [remainingPoints]="remainingPoints()"
+                formControlName="magicDefense"
+                label="Magieabwehr" />
+            <pap-character-statistic
+                [allowEdit]="allowEdit()"
+                [displayValue]="calculatedValueStatistics().magicTolerance"
+                [remainingPoints]="remainingPoints()"
+                formControlName="magicTolerance"
+                label="Magietoleranz" />
+            <pap-character-statistic
+                [allowEdit]="allowEdit()"
+                [displayValue]="calculatedValueStatistics().magicControl"
+                [remainingPoints]="remainingPoints()"
+                formControlName="magicControl"
+                label="Magielenkung" />
+            <pap-character-statistic
+                [allowEdit]="allowEdit()"
+                [displayValue]="calculatedValueStatistics().mana"
+                [remainingPoints]="remainingPoints()"
+                formControlName="mana"
+                label="Mana" />
+            <pap-character-statistic
+                [allowEdit]="allowEdit()"
+                [displayValue]="calculatedValueStatistics().manaRegeneration"
+                [remainingPoints]="remainingPoints()"
+                formControlName="manaRegeneration"
+                label="Manaregeneration" />
+        </div>
+        <div class="flex-1 space-y-2">
+            <pap-character-statistic
+                [allowEdit]="allowEdit()"
+                [displayValue]="calculatedValueStatistics().reaction"
+                [remainingPoints]="remainingPoints()"
+                formControlName="reaction"
+                label="Reaktion" />
+            <pap-character-statistic
+                [allowEdit]="allowEdit()"
+                [displayValue]="calculatedValueStatistics().cover"
+                [remainingPoints]="remainingPoints()"
+                formControlName="cover"
+                label="Warnung" />
+            <pap-character-statistic
+                [allowEdit]="allowEdit()"
+                [displayValue]="calculatedValueStatistics().authority"
+                [remainingPoints]="remainingPoints()"
+                formControlName="authority"
+                label="Kontrolle" />
+        </div>
+    </div>
+</pap-content-group>
diff --git a/src/app/components/characters/character-statistics/character-value-statistics/character-value-statistics.component.ts b/src/app/components/characters/character-statistics/character-value-statistics/character-value-statistics.component.ts
new file mode 100644
index 0000000..5fa3629
--- /dev/null
+++ b/src/app/components/characters/character-statistics/character-value-statistics/character-value-statistics.component.ts
@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { ContentGroupComponent } from '../../../content-group/content-group.component';
+import { CharacterStatisticComponent } from '../character-statistic/character-statistic.component';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { ValueStatistics } from '../../../../models/character/value-statistics';
+
+@Component({
+    selector: 'pap-character-value-statistics',
+    standalone: true,
+    imports: [ContentGroupComponent, CharacterStatisticComponent, ReactiveFormsModule],
+    templateUrl: './character-value-statistics.component.html',
+    styleUrl: './character-value-statistics.component.css',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CharacterValueStatisticsComponent {
+    formGroup = input.required<FormGroup>();
+    allowEdit = input(false);
+    calculatedValueStatistics = input.required<ValueStatistics>();
+    remainingPoints = input(0);
+    footer = input('');
+}
diff --git a/src/app/components/characters/create-character/create-character.component.html b/src/app/components/characters/create-character/create-character.component.html
index a10c821..3e04182 100644
--- a/src/app/components/characters/create-character/create-character.component.html
+++ b/src/app/components/characters/create-character/create-character.component.html
@@ -8,20 +8,13 @@
     <pap-text-input [control]="formGroup.controls['religion']" class="block" label="Religion" />
     <pap-text-input [control]="formGroup.controls['group']" class="block" label="Spielrunde" />
 
-    <div class="flex w-full xl:w-2/5">
-        <pap-content-group
-            [footer]="'Bitte verteile weitere ' + remainingPoints() + ' Punkte.'"
-            class="flex-1"
-            formGroupName="main"
-            title="Main Stats">
-            <pap-character-statistic [allowEdit]="true" [remainingPoints]="remainingPoints()" formControlName="strength" label="Stärke" />
-            <pap-character-statistic [allowEdit]="true" [remainingPoints]="remainingPoints()" formControlName="agility" label="Beweglichkeit" />
-            <pap-character-statistic [allowEdit]="true" [remainingPoints]="remainingPoints()" formControlName="stamina" label="Ausdauer" />
-            <pap-character-statistic [allowEdit]="true" [remainingPoints]="remainingPoints()" formControlName="magic" label="Magie" />
-            <pap-character-statistic [allowEdit]="true" [remainingPoints]="remainingPoints()" formControlName="spirit" label="Geist" />
-            <pap-character-statistic [allowEdit]="true" [remainingPoints]="remainingPoints()" formControlName="intelligence" label="Intelligenz" />
-        </pap-content-group>
-    </div>
+    <pap-character-statistics
+        class="mt-4"
+        [mainAllowEdit]="true"
+        [mainFormGroup]="formGroup.controls['main']"
+        [pointsToDistribute]="200"
+        [valueFormGroup]="formGroup.controls['value']"
+        [valueAllowEdit]="true" />
 
-    <pap-submit-button [disabled]="formGroup.invalid" class="mt-4">Charakter erstellen</pap-submit-button>
+    <pap-button type="submit" [disabled]="formGroup.invalid" class="mt-4">Charakter erstellen</pap-button>
 </form>
diff --git a/src/app/components/characters/create-character/create-character.component.ts b/src/app/components/characters/create-character/create-character.component.ts
index d7904da..b634a12 100644
--- a/src/app/components/characters/create-character/create-character.component.ts
+++ b/src/app/components/characters/create-character/create-character.component.ts
@@ -1,16 +1,16 @@
-import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { H1Component } from '../../headings/h1/h1.component';
 import { FormsModule, NonNullableFormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { TextInputComponent } from '../../inputs/text-input/text-input.component';
-import { SubmitButtonComponent } from '../../inputs/submit-button/submit-button.component';
+import { ButtonComponent } from '../../buttons/button/button.component';
 import { Router, RouterLink } from '@angular/router';
 import { CharactersService } from '../../../services/characters.service';
-import { CharacterStatisticComponent } from '../character-statistic/character-statistic.component';
+import { CharacterStatisticComponent } from '../character-statistics/character-statistic/character-statistic.component';
 import { ContentGroupComponent } from '../../content-group/content-group.component';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { map } from 'rxjs';
 import { requiredPointsToDistributeValidator } from '../../../validators/required-points-to-distribute-validator';
 import { CharactersStore } from '../../../stores/characters.store';
+import { CharacterMainStatisticsComponent } from '../character-statistics/character-main-statistics/character-main-statistics.component';
+import { CharacterStatisticsComponent } from '../character-statistics/character-statistics.component';
 
 const INITIAL_POINTS_TO_DISTRIBUTE = 200;
 
@@ -20,12 +20,14 @@ const INITIAL_POINTS_TO_DISTRIBUTE = 200;
     imports: [
         H1Component,
         TextInputComponent,
-        SubmitButtonComponent,
+        ButtonComponent,
         FormsModule,
         ReactiveFormsModule,
         RouterLink,
         CharacterStatisticComponent,
         ContentGroupComponent,
+        CharacterMainStatisticsComponent,
+        CharacterStatisticsComponent,
     ],
     templateUrl: './create-character.component.html',
     styleUrl: './create-character.component.css',
@@ -35,40 +37,43 @@ export default class CreateCharacterComponent {
     protected readonly charactersService = inject(CharactersService);
     protected readonly charactersStore = inject(CharactersStore);
     private readonly formBuilder = inject(NonNullableFormBuilder);
-    protected readonly formGroup = this.formBuilder.group({
-        name: ['', Validators.required],
-        nation: ['', Validators.required],
-        gender: ['', Validators.required],
-        age: [0, [Validators.required, Validators.min(0)]],
-        religion: ['', Validators.required],
-        group: ['', Validators.required],
-        main: this.formBuilder.group(
-            {
+    protected readonly formGroup = this.formBuilder.group(
+        {
+            name: ['', Validators.required],
+            nation: ['', Validators.required],
+            gender: ['', Validators.required],
+            age: [0, [Validators.required, Validators.min(0)]],
+            religion: ['', Validators.required],
+            group: ['', Validators.required],
+            main: this.formBuilder.group({
                 agility: [0],
                 magic: [0],
                 spirit: [0],
                 intelligence: [0],
                 stamina: [0],
                 strength: [0],
-            },
-            {
-                validators: [requiredPointsToDistributeValidator(this.charactersService, INITIAL_POINTS_TO_DISTRIBUTE)],
-            },
-        ),
-    });
-    private readonly pointsChange = toSignal(
-        this.formGroup.controls['main'].valueChanges.pipe(map(() => this.formGroup.controls['main'].getRawValue())),
+            }),
+            value: this.formBuilder.group({
+                life: [0],
+                power: [0],
+                energy: [0],
+                magicDefense: [0],
+                magicTolerance: [0],
+                magicControl: [0],
+                precision: [0],
+                perception: [0],
+                mana: [0],
+                manaRegeneration: [0],
+                reaction: [0],
+                cover: [0],
+                authority: [0],
+            }),
+        },
+        {
+            validators: requiredPointsToDistributeValidator(this.charactersService, INITIAL_POINTS_TO_DISTRIBUTE),
+        },
     );
 
-    protected readonly remainingPoints = computed(() => {
-        const distributedPoints = this.pointsChange();
-
-        if (!distributedPoints) {
-            return INITIAL_POINTS_TO_DISTRIBUTE;
-        }
-
-        return INITIAL_POINTS_TO_DISTRIBUTE - this.charactersService.sumMainStatistics(distributedPoints);
-    });
     private readonly router = inject(Router);
 
     protected async submit(): Promise<void> {
diff --git a/src/app/components/inputs/submit-button/submit-button.component.ts b/src/app/components/inputs/submit-button/submit-button.component.ts
deleted file mode 100644
index a680097..0000000
--- a/src/app/components/inputs/submit-button/submit-button.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { NgClass } from '@angular/common';
-
-@Component({
-    selector: 'pap-submit-button',
-    standalone: true,
-    imports: [NgClass],
-    templateUrl: './submit-button.component.html',
-    styleUrl: './submit-button.component.css',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class SubmitButtonComponent {
-    @Input() disabled = false;
-    @Input() danger = false;
-}
diff --git a/src/app/components/settings/backup-restore/backup-restore.component.html b/src/app/components/settings/backup-restore/backup-restore.component.html
index c14f0f5..a12a56a 100644
--- a/src/app/components/settings/backup-restore/backup-restore.component.html
+++ b/src/app/components/settings/backup-restore/backup-restore.component.html
@@ -2,7 +2,7 @@
 
 <p>Bitte erstelle regelmäßig ein Backup, sodass Du Deine Daten nicht verlierst.</p>
 
-<pap-submit-button (click)="createBackup()" class="mt-4">Backup erstellen</pap-submit-button>
+<pap-button (click)="createBackup()" class="mt-4">Backup erstellen</pap-button>
 
 <pap-h2 class="mt-8 block">Gefahrenzone</pap-h2>
 
@@ -15,7 +15,7 @@
         </div>
         <div class="flex items-center">
             <input type="file" accept=".json" class="hidden" #fileInput [formControl]="fileControl" (change)="fileChange()" />
-            <pap-submit-button (click)="import()" [danger]="true">Importieren</pap-submit-button>
+            <pap-button (click)="import()" [danger]="true">Importieren</pap-button>
         </div>
     </div>
 
@@ -26,7 +26,7 @@
             <p>Lege Dir zuvor ein Backup an, damit Du im Notfall dieses Wiederherstellen kannst.</p>
         </div>
         <div class="flex items-center">
-            <pap-submit-button (click)="reset()" [danger]="true">Zurücksetzen</pap-submit-button>
+            <pap-button (click)="reset()" [danger]="true">Zurücksetzen</pap-button>
         </div>
     </div>
 </section>
diff --git a/src/app/components/settings/backup-restore/backup-restore.component.ts b/src/app/components/settings/backup-restore/backup-restore.component.ts
index 4574fd5..102b2c2 100644
--- a/src/app/components/settings/backup-restore/backup-restore.component.ts
+++ b/src/app/components/settings/backup-restore/backup-restore.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, ElementRef, inject, ViewChild } from '@angular/core';
 import { H1Component } from '../../headings/h1/h1.component';
-import { SubmitButtonComponent } from '../../inputs/submit-button/submit-button.component';
+import { ButtonComponent } from '../../buttons/button/button.component';
 import { DatabaseService } from '../../../services/database.service';
 import { TauriService } from '../../../services/tauri.service';
 import { DateTime } from 'luxon';
@@ -12,7 +12,7 @@ import { FileDirective } from '../../../directives/file.directive';
 @Component({
     selector: 'pap-backup-restore',
     standalone: true,
-    imports: [H1Component, SubmitButtonComponent, H2Component, H3Component, FormsModule, ReactiveFormsModule, FileDirective],
+    imports: [H1Component, ButtonComponent, H2Component, H3Component, FormsModule, ReactiveFormsModule, FileDirective],
     templateUrl: './backup-restore.component.html',
     styleUrl: './backup-restore.component.css',
     changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/app/components/tools/dice/dice.component.html b/src/app/components/tools/dice/dice.component.html
index 11fe2b7..0639459 100644
--- a/src/app/components/tools/dice/dice.component.html
+++ b/src/app/components/tools/dice/dice.component.html
@@ -12,7 +12,7 @@
             required
             type="text" />
     </div>
-    <pap-submit-button (click)="roll()" [disabled]="!dice"> Würfeln! </pap-submit-button>
+    <pap-button (tap)="roll()" [disabled]="!dice"> Würfeln! </pap-button>
 
     <div class="mt-4">Ergebnis: {{ result }}</div>
 </form>
diff --git a/src/app/components/tools/dice/dice.component.ts b/src/app/components/tools/dice/dice.component.ts
index c4d76f8..cba0d87 100644
--- a/src/app/components/tools/dice/dice.component.ts
+++ b/src/app/components/tools/dice/dice.component.ts
@@ -1,13 +1,13 @@
 import { AfterViewInit, Component } from '@angular/core';
 import DiceBox from '@3d-dice/dice-box';
 import { FormsModule } from '@angular/forms';
-import { SubmitButtonComponent } from '../../inputs/submit-button/submit-button.component';
+import { ButtonComponent } from '../../buttons/button/button.component';
 import { H1Component } from '../../headings/h1/h1.component';
 
 @Component({
     selector: 'pap-dice',
     standalone: true,
-    imports: [FormsModule, SubmitButtonComponent, H1Component],
+    imports: [FormsModule, ButtonComponent, H1Component],
     templateUrl: './dice.component.html',
     styleUrl: './dice.component.css',
 })
diff --git a/src/app/models/character/value-statistics.ts b/src/app/models/character/value-statistics.ts
index d2233fd..9ba54d9 100644
--- a/src/app/models/character/value-statistics.ts
+++ b/src/app/models/character/value-statistics.ts
@@ -32,7 +32,7 @@ export interface ValueStatistics {
     /**
      * Treffen.
      */
-    strike: number;
+    precision: number;
 
     /**
      * Wahrnehmung.
diff --git a/src/app/services/characters.service.ts b/src/app/services/characters.service.ts
index d6549f4..3d271c2 100644
--- a/src/app/services/characters.service.ts
+++ b/src/app/services/characters.service.ts
@@ -4,6 +4,7 @@ import { MainStatistics } from '../models/character/main-statistics';
 import { CharactersTable } from './tables/characters.table';
 import { TransactionsService } from './transactions.service';
 import { Statistics } from '../models/character/statistics';
+import { ValueStatistics } from '../models/character/value-statistics';
 
 @Injectable({
     providedIn: 'root',
@@ -22,6 +23,24 @@ export class CharactersService {
         return statistics.agility + statistics.magic + statistics.spirit + statistics.intelligence + statistics.stamina + statistics.strength;
     }
 
+    sumValueStatistics(value: ValueStatistics): number {
+        return (
+            value.reaction +
+            value.mana +
+            value.manaRegeneration +
+            value.life +
+            value.energy +
+            value.magicControl +
+            value.magicTolerance +
+            value.magicDefense +
+            value.perception +
+            value.precision +
+            value.power +
+            value.cover +
+            value.authority
+        );
+    }
+
     async add(character: Omit<CharacterEntity, 'id' | 'value'>): Promise<CharacterEntity> {
         const characterEntity = await this.charactersTable.add({
             ...character,
@@ -32,7 +51,7 @@ export class CharactersService {
                 magicDefense: 0,
                 magicTolerance: 0,
                 magicControl: 0,
-                strike: 0,
+                precision: 0,
                 perception: 0,
                 mana: 0,
                 manaRegeneration: 0,
@@ -68,7 +87,7 @@ export class CharactersService {
                 magicDefense: b.value.magicDefense - a.value.magicDefense,
                 magicTolerance: b.value.magicTolerance - a.value.magicTolerance,
                 magicControl: b.value.magicControl - a.value.magicControl,
-                strike: b.value.strike - a.value.strike,
+                precision: b.value.precision - a.value.precision,
                 perception: b.value.perception - a.value.perception,
                 mana: b.value.mana - a.value.mana,
                 manaRegeneration: b.value.manaRegeneration - a.value.manaRegeneration,
@@ -86,4 +105,22 @@ export class CharactersService {
 
         return !mainStatsZero || !valueStatsZero;
     }
+
+    calculateValueStatistics({ main, value }: Statistics): ValueStatistics {
+        return {
+            life: value.life + main.strength + 1.5 * main.stamina,
+            mana: value.mana + main.spirit + 1.5 * main.intelligence + 0.5 * main.magic,
+            power: value.power + main.strength + 0.5 * main.agility,
+            precision: value.precision + 0.5 * main.strength + main.agility,
+            reaction: value.reaction + 0.5 * main.strength + main.agility + main.intelligence,
+            energy: value.energy + main.strength + 0.5 * main.stamina,
+            perception: value.perception + main.intelligence + 0.5 * main.spirit,
+            cover: value.cover + 1.5 * main.agility,
+            magicDefense: value.magicDefense + main.stamina + main.magic + 0.5 * main.spirit,
+            magicControl: value.magicControl + main.magic + main.spirit + 0.5 * main.intelligence,
+            magicTolerance: value.magicTolerance + 0.5 * main.magic + main.spirit,
+            manaRegeneration: value.manaRegeneration + 0.5 * main.magic + main.spirit,
+            authority: value.authority,
+        };
+    }
 }
diff --git a/src/app/validators/required-points-to-distribute-validator.ts b/src/app/validators/required-points-to-distribute-validator.ts
index 29366a6..99af044 100644
--- a/src/app/validators/required-points-to-distribute-validator.ts
+++ b/src/app/validators/required-points-to-distribute-validator.ts
@@ -1,10 +1,13 @@
 import { CharactersService } from '../services/characters.service';
 import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
 import { MainStatistics } from '../models/character/main-statistics';
+import { ValueStatistics } from '../models/character/value-statistics';
 
 export function requiredPointsToDistributeValidator(charactersService: CharactersService, requiredPointsToDistribute: number): ValidatorFn {
-    return (control: AbstractControl<MainStatistics>): ValidationErrors | null => {
-        const sum = charactersService.sumMainStatistics(control.value);
+    return (control: AbstractControl<{ main: MainStatistics; value: ValueStatistics }>): ValidationErrors | null => {
+        const mainSum = charactersService.sumMainStatistics(control.value.main);
+        const valueSum = charactersService.sumValueStatistics(control.value.value);
+        const sum = mainSum + valueSum / 3; // / 3 due to conversion
         if (sum !== requiredPointsToDistribute) {
             return { invalidDistributedPoints: true };
         }