function MainComponent() { const [fairy, setFairy] = React.useState({ name: 'Tinker', level: 1, happiness: 50, image: './assets/fairy.png' }); const [conversation, setConversation] = React.useState([]); const feedFairy = ()=>{ setFairy((prevFairy)=>({ ...prevFairy, happiness: Math.min(prevFairy.happiness + 10, 100) })); }; const playWithFairy = ()=>{ setFairy((prevFairy)=>({ ...prevFairy, happiness: Math.min(prevFairy.happiness + 20, 100) })); }; const talkToFairy = ()=>{ const newMessage = { text: "Hello! How are you?", sender: 'user' }; setConversation((prevConversation)=>[ ...prevConversation, newMessage ]); setTimeout(()=>{ const fairyResponse = { text: "I'm feeling great! Thanks for asking!", sender: 'fairy' }; setConversation((prevConversation)=>[ ...prevConversation, fairyResponse ]); }, 1000); }; React.useEffect(()=>{ if (fairy.happiness >= 80 && fairy.level < 5) { setFairy((prevFairy)=>({ ...prevFairy, level: prevFairy.level + 1, happiness: 50 })); } }, [ fairy.happiness ]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-5", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: fairy.image, alt: "A cute fairy", className: "w-[200px] h-[200px] mb-5", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-lg mb-5", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, fairy.name, " - Level ", fairy.level, " - Happiness: ", fairy.happiness), /*#__PURE__*/ React.createElement("div", { className: "flex justify-around w-full mb-5", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-gray-300 p-2 rounded", name: "feed", onClick: feedFairy, __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "Feed"), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-300 p-2 rounded", name: "play", onClick: playWithFairy, __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "Play"), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-300 p-2 rounded", name: "talk", onClick: talkToFairy, __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "Talk")), /*#__PURE__*/ React.createElement("div", { className: "w-full h-[200px] border border-gray-300 p-2 overflow-y-auto", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, conversation.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `${message.sender === 'user' ? 'self-end bg-gray-200' : 'self-start bg-green-100'} p-2 rounded mb-2`, __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, message.text)))); }