function MainComponent() { const [hand, setHand] = React.useState({ card1: '', card2: '' }); const [opponentHand, setOpponentHand] = React.useState({ oppCard1: '', oppCard2: '' }); const [scenario, setScenario] = React.useState({ position: '', blinds: '', action: '' }); const [range, setRange] = React.useState({ call: 0, bet: 0, fold: 0, threeBet: 0, shove: 0 }); const [reasoning, setReasoning] = React.useState(''); const calculateRanges = ()=>{ // ... unchanged code }; const handleCardChange = (e)=>{ // ... unchanged code }; const handleScenarioChange = (e)=>{ // ... unchanged code }; const handleCalculateClick = ()=>{ // ... unchanged code }; const formatPercentage = (value)=>{ // ... unchanged code }; const rangeOverlayVisibility = { 'call': range.call > 0 ? 'visible' : 'invisible', 'bet': range.bet > 0 ? 'visible' : 'invisible', 'fold': range.fold > 0 ? 'visible' : 'invisible', 'threeBet': range.threeBet > 0 ? 'visible' : 'invisible', 'shove': range.shove > 0 ? 'visible' : 'invisible' }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1a1a] min-h-screen flex flex-col items-center justify-center text-white", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-5xl m-4 p-6 bg-[#333333] rounded-lg shadow-md", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-roboto mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "GTO Texas Hold'em Poker Hand Ranges Calculator"), /*#__PURE__*/ React.createElement("form", { className: "mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "action", className: "block text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, "Opponent's Action:"), /*#__PURE__*/ React.createElement("select", { id: "action", name: "action", value: scenario.action, onChange: handleScenarioChange, className: "w-full p-2 rounded bg-white text-black", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, Object.keys(range).map((action, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, className: "relative cursor-pointer border p-2 rounded hover:border-blue-500", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, action.toUpperCase()), /*#__PURE__*/ React.createElement("div", { className: `graph-overlay ${rangeOverlayVisibility[action]}`, __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 61, columnNumber: 19 }, __self: this }, formatPercentage(range[action]), "%"))))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, ` .graph-overlay { position: absolute; bottom: 0; left: 0; right: 0; background-color: #1a1a1a; color: white; padding: 10px; transition: height 0.3s ease; display: flex; align-items: center; justify-content: center; height: 0; overflow: hidden; } .grid-cols-4 > div:hover .graph-overlay { height: 3rem; } `)); }