add lenny feature
This commit is contained in:
parent
fe712f8861
commit
b9ec9b946c
2 changed files with 36 additions and 2 deletions
36
src/App.tsx
36
src/App.tsx
|
@ -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}
|
||||
|
|
|
@ -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}>×</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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue