BloodLossOverlayHtml - Pulsing red warning for critical blood loss
Renders a fullscreen pulsing red overlay when blood loss is 50 or higher.
Only visible when bloodLoss is 50 or above; does not render for values below 50.
Uses CSS keyframe animation for smooth pulsing effect at 60fps.
Optimized with React.memo for 60fps performance:
Prevents re-renders when blood loss hasn't changed significantly
Memoized style calculations
Accessibility notes:
Purely decorative visual effect; no ARIA role or aria-live region is defined here
Typically rendered within an aria-hidden container so it is ignored by screen readers
Critical status announcements should be provided by separate, semantic HUD components
Example
// Overlay is rendered (bloodLoss >= 50) <BloodLossOverlayHtmlbloodLoss={75}isMobile={false}/>
// Overlay is not rendered (bloodLoss < 50) <BloodLossOverlayHtmlbloodLoss={30}isMobile={false}/>
BloodLossOverlayHtml - Pulsing red warning for critical blood loss
Renders a fullscreen pulsing red overlay when blood loss is 50 or higher. Only visible when bloodLoss is 50 or above; does not render for values below 50. Uses CSS keyframe animation for smooth pulsing effect at 60fps.
Optimized with React.memo for 60fps performance:
Accessibility notes: