character-picker.component.html 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <div class="header">
  2. <h1>{{ "picker.label" | translate }}</h1>
  3. </div>
  4. <div class="character-card-container">
  5. @for (card of [0, 1, 2, 3, 4, 5]; track card) {
  6. @if (characters[card]) {
  7. <character-card
  8. [character]="characters[card].name"
  9. (select)="selectCharacter(characters[card])"
  10. (delete)="open(content, card)"
  11. ></character-card>
  12. <!-- TODO: Check if there is a more elegant way -->
  13. } @else if (
  14. card < 4 ||
  15. (card === 4 && characters.length === 4) ||
  16. (card === 5 && (characters.length === 5 || characters.length === 4))
  17. ) {
  18. <div class="card-placeholder" (click)="addCharacter()">
  19. <img
  20. src="assets/icons/UIIcons/add.svg"
  21. style="width: 6%"
  22. alt="Add Button"
  23. />
  24. </div>
  25. }
  26. }
  27. </div>
  28. <ng-template #content let-modal>
  29. <div class="modal-header">
  30. <h4 class="modal-title" id="modal-basic-title">
  31. {{ "picker.delete" | translate }}
  32. </h4>
  33. <button
  34. type="button"
  35. class="btn-close"
  36. aria-label="Close"
  37. (click)="modal.dismiss('dismiss')"
  38. ></button>
  39. </div>
  40. <div class="modal-body">
  41. <div
  42. [innerHTML]="'picker.confirm' | translate: { name: currentCharacter }"
  43. ></div>
  44. </div>
  45. <div class="modal-footer">
  46. <div class="button-row">
  47. <button class="delete-button" (click)="modal.dismiss('delete')">
  48. {{ "buttons.delete" | translate }}
  49. </button>
  50. </div>
  51. </div>
  52. </ng-template>
  53. <ng-template #warning let-warning>
  54. <div class="modal-header">
  55. <h4 class="modal-title" id="modal-basic-title">0.9.2</h4>
  56. <button
  57. type="button"
  58. class="btn-close"
  59. aria-label="Close"
  60. (click)="warning.dismiss('dismiss'); acknowledgeWarning()"
  61. ></button>
  62. </div>
  63. <div class="modal-body">
  64. <h5>
  65. {{ "picker.hint" | translate }}
  66. </h5>
  67. <br />
  68. <h5 [innerHTML]="'picker.issues' | translate"></h5>
  69. <button
  70. style="display: block; margin: auto; margin-top: 32px"
  71. class="okay-button"
  72. (click)="warning.dismiss('dismiss'); acknowledgeWarning()"
  73. >
  74. {{ "picker.okay" | translate }}!
  75. </button>
  76. </div>
  77. </ng-template>