function MainComponent() { const petCanvasRef = React.useRef(null); const dotArtCanvasRef = React.useRef(null); const [pet, setPet] = React.useState({ name: "Tama", hunger: 50, happiness: 50 }); const [dots, setDots] = React.useState([]); const gameLoop = ()=>{ drawPet(); }; const drawPet = ()=>{ const ctx = petCanvasRef.current.getContext("2d"); ctx.clearRect(0, 0, petCanvasRef.current.width, petCanvasRef.current.height); ctx.fillText(`Name: ${pet.name}`, 10, 20); ctx.fillText(`Hunger: ${pet.hunger}`, 10, 40); ctx.fillText(`Happiness: ${pet.happiness}`, 10, 60); }; const feed = ()=>{ setPet((prevPet)=>({ ...prevPet, hunger: prevPet.hunger > 0 ? prevPet.hunger - 10 : 0, happiness: prevPet.happiness + 10 })); }; const play = ()=>{ setPet((prevPet)=>({ ...prevPet, happiness: prevPet.happiness + 10 })); }; const addDot = (x, y)=>{ setDots((prevDots)=>[ ...prevDots, { x, y } ]); }; const removeDot = (x, y)=>{ setDots((prevDots)=>prevDots.filter((dot)=>dot.x !== x || dot.y !== y)); }; const drawDot = (x, y)=>{ const ctx = dotArtCanvasRef.current.getContext("2d"); ctx.fillRect(x, y, 5, 5); }; const clearCanvas = ()=>{ dotArtCanvasRef.current.getContext("2d").clearRect(0, 0, dotArtCanvasRef.current.width, dotArtCanvasRef.current.height); setDots([]); }; React.useEffect(()=>{ const interval = setInterval(gameLoop, 1000); return ()=>clearInterval(interval); }, []); React.useEffect(()=>{ dots.forEach((dot)=>drawDot(dot.x, dot.y)); }, [ dots ]); const canvasClickHandler = (e)=>{ const rect = e.target.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; addDot(x, y); drawDot(x, y); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 70, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[400px] h-[400px] bg-[#ffffff] shadow-lg rounded-lg p-4 font-roboto", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, "Tamagotchi-like Dot Art Game"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("canvas", { ref: petCanvasRef, id: "petCanvas", className: "w-[350px] h-[150px] border", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-2", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white p-2 rounded", onClick: feed, name: "feed", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "Feed"), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white p-2 rounded", onClick: play, name: "play", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "Play"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("canvas", { ref: dotArtCanvasRef, id: "dotArtCanvas", className: "w-[350px] h-[150px] border", name: "dotArtCanvas", onClick: canvasClickHandler, __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-2", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-red-500 text-white p-2 rounded", onClick: clearCanvas, name: "clearCanvas", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, "Clear Canvas"))))); }