journal-npcs.component.html 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. <div class="npcs-container">
  2. <div class="title t-0">{{ "npcs.characters" | translate }}</div>
  3. <divider appearance="gold-2" style="width: 15rem"></divider>
  4. <mat-accordion class="t-1" multi>
  5. @for (group of ["companions", "allies", "enemies", "others"]; track group) {
  6. <mat-expansion-panel [expanded]="true" class="b-1">
  7. <mat-expansion-panel-header>
  8. <mat-panel-title>
  9. <div class="npc-list-title">{{ "npcs." + group | translate }}</div>
  10. </mat-panel-title>
  11. </mat-expansion-panel-header>
  12. <divider [appearance]="'gold-2'" class="b-1"></divider>
  13. <!-- Add-Button -->
  14. @if (isNewNpc && currentType === group) {
  15. <div class="npc active">
  16. <div class="npc-title">
  17. @if (currentNpc.name !== "") {
  18. {{ currentNpc.name }}
  19. } @else {
  20. {{ "notes.noName" | translate }}
  21. }
  22. </div>
  23. <div class="unsaved">{{ "notes.unsaved" | translate }}</div>
  24. </div>
  25. } @else {
  26. <div class="npc-wrapper" (click)="addNpc(group)">
  27. <div
  28. class="npc add-button"
  29. [ngClass]="
  30. currentType === group && isInEditMode && currentIndex === -1
  31. ? 'active'
  32. : ''
  33. "
  34. >
  35. <img src="assets/icons/UIIcons/add.svg" />
  36. </div>
  37. </div>
  38. }
  39. <div class="column gap-05 t-1">
  40. @for (npc of npcs[group]; let index = $index; track npc) {
  41. <div
  42. class="npc-wrapper"
  43. [ngClass]="{
  44. active: currentIndex === index && currentType === group,
  45. 'edit-mode': isInEditMode
  46. }"
  47. >
  48. <div class="npc" (click)="selectNpc(index, group)">
  49. <div class="npc-title">{{ npc.name }}</div>
  50. </div>
  51. <div class="control-button-wrapper">
  52. <icon-button
  53. [icon]="'edit-large'"
  54. (click)="editNpc()"
  55. ></icon-button>
  56. <icon-button
  57. [icon]="'delete'"
  58. (click)="deleteNpc()"
  59. ></icon-button>
  60. </div>
  61. </div>
  62. }
  63. </div>
  64. </mat-expansion-panel>
  65. }
  66. </mat-accordion>
  67. </div>
  68. @if (!npcsIsEmpty) {
  69. @if (isInEditMode) {
  70. <div class="write-container">
  71. <div>
  72. <label class="write-label">{{
  73. "npcs.namePlaceholder" | translate
  74. }}</label>
  75. <div>
  76. <mat-form-field class="name-write" appearance="outline">
  77. <input
  78. matInput
  79. [(ngModel)]="currentNpc.name"
  80. [placeholder]="'npcs.namePlaceholder' | translate"
  81. />
  82. </mat-form-field>
  83. </div>
  84. </div>
  85. <div class="t-2">
  86. <label class="write-label">{{ "npcs.short" | translate }}</label>
  87. <div class="NgxEditor__Wrapper">
  88. <ngx-editor-menu [editor]="shortEditor" [toolbar]="toolbar">
  89. </ngx-editor-menu>
  90. <ngx-editor
  91. class="short-editor"
  92. [editor]="shortEditor"
  93. [placeholder]="'npcs.shortPlaceholder' | translate"
  94. [(ngModel)]="currentNpc.shortDescription"
  95. ></ngx-editor>
  96. </div>
  97. </div>
  98. <div class="t-2">
  99. <label class="write-label">{{ "npcs.long" | translate }}</label>
  100. <div class="NgxEditor__Wrapper">
  101. <ngx-editor-menu [editor]="longEditor" [toolbar]="toolbar">
  102. </ngx-editor-menu>
  103. <ngx-editor
  104. class="long-editor"
  105. [editor]="longEditor"
  106. [placeholder]="'npcs.longPlaceholder' | translate"
  107. [(ngModel)]="currentNpc.longDescription"
  108. ></ngx-editor>
  109. </div>
  110. </div>
  111. <div class="button-row">
  112. <ui-button width="w16" (click)="saveNpc()">{{
  113. "npcs.save" | translate
  114. }}</ui-button>
  115. <ui-button width="w16" (click)="discardNpc()">{{
  116. "npcs.discard" | translate
  117. }}</ui-button>
  118. </div>
  119. </div>
  120. } @else {
  121. <div class="read-container">
  122. <div class="title-row">
  123. <div class="name-read">{{ currentNpc.name }}</div>
  124. <icon-button
  125. [icon]="'flip'"
  126. (click)="showShortDescription = !showShortDescription"
  127. ></icon-button>
  128. </div>
  129. <divider [appearance]="'gold-2'" class="b-1 t-1"></divider>
  130. <div class="short-read">
  131. <div
  132. class="description"
  133. [innerHTML]="
  134. showShortDescription
  135. ? currentNpc.shortDescription
  136. : currentNpc.longDescription
  137. "
  138. ></div>
  139. </div>
  140. </div>
  141. }
  142. } @else {
  143. <div class="empty-container">
  144. {{ "npcs.empty" | translate }}
  145. </div>
  146. }