spell-modal.component.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501
  1. <div class="dimensions">
  2. <div class="title">
  3. @if(isModification){Zauber bearbeiten}@else{Zauber erstellen}
  4. </div>
  5. <div class="content b-0">
  6. <div class="input-label">Name</div>
  7. <mat-form-field appearance="outline" class="w-100">
  8. <input matInput [(ngModel)]="name" />
  9. </mat-form-field>
  10. <hr />
  11. <div class="flex-row t-1">
  12. <div class="checkbox-column">
  13. <div class="checkbox-row">
  14. <input id="verbal" type="checkbox" [(ngModel)]="needsVerbal" />
  15. <label for="verbal">Verbal</label>
  16. </div>
  17. <div class="checkbox-row">
  18. <input id="somatic" type="checkbox" [(ngModel)]="needsSomatic" />
  19. <label for="somatic">Geste</label>
  20. </div>
  21. <div class="checkbox-row">
  22. <input id="material" type="checkbox" [(ngModel)]="needsMaterial" />
  23. <label for="material">Material</label>
  24. </div>
  25. <div class="checkbox-row">
  26. <input
  27. id="concentration"
  28. type="checkbox"
  29. [(ngModel)]="needsConcentration"
  30. />
  31. <label for="concentration">Konzentration</label>
  32. </div>
  33. <div class="checkbox-row">
  34. <input
  35. id="canRitual"
  36. type="checkbox"
  37. (change)="unsetRitual($event)"
  38. [(ngModel)]="canRitual"
  39. />
  40. <label for="canRitual">Ritual möglich</label>
  41. </div>
  42. <div class="checkbox-row">
  43. <input
  44. id="isRitual"
  45. type="checkbox"
  46. (change)="setRitual($event)"
  47. [(ngModel)]="isRitual"
  48. />
  49. <label for="isRitual">Ist Ritual</label>
  50. </div>
  51. </div>
  52. <div class="checkbox-column">
  53. <div class="checkbox-row">
  54. <input id="doesDamage" type="checkbox" [(ngModel)]="doesDamage" />
  55. <label for="doesDamage">Schaden</label>
  56. </div>
  57. <div class="checkbox-row">
  58. <input id="doesHeal" type="checkbox" [(ngModel)]="doesHeal" />
  59. <label for="doesHeal">Heilung</label>
  60. </div>
  61. <div class="checkbox-row">
  62. <input id="isRanged" type="checkbox" [(ngModel)]="isRanged" />
  63. <label for="isRanged">Hat Reichweite</label>
  64. </div>
  65. <div class="checkbox-row">
  66. <input
  67. id="hasAreaOfEffect"
  68. type="checkbox"
  69. [(ngModel)]="hasAreaOfEffect"
  70. />
  71. <label for="hasAreaOfEffect">Hat Flächeneffekt</label>
  72. </div>
  73. <div class="checkbox-row">
  74. <input
  75. id="needsSavingThrow"
  76. type="checkbox"
  77. [(ngModel)]="needsSavingThrow"
  78. />
  79. <label for="needsSavingThrow">Erfordert Rettungswurf</label>
  80. </div>
  81. <div class="checkbox-row">
  82. @if(!needsSavingThrow){
  83. <input
  84. id="needsAttackRoll"
  85. type="checkbox"
  86. [(ngModel)]="needsAttackRoll"
  87. />
  88. <label for="needsAttackRoll">Erfordert Angriffswurf</label>
  89. }@else {
  90. <label>Attribut</label>
  91. <select [(ngModel)]="savingThrowAttribute" *ngIf="needsSavingThrow">
  92. <option
  93. *ngFor="let attribute of savingThrowAttributes"
  94. [value]="attribute.value"
  95. >
  96. {{ attribute.display }}
  97. </option>
  98. </select>
  99. }
  100. </div>
  101. </div>
  102. <div class="checkbox-column">
  103. <div class="input-row">
  104. <label>Kosten</label>
  105. <mat-form-field appearance="outline">
  106. <mat-select [(ngModel)]="cost">
  107. @for (cost of costs; track cost) {
  108. <mat-option [value]="cost.value">{{ cost.display }}</mat-option
  109. >}
  110. </mat-select>
  111. </mat-form-field>
  112. </div>
  113. <div class="input-row duration">
  114. <label>Dauer</label>
  115. <mat-form-field appearance="outline">
  116. <input type="number" matInput [(ngModel)]="duration" />
  117. <span matSuffix class="suffix">Runden</span>
  118. </mat-form-field>
  119. </div>
  120. <div class="input-row">
  121. <label>Stufe</label>
  122. <mat-form-field appearance="outline">
  123. <mat-select [(ngModel)]="level">
  124. @for (level of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; track level) {
  125. <mat-option [value]="level">{{ level }}</mat-option
  126. >}
  127. </mat-select>
  128. </mat-form-field>
  129. </div>
  130. <div class="input-row">
  131. <label>Schule</label>
  132. <mat-form-field appearance="outline">
  133. <mat-select [(ngModel)]="school">
  134. @for (school of schools; track school) {
  135. <mat-option [value]="school.value">{{
  136. school.display
  137. }}</mat-option
  138. >}
  139. </mat-select>
  140. </mat-form-field>
  141. </div>
  142. </div>
  143. </div>
  144. <hr />
  145. <!-- TAB-PANEL -->
  146. <div class="d-flex">
  147. <div
  148. ngbNav
  149. #nav="ngbNav"
  150. [(activeId)]="active"
  151. class="flex-column navigation-bar"
  152. orientation="vertical"
  153. >
  154. <!-- DAMAGE -->
  155. <ng-container ngbNavItem="damage">
  156. @if(doesDamage){
  157. <button ngbNavLink>Schaden</button>
  158. }@else {
  159. <button class="disabled-button" disabled>Schaden</button>
  160. }
  161. <ng-template ngbNavContent>
  162. <div class="tab-content flex-row t-05">
  163. @for(damageEntry of damage; let index = $index; track
  164. damageEntry){
  165. <div class="damage-box">
  166. <div class="subheading left t-025">
  167. @if(index == 0){Schaden} @else {Weiterer Schaden}
  168. </div>
  169. <div class="input-label">Anzahl Würfel</div>
  170. <mat-form-field appearance="outline">
  171. <mat-select [(ngModel)]="damageEntry.diceNumber">
  172. @for (number of numbers; track number) {
  173. <mat-option [value]="number"> {{ number }} </mat-option>}
  174. </mat-select>
  175. </mat-form-field>
  176. <div class="input-label t-05">Würfelart</div>
  177. <mat-form-field appearance="outline">
  178. <mat-select [(ngModel)]="damageEntry.diceType">
  179. @for (die of dice; track die) {
  180. <mat-option [value]="die"> {{ die }} </mat-option>}
  181. </mat-select>
  182. </mat-form-field>
  183. <div class="input-label t-05">Schadensart</div>
  184. <mat-form-field appearance="outline">
  185. <mat-select [(ngModel)]="damageEntry.damageType">
  186. @for (type of damageTypes; track type) {
  187. <mat-option [value]="type.value">
  188. {{ type.display }}
  189. </mat-option>
  190. }
  191. </mat-select>
  192. </mat-form-field>
  193. @if(index !== 0){
  194. <icon-button
  195. [icon]="'delete'"
  196. (click)="removeDamage(index)"
  197. ></icon-button>
  198. }
  199. </div>
  200. @if(damage.length < 2){
  201. <icon-button
  202. [icon]="'add'"
  203. style="margin-top: 7rem; margin-left: 5rem"
  204. (click)="addDamage()"
  205. ></icon-button>
  206. } }
  207. </div>
  208. </ng-template>
  209. </ng-container>
  210. <!-- HEAL -->
  211. <ng-container ngbNavItem="heal">
  212. @if(doesHeal){
  213. <button ngbNavLink>Heilung</button>} @else {
  214. <button class="disabled-button" disabled>Heilung</button>
  215. }
  216. <ng-template ngbNavContent>
  217. <div class="tab-content t-05">
  218. <div class="input-label">Würfelanzahl</div>
  219. <mat-form-field appearance="outline">
  220. <mat-select [(ngModel)]="heal.diceNumber">
  221. @for (number of numbers; track number) {
  222. <mat-option [value]="number">{{ number }}</mat-option
  223. >}
  224. </mat-select>
  225. </mat-form-field>
  226. <div class="input-label">Würfelart</div>
  227. <mat-form-field appearance="outline">
  228. <mat-select [(ngModel)]="heal.diceType">
  229. @for (die of dice; track die) {
  230. <mat-option [value]="die">{{ die }}</mat-option
  231. >}
  232. </mat-select>
  233. </mat-form-field>
  234. </div>
  235. </ng-template>
  236. </ng-container>
  237. <!-- RANGE -->
  238. <ng-container ngbNavItem="range">
  239. @if(isRanged || hasAreaOfEffect){
  240. <button ngbNavLink>Reichweite</button>
  241. } @else {
  242. <button class="disabled-button" disabled>Reichweite</button>
  243. }
  244. <ng-template ngbNavContent>
  245. <div class="range-container">
  246. <div class="input-label">Reichweite</div>
  247. <mat-form-field appearance="outline">
  248. <input type="number" matInput [(ngModel)]="range" />
  249. <span class="suffix" matTextSuffix>Fuß</span>
  250. </mat-form-field>
  251. @if(hasAreaOfEffect) {
  252. <div class="input-label">Flächenart</div>
  253. <mat-form-field appearance="outline">
  254. <mat-select [(ngModel)]="areaOfEffectType">
  255. @for (areaType of areaTypes; track areaType) {
  256. <mat-option [value]="areaType.value">{{
  257. areaType.display
  258. }}</mat-option
  259. >}
  260. </mat-select>
  261. </mat-form-field>
  262. <div class="input-label">Durchmesser</div>
  263. <mat-form-field appearance="outline">
  264. <input type="number" matInput [(ngModel)]="diameter" />
  265. <span class="suffix" matTextSuffix>Fuß</span>
  266. </mat-form-field>
  267. }
  268. </div>
  269. </ng-template>
  270. </ng-container>
  271. <!-- DESCRIPTION -->
  272. <ng-container ngbNavItem="description">
  273. <button ngbNavLink>Beschreibung</button>
  274. <ng-template ngbNavContent>
  275. <div class="NgxEditor__Wrapper">
  276. <ngx-editor-menu [editor]="editor" [toolbar]="toolbar">
  277. </ngx-editor-menu>
  278. <ngx-editor
  279. [editor]="editor"
  280. [(ngModel)]="description_de"
  281. placeholder="Beschreibung des Zaubers"
  282. ></ngx-editor>
  283. </div>
  284. </ng-template>
  285. </ng-container>
  286. </div>
  287. <div
  288. [ngbNavOutlet]="nav"
  289. style="
  290. width: 100%;
  291. min-height: 20rem;
  292. max-height: 26rem;
  293. overflow-y: auto;
  294. overflow-x: hidden;
  295. "
  296. class="ms-4"
  297. ></div>
  298. </div>
  299. <hr class="b-0" />
  300. </div>
  301. <!-- <div class="horizontal-buttons">
  302. @if(isModification){
  303. <ui-button [color]="'green'" style="width: 40%" (click)="update()">
  304. Anpassen
  305. </ui-button>
  306. }@else{
  307. <ui-button [color]="'green'" style="width: 40%" (click)="add()">
  308. Erstellen
  309. </ui-button>
  310. }
  311. <ui-button [color]="'red'" style="width: 40%" (click)="cancel()">
  312. Abbrechen
  313. </ui-button> -->
  314. <!-- <div class="range-area-container">
  315. <div class="range-box">
  316. <div class="checkbox-element">
  317. <input type="checkbox" [(ngModel)]="isRanged" />
  318. <label>Fernkampf</label>
  319. </div>
  320. <div class="checkbox-element" *ngIf="isRanged">
  321. <input type="text" [(ngModel)]="range" />
  322. <label>Reichweite</label>
  323. </div>
  324. </div>
  325. <div class="area-box">
  326. <div class="checkbox-element">
  327. <input type="checkbox" [(ngModel)]="hasAreaOfEffect" />
  328. <label>Flächeneffekt</label>
  329. </div>
  330. <div class="input-element" *ngIf="hasAreaOfEffect">
  331. <input type="text" class="add-input" [(ngModel)]="diameter" />
  332. <label>diameter</label>
  333. </div>
  334. <div class="checkbox-element" *ngIf="hasAreaOfEffect">
  335. <select [(ngModel)]="areaOfEffectType">
  336. <option *ngFor="let areaType of areaTypes" [value]="areaType.value">
  337. {{ areaType.display }}
  338. </option>
  339. </select>
  340. <label>Flächenart</label>
  341. </div>
  342. </div>
  343. </div>
  344. <div style="display: flex">
  345. <div>
  346. <input type="checkbox" [(ngModel)]="needsSavingThrow" />
  347. <label>Rettungswurf?</label>
  348. </div>
  349. <div>
  350. <input type="checkbox" [(ngModel)]="needsAttackRoll" />
  351. <label>Angriff?</label>
  352. </div>
  353. </div> -->
  354. <!-- <ng-container
  355. *ngIf="needsSavingThrow"
  356. [ngTemplateOutlet]="attackTabContent"
  357. ></ng-container>
  358. <ng-container
  359. *ngIf="doesDamage"
  360. [ngTemplateOutlet]="damageTabContent"
  361. ></ng-container>
  362. <ng-container
  363. *ngIf="doesHeal"
  364. [ngTemplateOutlet]="healTabContent"
  365. ></ng-container>
  366. <ng-container [ngTemplateOutlet]="descriptionTabContent"></ng-container> -->
  367. <!-- Button section -->
  368. <div class="horizontal-buttons">
  369. <ui-button
  370. [color]="'green'"
  371. style="width: 40%"
  372. (click)="isModification ? update() : add()"
  373. >
  374. @if(isModification){Anwenden}@else{Erstellen}
  375. </ui-button>
  376. <ui-button [color]="'red'" style="width: 40%" (click)="cancel()"
  377. >Abbrechen
  378. </ui-button>
  379. </div>
  380. </div>
  381. <!-- </div> -->
  382. <!-- templates -->
  383. <!-- <ng-template #attackTabContent>
  384. <div>
  385. <select [(ngModel)]="savingThrowAttribute" *ngIf="needsSavingThrow">
  386. <option
  387. *ngFor="let attribute of savingThrowAttributes"
  388. [value]="attribute.value"
  389. >
  390. {{ attribute.display }}
  391. </option>
  392. </select>
  393. <label *ngIf="needsSavingThrow">Attribut</label>
  394. </div>
  395. </ng-template> -->
  396. <!-- <ng-template #damageTabContent>
  397. <div class="damage-container">
  398. <div class="damage-box" *ngFor="let damage of damage; let index = index">
  399. <div class="dice-row">
  400. <div class="flex-column">
  401. <label>Anzahl</label>
  402. <select [(ngModel)]="damage.diceNumber">
  403. <option *ngFor="let number of numbers" [value]="number">
  404. {{ number }}
  405. </option>
  406. </select>
  407. </div>
  408. <div class="flex-column">
  409. <label>Würfel</label>
  410. <select [(ngModel)]="damage.diceType">
  411. <option *ngFor="let die of dice" [value]="die">
  412. {{ die }}
  413. </option>
  414. </select>
  415. </div>
  416. </div>
  417. <label for="damageType">Schadensart</label>
  418. <select [(ngModel)]="damage.damageType">
  419. <option *ngFor="let type of damageTypes" [value]="type.value">
  420. {{ type.display }}
  421. </option>
  422. </select>
  423. <icon
  424. *ngIf="index > 0"
  425. (click)="removeDamage(index)"
  426. [size]="'m'"
  427. [type]="'UI'"
  428. [icon]="'remove'"
  429. [class]="'pointer'"
  430. ></icon>
  431. </div>
  432. <icon
  433. *ngIf="damage.length < 3"
  434. (click)="addDamage()"
  435. [size]="'m'"
  436. [type]="'UI'"
  437. [icon]="'add'"
  438. [class]="'pointer'"
  439. ></icon>
  440. </div>
  441. </ng-template> -->
  442. <!-- <ng-template #healTabContent>
  443. <div class="heal-container">
  444. <div class="dice-row">
  445. <div class="flex-column">
  446. <label>Anzahl</label>
  447. <select [(ngModel)]="heal.diceNumber">
  448. <option *ngFor="let number of numbers" [value]="number">
  449. {{ number }}
  450. </option>
  451. </select>
  452. </div>
  453. <div class="flex-column">
  454. <label>Würfel</label>
  455. <select [(ngModel)]="heal.diceType">
  456. <option *ngFor="let die of dice" [value]="die">
  457. {{ die }}
  458. </option>
  459. </select>
  460. </div>
  461. </div>
  462. <label>Heilung</label>
  463. </div>
  464. </ng-template> -->
  465. <!-- <ng-template #descriptionTabContent>
  466. <textarea style="height: 10rem" [(ngModel)]="description_de"></textarea>
  467. </ng-template> -->