import React, { useState, useEffect } from 'react'; import ReactDOM from 'react-dom/client'; const STOCKS = [ { id: 'AAPL', name: 'Apple Inc.', price: 150, volatility: 0.05, icon: '🍎' }, { id: 'GOOGL', name: 'Alphabet Inc.', price: 2800, volatility: 0.04 }, { id: 'TSLA', name: 'Tesla Inc.', price: 900, volatility: 0.08 }, { id: 'MSFT', name: 'Microsoft', price: 280, volatility: 0.03 } ]; const SKILLS = [ { id: 1, name: 'Video Editing', cost: 1000, duration: 11, energyPerWeek: 30, emoji: '1️⃣' }, { id: 2, name: 'Public Speaking', cost: 2000, duration: 16, energyPerWeek: 40, emoji: '2️⃣' }, { id: 3, name: 'Risk Management', cost: 4000, duration: 28, energyPerWeek: 35, emoji: '3️⃣' }, { id: 4, name: 'Teaching Skills', cost: 1400, duration: 13, energyPerWeek: 60, emoji: '4️⃣' } ]; const Modal = ({ isOpen, onClose, children, title }) => { if (!isOpen) return null; return (

Education

{children}

); }; const StatBar = ({ label, value, color }) => (

{label} {value}%

); const NavButton = ({ icon, label, active, onClick }) => ( ); const App = () => { const [hasCamera, setHasCamera] = useState(false); const [showNotification, setShowNotification] = useState(false); const [isCarModalOpen, setIsCarModalOpen] = useState(false); const [ownedCars, setOwnedCars] = useState([]); const [rentedCars, setRentedCars] = useState([]); const [availableCars, setAvailableCars] = useState([ { id: 1, name: "Toyota Corolla", price: 25000, rent: 300, type: "sedan", appreciation: 0.01, emoji: "🚗" }, { id: 2, name: "Tesla Model 3", price: 45000, rent: 500, type: "electric", appreciation: 0.02, emoji: "🚙" }, { id: 3, name: "BMW M5", price: 85000, rent: 800, type: "luxury", appreciation: 0.03, emoji: "🏎️" }, { id: 4, name: "Rolls Royce", price: 350000, rent: 2500, type: "super-luxury", appreciation: 0.04, emoji: "🚘" } ]); const [lastCarRefresh, setLastCarRefresh] = useState(0); const [isHomeModalOpen, setIsHomeModalOpen] = useState(false); const [ownedHomes, setOwnedHomes] = useState([]); const [rentedHomes, setRentedHomes] = useState([]); const [availableHomes, setAvailableHomes] = useState([ { id: 1, name: "Studio Apartment", price: 80000, rent: 800, type: "apartment", appreciation: 0.02, emoji: "🏢" }, { id: 2, name: "Suburban House", price: 250000, rent: 2000, type: "house", appreciation: 0.03, emoji: "🏠" }, { id: 3, name: "Luxury Condo", price: 500000, rent: 4000, type: "apartment", appreciation: 0.04, emoji: "🏰" }, { id: 4, name: "Mansion", price: 2000000, rent: 15000, type: "mansion", appreciation: 0.05, emoji: "🏛️" } ]); const [lastHomeRefresh, setLastHomeRefresh] = useState(0); const [isDietModalOpen, setIsDietModalOpen] = useState(false); const [isPicMeModalOpen, setIsPicMeModalOpen] = useState(false); const [selectedVideo, setSelectedVideo] = useState(null); const [picMePosts, setPicMePosts] = useState([]); const [followers, setFollowers] = useState([]); const [sponsorships, setSponsorships] = useState([]); const [picMeStats, setPicMeStats] = useState({ totalViews: 0, totalLikes: 0, avgEngagement: 0, earnings: 0 }); const [isRelationshipModalOpen, setIsRelationshipModalOpen] = useState(false); const [partner, setPartner] = useState(null); const [isMarried, setIsMarried] = useState(false); const [hasBaby, setHasBaby] = useState(false); const [babyAge, setBabyAge] = useState(0); const [isTryingForBaby, setIsTryingForBaby] = useState(false); const [familyRelations, setFamilyRelations] = useState({ mother: { name: 'Sarah', relation: 'Mother', affection: 65, respect: 70, lastGift: null }, father: { name: 'James', relation: 'Father', affection: 60, respect: 75, lastGift: null } }); const [currentDiet, setCurrentDiet] = useState(null); const [isFiverrModalOpen, setIsFiverrModalOpen] = useState(false); const [hasActiveGig, setHasActiveGig] = useState(false); const [gigOffers, setGigOffers] = useState([]); const [weeksSinceGigCreated, setWeeksSinceGigCreated] = useState(0); const [isStockModalOpen, setIsStockModalOpen] = useState(false); const [stockPrices, setStockPrices] = useState( STOCKS.reduce((acc, stock) => ({ ...acc, [stock.id]: stock.price }), {}) ); const [ownedStocks, setOwnedStocks] = useState({}); const [isJobModalOpen, setIsJobModalOpen] = useState(false); const [currentJob, setCurrentJob] = useState(null); const [isWalmartModalOpen, setIsWalmartModalOpen] = useState(false); const [hasLaptop, setHasLaptop] = useState(false); const [moneyRequest, setMoneyRequest] = useState(null); const [age, setAge] = useState(18); const [weeks, setWeeks] = useState(0); const [lastWeekUpdate, setLastWeekUpdate] = useState(Date.now()); const [activeTab, setActiveTab] = useState('Home'); const [money, setMoney] = useState(2500); const [isEducationModalOpen, setIsEducationModalOpen] = useState(false); const [isSkillsModalOpen, setIsSkillsModalOpen] = useState(false); const [currentCourse, setCurrentCourse] = useState(null); const [completedCourses, setCompletedCourses] = useState([]); const [courseWeeksLeft, setCourseWeeksLeft] = useState(0); const [stats, setStats] = useState({ happiness: 85, health: 92, energy: 76, looks: 88 }); // Handle baby age progression and partner events const handleWeek = () => { // Handle baby age if exists if (hasBaby) { setBabyAge(prev => prev + 1); } // Handle trying for baby if (isTryingForBaby && isMarried && !hasBaby) { if (Math.random() < 0.1) { // 10% chance each week setHasBaby(true); setBabyAge(0); setIsTryingForBaby(false); setShowNotification(true); setTimeout(() => setShowNotification(false), 3000); } } // Random partner event (5% chance if not married) if (!partner && Math.random() < 0.05) { const newPartner = { name: ['Emma', 'Sophia', 'Olivia', 'Ava', 'Isabella'][Math.floor(Math.random() * 5)], age: age + Math.floor(Math.random() * 5) - 2, affection: 50, respect: 50, lastDate: null }; setPartner(newPartner); setShowNotification(true); setTimeout(() => setShowNotification(false), 3000); } setLastWeekUpdate(Date.now()); // Handle home and car refresh every 5 weeks if ((weeks + 1) % 5 === 0) { // Appreciate owned car values setOwnedCars(prev => prev.map(car => ({ ...car, price: Math.floor(car.price * (1 + car.appreciation)) }))); // Generate new available cars setAvailableCars(prev => prev.map(car => ({ ...car, price: Math.floor(car.price * (1 + (Math.random() * 0.1 - 0.05))), // -5% to +5% change rent: Math.floor(car.rent * (1 + (Math.random() * 0.1 - 0.05))) }))); setLastCarRefresh(weeks); // Appreciate owned home values setOwnedHomes(prev => prev.map(home => ({ ...home, price: Math.floor(home.price * (1 + home.appreciation)) }))); // Generate new available homes setAvailableHomes(prev => prev.map(home => ({ ...home, price: Math.floor(home.price * (1 + (Math.random() * 0.1 - 0.05))), // -5% to +5% change rent: Math.floor(home.rent * (1 + (Math.random() * 0.1 - 0.05))) }))); setLastHomeRefresh(weeks); } // Handle rent payments if (rentedHomes.length > 0) { const totalRent = rentedHomes.reduce((sum, home) => sum + home.rent, 0); setMoney(prev => prev - totalRent); } // First set energy to 100 setStats(prev => ({ ...prev, energy: 100 })); // Handle job earnings and energy cost if (currentJob) { // Handle different job types const jobDetails = { 'babysitting': { salary: 120, energyCost: 20 }, 'teacher': { salary: 300, energyCost: 30 } }; const currentJobDetails = jobDetails[currentJob]; setMoney(prev => prev + currentJobDetails.salary); setStats(prev => ({ ...prev, energy: Math.max(0, prev.energy - currentJobDetails.energyCost) })); } // Handle current course progress if (currentCourse) { setCourseWeeksLeft(prev => { if (prev <= 1) { setCompletedCourses(prev => [...prev, currentCourse.id]); setCurrentCourse(null); return 0; } setStats(prevStats => ({ ...prevStats, energy: Math.max(0, prevStats.energy - currentCourse.energyPerWeek) })); return prev - 1; }); } setWeeks(prev => { const newWeeks = prev + 1; if (newWeeks >= 52) { setAge(a => a + 1); return 0; } return newWeeks; }); // Adjust stats based on current conditions setStats(prev => { // Calculate base changes const energyChange = currentJob ? -20 : 0; const healthChange = prev.energy < 30 ? -5 : prev.energy > 70 ? 2 : -1; const happinessChange = prev.health < 30 ? -3 : prev.health > 70 ? 2 : -1; const looksChange = prev.health < 40 ? -2 : 1; // Apply changes with bounds checking return { happiness: Math.max(0, Math.min(100, prev.happiness + happinessChange)), health: Math.max(0, Math.min(100, prev.health + healthChange)), energy: Math.max(0, Math.min(100, prev.energy + energyChange)), looks: Math.max(0, Math.min(100, prev.looks + looksChange)) }; }); // Random parent money request event (10% chance each week) if (Math.random() < 0.1) { const amount = Math.floor(Math.random() * 901) + 100; // Random amount between 100 and 1000 const parent = Math.random() < 0.5 ? 'mother' : 'father'; setMoneyRequest({ parent, amount, parentName: familyRelations[parent].name }); } // Update stock prices, Fiverr gig weeks, and apply diet effects if (currentDiet === 'coffee_bread') { setStats(prev => ({ ...prev, health: Math.min(100, prev.health + 5) })); } if (hasActiveGig) { setWeeksSinceGigCreated(prev => prev + 1); } setStockPrices(prev => { const newPrices = {}; STOCKS.forEach(stock => { const change = (Math.random() - 0.5) * 2 * stock.volatility; newPrices[stock.id] = Math.max(1, Math.round(prev[stock.id] * (1 + change))); }); return newPrices; }); }; // Handle Fiverr gig offers useEffect(() => { if (hasActiveGig && weeksSinceGigCreated > 0) { // 30% chance to receive an offer each week if (Math.random() < 0.3) { const newOffer = { id: Date.now(), clientName: ['John', 'Sarah', 'Mike', 'Emma', 'Alex'][Math.floor(Math.random() * 5)], price: Math.floor(Math.random() * 300) + 200, // Random price between $200-$500 description: 'Need a video edited for my YouTube channel', deadline: Math.floor(Math.random() * 2) + 1 // 1-2 weeks deadline }; setGigOffers(prev => [...prev, newOffer]); } } }, [weeksSinceGigCreated, hasActiveGig]); return (

{/* Header */}

My Profile

🇺🇸 USA 💰 ${money.toLocaleString()} 👤 Age {age} {weeks > 0 ? `${weeks} week${weeks !== 1 ? 's' : ''}` : ''}

{/* Stats */}

{/* Life Summary */}

Life Summary

{/* Skip Week Button */} {/* Notification */}

{currentJob ? "Week skipped! Energy restored to 100%" : !hasCamera && isPicMeModalOpen ? "You need a camera to create PicMe content" : completedCourses.includes(3) ? "Week skipped! Energy restored to 100%" : "You need Risk Management skill to trade stocks"}

{/* Navigation Bar */}

{ setActiveTab('Job'); setIsJobModalOpen(true); }} /> { setActiveTab('Education'); setIsEducationModalOpen(true); }} /> {/* Skills Modal */} setIsSkillsModalOpen(false)}>

