function MainComponent() { const [fullBodySrc, setFullBodySrc] = React.useState(null); const [clothingSrc, setClothingSrc] = React.useState(null); const [position, setPosition] = React.useState({ top: 0, left: 0 }); const [size, setSize] = React.useState(1); const [rotation, setRotation] = React.useState(0); const handleFullBodyChange = (e)=>{ const file = e.target.files[0]; setFullBodySrc(URL.createObjectURL(file)); }; const handleClothingChange = (e)=>{ const file = e.target.files[0]; setClothingSrc(URL.createObjectURL(file)); }; const moveUp = ()=>setPosition((prev)=>({ ...prev, top: prev.top - 10 })); const moveDown = ()=>setPosition((prev)=>({ ...prev, top: prev.top + 10 })); const moveLeft = ()=>setPosition((prev)=>({ ...prev, left: prev.left - 10 })); const moveRight = ()=>setPosition((prev)=>({ ...prev, left: prev.left + 10 })); const enlarge = ()=>setSize((prev)=>prev * 1.1); const shrink = ()=>setSize((prev)=>prev * 0.9); const rotate = ()=>setRotation((prev)=>prev + 10); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 space-y-4 font-sans", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, "衣装調整ツール"), /*#__PURE__*/ React.createElement("div", { className: "w-full flex flex-col items-center space-y-4", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-2", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", name: "full-body-upload", className: "mb-2", onChange: handleFullBodyChange, __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "file", name: "clothing-upload", onChange: handleClothingChange, __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative w-[300px] h-[400px] border border-gray-300", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, fullBodySrc && /*#__PURE__*/ React.createElement("img", { src: fullBodySrc, alt: "Full body uploaded by user", className: "absolute inset-0 w-full h-full object-contain", __source: { fileName: "", lineNumber: 35, columnNumber: 27 }, __self: this }), clothingSrc && /*#__PURE__*/ React.createElement("img", { src: clothingSrc, alt: "Clothing layered on full body", className: "absolute inset-0 w-full h-full object-contain opacity-75", style: { top: position.top, left: position.left, transform: `scale(${size}) rotate(${rotation}deg)` }, __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-gray-200 px-2 py-1", onClick: moveUp, __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "上"), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-200 px-2 py-1", onClick: moveDown, __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "下"), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-200 px-2 py-1", onClick: moveLeft, __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "左"), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-200 px-2 py-1", onClick: moveRight, __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "右"), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-200 px-2 py-1", onClick: enlarge, __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "拡大"), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-200 px-2 py-1", onClick: shrink, __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "縮小"), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-200 px-2 py-1", onClick: rotate, __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "回転")))); }