function MainComponent({ spin, onSpin }) { return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[300px] bg-[#1a1a1a] overflow-hidden rounded-lg", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `absolute flex space-x-2 transform transition-transform duration-1000 ${spin ? 'rotate-[360deg]' : 'rotate-0'}`, __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-20 h-20 bg-red-500", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-20 h-20 bg-yellow-500", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-20 h-20 bg-blue-500", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-20 h-20 bg-green-500", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-20 h-20 bg-purple-500 flex items-center justify-center text-white font-bold", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, "SPRAWLS")), /*#__PURE__*/ React.createElement("button", { className: "absolute bottom-5 left-1/2 transform -translate-x-1/2 bg-red-700 text-white py-2 px-4 rounded-full", onClick: onSpin, __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, "Spin")); } function StoryComponent() { const [spin, setSpin] = React.useState(false); React.useEffect(()=>{ if (spin) { const audio = new Audio('/spin-sound.mp3'); audio.play(); setTimeout(()=>setSpin(false), 1000); // Assuming it takes 1 second for the spin to finish } }, [ spin ]); return /*#__PURE__*/ React.createElement("div", { className: "space-y-10 p-10 font-roboto bg-black", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl text-white", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, "Roulette Component - Default State"), /*#__PURE__*/ React.createElement(MainComponent, { onSpin: ()=>setSpin(true), __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-xl text-white", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, "Roulette Component - Spinning State"), /*#__PURE__*/ React.createElement(MainComponent, { spin: spin, onSpin: ()=>setSpin(true), __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this })); }