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 | 2x 77x 2x 80x 80x 5x 5x 80x 400x 5x | /**
* TrainingButtons - Reusable button components for TrainingScreen
*
* Provides return-to-menu button and archetype selection buttons.
* Extracted from TrainingScreen3D to reduce code duplication.
*
* @module components/screens/training
* @category Training UI
* @korean 훈련버튼
*/
import React, { useCallback } from "react";
import { PlayerArchetype } from "../../../../types/common";
import { hexToRgbaString } from "../../../../utils/colorUtils";
import { useKoreanTheme } from "../../../shared/base/useKoreanTheme";
import { BaseButtonOverlayHtml } from "../../../shared/base/BaseButtonOverlayHtml";
export interface ReturnToMenuButtonProps {
/** Callback when button is clicked */
readonly onClick: () => void;
/** Callback when mouse enters button */
readonly onMouseEnter?: () => void;
/** Whether on mobile device */
readonly isMobile: boolean;
}
/**
* ReturnToMenuButton Component
*
* Bilingual button to return to main menu from training screen.
* Uses BaseButtonOverlayHtml for consistent Korean theming.
*
* Refactored to use BaseButtonOverlayHtml for better consistency.
*
* @example
* ```tsx
* <ReturnToMenuButton
* onClick={() => navigate('/menu')}
* onMouseEnter={() => playSound()}
* isMobile={false}
* />
* ```
*/
export const ReturnToMenuButton: React.FC<ReturnToMenuButtonProps> = ({
onClick,
onMouseEnter,
isMobile,
}) => {
return (
<BaseButtonOverlayHtml
korean={isMobile ? "메뉴" : "메뉴로"}
english={isMobile ? "Menu" : "Return to Menu"}
onClick={onClick}
onMouseEnter={onMouseEnter}
variant="primary"
size="md"
isMobile={isMobile}
testId="return-to-menu-button"
/>
);
};
export interface ArchetypeSelectionButtonsProps {
/** Currently selected archetype */
readonly selectedArchetype: PlayerArchetype;
/** Callback when archetype is selected */
readonly onArchetypeSelect: (archetype: PlayerArchetype) => void;
/** Callback to play sound effects */
readonly onPlaySFX?: (sound: string) => void;
/** Whether on mobile device */
readonly isMobile: boolean;
}
/**
* ArchetypeSelectionButtons Component
*
* Grid of buttons to select player archetype during training.
* Highlights selected archetype with gold background.
*
* Reduces code duplication by 35 lines from TrainingScreen3D (inline button logic)
*
* @example
* ```tsx
* <ArchetypeSelectionButtons
* selectedArchetype={PlayerArchetype.MUSA}
* onArchetypeSelect={(arch) => setArchetype(arch)}
* onPlaySFX={(sound) => audio.play(sound)}
* isMobile={false}
* />
* ```
*/
export const ArchetypeSelectionButtons: React.FC<
ArchetypeSelectionButtonsProps
> = ({ selectedArchetype, onArchetypeSelect, onPlaySFX, isMobile }) => {
const theme = useKoreanTheme({ variant: "primary", size: "sm", isMobile });
const handleArchetypeClick = useCallback(
(archetype: PlayerArchetype) => {
onArchetypeSelect(archetype);
onPlaySFX?.("menu_select");
},
[onArchetypeSelect, onPlaySFX],
);
return (
<div
style={{
display: "flex",
flexWrap: "wrap",
gap: "4px",
justifyContent: "center",
}}
data-testid="archetype-selection-buttons"
>
{Object.values(PlayerArchetype).map((arch) => (
<button
key={arch}
onClick={() => handleArchetypeClick(arch)}
style={{
padding: isMobile ? "4px 8px" : "6px 10px",
fontSize: isMobile ? "9px" : "11px",
fontFamily: theme.koreanTypography.fontFamily,
fontWeight: selectedArchetype === arch ? "bold" : "normal",
background:
selectedArchetype === arch
? hexToRgbaString(theme.colors.ACCENT_GOLD, 0.8)
: hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, 0.8),
color:
selectedArchetype === arch
? hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 1)
: hexToRgbaString(theme.colors.TEXT_PRIMARY, 1),
border: `1px solid ${hexToRgbaString(
selectedArchetype === arch
? theme.colors.ACCENT_GOLD
: theme.colors.UI_BORDER,
0.6,
)}`,
borderRadius: "4px",
cursor: "pointer",
transition: "all 0.2s ease",
}}
data-testid={`archetype-button-${arch}`}
aria-label={`Select ${arch} archetype`}
aria-pressed={selectedArchetype === arch}
>
{arch.toUpperCase()}
</button>
))}
</div>
);
};
export default { ReturnToMenuButton, ArchetypeSelectionButtons };
|