My Skills

{completedCourses.length === 0 && !currentCourse && (

No skills learned yet.

)} {currentCourse && (

Currently Learning:

{currentCourse.name}

{courseWeeksLeft} weeks remaining

)} {completedCourses.length > 0 && (

Completed Skills:

{SKILLS.filter(skill => completedCourses.includes(skill.id)).map(skill => (

{skill.emoji} {skill.name}

))}

)}

{/* Walmart Modal */} setIsWalmartModalOpen(false)}>

Walmart Store

= 4000 && !hasCamera ? 'pointer' : 'not-allowed', opacity: hasCamera ? 0.5 : money >= 4000 ? 1 : 0.5, background: hasCamera ? '#f5f5f5' : 'white' }} onClick={() => { if (money >= 4000 && !hasCamera) { setMoney(prev => prev - 4000); setHasCamera(true); setIsWalmartModalOpen(false); setShowNotification(true); setTimeout(() => setShowNotification(false), 3000); } }}>

📸 Professional Camera

Cost: $4,000

High-quality camera for professional content creation

{hasCamera && (

Already owned

)}

= 1200 && !hasLaptop ? 'pointer' : 'not-allowed', opacity: hasLaptop ? 0.5 : money >= 1200 ? 1 : 0.5, background: hasLaptop ? '#f5f5f5' : 'white' }} onClick={() => { if (money >= 1200 && !hasLaptop) { setMoney(prev => prev - 1200); setHasLaptop(true); setIsWalmartModalOpen(false); setShowNotification(true); setTimeout(() => setShowNotification(false), 3000); } }} >

