Untitled

a guest

May 29th, 2025

Never

Add comment

Not a member of Pastebin yet? Sign Up, it unlocks many cool features!

text 7.02 KB | None | 0 0

raw download clone embed print report

import React, { useState, useEffect } from 'react';
import { Heart, Utensils, Gamepad2, Bath, Moon, Sun } from 'lucide-react';
const VirtualPet = () => {
const [pet, setPet] = useState({
name: 'Buddy',
happiness: 50,
hunger: 50,
cleanliness: 50,
energy: 50,
age: 0,
isAsleep: false
});
const [message, setMessage] = useState('Hi! I\'m your new pet!');
const [coins, setCoins] = useState(100);
// Pet aging and stat decay
useEffect(() => {
const interval = setInterval(() => {
setPet(prev => {
if (prev.isAsleep) return prev;
return {
...prev,
hunger: Math.max(0, prev.hunger - 1),
cleanliness: Math.max(0, prev.cleanliness - 0.5),
energy: Math.max(0, prev.energy - 0.5),
happiness: Math.max(0, prev.happiness - 0.3),
age: prev.age + 0.01
};
});
}, 3000);
return () => clearInterval(interval);
}, []);
// Update message based on pet status
useEffect(() => {
if (pet.hunger < 20) {
setMessage("I'm really hungry! 🍽️");
} else if (pet.cleanliness < 20) {
setMessage("I need a bath! 🛁");
} else if (pet.energy < 20) {
setMessage("I'm so tired... 😴");
} else if (pet.happiness < 30) {
setMessage("I'm feeling sad... 😢");
} else if (pet.happiness > 80) {
setMessage("I'm so happy! 😄");
} else {
setMessage("I'm doing well! 😊");
}
}, [pet]);
const feedPet = () => {
if (coins >= 10 && pet.hunger < 100) {
setPet(prev => ({
...prev,
hunger: Math.min(100, prev.hunger + 30),
happiness: Math.min(100, prev.happiness + 10)
}));
setCoins(prev => prev - 10);
setMessage("Yummy! Thank you! 😋");
}
};
const playWithPet = () => {
if (pet.energy > 20) {
setPet(prev => ({
...prev,
happiness: Math.min(100, prev.happiness + 25),
energy: Math.max(0, prev.energy - 15)
}));
setCoins(prev => prev + 5);
setMessage("That was fun! 🎾");
} else {
setMessage("I'm too tired to play... 😴");
}
};
const cleanPet = () => {
if (coins >= 15) {
setPet(prev => ({
...prev,
cleanliness: Math.min(100, prev.cleanliness + 40),
happiness: Math.min(100, prev.happiness + 15)
}));
setCoins(prev => prev - 15);
setMessage("I feel so fresh and clean! ✨");
}
};
const sleepPet = () => {
setPet(prev => ({
...prev,
isAsleep: !prev.isAsleep,
energy: prev.isAsleep ? prev.energy : Math.min(100, prev.energy + 50)
}));
setMessage(pet.isAsleep ? "Good morning! 🌅" : "Good night! 🌙");
};
const getStatColor = (value) => {
if (value > 70) return 'bg-green-500';
if (value > 40) return 'bg-yellow-500';
return 'bg-red-500';
};
const getPetEmoji = () => {
if (pet.isAsleep) return '😴';
if (pet.happiness > 80) return '😄';
if (pet.happiness > 60) return '😊';
if (pet.happiness > 40) return '😐';
if (pet.happiness > 20) return '😔';
return '😢';
};
return (
<div className="max-w-md mx-auto bg-gradient-to-b from-blue-100 to-green-100 min-h-screen p-6">
{/* Header */}
<div className="text-center mb-6">
<h1 className="text-3xl font-bold text-purple-800 mb-2">Virtual Pet</h1>
<p className="text-lg text-gray-700">Coins: 💰 {coins}</p>
</div>
{/* Pet Display */}
<div className="bg-white rounded-3xl p-6 mb-6 shadow-lg text-center">
<div className="text-8xl mb-4">{getPetEmoji()}</div>
<h2 className="text-2xl font-bold text-purple-700 mb-2">{pet.name}</h2>
<p className="text-gray-600 mb-4">Age: {Math.floor(pet.age)} days old</p>
<div className="bg-blue-50 rounded-lg p-3">
<p className="text-lg">{message}</p>
</div>
</div>
{/* Stats */}
<div className="bg-white rounded-2xl p-4 mb-6 shadow-lg">
<h3 className="text-lg font-semibold mb-4 text-center text-gray-800">Pet Stats</h3>
{[
{ name: 'Happiness', value: pet.happiness, icon: '😊' },
{ name: 'Hunger', value: pet.hunger, icon: '🍽️' },
{ name: 'Cleanliness', value: pet.cleanliness, icon: '🛁' },
{ name: 'Energy', value: pet.energy, icon: '⚡' }
].map((stat) => (
<div key={stat.name} className="mb-3">
<div className="flex justify-between items-center mb-1">
<span className="text-sm font-medium">{stat.icon} {stat.name}</span>
<span className="text-sm text-gray-600">{Math.round(stat.value)}/100</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-3">
<div
className={`h-3 rounded-full transition-all duration-300 ${getStatColor(stat.value)}`}
style={{ width: `${stat.value}%` }}
></div>
</div>
</div>
))}
</div>
{/* Action Buttons */}
<div className="grid grid-cols-2 gap-3">
<button
onClick={feedPet}
disabled={coins < 10 || pet.hunger >= 100}
className="bg-orange-500 hover:bg-orange-600 disabled:bg-gray-400 disabled:cursor-not-allowed text-white font-semibold py-3 px-4 rounded-xl flex items-center justify-center gap-2 transition-colors"
>
<Utensils size={20} />
Feed (10💰)
</button>
<button
onClick={playWithPet}
disabled={pet.energy <= 20}
className="bg-green-500 hover:bg-green-600 disabled:bg-gray-400 disabled:cursor-not-allowed text-white font-semibold py-3 px-4 rounded-xl flex items-center justify-center gap-2 transition-colors"
>
<Gamepad2 size={20} />
Play (+5💰)
</button>
<button
onClick={cleanPet}
disabled={coins < 15}
className="bg-blue-500 hover:bg-blue-600 disabled:bg-gray-400 disabled:cursor-not-allowed text-white font-semibold py-3 px-4 rounded-xl flex items-center justify-center gap-2 transition-colors"
>
<Bath size={20} />
Clean (15💰)
</button>
<button
onClick={sleepPet}
className="bg-purple-500 hover:bg-purple-600 text-white font-semibold py-3 px-4 rounded-xl flex items-center justify-center gap-2 transition-colors"
>
{pet.isAsleep ? <Sun size={20} /> : <Moon size={20} />}
{pet.isAsleep ? 'Wake Up' : 'Sleep'}
</button>
</div>
{/* Tips */}
<div className="mt-6 bg-yellow-50 border border-yellow-200 rounded-lg p-3">
<p className="text-sm text-yellow-800">
💡 <strong>Tip:</strong> Playing with your pet earns coins! Keep all stats high to keep your pet happy.
</p>
</div>
</div>
);
};
export default VirtualPet;

Tags: Simple virtual pet game (tsx)

Add Comment

Please, Sign In to add comment