function MainComponent() { const [showForm, setShowForm] = useState(false); const [name, setName] = useState(""); const [food, setFood] = useState(""); const [favorites, setFavorites] = useState([]); const [selectedColor, setSelectedColor] = useState("#FFC3D5"); const [showColorPicker, setShowColorPicker] = useState(false); const predefinedColors = [ "#FFC3D5", "#FFB6C1", "#FFE4E1", "#F0E68C", "#98FB98", "#87CEEB", "#E6E6FA", "#DDA0DD" ]; useEffect(()=>{ fetchFavorites(); }, []); const fetchFavorites = async ()=>{ const response = await fetch("/api/db/what-food-do-you-like", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM `favorite_foods`" }) }); const data = await response.json(); setFavorites(data); }; const handleSubmit = async (e)=>{ e.preventDefault(); if (!name || !food) { alert("お名前と好きな食べ物を入力してください"); return; } await fetch("/api/db/what-food-do-you-like", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `favorite_foods` (`name`, `food`, `color`) VALUES (?, ?, ?)", values: [ name, food, selectedColor ] }) }); setShowForm(false); setName(""); setFood(""); setSelectedColor("#FFC3D5"); fetchFavorites(); }; const deleteNicoleData = async ()=>{ await fetch("/api/db/what-food-do-you-like", { method: "POST", body: JSON.stringify({ query: "DELETE FROM `favorite_foods` WHERE `name` = ? LIMIT 1", values: [ "にこる" ] }) }); await fetch("/api/db/what-food-do-you-like", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `favorite_foods` (`name`, `food`, `color`) VALUES (?, ?, ?)", values: [ "にこる", "寿司とお肉", "#FFB6C1" ] }) }); fetchFavorites(); }; const getCirclePosition = (index)=>{ const isMobile = window.innerWidth < 768; if (isMobile) { const col = index % 3; const row = Math.floor(index / 3); return { left: `${15 + col * 27}%`, top: `${35 + row * 13.5}%` }; } return { left: `${25 + index % 6 * 8}%`, top: `${30 + Math.floor(index / 6) * 10}%` }; }; return /*#__PURE__*/ React.createElement("div", { className: "relative min-h-screen w-full font-yomogi bg-[#f8f4e6]", __source: { fileName: "", lineNumber: 88, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 md:top-8 left-4 md:left-8 right-4 md:right-auto z-10 text-center bg-white bg-opacity-90 p-4 rounded-2xl shadow-lg", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl md:text-3xl font-yomogi text-[#2d4f1e] mb-2 tracking-wider", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, "What food do you like?"), /*#__PURE__*/ React.createElement("p", { className: "text-lg md:text-xl font-yomogi text-[#2d4f1e] tracking-widest", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, "〜みんなの木〜")), /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-screen bg-[#f8f4e6]", __source: { fileName: "", lineNumber: 97, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/45a4e839-718b-4c75-a581-e279e11a1d8d/", alt: "大きな木のイラスト", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex flex-wrap justify-center items-center p-8", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, favorites.map((item, index)=>{ const position = getCirclePosition(index); return /*#__PURE__*/ React.createElement("div", { key: item.id, className: "rounded-full p-3 m-1 shadow-xl transform hover:scale-110 transition-transform relative backdrop-blur-sm", style: { position: "absolute", left: position.left, top: position.top, backgroundColor: `${item.color}dd`, width: "70px", height: "70px", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", border: "2px solid white" }, __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-yomogi text-xs leading-tight text-center w-full", __source: { fileName: "", lineNumber: 125, columnNumber: 17 }, __self: this }, item.name.match(/.{1,3}/g)?.map((chunk, i)=>/*#__PURE__*/ React.createElement("span", { key: i, className: "inline-block", __source: { fileName: "", lineNumber: 127, columnNumber: 21 }, __self: this }, chunk, i < Math.floor(item.name.length / 3) && /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 129, columnNumber: 64 }, __self: this }))), /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 132, columnNumber: 19 }, __self: this }), item.food.match(/.{1,3}/g)?.map((chunk, i)=>/*#__PURE__*/ React.createElement("span", { key: i, className: "inline-block", __source: { fileName: "", lineNumber: 134, columnNumber: 21 }, __self: this }, chunk, i < Math.floor(item.food.length / 3) && /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 136, columnNumber: 64 }, __self: this }))))); }))), showForm ? /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 147, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 md:p-8 rounded-2xl shadow-2xl w-full max-w-md mx-4", __source: { fileName: "", lineNumber: 148, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl md:text-2xl font-yomogi text-[#2d4f1e] mb-6 text-center", __source: { fileName: "", lineNumber: 149, columnNumber: 13 }, __self: this }, "あなたの好きな食べ物は？"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 152, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 153, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-yomogi text-[#2d4f1e]", __source: { fileName: "", lineNumber: 154, columnNumber: 17 }, __self: this }, "お名前"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", value: name, onChange: (e)=>setName(e.target.value), placeholder: "8文字まで", className: "w-full p-3 border-2 border-pink-200 rounded-xl font-yomogi text-lg focus:outline-none focus:border-pink-400 transition-colors", maxLength: 8, __source: { fileName: "", lineNumber: 157, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 167, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-yomogi text-[#2d4f1e]", __source: { fileName: "", lineNumber: 168, columnNumber: 17 }, __self: this }, "好きな食べ物"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "food", value: food, onChange: (e)=>setFood(e.target.value), placeholder: "8文字まで", className: "w-full p-3 border-2 border-pink-200 rounded-xl font-yomogi text-lg focus:outline-none focus:border-pink-400 transition-colors", maxLength: 8, __source: { fileName: "", lineNumber: 171, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 181, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-yomogi text-[#2d4f1e]", __source: { fileName: "", lineNumber: 182, columnNumber: 17 }, __self: this }, "お好きな色を選んでください"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-2 mb-4", __source: { fileName: "", lineNumber: 185, columnNumber: 17 }, __self: this }, predefinedColors.map((color, index)=>/*#__PURE__*/ React.createElement("button", { key: index, type: "button", className: `w-full h-10 md:h-12 rounded-xl border-2 ${selectedColor === color ? "border-pink-500" : "border-pink-200"} cursor-pointer transition-colors`, style: { backgroundColor: color }, onClick: ()=>setSelectedColor(color), __source: { fileName: "", lineNumber: 187, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 200, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 md:w-12 md:h-12 rounded-xl border-2 border-pink-200", style: { backgroundColor: selectedColor }, __source: { fileName: "", lineNumber: 201, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "color", value: selectedColor, onChange: (e)=>setSelectedColor(e.target.value), className: "flex-1 h-10 md:h-12 rounded-xl cursor-pointer", __source: { fileName: "", lineNumber: 205, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 pt-4", __source: { fileName: "", lineNumber: 213, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "flex-1 bg-gradient-to-r from-pink-400 to-pink-500 text-white px-6 py-3 rounded-xl font-yomogi text-lg hover:from-pink-500 hover:to-pink-600 transform hover:scale-105 transition-all duration-200 shadow-md", __source: { fileName: "", lineNumber: 214, columnNumber: 17 }, __self: this }, "保存する"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setShowForm(false), className: "flex-1 bg-gradient-to-r from-gray-400 to-gray-500 text-white px-6 py-3 rounded-xl font-yomogi text-lg hover:from-gray-500 hover:to-gray-600 transform hover:scale-105 transition-all duration-200 shadow-md", __source: { fileName: "", lineNumber: 220, columnNumber: 17 }, __self: this }, "キャンセル"))))) : /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowForm(true), className: "fixed bottom-8 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-pink-400 to-pink-500 text-white px-8 py-3 md:px-10 md:py-4 rounded-xl text-lg md:text-xl hover:from-pink-500 hover:to-pink-600 transform hover:scale-105 transition-all duration-200 shadow-lg font-yomogi", __source: { fileName: "", lineNumber: 232, columnNumber: 9 }, __self: this }, "入力する")); }