💻 Laptop

Cost: $1,200

A powerful laptop for work and entertainment

{hasLaptop && (

Already owned

)}

{/* Job Modal */} setIsJobModalOpen(false)}>

Available Jobs

{currentJob && (

Current Job: { currentJob === 'teacher' ? '👩‍🏫 Teacher' : currentJob === 'babysitting' ? '👶 Babysitting' : 'Unknown' }

Salary: ${currentJob === 'teacher' ? '300' : '120'}/week

)} {/* Teacher Job */}

= 30 && completedCourses.includes(4) ? 'pointer' : 'not-allowed', opacity: currentJob ? 0.5 : (stats.energy >= 30 && completedCourses.includes(4)) ? 1 : 0.5, background: currentJob === 'teacher' ? '#f5f5f5' : 'white' }} onClick={() => { if (!currentJob && stats.energy >= 30 && completedCourses.includes(4)) { setCurrentJob('teacher'); setMoney(prev => prev + 300); setStats(prev => ({ ...prev, energy: Math.max(0, prev.energy - 30) })); setIsJobModalOpen(false); setShowNotification(true); setTimeout(() => setShowNotification(false), 3000); } }} >

👩‍🏫 Teacher

Salary: $300/week

Energy Cost: 30

Requirements: Teaching Skills

