function MainComponent() { const [direction, setDirection] = React.useState(50); const [power, setPower] = React.useState(50); const [result, setResult] = React.useState(""); const handleShoot = ()=>{ setResult(""); setTimeout(()=>{ const chanceToScore = direction * power; const didScore = Math.random() < chanceToScore / 5000; setResult(didScore ? "Goal 🥅" : "Miss ⚽"); alert(didScore ? "Goal 🥅" : "Miss ⚽"); }, 100); }; const directionLineRotation = `rotate(${(direction - 50) * 3.6}deg)`; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center py-10 space-y-4", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-[#A9A9A9] bg-white w-[300px] h-[100px] mx-auto", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-black bg-gray-400 rounded-full w-[50px] h-[50px] inline-flex items-center justify-center mx-auto", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute left-1/2 bottom-0 w-[2px] h-[100px] bg-black -translate-x-1/2", style: { transform: directionLineRotation, transformOrigin: 'bottom center' }, __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto block text-center", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "Direction", /*#__PURE__*/ React.createElement("input", { type: "range", name: "direction", onChange: (e)=>setDirection(e.target.value), className: "w-full", min: "0", max: "100", value: direction, __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto block text-center", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Power", /*#__PURE__*/ React.createElement("input", { type: "range", name: "power", onChange: (e)=>setPower(e.target.value), className: "w-full", min: "0", max: "100", value: power, __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: handleShoot, className: "px-4 py-2 bg-blue-500 text-white font-roboto rounded-full", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, "Shoot"), /*#__PURE__*/ React.createElement("span", { className: `${result ? "block" : "hidden"} mt-4 font-roboto text-center`, __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, result))); }