docs

apps/web/src/app/features/combat/combat-page/combat-page.component.html

@@ -17,6 +17,23 @@
               <span class="bar__fill" [style.inline-size.%]="playerHpPercent()"></span>
               <span class="bar__text">{{ combat.player.currentHp }} / {{ combat.player.maxHp }}</span>
             </div>
+
+            @if (combat.player.statusEffects.length) {
+              <ul class="statuses" data-combat-statuses aria-label="Active effects">
+                @for (effect of combat.player.statusEffects; track effect.type) {
+                  <li
+                    class="status"
+                    [class]="'status--' + effect.type.toLowerCase()"
+                    [attr.data-combat-status]="effect.type"
+                  >
+                    <span class="status__glyph" aria-hidden="true"></span>
+                    <span class="status__label">
+                      {{ statusEffectLabel(effect.type) }} · {{ effect.remainingRounds }}
+                    </span>
+                  </li>
+                }
+              </ul>
+            }
           </div>
         </div>
 
@@ -137,28 +154,43 @@
 
           @if (combat.rewards; as rewards) {
             <section class="rewards" data-combat-rewards aria-label="Rewards">
-              <h3 class="rewards__title">Rewards</h3>
-
-              @if (rewards.silver) {
-                <dl class="rewards__currencies">
-                  <div class="rewards__currency" data-reward-silver>
-                    <dt>Silver</dt>
-                    <dd>+{{ rewards.silver }}</dd>
-                  </div>
-                </dl>
+              @if (lootGroups(); as groups) {
+                @if (groups.length) {
+                  @for (group of groups; track group.key) {
+                    <h3 class="rewards__title" [attr.data-reward-group]="group.key">
+                      {{ group.title }}
+                    </h3>
+                    <ul class="rewards__loot">
+                      @for (reward of group.items; track reward.characterItemId) {
+                        <li>
+                          <app-item-card [item]="reward.item" [quantity]="reward.quantity" />
+                        </li>
+                      }
+                    </ul>
+                  }
+                } @else {
+                  <p class="outcome__hint" data-reward-empty>No notable loot found.</p>
+                }
               }
 
-              @if (rewards.items.length) {
-                <h3 class="rewards__title">Loot</h3>
-                <ul class="rewards__loot">
-                  @for (reward of rewards.items; track reward.characterItemId) {
-                    <li>
-                      <app-item-card [item]="reward.item" [quantity]="reward.quantity" />
-                    </li>
-                  }
-                </ul>
-              } @else {
-                <p class="outcome__hint" data-reward-empty>No notable loot found.</p>
+              @if (leftBehind(); as refused) {
+                @if (refused.length) {
+                  <h3 class="rewards__title rewards__title--refused">Left Behind</h3>
+                  <ul class="rewards__refused" data-reward-left-behind>
+                    @for (entry of refused; track entry.key) {
+                      <li [attr.data-reward-refused]="entry.key">
+                        {{ entry.name }} ×{{ entry.quantity }} — no room left
+                      </li>
+                    }
+                  </ul>
+                }
+              }
+
+              @if (rewards.capacities.length) {
+                <app-loot-capacity-strip
+                  class="rewards__capacities"
+                  [capacities]="rewards.capacities"
+                />
               }
             </section>
           }