Teach and mentor students in a school setting

{currentJob === 'teacher' && (

Currently employed

)} {!completedCourses.includes(4) && (

Required: Teaching Skills

)}

{/* Babysitting Job */}

= 20 ? 'pointer' : 'not-allowed', opacity: currentJob ? 0.5 : stats.energy >= 20 ? 1 : 0.5, background: currentJob ? '#f5f5f5' : 'white' }} onClick={() => { if (!currentJob && stats.energy >= 20) { setCurrentJob('babysitting'); setMoney(prev => prev + 120); setStats(prev => ({ ...prev, energy: Math.max(0, prev.energy - 20) })); setIsJobModalOpen(false); setShowNotification(true); setTimeout(() => setShowNotification(false), 3000); } }} >

👶 Babysitting

Salary: $120/week

Energy Cost: 20

Take care of children and ensure their safety

{currentJob === 'babysitting' && (

Currently employed

)}

{/* Stocks Modal */} setIsStockModalOpen(false)}>

Stock Market

{!completedCourses.includes(3) && (

⚠️ Risk Management skill required to trade stocks

)}

Your Portfolio

{Object.entries(ownedStocks).length === 0 ? (

No stocks owned.

) : ( Object.entries(ownedStocks).map(([stockId, quantity]) => (

{STOCKS.find(s => s.id === stockId).name}

Owned: {quantity} | Current Price: ${stockPrices[stockId]}

)) )}

