function PhotoDisplayBanner({ title }) { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[65px] mb-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title)); } function PhotoDisplayBannerStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PhotoDisplayBanner, { title: "自分の写真が出たら前に！", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this })); } function MainComponent() { const [uploadedImages, setUploadedImages] = React.useState([]); const [randomizeImages, setRandomizeImages] = React.useState([]); const [isRouletteActive, setIsRouletteActive] = React.useState(false); const [showFireworks, setShowFireworks] = React.useState(false); const handleImageUpload = (event)=>{ const files = Array.from(event.target.files).map((file, index)=>({ src: URL.createObjectURL(file), alt: `アップロードされた画像 ${index + 1}`, chosen: false })); setUploadedImages(files); }; const handleRandomize = ()=>{ setIsRouletteActive(true); setShowFireworks(false); const interval = setInterval(()=>{ const availableImages = uploadedImages.filter((image)=>!image.chosen); const randomized = availableImages.sort(()=>0.5 - Math.random()).slice(0, 5); setRandomizeImages(randomized); }, 100); setTimeout(()=>{ clearInterval(interval); const availableImages = uploadedImages.filter((image)=>!image.chosen); const finalized = availableImages.sort(()=>0.5 - Math.random()).slice(0, 5); const updatedImages = uploadedImages.map((image)=>({ ...image, chosen: finalized.some((randomImage)=>randomImage.src === image.src) || image.chosen })); setRandomizeImages(finalized); setUploadedImages(updatedImages); setIsRouletteActive(false); setShowFireworks(true); }, 3000); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex flex-col items-center bg-[#FEFFE4] p-4 font-arial", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[65px] mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, "自分の写真が出たら前に！"), /*#__PURE__*/ React.createElement("input", { type: "file", multiple: true, accept: "image/*", onChange: handleImageUpload, className: "mb-8 p-2 border rounded", name: "imageUpload", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4 mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, randomizeImages.slice(0, 3).map((image, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: image.src, alt: image.alt, className: `w-[200px] h-[200px] object-cover rounded shadow-md ${isRouletteActive ? 'animate-spin' : ''}`, __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4 mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, randomizeImages.slice(3, 5).map((image, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: image.src, alt: image.alt, className: `w-[200px] h-[200px] object-cover rounded shadow-md ${isRouletteActive ? 'animate-spin' : ''}`, __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { className: `mt-8 px-4 py-2 ${isRouletteActive ? "bg-gray-500" : "bg-[#529535]"} text-white text-xl rounded`, onClick: handleRandomize, name: "startRoulette", disabled: isRouletteActive, __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, isRouletteActive ? "ルーレット中..." : "ルーレットを開始"), showFireworks && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 w-full h-full fireworks", __source: { fileName: "", lineNumber: 85, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, ` button:disabled { cursor: not-allowed; } .fireworks { background: url('/path/to/fireworks.gif') center/cover no-repeat; pointer-events: none; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .animate-spin { animation: spin 0.5s linear infinite; } `)); }