function MainComponent() { const [ballPosition, setBallPosition] = React.useState({ top: 0, left: 0, opacity: 0 }); const [ballColor, setBallColor] = React.useState('#f1c40f'); const [backgroundColor, setBackgroundColor] = React.useState('#34495e'); const audioRef = React.useRef(); const moveBall = ()=>{ const x = Math.random() * (window.innerWidth - 50); const y = Math.random() * (window.innerHeight - 50); setBallPosition({ top: y, left: x, opacity: 1 }); }; const hideBall = ()=>{ audioRef.current.play(); setBallPosition((bp)=>({ ...bp, opacity: 0 })); setTimeout(moveBall, 0); }; React.useEffect(()=>{ moveBall(); }, []); const handleBallColorChange = (event)=>{ setBallColor(event.target.value); }; const handleBackgroundColorChange = (event)=>{ setBackgroundColor(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto w-full h-screen flex flex-col items-center justify-center bg-[#011627] text-[#FDFFFC]", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl mb-6 font-bold", style: { backgroundColor: backgroundColor }, __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, "🎯 Shooter Game - Settings"), /*#__PURE__*/ React.createElement("div", { className: "mb-12", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: moveBall, className: "mr-6 p-3 bg-[#2EC4B6] rounded-lg text-lg", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "Aim"), /*#__PURE__*/ React.createElement("button", { className: "p-3 bg-[#E71D36] rounded-lg text-lg", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "fa fa-crosshairs", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }), " Character"), /*#__PURE__*/ React.createElement("button", { className: "ml-6 p-3 bg-[#FF9F1C] rounded-lg text-lg", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "Shoot"), /*#__PURE__*/ React.createElement("button", { className: "ml-6 p-3 bg-[#011627] border-2 border-[#FF9F1C] rounded-lg text-lg", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "fa fa-gear", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }), " Settings")), /*#__PURE__*/ React.createElement("div", { className: "flex gap-6 mb-12", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "color", name: "ballColor", onChange: handleBallColorChange, value: ballColor, className: "w-16 h-16 border-none rounded-full cursor-pointer", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "color", name: "backgroundColor", onChange: handleBackgroundColorChange, value: backgroundColor, className: "w-16 h-16 border-none rounded-full cursor-pointer", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-full", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { onClick: hideBall, className: "transition-opacity duration-500 ease-out absolute w-[50px] h-[50px] rounded-full cursor-pointer", style: { top: ballPosition.top, left: ballPosition.left, opacity: ballPosition.opacity, backgroundColor: ballColor }, __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("audio", { ref: audioRef, src: "/sounds/ball-click.mp3", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, ` body { transition: background-color 0.25s; } button:focus { outline: 2px solid #FF9F1C; outline-offset: 2px; } input[type='color']::-webkit-color-swatch-wrapper { padding: 0; } input[type='color']::-webkit-color-swatch { border: none; } `)); }