48 lines
1.6 KiB
Markdown
48 lines
1.6 KiB
Markdown
# Quickstart: Fix Zero-HP Opacity
|
|
|
|
**Feature**: 020-fix-zero-hp-opacity
|
|
**Date**: 2026-03-06
|
|
|
|
## Problem
|
|
|
|
When a combatant reaches 0 HP, the entire row gets `opacity-50` applied to the outermost container. This cascades to absolutely-positioned child elements (HP adjust popover and condition picker dropdown), making them semi-transparent and hard to use.
|
|
|
|
## Fix Location
|
|
|
|
**Single file**: `apps/web/src/components/combatant-row.tsx`
|
|
|
|
## Fix Strategy
|
|
|
|
1. Remove `opacity-50` from the outer row `<div>` (line 312).
|
|
2. Apply `opacity-50` to individual leaf/display elements within the row when `status === "unconscious"`:
|
|
- Initiative input
|
|
- Name display
|
|
- AC display
|
|
- HP current value button (inside `ClickableHp`)
|
|
- HP separator slash
|
|
- Max HP display
|
|
- Concentration button
|
|
- Condition tags
|
|
- Remove button
|
|
3. The `HpAdjustPopover` and `ConditionPicker` components — which are absolutely positioned overlays — are **not** wrapped in any dimmed container, so they render at full opacity.
|
|
|
|
## Key Constraint
|
|
|
|
CSS `opacity` on a parent element creates a stacking context that affects all children. There is no way to "undo" a parent's opacity on a child element. The fix must ensure popovers are never DOM descendants of an element with reduced opacity.
|
|
|
|
## Verification
|
|
|
|
```bash
|
|
pnpm --filter web dev # Start dev server
|
|
# 1. Add a combatant, set max HP, reduce current HP to 0
|
|
# 2. Click HP value — popover should appear at full opacity
|
|
# 3. Click conditions area — picker should appear at full opacity
|
|
# 4. Row content (name, initiative, etc.) should still appear dimmed
|
|
```
|
|
|
|
## Quality Gate
|
|
|
|
```bash
|
|
pnpm check # Must pass before commit
|
|
```
|