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 | 2x 38x 24x 2x | /**
* TrainingFeedbackOverlayHtml - Html overlay for training feedback messages
*
* Displays temporary feedback messages for hits, misses, and achievements
* with consistent Korean martial arts cyberpunk theming.
*
* @module components/screens/training/components/TrainingFeedbackOverlayHtml
* @category Training UI
* @korean 훈련피드백오버레이
*/
import React from "react";
import { FONT_FAMILY, KOREAN_COLORS } from "../../../../types/constants";
import { hexToRgbaString } from "../../../../utils/colorUtils";
import "../training.css";
/**
* Props for TrainingFeedbackOverlayHtml component
*/
export interface TrainingFeedbackOverlayHtmlProps {
/** Feedback message to display */
readonly message: string;
/** Whether on mobile device */
readonly isMobile: boolean;
}
/**
* TrainingFeedbackOverlayHtml Component
* Html overlay for displaying training feedback with Korean theming
*
* @korean 훈련피드백오버레이컴포넌트
*/
export const TrainingFeedbackOverlayHtml = React.memo<TrainingFeedbackOverlayHtmlProps>(
({
message,
isMobile,
}) => {
return (
<div
className={`training-feedback ${isMobile ? "mobile" : "desktop"}`}
style={{
fontFamily: FONT_FAMILY.KOREAN,
fontWeight: "bold",
color: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD),
textShadow: `0 2px 10px ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.5)}`,
}}
data-testid="training-feedback-html"
>
{message}
</div>
);
},
(prevProps, nextProps) => {
// Only re-render if message or mobile state changes
return (
prevProps.message === nextProps.message &&
prevProps.isMobile === nextProps.isMobile
);
});
TrainingFeedbackOverlayHtml.displayName = "TrainingFeedbackOverlayHtml";
export default TrainingFeedbackOverlayHtml;
|