add lenny feature

This commit is contained in:
lubiana 2025-07-13 11:47:22 +02:00
parent fe712f8861
commit b9ec9b946c
Signed by: lubiana
SSH key fingerprint: SHA256:vW1EA0fRR3Fw+dD/sM0K+x3Il2gSry6YRYHqOeQwrfk
2 changed files with 36 additions and 2 deletions

View file

@ -15,7 +15,7 @@ export type Tier = {
};
const TIERS: Tier[] = [
{ name: 'Start', unlockPrice: 0, buyPrice: 1, gubblePointChance: 0.0 },
{ name: 'Start', unlockPrice: 0, buyPrice: 1, gubblePointChance: 0.9 },
{ name: 'Bronze', unlockPrice: 3, buyPrice: 2, gubblePointChance: 0.0 },
{ name: 'Silver', unlockPrice: 7, buyPrice: 5, gubblePointChance: 0.0 },
{ name: 'Gold', unlockPrice: 15, buyPrice: 10, gubblePointChance: 0.1 },
@ -58,6 +58,8 @@ function App() {
const [isStoreOpen, setIsStoreOpen] = useState(false);
const [upgrades, setUpgrades] = useState<Upgrades>({ evenDouble: false, oddDouble: false, allTripple: false, gubbleDouble: false, addFourthNumber: false, autoscratcher: false, swipeScratcher: false});
const [upgradeBought, setUpgradeBought] = useState(false);
// Add a new state for the popup
const [showDonation, setShowDonation] = useState(false);
// Ref for scroll container
const tierRowRef = useRef<HTMLDivElement>(null);
@ -80,6 +82,19 @@ function App() {
}
}, [highestUnlockedIndex]);
// Effect to show popup when money drops to zero
useEffect(() => {
if (money === 0) {
setShowDonation(true);
}
}, [money]);
// Handler to accept the donation
const handleAcceptDonation = () => {
setMoney((m) => m + 30);
setShowDonation(false);
};
// --- Tier Unlock Logic ---
const handleUnlockTier = useCallback((tier: Tier) => {
setMoney(m => {
@ -155,6 +170,25 @@ function App() {
return (
<div className="min-h-screen bg-gray-900 flex flex-col items-center ">
<GameHeader money={money} gubblePoints={gubblePoints} formatter={formatter} setIsStoreOpen={setIsStoreOpen} />
{showDonation && (
<div className="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50">
<div className="bg-yellow-100 rounded-lg shadow-lg p-8 w-full max-w-md relative flex flex-col items-center">
<h2 className="text-2xl font-bold mb-4 text-yellow-800">💸 The Universe Has Chosen You!</h2>
<p className="mb-4 text-yellow-900 text-lg font-semibold text-center">
We can see it in your aura: a legendary streak is just around the corner!<br/>
The cosmic Gubble spirits have whispered to us that your luck is about to turn.<br/>
As a sign of our faith in your unstoppable fortune, we are DONATING you <span className="font-bold">$30</span>!<br/>
Go forth, future jackpot winner, and let the reels of destiny spin in your favor!
</p>
<button
className="mt-2 px-6 py-2 bg-yellow-400 hover:bg-yellow-500 text-yellow-900 font-bold rounded shadow"
onClick={handleAcceptDonation}
>
Accept the Divine Donation
</button>
</div>
</div>
)}
<GubbleStore
isOpen={isStoreOpen}
onClose={handleStoreClose}

View file

@ -32,7 +32,7 @@ const GubbleStore: React.FC<GubbleStoreProps> = ({ isOpen, onClose, gubblePoints
if (!isOpen) return null;
return (
<div className="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50">
<div className="bg-gray-900 rounded-lg shadow-lg p-8 w-full max-w-md relative">
<div className="bg-gray-900 rounded-lg shadow-lg p-8 w-full max-w-md relative max-h-[80vh] overflow-y-auto">
<button className="absolute top-2 right-2 text-gray-400 hover:text-gray-200 text-2xl" onClick={onClose}>&times;</button>
<h2 className="text-2xl font-bold mb-4 text-blue-300">Gubble Point Store</h2>
<div className="mb-4 text-gray-100">Gubble Points: <span className="font-mono font-bold">{gubblePoints}</span></div>