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 | 1x 22x 22x 22x 22x | /**
* TrainingControlsHTML - Html overlay for training controls
*
* Displays start/stop button and training status.
* Training auto-starts on mount, but users can manually stop and restart.
*/
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 showing training status and start/stop controls
*/
export const TrainingControlsHTML: React.FC<TrainingControlsHTMLProps> = ({
isTraining,
onStartTraining,
onStopTraining,
isMobile,
}) => {
const panelWidth = isMobile ? 200 : 220;
const panelHeight = isMobile ? 90 : 100;
const borderColor = isTraining
? "rgba(0, 255, 136, 0.9)"
: "rgba(255, 68, 68, 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: "12px",
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: "8px" }}>
<div
style={{
fontSize: isMobile ? "13px" : "14px",
fontWeight: "bold",
color: isTraining ? "#00ff88" : "#ff4444",
}}
>
{isTraining ? "훈련 진행중" : "훈련 대기"}
</div>
<div
style={{
fontSize: isMobile ? "9px" : "10px",
color: "#999999",
fontStyle: "italic",
}}
>
{isTraining ? "Training Active" : "Training Stopped"}
</div>
</div>
{/* Status Indicator with CSS animation */}
<div
className={`status-indicator ${isTraining ? "active" : "inactive"}`}
style={{
position: "absolute",
top: "12px",
right: "12px",
}}
/>
{/* Start/Stop Button */}
<button
onClick={isTraining ? onStopTraining : onStartTraining}
className={`training-button ${isTraining ? "training-button-stop" : "training-button-start"}`}
style={{
fontSize: isMobile ? "13px" : "14px",
fontFamily: FONT_FAMILY.KOREAN,
height: "35px",
}}
data-testid="training-toggle-button"
data-training-state={isTraining ? "active" : "inactive"}
>
<span>{isTraining ? "⏹" : "▶"}</span>
<span>{isTraining ? "중지 | Stop" : "시작 | Start"}</span>
</button>
{/* Info text about auto-restart */}
{!isTraining && (
<div
style={{
fontSize: isMobile ? "9px" : "10px",
color: "#999999",
textAlign: "center",
marginTop: "4px",
}}
>
모드 변경시 자동 재시작
<br />
Auto-restarts on mode change
</div>
)}
</div>
);
};
export default TrainingControlsHTML;
|