feat: statistics

BoundfoxStudios · Jan 27, 2024 · 604bc47 · 604bc47
1 parent fd700f6
commit 604bc47
Show file tree

Hide file tree

Showing 7 changed files with 316 additions and 140 deletions.
diff --git a/src/app/components/characters/character-dashboard/character-dashboard.component.html b/src/app/components/characters/character-dashboard/character-dashboard.component.html
@@ -1,39 +1,120 @@
 <pap-h1>{{ character().name }}</pap-h1>
 
-<pap-content-group class="w-1/2" label="Main Stats">
-    <pap-character-statistic
-        (incrementChange)="updateStrength(character(), $event)"
-        [allowEdit]="editModeStore.isEnabled()"
-        [value]="character().main.strength"
-        label="Stärke"></pap-character-statistic>
-    <pap-character-statistic
-        (incrementChange)="updateAgility(character(), $event)"
-        [allowEdit]="editModeStore.isEnabled()"
-        [value]="character().main.agility"
-        class="mt-2"
-        label="Beweglichkeit"></pap-character-statistic>
-    <pap-character-statistic
-        (incrementChange)="updateStamina(character(), $event)"
-        [allowEdit]="editModeStore.isEnabled()"
-        [value]="character().main.stamina"
-        class="mt-2"
-        label="Ausdauer"></pap-character-statistic>
-    <pap-character-statistic
-        (incrementChange)="updateMagic(character(), $event)"
-        [allowEdit]="editModeStore.isEnabled()"
-        [value]="character().main.magic"
-        class="mt-2"
-        label="Magie"></pap-character-statistic>
-    <pap-character-statistic
-        (incrementChange)="updateSpirit(character(), $event)"
-        [allowEdit]="editModeStore.isEnabled()"
-        [value]="character().main.spirit"
-        class="mt-2"
-        label="Geist"></pap-character-statistic>
-    <pap-character-statistic
-        (incrementChange)="updateIntelligence(character(), $event)"
-        [allowEdit]="editModeStore.isEnabled()"
-        [value]="character().main.intelligence"
-        class="mt-2"
-        label="Intelligenz"></pap-character-statistic>
-</pap-content-group>
+<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" label="Main Stats">
+            <pap-character-statistic
+                (incrementChange)="updateStrength(character(), $event)"
+                [allowEdit]="editModeStore.isEnabled()"
+                [value]="character().main.strength"
+                label="Stärke" />
+            <pap-character-statistic
+                (incrementChange)="updateAgility(character(), $event)"
+                [allowEdit]="editModeStore.isEnabled()"
+                [value]="character().main.agility"
+                label="Beweglichkeit" />
+            <pap-character-statistic
+                (incrementChange)="updateStamina(character(), $event)"
+                [allowEdit]="editModeStore.isEnabled()"
+                [value]="character().main.stamina"
+                label="Ausdauer" />
+            <pap-character-statistic
+                (incrementChange)="updateMagic(character(), $event)"
+                [allowEdit]="editModeStore.isEnabled()"
+                [value]="character().main.magic"
+                label="Magie" />
+            <pap-character-statistic
+                (incrementChange)="updateSpirit(character(), $event)"
+                [allowEdit]="editModeStore.isEnabled()"
+                [value]="character().main.spirit"
+                label="Geist" />
+            <pap-character-statistic
+                (incrementChange)="updateIntelligence(character(), $event)"
+                [allowEdit]="editModeStore.isEnabled()"
+                [value]="character().main.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" label="Werte Tabelle">
+            <div
+                class="flex "
+                [class.space-x-4]="!editModeStore.isEnabled()"
+                [class.flex-col]="editModeStore.isEnabled()"
+                [class.space-y-2]="editModeStore.isEnabled()">
+                <div class="flex-1 space-y-2">
+                    <pap-character-statistic
+                        (incrementChange)="updateLife(character(), $event)"
+                        [allowEdit]="editModeStore.isEnabled()"
+                        [value]="character().value.life"
+                        label="Leben" />
+                    <pap-character-statistic
+                        (incrementChange)="updatePower(character(), $event)"
+                        [allowEdit]="editModeStore.isEnabled()"
+                        [value]="character().value.power"
+                        label="Kraft" />
+                    <pap-character-statistic
+                        (incrementChange)="updateEnergy(character(), $event)"
+                        [allowEdit]="editModeStore.isEnabled()"
+                        [value]="character().value.energy"
+                        label="Energie" />
+                    <pap-character-statistic
+                        (incrementChange)="updateStrike(character(), $event)"
+                        [allowEdit]="editModeStore.isEnabled()"
+                        [value]="character().value.strike"
+                        label="Treffen" />
+                    <pap-character-statistic
+                        (incrementChange)="updatePerception(character(), $event)"
+                        [allowEdit]="editModeStore.isEnabled()"
+                        [value]="character().value.perception"
+                        label="Wahrnehmung" />
+                </div>
+                <div class="flex-1 space-y-2">
+                    <pap-character-statistic
+                        (incrementChange)="updateMagicDefense(character(), $event)"
+                        [allowEdit]="editModeStore.isEnabled()"
+                        [value]="character().value.magicDefense"
+                        label="Magieabwehr" />
+                    <pap-character-statistic
+                        (incrementChange)="updateMagicTolerance(character(), $event)"
+                        [allowEdit]="editModeStore.isEnabled()"
+                        [value]="character().value.magicTolerance"
+                        label="Magietoleranz" />
+                    <pap-character-statistic
+                        (incrementChange)="updateMagicControl(character(), $event)"
+                        [allowEdit]="editModeStore.isEnabled()"
+                        [value]="character().value.magicControl"
+                        label="Magielenkung" />
+                    <pap-character-statistic
+                        (incrementChange)="updateMana(character(), $event)"
+                        [allowEdit]="editModeStore.isEnabled()"
+                        [value]="character().value.mana"
+                        label="Mana" />
+                    <pap-character-statistic
+                        (incrementChange)="updateManaRegeneration(character(), $event)"
+                        [allowEdit]="editModeStore.isEnabled()"
+                        [value]="character().value.manaRegeneration"
+                        label="Manaregeneration" />
+                </div>
+                <div class="flex-1 space-y-2">
+                    <pap-character-statistic
+                        (incrementChange)="updateReaction(character(), $event)"
+                        [allowEdit]="editModeStore.isEnabled()"
+                        [value]="character().value.reaction"
+                        label="Reaktion" />
+                    <pap-character-statistic
+                        (incrementChange)="updateCover(character(), $event)"
+                        [allowEdit]="editModeStore.isEnabled()"
+                        [value]="character().value.cover"
+                        label="Warnung" />
+                    <pap-character-statistic
+                        (incrementChange)="updateAuthority(character(), $event)"
+                        [allowEdit]="editModeStore.isEnabled()"
+                        [value]="character().value.authority"
+                        label="Kontrolle" />
+                </div>
+            </div>
+        </pap-content-group>
+    </div>
+</section>
diff --git a/src/app/components/characters/character-dashboard/character-dashboard.component.ts b/src/app/components/characters/character-dashboard/character-dashboard.component.ts
@@ -73,4 +73,95 @@ export default class CharacterDashboardComponent {
             main: { ...character.main, intelligence: character.main.intelligence + increment },
         });
     }
