function BoSelector({ boValue, onBOChange }) { const circles = { 1: 1, 3: 2, 5: 3 }; const renderCircles = Array(circles[boValue || 1]).fill(0).map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-8 h-8 bg-blue-500 rounded-full mx-1", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this })); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "bo", value: "1", onChange: ()=>onBOChange(1), checked: boValue === 1, className: "mr-2", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "font-roboto", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, "BO1")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "bo", value: "3", onChange: ()=>onBOChange(3), checked: boValue === 3, className: "mr-2", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "font-roboto", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "BO3")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "bo", value: "5", onChange: ()=>onBOChange(5), checked: boValue === 5, className: "mr-2", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "font-roboto", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "BO5")), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, renderCircles)); } function BoSelectorStory() { const [boValue, setBOValue] = React.useState(1); const handleBOChange = (value)=>{ setBOValue(value); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BoSelector, { boValue: boValue, onBOChange: handleBOChange, __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this })); } function MainComponent() { const [leftTeam, setLeftTeam] = React.useState("T1"); const [rightTeam, setRightTeam] = React.useState("T2"); const [leftValue, setLeftValue] = React.useState(50); const [rightValue, setRightValue] = React.useState(50); const [circleCount, setCircleCount] = React.useState(1); const [leftCircles, setLeftCircles] = React.useState(Array.from({ length: 1 }).fill(false)); const [rightCircles, setRightCircles] = React.useState(Array.from({ length: 1 }).fill(false)); const handleLeftNameChange = (e)=>setLeftTeam(e.target.value); const handleRightNameChange = (e)=>setRightTeam(e.target.value); const handleIncrease = (team)=>{ if (team === "left" && leftValue < 90) { setLeftValue((prev)=>prev + 5); setRightValue((prev)=>prev - 5); } if (team === "right" && rightValue < 90) { setRightValue((prev)=>prev + 5); setLeftValue((prev)=>prev - 5); } }; const handleDecrease = (team)=>{ if (team === "left" && leftValue > 10) { setLeftValue((prev)=>prev - 5); setRightValue((prev)=>prev + 5); } if (team === "right" && rightValue > 10) { setRightValue((prev)=>prev - 5); setLeftValue((prev)=>prev + 5); } }; const handleReset = ()=>{ setLeftValue(50); setRightValue(50); }; const handleCircleClick = (team, index)=>{ const circles = team === "left" ? [ ...leftCircles ] : [ ...rightCircles ]; circles[index] = !circles[index]; team === "left" ? setLeftCircles(circles) : setRightCircles(circles); }; const handleBOChange = (e)=>{ const count = parseInt(e.target.value); setCircleCount(count); setLeftCircles(Array(count).fill(false)); setRightCircles(Array(count).fill(false)); }; const leftBarStyle = { width: `${leftValue}%` }; const rightBarStyle = { width: `${rightValue}%` }; const renderCircles = (team)=>{ const circles = team === "left" ? leftCircles : rightCircles; return circles.map((active, index)=>/*#__PURE__*/ React.createElement("div", { className: `w-4 h-4 border-2 border-white rounded-full ${active ? "bg-white" : "bg-transparent"} mx-1 cursor-pointer`, key: index, onClick: ()=>handleCircleClick(team, index), __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this })); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-black h-screen p-4", __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-4 space-x-4", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: leftTeam, name: "leftTeam", onChange: handleLeftNameChange, className: "p-2 bg-gray-200 rounded", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", value: rightTeam, name: "rightTeam", onChange: handleRightNameChange, className: "p-2 bg-gray-200 rounded", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-2", __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-end items-center w-[100px] h-[70px] bg-white font-bold font-roboto text-blue-600", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, leftTeam), /*#__PURE__*/ React.createElement("div", { className: "w-[calc(100%-200px)] flex flex-col items-center", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full flex h-[50px] bg-[#121212]", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex w-1/2", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center w-full h-full bg-blue-500 text-white font-roboto", style: leftBarStyle, __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 91, columnNumber: 17 }, __self: this }, leftValue, "%"))), /*#__PURE__*/ React.createElement("div", { className: "flex w-1/2", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center w-full h-full bg-red-500 text-white font-roboto", style: rightBarStyle, __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-2 ml-auto", __source: { fileName: "", lineNumber: 97, columnNumber: 17 }, __self: this }, rightValue, "%")))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-around w-full mt-4", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleIncrease("left"), className: "p-2 bg-blue-500 text-white rounded font-bold", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, "＋"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDecrease("left"), className: "p-2 bg-blue-500 text-white rounded font-bold", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, "－")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-around w-full mt-2", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDecrease("right"), className: "p-2 bg-red-500 text-white rounded font-bold", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, "－"))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-start items-center w-[100px] h-[70px] bg-white font-bold font-roboto text-red-600", __source: { fileName: "", lineNumber: 111, columnNumber: 9 }, __self: this }, rightTeam)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center gap-8 mb-4", __source: { fileName: "", lineNumber: 113, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, renderCircles("left")), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, renderCircles("right"))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-4 space-x-4", __source: { fileName: "", lineNumber: 121, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-white", __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "bo", value: "1", onChange: handleBOChange, className: "mr-2", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }), "BO1"), /*#__PURE__*/ React.createElement("label", { className: "text-white", __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "bo", value: "3", onChange: handleBOChange, className: "mr-2", __source: { fileName: "", lineNumber: 127, columnNumber: 11 }, __self: this }), "BO3"), /*#__PURE__*/ React.createElement("label", { className: "text-white", __source: { fileName: "", lineNumber: 130, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "bo", value: "5", onChange: handleBOChange, className: "mr-2", __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }), "BO5"))); }