Implement the 020-fix-zero-hp-opacity feature that replaces container-level opacity dimming with element-level opacity on individual leaf elements so that HP popover and condition picker render at full opacity for unconscious combatants
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
47
specs/020-fix-zero-hp-opacity/quickstart.md
Normal file
47
specs/020-fix-zero-hp-opacity/quickstart.md
Normal file
@@ -0,0 +1,47 @@
|
||||
# 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
|
||||
```
|
||||
Reference in New Issue
Block a user