Skip to content

Commit

Permalink
feat: better store <-> service flow
Browse files Browse the repository at this point in the history
  • Loading branch information
@ManuelRauber
ManuelRauber committed Mar 3, 2024
1 parent cc160ef commit 3bb21ba
Show file tree
Hide file tree
Showing 20 changed files with 449 additions and 319 deletions.
161 changes: 45 additions & 116 deletions src/app/components/characters/character-dashboard/character-dashboard.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,121 +3,50 @@
<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">
<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>
<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" label="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
(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 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>
<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>
</pap-content-group>
</div>
</section>
</form>
177 changes: 51 additions & 126 deletions src/app/components/characters/character-dashboard/character-dashboard.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,19 @@
import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
import { ChangeDetectionStrategy, Component, computed, effect, inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
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 { 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';
import { NonNullableFormBuilder, ReactiveFormsModule } from '@angular/forms';

@Component({
selector: 'pap-character-dashboard',
standalone: true,
imports: [H1Component, CharacterStatisticComponent, ContentGroupComponent, SecondaryH1Component],
imports: [H1Component, CharacterStatisticComponent, ContentGroupComponent, SecondaryH1Component, ReactiveFormsModule],
templateUrl: './character-dashboard.component.html',
styleUrl: './character-dashboard.component.css',
changeDetection: ChangeDetectionStrategy.OnPush,
Expand All @@ -23,7 +22,7 @@ export default class CharacterDashboardComponent {
protected readonly editModeStore = inject(EditModeStore);
private readonly activatedRoute = inject(ActivatedRoute);
private readonly characterStore = inject(CharactersStore);
private readonly charactersService = inject(CharactersService);
// private readonly charactersService = inject(CharactersService);
private readonly id = toSignal(
this.activatedRoute.paramMap.pipe(
map(params => params.get('characterId')),
Expand All @@ -35,136 +34,62 @@ export default class CharacterDashboardComponent {
return this.characterStore.entityMap()[this.id()!];
});

protected updateStrength(character: CharacterEntity, increment: number) {
void this.charactersService.update({
...character,
main: { ...character.main, strength: character.main.strength + increment },
});
}

protected updateAgility(character: CharacterEntity, increment: number) {
void this.charactersService.update({
...character,
main: { ...character.main, agility: character.main.agility + increment },
});
}

protected updateStamina(character: CharacterEntity, increment: number) {
void this.charactersService.update({
...character,
main: { ...character.main, stamina: character.main.stamina + increment },
});
}

protected updateMagic(character: CharacterEntity, increment: number) {
void this.charactersService.update({
...character,
main: { ...character.main, magic: character.main.magic + increment },
});
}

protected updateSpirit(character: CharacterEntity, increment: number) {
void this.charactersService.update({
...character,
main: { ...character.main, spirit: character.main.spirit + increment },
});
}

protected updateIntelligence(character: CharacterEntity, increment: number) {
void this.charactersService.update({
...character,
main: { ...character.main, intelligence: character.main.intelligence + increment },
});
}

protected updateLife(character: CharacterEntity, increment: number) {
void this.charactersService.update({
...character,
value: { ...character.value, life: character.value.life + increment },
});
}

protected updatePower(character: CharacterEntity, increment: number) {
void this.charactersService.update({
...character,
value: { ...character.value, power: character.value.power + increment },
});
}
private readonly formBuilder = inject(NonNullableFormBuilder);
protected readonly formGroup = this.formBuilder.group({
main: this.formBuilder.group({
agility: [0],
magic: [0],
spirit: [0],
intelligence: [0],
stamina: [0],
strength: [0],
}),
value: this.formBuilder.group({
life: [0],
power: [0],
energy: [0],
strike: [0],
perception: [0],
magicDefense: [0],
magicTolerance: [0],
magicControl: [0],
mana: [0],
manaRegeneration: [0],
reaction: [0],
cover: [0],
authority: [0],
}),
});

protected updateEnergy(character: CharacterEntity, increment: number) {
void this.charactersService.update({
...character,
value: { ...character.value, energy: character.value.energy + increment },
});
}
constructor() {
effect(
() => {
const character = this.character();

protected updateStrike(character: CharacterEntity, increment: number) {
void this.charactersService.update({
...character,
value: { ...character.value, strike: character.value.strike + increment },
});
}
this.formGroup.reset({ main: character.main, value: character.value });
},
{ allowSignalWrites: true },
); // The form internally uses a signal

protected updatePerception(character: CharacterEntity, increment: number) {
void this.charactersService.update({
...character,
value: { ...character.value, perception: character.value.perception + increment },
});
}
effect(() => {
const isEditModeEnabled = this.editModeStore.isEnabled();

protected updateMagicDefense(character: CharacterEntity, increment: number) {
void this.charactersService.update({
...character,
value: { ...character.value, magicDefense: character.value.magicDefense + increment },
});
}
if (isEditModeEnabled) {
return;
}

protected updateMagicTolerance(character: CharacterEntity, increment: number) {
void this.charactersService.update({
...character,
value: { ...character.value, magicTolerance: character.value.magicTolerance + increment },
});
}
if (this.formGroup.pristine) {
return;
}

protected updateMagicControl(character: CharacterEntity, increment: number) {
void this.charactersService.update({
...character,
value: { ...character.value, magicControl: character.value.magicControl + increment },
});
}

protected updateMana(character: CharacterEntity, increment: number) {
void this.charactersService.update({
...character,
value: { ...character.value, mana: character.value.mana + increment },
});
}
const character = this.character();

protected updateManaRegeneration(character: CharacterEntity, increment: number) {
void this.charactersService.update({
...character,
value: { ...character.value, manaRegeneration: character.value.manaRegeneration + increment },
});
}
// We might want to save the changes
const statistics = this.formGroup.getRawValue();

protected updateReaction(character: CharacterEntity, increment: number) {
void this.charactersService.update({
...character,
value: { ...character.value, reaction: character.value.reaction + increment },
});
}

protected updateCover(character: CharacterEntity, increment: number) {
void this.charactersService.update({
...character,
value: { ...character.value, cover: character.value.cover + increment },
});
}
console.log('effect');

protected updateAuthority(character: CharacterEntity, increment: number) {
void this.charactersService.update({
...character,
value: { ...character.value, authority: character.value.authority + increment },
void this.characterStore.updateStatistics({ ...character, main: statistics.main, value: statistics.value });
});
}
}
Loading

0 comments on commit 3bb21ba

Please sign in to comment.