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 | 3x 77x 77x 77x | /**
* CombatButtons - Reusable button components for CombatScreen
*
* Provides return-to-menu button with combat-specific styling.
* Extracted from CombatScreen3D to reduce code duplication.
*
* @module components/screens/combat
* @category Combat UI
* @korean 전투버튼
*/
import React, { useMemo } from "react";
import { hexToRgbaString } from "../../../../../utils/colorUtils";
import { useKoreanTheme } from "../../../../shared/base/useKoreanTheme";
import { BaseButtonOverlayHtml } from "../../../../shared/base/BaseButtonOverlayHtml";
export interface CombatReturnToMenuButtonProps {
/** Callback when button is clicked */
readonly onClick: () => void;
/** Callback when mouse enters button */
readonly onMouseEnter?: () => void;
/** Whether on mobile device */
readonly isMobile: boolean;
}
/**
* CombatReturnToMenuButton Component
*
* Bilingual button to return to main menu from combat screen.
* Uses BaseButtonOverlayHtml with custom container for combat-specific styling.
*
* Refactored to use BaseButtonOverlayHtml for better consistency.
*
* @example
* ```tsx
* <CombatReturnToMenuButton
* onClick={() => navigate('/menu')}
* onMouseEnter={() => playSound()}
* isMobile={false}
* />
* ```
*/
export const CombatReturnToMenuButton: React.FC<
CombatReturnToMenuButtonProps
> = ({ onClick, onMouseEnter, isMobile }) => {
const theme = useKoreanTheme({ variant: "primary", size: "md", isMobile });
const containerStyle = useMemo(() => ({
background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.85),
border: `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.8)}`,
}), [theme.colors.UI_BACKGROUND_DARK, theme.colors.PRIMARY_CYAN]);
return (
<div
style={{
textAlign: "center",
background: containerStyle.background,
border: containerStyle.border,
borderRadius: "8px",
padding: isMobile ? "6px 10px" : "8px 12px",
}}
>
<BaseButtonOverlayHtml
korean={isMobile ? "메뉴" : "메뉴로"}
english={isMobile ? "Menu" : "Return to Menu"}
onClick={onClick}
onMouseEnter={onMouseEnter}
variant="primary"
size="md"
isMobile={isMobile}
testId="return-to-menu-button"
/>
</div>
);
};
export default CombatReturnToMenuButton;
|