+
+    protected updateLife(character: CharacterEntity, increment: number) {
+        void this.characterStore.update({
+            ...character,
+            value: { ...character.value, life: character.value.life + increment },
+        });
+    }
+
+    protected updatePower(character: CharacterEntity, increment: number) {
+        void this.characterStore.update({
+            ...character,
+            value: { ...character.value, power: character.value.power + increment },
+        });
+    }
+
+    protected updateEnergy(character: CharacterEntity, increment: number) {
+        void this.characterStore.update({
+            ...character,
+            value: { ...character.value, energy: character.value.energy + increment },
+        });
+    }
+
+    protected updateStrike(character: CharacterEntity, increment: number) {
+        void this.characterStore.update({
+            ...character,
+            value: { ...character.value, strike: character.value.strike + increment },
+        });
+    }
+
+    protected updatePerception(character: CharacterEntity, increment: number) {
+        void this.characterStore.update({
+            ...character,
+            value: { ...character.value, perception: character.value.perception + increment },
+        });
+    }
+
+    protected updateMagicDefense(character: CharacterEntity, increment: number) {
+        void this.characterStore.update({
+            ...character,
+            value: { ...character.value, magicDefense: character.value.magicDefense + increment },
+        });
+    }
+
+    protected updateMagicTolerance(character: CharacterEntity, increment: number) {
+        void this.characterStore.update({
+            ...character,
+            value: { ...character.value, magicTolerance: character.value.magicTolerance + increment },
+        });
+    }
+
+    protected updateMagicControl(character: CharacterEntity, increment: number) {
+        void this.characterStore.update({
+            ...character,
+            value: { ...character.value, magicControl: character.value.magicControl + increment },
+        });
+    }
+
+    protected updateMana(character: CharacterEntity, increment: number) {
+        void this.characterStore.update({
+            ...character,
+            value: { ...character.value, mana: character.value.mana + increment },
+        });
+    }
+
+    protected updateManaRegeneration(character: CharacterEntity, increment: number) {
+        void this.characterStore.update({
+            ...character,
+            value: { ...character.value, manaRegeneration: character.value.manaRegeneration + increment },
+        });
+    }
+
+    protected updateReaction(character: CharacterEntity, increment: number) {
+        void this.characterStore.update({
+            ...character,
+            value: { ...character.value, reaction: character.value.reaction + increment },
+        });
+    }
+
+    protected updateCover(character: CharacterEntity, increment: number) {
+        void this.characterStore.update({
+            ...character,
+            value: { ...character.value, cover: character.value.cover + increment },
+        });
+    }
+
+    protected updateAuthority(character: CharacterEntity, increment: number) {
+        void this.characterStore.update({
+            ...character,
+            value: { ...character.value, authority: character.value.authority + increment },
+        });
+    }
 }