Available Stocks

{STOCKS.map(stock => (

= stockPrices[stock.id] ? 'pointer' : 'not-allowed', opacity: money >= stockPrices[stock.id] ? 1 : 0.5 }} onClick={() => { if (money >= stockPrices[stock.id]) { setMoney(prev => prev - stockPrices[stock.id]); setOwnedStocks(prev => ({ ...prev, [stock.id]: (prev[stock.id] || 0) + 1 })); setShowNotification(true); setTimeout(() => setShowNotification(false), 3000); } }} >

{stock.name} ({stock.id})

Current Price: ${stockPrices[stock.id]}

Price Change: stock.price ? '#4CAF50' : '#f44336' }}> {((stockPrices[stock.id] - stock.price) / stock.price * 100).toFixed(2)}%

))}

{/* Fiverr Modal */} setIsFiverrModalOpen(false)}>

Fiverr Dashboard

{!hasActiveGig ? (

{ if (completedCourses.includes(1)) { setHasActiveGig(true); setWeeksSinceGigCreated(0); setShowNotification(true); setTimeout(() => setShowNotification(false), 3000); } }} >

📹 Create Video Editing Gig

Base Price: $200-500 per video

Requirements: Video Editing Skills

{!completedCourses.includes(1) && (

You need Video Editing Skills to create this gig

)}

) : (

✅ Your Video Editing Gig is Active

Weeks since creation: {weeksSinceGigCreated}

Active Offers

{gigOffers.length === 0 ? (

No offers yet. Keep checking back!

) : ( gigOffers.map(offer => (

{offer.clientName}'s Project

{offer.description}

Budget: ${offer.price}

Deadline: {offer.deadline} week(s)

)) )}

)}

{/* Diet Modal */} setIsDietModalOpen(false)}>

Diet Options

= 25 && currentDiet !== 'coffee_bread' ? 'pointer' : 'not-allowed', opacity: currentDiet === 'coffee_bread' ? 0.5 : money >= 25 ? 1 : 0.5, background: currentDiet === 'coffee_bread' ? '#f5f5f5' : 'white' }} onClick={() => { if (money >= 25 && currentDiet !== 'coffee_bread') { setMoney(prev => prev - 25); setCurrentDiet('coffee_bread'); setShowNotification(true); setTimeout(() => setShowNotification(false), 3000); setIsDietModalOpen(false); } }} >

☕️🍞 Coffee & Bread Diet

Cost: $25

Health Gain: +5 per week

A simple diet of coffee and bread

{currentDiet === 'coffee_bread' && (

Currently Active

)}

{/* Education Modal */} setIsEducationModalOpen(false)}> {currentCourse ? (

Current Course: {currentCourse.name}

Weeks remaining: {courseWeeksLeft}

Energy cost per week: {currentCourse.energyPerWeek}

) : (

{SKILLS.map(skill => (

= skill.cost && !completedCourses.includes(skill.id) ? 'pointer' : 'not-allowed', opacity: completedCourses.includes(skill.id) ? 0.5 : money >= skill.cost ? 1 : 0.5, background: completedCourses.includes(skill.id) ? '#f5f5f5' : 'white' }} onClick={() => { if (money >= skill.cost && !currentCourse && !completedCourses.includes(skill.id)) { setMoney(prev => prev - skill.cost); setCurrentCourse(skill); setCourseWeeksLeft(skill.duration); setIsEducationModalOpen(false); } }} >

{skill.emoji} {skill.name}

Cost: ${skill.cost.toLocaleString()}

Duration: {skill.duration} weeks

Energy/week: {skill.energyPerWeek}

))}

)} { setActiveTab('Relationships'); setIsRelationshipModalOpen(true); }} /> setActiveTab('Activities')} />

{/* Relationships Modal */} setIsRelationshipModalOpen(false)}>

Family Relationships

