spellslots.component.html 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. <div class="slots-box">
  2. <div class="slots-container">
  3. @if (kiPoints.showKiPoints) {
  4. <div class="points-container">
  5. <div
  6. style="
  7. font-size: 1.5rem;
  8. padding: 1.25rem 0 0.5rem 1.5rem;
  9. font-weight: 600;
  10. "
  11. >
  12. {{ "magic.ki" | translate }}
  13. </div>
  14. <div
  15. class="level-row"
  16. [ngClass]="{ used: kiPoints.usedPoints == kiPoints.totalPoints }"
  17. >
  18. <div class="checkboxes">
  19. @for (
  20. _ of getArray(kiPoints.totalPoints);
  21. track _;
  22. let kiIndex = $index
  23. ) {
  24. <input
  25. [id]="'checkbox' + kiIndex"
  26. type="checkbox"
  27. (change)="handleUsedKiPoints(kiIndex, $event.target)"
  28. />
  29. }
  30. </div>
  31. </div>
  32. <div class="ki-add-buttons"></div>
  33. </div>
  34. }
  35. @if (showSpellslots) {
  36. <div class="points-container">
  37. <div
  38. style="
  39. font-size: 1.5rem;
  40. padding: 1.25rem 0 0.5rem 1.5rem;
  41. font-weight: 600;
  42. "
  43. >
  44. {{ "magic.spellslots" | translate }}
  45. </div>
  46. @for (level of spellslots; let levelIndex = $index; track level) {
  47. <div
  48. class="level-row"
  49. [ngClass]="{ used: level.usedSlots == level.totalSlots }"
  50. >
  51. <div style="width: 6rem">Level {{ levelIndex + 1 }}:</div>
  52. <div class="checkboxes">
  53. @for (
  54. checkbox of getArray(spellslots[levelIndex].totalSlots);
  55. let slotIndex = $index;
  56. track checkbox
  57. ) {
  58. <input
  59. [id]="'checkbox' + levelIndex + '-' + slotIndex"
  60. type="checkbox"
  61. (change)="
  62. handleUsedSlots(levelIndex, slotIndex, $event.target)
  63. "
  64. />
  65. }
  66. </div>
  67. </div>
  68. }
  69. </div>
  70. @if (spellcastingAttribute) {
  71. <div class="value-row">
  72. <value-box [value]="spellSaveDC" [label]="'magic.saveAC'"></value-box>
  73. <div>
  74. <div class="value-box">
  75. {{ "attributes." + spellcastingAttribute | translate }}
  76. </div>
  77. <div class="value-label t-0375">
  78. {{ "magic.spellcastingAttribute" | translate }}
  79. </div>
  80. </div>
  81. <value-box
  82. [value]="spellAttackModifier"
  83. [label]="'magic.spellAttackBonus'"
  84. ></value-box>
  85. </div>
  86. }
  87. }
  88. @if (!kiPoints.showKiPoints && !showSpellslots) {
  89. <div class="empty-list">
  90. @if (isMonk) {
  91. {{ "magic.emptyKi" | translate }}
  92. } @else {
  93. {{ "magic.emptySpell" | translate }}
  94. }
  95. </div>
  96. }
  97. </div>
  98. <!-- MODAL BUTTON -->
  99. <div class="footer">
  100. <ui-button style="width: 60%" (click)="openModal()"
  101. >{{ "buttons.modify" | translate }}
  102. </ui-button>
  103. </div>
  104. </div>