function MainComponent() { const [age, setAge] = React.useState({ years: 0, months: 0, weeks: 0, days: 0 }); const [showGame, setShowGame] = React.useState(false); const [username, setUsername] = React.useState(''); const calculateAge = (birthdate)=>{ const birth = new Date(birthdate); const now = new Date(); const diff = now - birth; const ageDate = new Date(diff); const years = ageDate.getUTCFullYear() - 1970; const months = ageDate.getUTCMonth(); const days = Math.floor(diff / (1000 * 60 * 60 * 24)); const weeks = Math.floor(days / 7); return { years, months, weeks, days }; }; const handleSubmit = (event)=>{ event.preventDefault(); const birthdate = event.target.elements.birthdate.value; const user = event.target.elements.username.value; const calculatedAge = calculateAge(birthdate); setUsername(user); setAge(calculatedAge); setShowGame(true); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, !showGame && /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded shadow-md w-[400px]", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "Enter Your Details"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "username", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, "Username"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "username", name: "username", className: "w-full px-3 py-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "birthdate", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, "Birthdate"), /*#__PURE__*/ React.createElement("input", { type: "date", id: "birthdate", name: "birthdate", className: "w-full px-3 py-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 bg-blue-500 text-white rounded-md font-semibold", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "Submit")), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-roboto", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "Your Age"), /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "Years: ", /*#__PURE__*/ React.createElement("span", { id: "years", __source: { fileName: "", lineNumber: 48, columnNumber: 53 }, __self: this }, age.years)), /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "Months: ", /*#__PURE__*/ React.createElement("span", { id: "months", __source: { fileName: "", lineNumber: 49, columnNumber: 54 }, __self: this }, age.months)), /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "Weeks: ", /*#__PURE__*/ React.createElement("span", { id: "weeks", __source: { fileName: "", lineNumber: 50, columnNumber: 53 }, __self: this }, age.weeks)), /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "Days: ", /*#__PURE__*/ React.createElement("span", { id: "days", __source: { fileName: "", lineNumber: 51, columnNumber: 52 }, __self: this }, age.days)))), showGame && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "Welcome ", username), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-crimson-text", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, age.years, " Years Old"), /*#__PURE__*/ React.createElement(Game, { years: age.years, __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }))); } function Game({ years }) { const canvasRef = React.useRef(null); const [snake, setSnake] = React.useState(null); const [apples, setApples] = React.useState([]); const [scale, setScale] = React.useState(10); const [dimensions, setDimensions] = React.useState({ width: 400, height: 400 }); React.useEffect(()=>{ const canvas = canvasRef.current; const context = canvas.getContext("2d"); const initialSnake = new Snake(); setSnake(initialSnake); const intervalId = setInterval(()=>{ context.clearRect(0, 0, canvas.width, canvas.height); initialSnake.update(); initialSnake.draw(context); apples.forEach((apple)=>apple.draw(context)); checkAppleEaten(); }, 100); const applesIntervalId = setInterval(()=>{ const apple = new Apple(); setApples((prevApples)=>[ ...prevApples, apple ]); }, 5000); function checkAppleEaten() { for(let i = 0; i < apples.length; i++){ if (initialSnake.eat(apples[i])) { setApples((prevApples)=>prevApples.filter((_, index)=>index !== i)); initialSnake.total++; setScale((prevScale)=>prevScale * 1.1); setDimensions((prevDim)=>({ width: prevDim.width + 20, height: prevDim.height + 20 })); } } } return ()=>{ clearInterval(intervalId); clearInterval(applesIntervalId); }; }, [ apples ]); class Snake { constructor(){ this.x = 0; this.y = 0; this.xSpeed = scale; this.ySpeed = 0; this.total = 1; this.tail = []; } draw(context) { context.fillStyle = "#000000"; for(let i = 0; i < this.tail.length; i++){ context.fillRect(this.tail[i].x, this.tail[i].y, scale, scale); } context.fillRect(this.x, this.y, scale, scale); } update() { for(let i = 0; i < this.tail.length - 1; i++){ this.tail[i] = this.tail[i + 1]; } this.tail[this.total - 1] = { x: this.x, y: this.y }; this.x += this.xSpeed; this.y += this.ySpeed; if (this.x >= dimensions.width || this.x < 0) { this.x = (this.x + dimensions.width) % dimensions.width; } if (this.y >= dimensions.height || this.y < 0) { this.y = (this.y + dimensions.height) % dimensions.height; } } changeDirection(direction) { switch(direction){ case "Up": if (this.ySpeed === 0) { this.xSpeed = 0; this.ySpeed = -scale; } break; case "Down": if (this.ySpeed === 0) { this.xSpeed = 0; this.ySpeed = scale; } break; case "Left": if (this.xSpeed === 0) { this.xSpeed = -scale; this.ySpeed = 0; } break; case "Right": if (this.xSpeed === 0) { this.xSpeed = scale; this.ySpeed = 0; } break; } } eat(apple) { return this.x === apple.x && this.y === apple.y; } } class Apple { constructor(){ this.x = Math.floor(Math.random() * (canvasRef.current.width / scale)) * scale; this.y = Math.floor(Math.random() * (canvasRef.current.height / scale)) * scale; } draw(context) { context.fillStyle = "#FF0000"; context.fillRect(this.x, this.y, scale, scale); } } document.addEventListener("keydown", (event)=>{ const direction = event.key.replace("Arrow", ""); snake && snake.changeDirection(direction); }); return /*#__PURE__*/ React.createElement("canvas", { ref: canvasRef, className: "border-4 border-gray-700 bg-green-400", width: dimensions.width, height: dimensions.height, __source: { fileName: "", lineNumber: 196, columnNumber: 10 }, __self: this }); }