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 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 | 3x 141x 141x 9x 9x 9x 9x 1x 1x 1x 1x 3x | /**
* PauseMenuButton - Reusable button for pause menu items
*
* Provides consistent styling for pause menu action buttons with Korean theming.
* Extracted from PauseMenu to reduce code duplication.
*
* Refactored to use useKoreanTheme for consistent theming.
*
* @module components/screens/combat/controls
* @category Combat UI
* @korean 일시정지메뉴버튼
*/
import React, { forwardRef } from "react";
import { useKoreanTheme } from "../../../../shared/base/useKoreanTheme";
import { hexToRgbaString } from "../../../../../utils/colorUtils";
import { getFocusStyle } from "../../../../../utils/accessibility";
export interface PauseMenuButtonProps {
/** Korean label text */
readonly labelKorean: string;
/** English label text */
readonly labelEnglish: string;
/** Optional icon/emoji */
readonly icon?: string;
/** Click handler */
readonly onClick: () => void;
/** Mouse enter handler */
readonly onMouseEnter?: () => void;
/** Key down handler */
readonly onKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
/** Focus handler */
readonly onFocus?: () => void;
/** Whether button is focused */
readonly isFocused: boolean;
/** Whether on mobile device */
readonly isMobile: boolean;
/** Test ID */
readonly testId: string;
}
/**
* PauseMenuButton Component
*
* Styled button for pause menu with:
* - Korean/English bilingual text with icon support
* - Cyan themed styling matching combat screen via useKoreanTheme
* - Hover and focus effects with accessibility support
* - Responsive sizing for mobile/desktop
*
* Reduces code duplication by ~70 lines from PauseMenu (inline button styling)
*
* @example
* ```tsx
* <PauseMenuButton
* ref={buttonRef}
* labelKorean="계속"
* labelEnglish="Resume"
* icon="▶️"
* onClick={handleResume}
* isFocused={focusedIndex === 0}
* isMobile={false}
* testId="pause-resume-button"
* />
* ```
*/
export const PauseMenuButton = forwardRef<
HTMLButtonElement,
PauseMenuButtonProps
>(
(
{
labelKorean,
labelEnglish,
icon,
onClick,
onMouseEnter,
onKeyDown,
onFocus,
isFocused,
isMobile,
testId,
},
ref,
) => {
const theme = useKoreanTheme({ variant: "primary", size: "lg", isMobile });
return (
<button
ref={ref}
onClick={onClick}
onMouseEnter={onMouseEnter}
onKeyDown={onKeyDown}
onFocus={onFocus}
data-testid={testId}
aria-label={`${labelKorean} | ${labelEnglish}`}
role="menuitem"
tabIndex={0}
style={{
padding: isMobile ? "12px 24px" : "16px 32px",
fontSize: isMobile ? "16px" : "20px",
backgroundColor: hexToRgbaString(
theme.colors.UI_BACKGROUND_MEDIUM,
0.9,
),
color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),
border: `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.6)}`,
borderRadius: "8px",
fontFamily: theme.fontFamily.KOREAN,
fontWeight: "bold",
cursor: "pointer",
transition: "all 0.2s ease",
textAlign: "center",
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: "12px",
boxShadow: "none",
...getFocusStyle(isFocused, {
outlineWidth: 3,
boxShadow: `0 0 0 4px ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)}, 0 0 20px ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.5)}`,
}),
}}
onMouseOver={(e) => {
e.currentTarget.style.backgroundColor = hexToRgbaString(
theme.colors.PRIMARY_CYAN,
1,
);
e.currentTarget.style.color = hexToRgbaString(
theme.colors.UI_BACKGROUND_DARK,
1,
);
e.currentTarget.style.transform = "scale(1.05)";
e.currentTarget.style.boxShadow = `0 0 20px ${hexToRgbaString(
theme.colors.PRIMARY_CYAN,
0.5,
)}`;
}}
onMouseOut={(e) => {
e.currentTarget.style.backgroundColor = hexToRgbaString(
theme.colors.UI_BACKGROUND_MEDIUM,
0.9,
);
e.currentTarget.style.color = hexToRgbaString(
theme.colors.PRIMARY_CYAN,
1,
);
e.currentTarget.style.transform = "scale(1)";
e.currentTarget.style.boxShadow = "none";
}}
>
{icon && <span style={{ fontSize: "24px" }}>{icon}</span>}
<span>
{labelKorean} | {labelEnglish}
</span>
</button>
);
},
);
PauseMenuButton.displayName = "PauseMenuButton";
export default PauseMenuButton;
|