833fa52d8d
encounter-card.component rendered the raw 2.39MB ash-rat.png and 2.00MB road-bandit.png directly, up to 3 cards per hunt (~7MB/load, re-rendered on "Neu suchen"). Add 560px-wide JPEG runtime derivatives (generated via PowerShell System.Drawing, HighQualityBicubic, quality 82) and switch to the <picture>/<source srcset> pattern already used by context-panel for location backgrounds, keeping the original PNGs as the <img> fallback. Also add loading="lazy" decoding="async". ash-rat.png: 2,506,677 B -> ash-rat-560.jpg: 35,896 B road-bandit.png: 2,097,049 B -> road-bandit-560.jpg: 50,797 B
23 lines
862 B
HTML
23 lines
862 B
HTML
<article class="encounter-card">
|
|
<div class="encounter-card__artwork-frame">
|
|
<picture>
|
|
@if (runtimeArtworkPath(encounter.monster.artworkPath); as runtimeArtwork) {
|
|
<source [srcset]="runtimeArtwork" type="image/jpeg" />
|
|
}
|
|
<img
|
|
class="encounter-card__artwork"
|
|
[src]="encounter.monster.artworkPath"
|
|
[alt]="encounter.monster.name"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
</picture>
|
|
</div>
|
|
<div class="encounter-card__body">
|
|
<h3 class="encounter-card__name">{{ encounter.monster.name }}</h3>
|
|
<span class="encounter-card__level">Stufe {{ encounter.monster.level }}</span>
|
|
<app-danger-badge class="encounter-card__danger" [rating]="encounter.dangerRating" />
|
|
<button type="button" class="encounter-card__attack" (click)="onAttack()">Angreifen</button>
|
|
</div>
|
|
</article>
|