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 | 1x 9x 9x 9x 9x | /**
* TrainingControlsHTML - Html overlay for training controls
*
* Uses CSS animations instead of requestAnimationFrame for better performance
*/
import React from "react";
import { FONT_FAMILY } from "../../../types/constants";
import "../training.css";
/**
* Props for TrainingControlsHTML component
*/
export interface TrainingControlsHTMLProps {
/** Whether training is currently active */
readonly isTraining: boolean;
/** Callback to start training */
readonly onStartTraining: () => void;
/** Callback to stop training */
readonly onStopTraining: () => void;
/** Whether on mobile device */
readonly isMobile: boolean;
}
/**
* TrainingControlsHTML Component
* Html overlay for training start/stop controls with CSS animations
*/
export const TrainingControlsHTML: React.FC<TrainingControlsHTMLProps> = ({
isTraining,
onStartTraining,
onStopTraining,
isMobile,
}) => {
const panelWidth = isMobile ? 260 : 280;
const panelHeight = isMobile ? 120 : 140;
const borderColor = isTraining
? "rgba(0, 255, 136, 0.9)"
: "rgba(0, 255, 255, 0.9)";
return (
<div
style={{
width: `${panelWidth}px`,
height: `${panelHeight}px`,
background: "rgba(26, 26, 26, 0.85)",
border: `2px solid ${borderColor}`,
borderRadius: "12px",
padding: "15px",
fontFamily: FONT_FAMILY.KOREAN,
color: "#ffffff",
boxShadow: "0 4px 20px rgba(0, 0, 0, 0.5)",
position: "relative",
}}
data-testid="training-controls-html"
>
{/* Header */}
<div style={{ marginBottom: "10px" }}>
<div
style={{
fontSize: isMobile ? "14px" : "16px",
fontWeight: "bold",
color: "#ffd700",
}}
>
훈련 조작
</div>
<div
style={{
fontSize: isMobile ? "10px" : "12px",
color: "#999999",
fontStyle: "italic",
}}
>
Training Controls
</div>
</div>
{/* Status Indicator with CSS animation */}
<div
className={`status-indicator ${isTraining ? "active" : "inactive"}`}
style={{
position: "absolute",
top: "15px",
right: "15px",
}}
/>
{/* Start/Stop Button with CSS hover */}
<button
onClick={isTraining ? onStopTraining : onStartTraining}
className={`training-button ${isTraining ? "training-button-stop" : "training-button-start"}`}
style={{
fontSize: isMobile ? "14px" : "16px",
fontFamily: FONT_FAMILY.KOREAN,
marginBottom: "10px",
}}
data-testid="start-stop-button"
>
<span>{isTraining ? "⏹" : "▶"}</span>
<span>{isTraining ? "중지" : "시작"}</span>
</button>
{/* Control Instructions */}
<div
style={{
fontSize: isMobile ? "9px" : "10px",
color: "#00ffff",
marginTop: "auto",
}}
>
<div style={{ fontWeight: "bold", marginBottom: "4px" }}>조작법:</div>
<div style={{ color: "#999999" }}>
WASD-이동 | Space-공격 | 1-8-자세
</div>
</div>
</div>
);
};
export default TrainingControlsHTML;
|