{/* Find Love Section */} {!partner && (

❤️

Find Your Love

Looking for that special someone? Try your luck in finding love!

)} {/* Partner/Wife Section */} {partner && (

{isMarried ? '👰' : '❤️'} {partner.name}

{isMarried ? 'Wife' : 'Girlfriend'} • Age {partner.age}

{partner.job} • Loves {partner.interest}

💕 {partner.compatibility}% Compatible

Love {partner.affection}%

{!isMarried && partner.affection >= 80 && ( )} {isMarried && !hasBaby && ( )}

{hasBaby && (

👶 Baby

Age: {Math.floor(babyAge / 52)} years {babyAge % 52} weeks

)}

)} {/* Parents Section */} {Object.entries(familyRelations).map(([key, person]) => (

{person.relation === 'Mother' ? '👩' : '👨'} {person.name}

Your {person.relation}

Affection {person.affection}%

Respect {person.respect}%

))}

{/* Money Request Modal */} { setMoneyRequest(null); setFamilyRelations(prev => ({ ...prev, [moneyRequest?.parent]: { ...prev[moneyRequest?.parent], respect: Math.max(0, prev[moneyRequest?.parent].respect - 10), affection: Math.max(0, prev[moneyRequest?.parent].affection - 5) } })); }} >

Money Request

{moneyRequest && (

Your {moneyRequest.parent} ({moneyRequest.parentName}) needs ${moneyRequest.amount} for an emergency expense.

)}

{ setIsPicMeModalOpen(false); setSelectedVideo(null); }} title="PicMe Creator Studio" >

{followers.length} Followers

${picMeStats.earnings.toFixed(2)} earned

📹

Create and post new content

{picMeStats.totalViews}

Total Views

{picMeStats.totalLikes}

Total Likes

{picMeStats.avgEngagement}%

Engagement

{sponsorships.length > 0 && (

🎯 Sponsorship Opportunities

{sponsorships.map((sponsorship, index) => (

{sponsorship.brand}

${sponsorship.amount}

{sponsorship.description}

))}

)}

{/* Home Modal */} setIsHomeModalOpen(false)}>

Real Estate Market

{/* Owned Properties */}

Your Properties

{ownedHomes.length === 0 ? (

You don't own any properties yet.

) : ( ownedHomes.map(home => (

{home.emoji} {home.name}

${home.price.toLocaleString()}

)) )}

{/* Rented Properties */} {rentedHomes.length > 0 && (

Rented Properties

{rentedHomes.map(home => (

{home.emoji} {home.name}

+${home.rent.toLocaleString()}/week

))}

)} {/* Available Properties */}

Available Properties

Market refreshes in {5 - (weeks - lastHomeRefresh)} weeks

{availableHomes.map(home => (

= home.price ? 'pointer' : 'not-allowed', opacity: money >= home.price ? 1 : 0.5 }} >

{home.emoji} {home.name}

${home.price.toLocaleString()}

Rent: ${home.rent.toLocaleString()}/week

Appreciation: {(home.appreciation * 100).toFixed(1)}% /week

))}

{/* Car Modal */} setIsCarModalOpen(false)}>

Car Dealership

{/* Owned Cars */}

Your Cars

{ownedCars.length === 0 ? (

You don't own any cars yet.

) : ( ownedCars.map(car => (

{car.emoji} {car.name}

${car.price.toLocaleString()}

)) )}

{/* Rented Cars */} {rentedCars.length > 0 && (

Rented Cars

{rentedCars.map(car => (

{car.emoji} {car.name}

+${car.rent.toLocaleString()}/week

))}

)} {/* Available Cars */}

Available Cars

Market refreshes in {5 - (weeks - lastCarRefresh)} weeks

{availableCars.map(car => (

= car.price ? 'pointer' : 'not-allowed', opacity: money >= car.price ? 1 : 0.5 }} >

{car.emoji} {car.name}

${car.price.toLocaleString()}

Rent: ${car.rent.toLocaleString()}/week

Appreciation: {(car.appreciation * 100).toFixed(1)}% /week

))}

); }; const container = document.getElementById('renderDiv'); const root = ReactDOM.createRoot(container); root.render();