diff --git a/src/app/components/characters/character-statistic/character-statistic.component.html b/src/app/components/characters/character-statistic/character-statistic.component.html
@@ -8,7 +8,7 @@
     @if (allowEdit) {
         <div class="flex items-center">
             <p>{{ value }}</p>
-            <div class="ml-4 inline-flex rounded-md shadow-sm" role="group">
+            <div class="ml-4 inline-flex rounded-md" role="group">
                 @if (allowTenIncrement) {
                     <button
                         (click)="incrementChange.emit(10)"

diff --git a/src/app/components/content-group/content-group.component.html b/src/app/components/content-group/content-group.component.html
@@ -1,6 +1,9 @@
-<div class="w-full rounded-lg bg-gray-50 shadow dark:border dark:border-gray-800 dark:bg-gray-900 sm:max-w-md md:mt-0 xl:p-0">
-    <div class="space-y-4 p-6 sm:p-8 md:space-y-6">
+<div class="w-full rounded-lg bg-gray-50 shadow dark:border dark:border-gray-800 dark:bg-gray-900 md:mt-0 xl:p-0">
+    <div class="flex flex-col p-6">
         <pap-h2>{{ label }}</pap-h2>
-        <ng-content></ng-content>
+
+        <div class="flex flex-col space-y-2">
+            <ng-content></ng-content>
+        </div>
     </div>
 </div>
diff --git a/src/app/models/character/character.entity.ts b/src/app/models/character/character.entity.ts
@@ -1,105 +1,9 @@
+import { MainStatistics } from './main-statistics';
+import { ValueStatistics } from './value-statistics';
+
 export interface CharacterEntity {
     id: number;
     name: string;
     main: MainStatistics;
     value: ValueStatistics;
 }
-
-export interface MainStatistics {
-    /**
-     * Stärke.
-     */
-    strength: number;
-
-    /**
-     * Beweglichkeit.
-     */
-    agility: number;
-
-    /**
-     * Stamina.
-     */
-    stamina: number;
-
-    /**
-     * Magie.
-     */
-    magic: number;
-
-    /**
-     * Geist.
-     */
-    spirit: number;
-
-    /**
-     * Intelligenz.
-     */
-    intelligence: number;
-}
-
-export interface ValueStatistics {
-    /**
-     * Leben.
-     */
-    life: number;
-
-    /**
-     * Kraft.
-     */
-    power: number;
-
-    /**
-     * Energie.
-     */
-    energy: number;
-
-    /**
-     * Magie Abwehr.
-     */
-    magicDefense: number;
-
-    /**
-     * Magie Toleranz.
-     */
-    magicTolerance: number;
-
-    /**
-     * Magie Lenkung.
-     */
-    magicControl: number;
-
-    /**
-     * Treffen.
-     */
-    strike: number;
-
-    /**
-     * Wahrnehmung.
-     */
-    perception: number;
-
-    /**
-     * Mana.
-     */
-    mana: number;
-
-    /**
-     * Mana Regenerierung.
-     */
-    manaRegeneration: number;
-
-    /**
-     * Reaktion.
-     */
-    reaction: number;
-
-    /**
-     * Tarnung.
-     */
-    cover: number;
-
-    /**
-     * Kontrolle.
-     */
-    authority: number;
-}