function MainComponent() { const [ballPosition, setBallPosition] = React.useState({ x: 50, y: 50 }); const [turn, setTurn] = React.useState('left'); const hitBall = ()=>{ const newX = turn === 'left' ? Math.random() * 40 + 60 : Math.random() * 40; const newY = Math.random() * 80 + 10; setBallPosition({ x: newX, y: newY }); setTurn(turn === 'left' ? 'right' : 'left'); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#87CEEB] h-screen flex flex-col justify-center items-center", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#FFFFFF] font-roboto text-3xl mb-4", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, "熊のピンポンゲーム 🐻🏓"), /*#__PURE__*/ React.createElement("div", { className: "relative w-[300px] h-[200px] bg-[#8B4513] border-4 border-[#4A2511] rounded-lg", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute w-4 h-4 bg-[#FFFFFF] rounded-full", style: { left: `${ballPosition.x}%`, top: `${ballPosition.y}%`, transition: 'all 0.5s ease-in-out' }, __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute left-2 bottom-2", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: hitBall, disabled: turn !== 'left', className: "text-4xl", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "🐻")), /*#__PURE__*/ React.createElement("div", { className: "absolute right-2 bottom-2", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: hitBall, disabled: turn !== 'right', className: "text-4xl", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "🐻"))), /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-[#FFFFFF] font-roboto", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, turn === 'left' ? '左の熊' : '右の熊', "の番です。クリックしてボールを打ちましょう！"), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, ` @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes backgroundFadeIn { from { opacity: 0; } to { opacity: 1; } } `)); }