Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | 4x 35x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 35x 31x 4x 4x | /**
* PainVignette Component - Visual overlay for pain intensity
*
* Displays a red vignette effect around the screen edges that intensifies
* as the player's pain level increases. Uses CSS box-shadow for performance.
*
* NOTE: This component is rendered OUTSIDE the Canvas as part of the HTML overlay.
* It does NOT use Html from drei - it's a standard React component.
*
* @module components/combat/PainVignette
* @category Combat UI
* @korean 통증비네트
*/
import React, { useMemo } from "react";
import { KOREAN_COLORS } from "../../../../../types/constants";
export interface PainVignetteProps {
/**
* Current pain level (0-100)
* @korean 통증수준
*/
readonly pain: number;
/**
* Mobile responsive mode (subtle effects)
* @korean 모바일여부
*/
readonly isMobile: boolean;
/**
* Multiplier applied to the effect's maximum opacity (0.0-1.0).
*
* Use this to soften the fullscreen effect when the 3D arena is already
* visually compressed (e.g. portrait mobile) so the vignette does not
* further obscure the view. Default is `1.0` (no attenuation).
*
* @korean 효과강도배수
*/
readonly intensityScale?: number;
}
/**
* PainVignette - Red edge vignette overlay for pain visualization
*
* Renders a fullscreen overlay with red vignette effect that intensifies
* as pain increases. Only visible when pain is 5 or higher. Optimized
* for 60fps with CSS transitions.
*
* Accessibility:
* - Purely visual, decorative-only overlay
* - Hidden from assistive technologies via aria-hidden="true"
* - Does not announce pain levels; use a separate mechanism if announcements are required
*
* @example
* ```tsx
* <PainVignette pain={65} isMobile={false} />
* // No render if pain < 5
* <PainVignette pain={2} isMobile={false} />
* ```
*/
export const PainVignette: React.FC<PainVignetteProps> = ({
pain,
isMobile,
intensityScale = 1,
}) => {
const vignetteStyle = useMemo(() => {
const clampedPain = Math.max(0, Math.min(100, pain));
const normalizedPain = clampedPain / 100;
const intensity = Math.pow(normalizedPain, 1.5);
const vignetteSize = isMobile ? "80px" : "150px";
const safeScale = Math.max(0, Math.min(1, intensityScale));
const maxOpacity = (isMobile ? 0.5 : 0.7) * safeScale;
const opacity = intensity * maxOpacity;
const rgb = KOREAN_COLORS.PAIN_INDICATOR;
const painColor = `rgba(${(rgb >> 16) & 255}, ${(rgb >> 8) & 255}, ${
rgb & 255
}, ${opacity})`;
return {
position: "fixed" as const,
inset: 0,
pointerEvents: "none" as const,
boxShadow: `inset 0 0 ${vignetteSize} ${painColor}`,
transition: "box-shadow 0.5s ease-out",
zIndex: 50, // Below UI controls but above game content
};
}, [pain, isMobile, intensityScale]);
if (pain < 5) {
return null;
}
return (
<div
data-testid="pain-vignette"
style={vignetteStyle}
aria-hidden="true"
/>
);
};
PainVignette.displayName = "PainVignette";
|