function MainComponent({ cartImages, tireImages, gliderImages, characterImages }) { const [cartIndex, setCartIndex] = React.useState(0); const [tireIndex, setTireIndex] = React.useState(0); const [gliderIndex, setGliderIndex] = React.useState(0); const [characterIndex, setCharacterIndex] = React.useState(0); const [cartIntervalId, setCartIntervalId] = React.useState(null); const [tireIntervalId, setTireIntervalId] = React.useState(null); const [gliderIntervalId, setGliderIntervalId] = React.useState(null); const [characterIntervalId, setCharacterIntervalId] = React.useState(null); const rollRoulette = ()=>{ const cartIntId = setInterval(()=>setCartIndex((prev)=>(prev + 1) % cartImages.length), 50); const tireIntId = setInterval(()=>setTireIndex((prev)=>(prev + 1) % tireImages.length), 50); const gliderIntId = setInterval(()=>setGliderIndex((prev)=>(prev + 1) % gliderImages.length), 50); const characterIntId = setInterval(()=>setCharacterIndex((prev)=>(prev + 1) % characterImages.length), 50); setCartIntervalId(cartIntId); setTireIntervalId(tireIntId); setGliderIntervalId(gliderIntId); setCharacterIntervalId(characterIntId); }; const stopCartRoulette = ()=>{ clearInterval(cartIntervalId); setCartIntervalId(null); }; const stopTireRoulette = ()=>{ clearInterval(tireIntervalId); setTireIntervalId(null); }; const stopGliderRoulette = ()=>{ clearInterval(gliderIntervalId); setGliderIntervalId(null); }; const stopCharacterRoulette = ()=>{ clearInterval(characterIntervalId); setCharacterIntervalId(null); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex flex-col items-center justify-center space-y-8 bg-[#f0f0f0] bg-cover bg-center", style: { backgroundImage: "url('relative/path/to/background-image.png')" }, __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-8 p-8 bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[200px] h-[200px] border-2 border-[#000] rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: cartImages[cartIndex], alt: `Mario Kart 8DX cart ${cartIndex + 1}`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: stopCartRoulette, className: `mt-4 px-4 py-2 ${cartIntervalId === null ? 'bg-gray-500' : 'bg-red-500'} text-white font-roboto rounded-md shadow-md`, name: "stop-cart", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "Stop")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[200px] h-[200px] border-2 border-[#000] rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: tireImages[tireIndex], alt: `Mario Kart 8DX tire ${tireIndex + 1}`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: stopTireRoulette, className: `mt-4 px-4 py-2 ${tireIntervalId === null ? 'bg-gray-500' : 'bg-red-500'} text-white font-roboto rounded-md shadow-md`, name: "stop-tire", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "Stop")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[200px] h-[200px] border-2 border-[#000] rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: gliderImages[gliderIndex], alt: `Mario Kart 8DX glider ${gliderIndex + 1}`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: stopGliderRoulette, className: `mt-4 px-4 py-2 ${gliderIntervalId === null ? 'bg-gray-500' : 'bg-red-500'} text-white font-roboto rounded-md shadow-md`, name: "stop-glider", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "Stop")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[200px] h-[200px] border-2 border-[#000] rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: characterImages[characterIndex], alt: `Mario Kart 8DX character ${characterIndex + 1}`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: stopCharacterRoulette, className: `mt-4 px-4 py-2 ${characterIntervalId === null ? 'bg-gray-500' : 'bg-red-500'} text-white font-roboto rounded-md shadow-md`, name: "stop-character", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, "Stop"))), /*#__PURE__*/ React.createElement("button", { onClick: rollRoulette, className: "px-4 py-2 bg-blue-500 text-white font-roboto rounded-md shadow-md", name: "roll", __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, "Roll")); } function StoryComponent() { const cartImages = [ "relative/path/to/cart-image1.png", "relative/path/to/cart-image2.png", "relative/path/to/cart-image3.png" ]; const tireImages = [ "relative/path/to/tire-image1.png", "relative/path/to/tire-image2.png", "relative/path/to/tire-image3.png" ]; const gliderImages = [ "relative/path/to/glider-image1.png", "relative/path/to/glider-image2.png", "relative/path/to/glider-image3.png" ]; const characterImages = [ "relative/path/to/character-image1.png", "relative/path/to/character-image2.png", "relative/path/to/character-image3.png" ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 114, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { cartImages: cartImages, tireImages: tireImages, gliderImages: gliderImages, characterImages: characterImages, __source: { fileName: "", lineNumber: 115, columnNumber: 7 }, __self: this })); }