function CenteredTitleScreen({ title }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-green-800 p-4 font-roboto", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white text-4xl", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title)); } function CenteredTitleScreenStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CenteredTitleScreen, { title: "Sample Title 1", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(CenteredTitleScreen, { title: "Sample Title 2", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this })); } function CircularDesignElement({ size, backgroundColor, circles }) { const containerSize = size ? `w-[${size}px] h-[${size}px]` : 'w-[800px] h-[400px]'; const containerBgColor = backgroundColor ? `bg-[${backgroundColor}]` : 'bg-[#444]'; const circleElements = circles.map((circle, index)=>{ const circleStyles = `${circle.color} ${circle.size ? `w-[${circle.size}px] h-[${circle.size}px]` : 'w-[20px] h-[20px]'} ${circle.position}`; return /*#__PURE__*/ React.createElement("div", { key: index, className: `absolute rounded-full ${circleStyles}`, __source: { fileName: "", lineNumber: 7, columnNumber: 12 }, __self: this }); }); return /*#__PURE__*/ React.createElement("div", { className: `relative ${containerBgColor} ${containerSize} rounded`, __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, circleElements); } function CircularDesignElementStory() { const circlesData1 = [ { color: 'bg-red-600', position: 'top-[50%] left-[50%] transform -translate-x-1/2 -translate-y-1/2' }, { color: 'bg-white', position: 'bottom-4 left-[10%]' }, { color: 'bg-yellow-500', position: 'top-4 right-[10%]' }, { color: 'bg-[#0000ff]', position: 'bottom-4 right-[10%]' } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CircularDesignElement, { size: 800, backgroundColor: "#444", circles: circlesData1, __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this })); } function MainComponent() { const [balls, setBalls] = React.useState([ { color: 'bg-red-600', position: 'top-[50%] left-[50%] transform -translate-x-1/2 -translate-y-1/2' }, { color: 'bg-white', position: 'bottom-[20%] left-[20%]' }, { color: 'bg-yellow-500', position: 'top-[20%] right-[20%]' }, { color: 'bg-blue-600', position: 'bottom-[20%] right-[20%]' } ]); const moveBall = (index)=>{ const newBalls = [ ...balls ]; const newX = `${Math.random() * 80}%`; const newY = `${Math.random() * 80}%`; newBalls[index] = { ...newBalls[index], position: `top-[${newY}] left-[${newX}] transform -translate-x-1/2 -translate-y-1/2` }; setBalls(newBalls); }; const handlePlay = ()=>{ balls.forEach((_, index)=>moveBall(index)); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-green-800 p-4 font-roboto", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CenteredTitleScreen, { title: "Snooker Game", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(CircularDesignElement, { size: 800, backgroundColor: "#444", circles: balls, __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handlePlay, className: "mt-8 py-2 px-4 bg-[#f39c12] text-white rounded", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, "Play")); }