function CommentsForm({ addComment }) { return /*#__PURE__*/ React.createElement("form", { className: "mb-4", onSubmit: addComment, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "comment", className: "border p-2 rounded-lg w-full", placeholder: "コメントを追加...", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, "追加")); } function CommentsFormStory() { const handleSubmit = (event)=>{ event.preventDefault(); alert("Comment added!"); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CommentsForm, { addComment: handleSubmit, __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this })); } function MainComponent() { const [comments, setComments] = React.useState([]); const [replyInfo, setReplyInfo] = React.useState(null); const handleSubmit = (event)=>{ event.preventDefault(); const formComment = event.target.elements.comment.value; if (!formComment) return; const newComment = { id: Date.now(), text: formComment, replies: [], likes: 0, x: Math.floor(Math.random() * (window.innerWidth - 200)), y: Math.floor(Math.random() * (window.innerHeight - 200)) }; setComments([ ...comments, newComment ]); }; const addReply = (commentId, event)=>{ event.preventDefault(); const text = event.target.elements.reply.value; if (!text) return; const parentComment = comments.find((comment)=>comment.id === commentId); const newReply = { id: Date.now(), text, likes: 0, x: parentComment.x + 50 + Math.random() * 50 - 25, y: parentComment.y + 50 + Math.random() * 50 - 25 }; setComments(comments.map((comment)=>comment.id === commentId ? { ...comment, replies: [ ...comment.replies, newReply ] } : comment)); setReplyInfo(null); }; const increaseLike = (commentId, replyId = null)=>{ setComments(comments.map((comment)=>{ if (comment.id === commentId) { if (replyId) { const updatedReplies = comment.replies.map((reply)=>reply.id === replyId ? { ...reply, likes: reply.likes + 1 } : reply); return { ...comment, replies: updatedReplies }; } return { ...comment, likes: comment.likes + 1 }; } return comment; })); }; const handleClickOutside = ()=>{ setReplyInfo(null); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen bg-[#f0f2f5]", onClick: handleClickOutside, __source: { fileName: "", lineNumber: 66, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 md:p-8", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center font-roboto", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, "チャットマップ"), /*#__PURE__*/ React.createElement(CommentsForm, { addComment: handleSubmit, __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[80vh] mt-5 bg-white border rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, comments.map((comment)=>/*#__PURE__*/ React.createElement(React.Fragment, { key: comment.id, __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute bg-white p-2 shadow-lg rounded-lg cursor-pointer", style: { top: `${comment.y}px`, left: `${comment.x}px` }, onClick: (e)=>{ e.stopPropagation(); setReplyInfo({ commentId: comment.id, x: comment.x + 150, y: comment.y }); }, __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }, comment.text), /*#__PURE__*/ React.createElement("button", { onClick: (e)=>{ e.stopPropagation(); increaseLike(comment.id); }, className: "text-blue-500 text-xs", __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this }, "いいね ", comment.likes)), comment.replies.map((reply)=>/*#__PURE__*/ React.createElement(React.Fragment, { key: reply.id, __source: { fileName: "", lineNumber: 85, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "absolute w-full h-full pointer-events-none", style: { top: '0', left: '0' }, __source: { fileName: "", lineNumber: 86, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("line", { x1: comment.x + 10, y1: comment.y + 10, x2: reply.x + 10, y2: reply.y + 10, style: { stroke: "#64748b", strokeWidth: 2 }, __source: { fileName: "", lineNumber: 87, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute bg-white p-2 shadow-lg rounded-lg cursor-pointer", style: { top: `${reply.y}px`, left: `${reply.x}px` }, onClick: (e)=>{ e.stopPropagation(); }, __source: { fileName: "", lineNumber: 95, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto", __source: { fileName: "", lineNumber: 102, columnNumber: 21 }, __self: this }, reply.text), /*#__PURE__*/ React.createElement("button", { onClick: (e)=>{ e.stopPropagation(); increaseLike(comment.id, reply.id); }, className: "text-blue-500 text-xs", __source: { fileName: "", lineNumber: 103, columnNumber: 21 }, __self: this }, "いいね ", reply.likes)))))), replyInfo && /*#__PURE__*/ React.createElement("div", { onClick: (e)=>e.stopPropagation(), className: "absolute bg-white p-1 shadow-lg rounded-lg", style: { top: `${replyInfo.y}px`, left: `${replyInfo.x}px` }, __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: (event)=>addReply(replyInfo.commentId, event), __source: { fileName: "", lineNumber: 115, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "reply", className: "border p-1 rounded-lg w-[200px]", placeholder: "返信を追加...", __source: { fileName: "", lineNumber: 116, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded text-sm", __source: { fileName: "", lineNumber: 121, columnNumber: 17 }, __self: this }, "返信")))))); }