Skip to content

Commit

Permalink
feat: improve character editor
Browse files Browse the repository at this point in the history
  • Loading branch information
ManuelRauber committed Mar 11, 2024
1 parent 3bb21ba commit b893b36
Show file tree
Hide file tree
Showing 27 changed files with 488 additions and 133 deletions.
Original file line number Diff line number Diff line change
@@ -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>
17 changes: 17 additions & 0 deletions src/app/components/buttons/button/button.component.ts
Original file line number Diff line number Diff line change
@@ -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();
}
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -48,7 +58,7 @@ export default class CharacterDashboardComponent {
life: [0],
power: [0],
energy: [0],
strike: [0],
precision: [0],
perception: [0],
magicDefense: [0],
magicTolerance: [0],
Expand Down Expand Up @@ -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 });
});
}
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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);
}
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -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());
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
:host {
@apply block;
}
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit b893b36

Please sign in to comment.