bastian/ashen-realms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): style combat guard/enrage banners off semantic classes, not test hooks

Browse Source
This commit is contained in:
Bastian Wagner
2026-08-23 16:51:07 +02:00
parent b2a7fc59d0
commit 06721f24e0
2 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -70,11 +70,11 @@
} }
@if (monsterGuardLabel(); as guard) { @if (monsterGuardLabel(); as guard) {
<p class="combat__telegraph" data-combat-guard role="status">{{ guard }}</p> <p class="combat__telegraph combat__guard" data-combat-guard role="status">{{ guard }}</p>
} }
@if (monsterIsEnraged()) { @if (monsterIsEnraged()) {
<p class="combat__telegraph" data-combat-enraged role="status"> <p class="combat__telegraph combat__enraged" data-combat-enraged role="status">
{{ combat.monster.name }} is enraged. {{ combat.monster.name }} is enraged.
</p> </p>
} }

9
apps/web/src/app/features/combat/combat-page/combat-page.component.scss
View File

@@ -424,13 +424,14 @@
} }
// The guard and enrage banners are the same shape and role as the telegraph // The guard and enrage banners are the same shape and role as the telegraph
// above -- same class, same rule -- only the accent changes, picked off the // above -- same class, same rule -- only the accent changes. data-combat-guard
// data attribute the tests already hook into. // / data-combat-enraged stay on the elements purely as test hooks; styling
[data-combat-guard] { // keys off the semantic modifier classes instead.
.combat__guard {
color: var(--ar-blue); color: var(--ar-blue);
} }
[data-combat-enraged] { .combat__enraged {
color: var(--ar-danger); color: var(--ar-danger);
} }