123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501 |
- <div class="dimensions">
- <div class="title">
- @if(isModification){Zauber bearbeiten}@else{Zauber erstellen}
- </div>
- <div class="content b-0">
- <div class="input-label">Name</div>
- <mat-form-field appearance="outline" class="w-100">
- <input matInput [(ngModel)]="name" />
- </mat-form-field>
- <hr />
- <div class="flex-row t-1">
- <div class="checkbox-column">
- <div class="checkbox-row">
- <input id="verbal" type="checkbox" [(ngModel)]="needsVerbal" />
- <label for="verbal">Verbal</label>
- </div>
- <div class="checkbox-row">
- <input id="somatic" type="checkbox" [(ngModel)]="needsSomatic" />
- <label for="somatic">Geste</label>
- </div>
- <div class="checkbox-row">
- <input id="material" type="checkbox" [(ngModel)]="needsMaterial" />
- <label for="material">Material</label>
- </div>
- <div class="checkbox-row">
- <input
- id="concentration"
- type="checkbox"
- [(ngModel)]="needsConcentration"
- />
- <label for="concentration">Konzentration</label>
- </div>
- <div class="checkbox-row">
- <input
- id="canRitual"
- type="checkbox"
- (change)="unsetRitual($event)"
- [(ngModel)]="canRitual"
- />
- <label for="canRitual">Ritual möglich</label>
- </div>
- <div class="checkbox-row">
- <input
- id="isRitual"
- type="checkbox"
- (change)="setRitual($event)"
- [(ngModel)]="isRitual"
- />
- <label for="isRitual">Ist Ritual</label>
- </div>
- </div>
- <div class="checkbox-column">
- <div class="checkbox-row">
- <input id="doesDamage" type="checkbox" [(ngModel)]="doesDamage" />
- <label for="doesDamage">Schaden</label>
- </div>
- <div class="checkbox-row">
- <input id="doesHeal" type="checkbox" [(ngModel)]="doesHeal" />
- <label for="doesHeal">Heilung</label>
- </div>
- <div class="checkbox-row">
- <input id="isRanged" type="checkbox" [(ngModel)]="isRanged" />
- <label for="isRanged">Hat Reichweite</label>
- </div>
- <div class="checkbox-row">
- <input
- id="hasAreaOfEffect"
- type="checkbox"
- [(ngModel)]="hasAreaOfEffect"
- />
- <label for="hasAreaOfEffect">Hat Flächeneffekt</label>
- </div>
- <div class="checkbox-row">
- <input
- id="needsSavingThrow"
- type="checkbox"
- [(ngModel)]="needsSavingThrow"
- />
- <label for="needsSavingThrow">Erfordert Rettungswurf</label>
- </div>
- <div class="checkbox-row">
- @if(!needsSavingThrow){
- <input
- id="needsAttackRoll"
- type="checkbox"
- [(ngModel)]="needsAttackRoll"
- />
- <label for="needsAttackRoll">Erfordert Angriffswurf</label>
- }@else {
- <label>Attribut</label>
- <select [(ngModel)]="savingThrowAttribute" *ngIf="needsSavingThrow">
- <option
- *ngFor="let attribute of savingThrowAttributes"
- [value]="attribute.value"
- >
- {{ attribute.display }}
- </option>
- </select>
- }
- </div>
- </div>
- <div class="checkbox-column">
- <div class="input-row">
- <label>Kosten</label>
- <mat-form-field appearance="outline">
- <mat-select [(ngModel)]="cost">
- @for (cost of costs; track cost) {
- <mat-option [value]="cost.value">{{ cost.display }}</mat-option
- >}
- </mat-select>
- </mat-form-field>
- </div>
- <div class="input-row duration">
- <label>Dauer</label>
- <mat-form-field appearance="outline">
- <input type="number" matInput [(ngModel)]="duration" />
- <span matSuffix class="suffix">Runden</span>
- </mat-form-field>
- </div>
- <div class="input-row">
- <label>Stufe</label>
- <mat-form-field appearance="outline">
- <mat-select [(ngModel)]="level">
- @for (level of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; track level) {
- <mat-option [value]="level">{{ level }}</mat-option
- >}
- </mat-select>
- </mat-form-field>
- </div>
- <div class="input-row">
- <label>Schule</label>
- <mat-form-field appearance="outline">
- <mat-select [(ngModel)]="school">
- @for (school of schools; track school) {
- <mat-option [value]="school.value">{{
- school.display
- }}</mat-option
- >}
- </mat-select>
- </mat-form-field>
- </div>
- </div>
- </div>
- <hr />
- <!-- TAB-PANEL -->
- <div class="d-flex">
- <div
- ngbNav
- #nav="ngbNav"
- [(activeId)]="active"
- class="flex-column navigation-bar"
- orientation="vertical"
- >
- <!-- DAMAGE -->
- <ng-container ngbNavItem="damage">
- @if(doesDamage){
- <button ngbNavLink>Schaden</button>
- }@else {
- <button class="disabled-button" disabled>Schaden</button>
- }
- <ng-template ngbNavContent>
- <div class="tab-content flex-row t-05">
- @for(damageEntry of damage; let index = $index; track
- damageEntry){
- <div class="damage-box">
- <div class="subheading left t-025">
- @if(index == 0){Schaden} @else {Weiterer Schaden}
- </div>
- <div class="input-label">Anzahl Würfel</div>
- <mat-form-field appearance="outline">
- <mat-select [(ngModel)]="damageEntry.diceNumber">
- @for (number of numbers; track number) {
- <mat-option [value]="number"> {{ number }} </mat-option>}
- </mat-select>
- </mat-form-field>
- <div class="input-label t-05">Würfelart</div>
- <mat-form-field appearance="outline">
- <mat-select [(ngModel)]="damageEntry.diceType">
- @for (die of dice; track die) {
- <mat-option [value]="die"> {{ die }} </mat-option>}
- </mat-select>
- </mat-form-field>
- <div class="input-label t-05">Schadensart</div>
- <mat-form-field appearance="outline">
- <mat-select [(ngModel)]="damageEntry.damageType">
- @for (type of damageTypes; track type) {
- <mat-option [value]="type.value">
- {{ type.display }}
- </mat-option>
- }
- </mat-select>
- </mat-form-field>
- @if(index !== 0){
- <icon-button
- [icon]="'delete'"
- (click)="removeDamage(index)"
- ></icon-button>
- }
- </div>
- @if(damage.length < 2){
- <icon-button
- [icon]="'add'"
- style="margin-top: 7rem; margin-left: 5rem"
- (click)="addDamage()"
- ></icon-button>
- } }
- </div>
- </ng-template>
- </ng-container>
- <!-- HEAL -->
- <ng-container ngbNavItem="heal">
- @if(doesHeal){
- <button ngbNavLink>Heilung</button>} @else {
- <button class="disabled-button" disabled>Heilung</button>
- }
- <ng-template ngbNavContent>
- <div class="tab-content t-05">
- <div class="input-label">Würfelanzahl</div>
- <mat-form-field appearance="outline">
- <mat-select [(ngModel)]="heal.diceNumber">
- @for (number of numbers; track number) {
- <mat-option [value]="number">{{ number }}</mat-option
- >}
- </mat-select>
- </mat-form-field>
- <div class="input-label">Würfelart</div>
- <mat-form-field appearance="outline">
- <mat-select [(ngModel)]="heal.diceType">
- @for (die of dice; track die) {
- <mat-option [value]="die">{{ die }}</mat-option
- >}
- </mat-select>
- </mat-form-field>
- </div>
- </ng-template>
- </ng-container>
- <!-- RANGE -->
- <ng-container ngbNavItem="range">
- @if(isRanged || hasAreaOfEffect){
- <button ngbNavLink>Reichweite</button>
- } @else {
- <button class="disabled-button" disabled>Reichweite</button>
- }
- <ng-template ngbNavContent>
- <div class="range-container">
- <div class="input-label">Reichweite</div>
- <mat-form-field appearance="outline">
- <input type="number" matInput [(ngModel)]="range" />
- <span class="suffix" matTextSuffix>Fuß</span>
- </mat-form-field>
- @if(hasAreaOfEffect) {
- <div class="input-label">Flächenart</div>
- <mat-form-field appearance="outline">
- <mat-select [(ngModel)]="areaOfEffectType">
- @for (areaType of areaTypes; track areaType) {
- <mat-option [value]="areaType.value">{{
- areaType.display
- }}</mat-option
- >}
- </mat-select>
- </mat-form-field>
- <div class="input-label">Durchmesser</div>
- <mat-form-field appearance="outline">
- <input type="number" matInput [(ngModel)]="diameter" />
- <span class="suffix" matTextSuffix>Fuß</span>
- </mat-form-field>
- }
- </div>
- </ng-template>
- </ng-container>
- <!-- DESCRIPTION -->
- <ng-container ngbNavItem="description">
- <button ngbNavLink>Beschreibung</button>
- <ng-template ngbNavContent>
- <div class="NgxEditor__Wrapper">
- <ngx-editor-menu [editor]="editor" [toolbar]="toolbar">
- </ngx-editor-menu>
- <ngx-editor
- [editor]="editor"
- [(ngModel)]="description_de"
- placeholder="Beschreibung des Zaubers"
- ></ngx-editor>
- </div>
- </ng-template>
- </ng-container>
- </div>
- <div
- [ngbNavOutlet]="nav"
- style="
- width: 100%;
- min-height: 20rem;
- max-height: 26rem;
- overflow-y: auto;
- overflow-x: hidden;
- "
- class="ms-4"
- ></div>
- </div>
- <hr class="b-0" />
- </div>
- <!-- <div class="horizontal-buttons">
- @if(isModification){
- <ui-button [color]="'green'" style="width: 40%" (click)="update()">
- Anpassen
- </ui-button>
- }@else{
- <ui-button [color]="'green'" style="width: 40%" (click)="add()">
- Erstellen
- </ui-button>
- }
- <ui-button [color]="'red'" style="width: 40%" (click)="cancel()">
- Abbrechen
- </ui-button> -->
- <!-- <div class="range-area-container">
- <div class="range-box">
- <div class="checkbox-element">
- <input type="checkbox" [(ngModel)]="isRanged" />
- <label>Fernkampf</label>
- </div>
- <div class="checkbox-element" *ngIf="isRanged">
- <input type="text" [(ngModel)]="range" />
- <label>Reichweite</label>
- </div>
- </div>
- <div class="area-box">
- <div class="checkbox-element">
- <input type="checkbox" [(ngModel)]="hasAreaOfEffect" />
- <label>Flächeneffekt</label>
- </div>
- <div class="input-element" *ngIf="hasAreaOfEffect">
- <input type="text" class="add-input" [(ngModel)]="diameter" />
- <label>diameter</label>
- </div>
- <div class="checkbox-element" *ngIf="hasAreaOfEffect">
- <select [(ngModel)]="areaOfEffectType">
- <option *ngFor="let areaType of areaTypes" [value]="areaType.value">
- {{ areaType.display }}
- </option>
- </select>
- <label>Flächenart</label>
- </div>
- </div>
- </div>
- <div style="display: flex">
- <div>
- <input type="checkbox" [(ngModel)]="needsSavingThrow" />
- <label>Rettungswurf?</label>
- </div>
- <div>
- <input type="checkbox" [(ngModel)]="needsAttackRoll" />
- <label>Angriff?</label>
- </div>
- </div> -->
- <!-- <ng-container
- *ngIf="needsSavingThrow"
- [ngTemplateOutlet]="attackTabContent"
- ></ng-container>
- <ng-container
- *ngIf="doesDamage"
- [ngTemplateOutlet]="damageTabContent"
- ></ng-container>
- <ng-container
- *ngIf="doesHeal"
- [ngTemplateOutlet]="healTabContent"
- ></ng-container>
- <ng-container [ngTemplateOutlet]="descriptionTabContent"></ng-container> -->
- <!-- Button section -->
- <div class="horizontal-buttons">
- <ui-button
- [color]="'green'"
- style="width: 40%"
- (click)="isModification ? update() : add()"
- >
- @if(isModification){Anwenden}@else{Erstellen}
- </ui-button>
- <ui-button [color]="'red'" style="width: 40%" (click)="cancel()"
- >Abbrechen
- </ui-button>
- </div>
- </div>
- <!-- </div> -->
- <!-- templates -->
- <!-- <ng-template #attackTabContent>
- <div>
- <select [(ngModel)]="savingThrowAttribute" *ngIf="needsSavingThrow">
- <option
- *ngFor="let attribute of savingThrowAttributes"
- [value]="attribute.value"
- >
- {{ attribute.display }}
- </option>
- </select>
- <label *ngIf="needsSavingThrow">Attribut</label>
- </div>
- </ng-template> -->
- <!-- <ng-template #damageTabContent>
- <div class="damage-container">
- <div class="damage-box" *ngFor="let damage of damage; let index = index">
- <div class="dice-row">
- <div class="flex-column">
- <label>Anzahl</label>
- <select [(ngModel)]="damage.diceNumber">
- <option *ngFor="let number of numbers" [value]="number">
- {{ number }}
- </option>
- </select>
- </div>
- <div class="flex-column">
- <label>Würfel</label>
- <select [(ngModel)]="damage.diceType">
- <option *ngFor="let die of dice" [value]="die">
- {{ die }}
- </option>
- </select>
- </div>
- </div>
- <label for="damageType">Schadensart</label>
- <select [(ngModel)]="damage.damageType">
- <option *ngFor="let type of damageTypes" [value]="type.value">
- {{ type.display }}
- </option>
- </select>
- <icon
- *ngIf="index > 0"
- (click)="removeDamage(index)"
- [size]="'m'"
- [type]="'UI'"
- [icon]="'remove'"
- [class]="'pointer'"
- ></icon>
- </div>
- <icon
- *ngIf="damage.length < 3"
- (click)="addDamage()"
- [size]="'m'"
- [type]="'UI'"
- [icon]="'add'"
- [class]="'pointer'"
- ></icon>
- </div>
- </ng-template> -->
- <!-- <ng-template #healTabContent>
- <div class="heal-container">
- <div class="dice-row">
- <div class="flex-column">
- <label>Anzahl</label>
- <select [(ngModel)]="heal.diceNumber">
- <option *ngFor="let number of numbers" [value]="number">
- {{ number }}
- </option>
- </select>
- </div>
- <div class="flex-column">
- <label>Würfel</label>
- <select [(ngModel)]="heal.diceType">
- <option *ngFor="let die of dice" [value]="die">
- {{ die }}
- </option>
- </select>
- </div>
- </div>
- <label>Heilung</label>
- </div>
- </ng-template> -->
- <!-- <ng-template #descriptionTabContent>
- <textarea style="height: 10rem" [(ngModel)]="description_de"></textarea>
- </ng-template> -->
|