// ============================================================ // HUNGRY HOLE 3D — power-up icons + simulated rewarded-Ad modal // Ad-only economy: every unlock/refill is "watch a rewarded ad". // Exposes: PowerIcon, AdModal, AdButton // ============================================================ const { useState: useStatePU, useEffect: useEffectPU, useRef: useRefPU } = React; // Every power-up has its OWN glyph so the tray reads at a glance (no more 5 power-ups // sharing one bolt). One cohesive rounded style: 2px stroke, round caps; filled accents // use fill={color}. Legacy keys (bolt/bomb/clock/grow/magnet/shield/slow) stay as aliases // for the decorative hardcoded usages around the menus. function PowerIcon({ id, size = 24, color = 'currentColor' }) { const aiPower = { magnet: 'magnet-3d', magnetx: 'magnet-3d', time: 'time-3d', clock: 'time-3d', slow: 'time-3d', blast: 'blast-3d', bomb: 'blast-3d', grow: 'grow-3d', shield: 'shield-3d', aegis: 'shield-3d', frenzy: 'frenzy-3d', tornado: 'grow-3d', }[id]; if (aiPower) { return ; } const p = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round' }; switch (id) { /* ---- core ---- */ case 'magnet': return ; case 'magnetx': return ; case 'time': return ; case 'clock': return ; case 'slow': return ; case 'frenzy': return ; case 'blast': case 'bomb': return ; case 'grow': return ; case 'shield': return ; case 'aegis': return ; case 'bolt': return ; case 'ad': return ; case 'play': return ; /* ---- big/rivals ---- */ case 'tornado': return ; case 'titan': return ; case 'colossus': return ; case 'vortex': return ; case 'blackhole': return ; case 'phase': return ; case 'dash': return ; case 'goldrush': return $; case 'coinrush': return $; case 'scout': return ; case 'gift': return ; case 'target': return ; case 'crown': return ; case 'levels': return ; case 'hole': return ; case 'home': return ; /* ---- city / weather ---- */ case 'quake': return ; case 'freeze': return ; case 'storm': return ; default: return ; } } function GameIcon({ id = 'bolt', size = 48, tone = 'sky', color, label }) { const aiIcon = { bolt: 'power', power: 'power', gift: 'daily', daily: 'daily', target: 'missions', missions: 'missions', crown: 'rank', rank: 'rank', levels: 'levels', home: 'home', hole: 'holes', holes: 'holes', play: 'play', }[id]; if (aiIcon) { return ; } const tones = { sky: ['#72D7FF', '#2087EF', '#1262B7'], grape: ['#B59BFF', '#7654F2', '#5532C8'], sun: ['#FFE58A', '#FFC23D', '#B97108'], mint: ['#69EDCC', '#20C79E', '#0B795F'], coral: ['#FF9B9B', '#F05258', '#B92C38'], dark: ['#506684', '#243653', '#111B2F'], }; const pal = color ? [color, color, color] : (tones[tone] || tones.sky); const rim = pal[2]; return ; } // simulated rewarded ad: countdown → reward claim. onClaim(true) when watched. function AdModal({ title = 'Rewarded Ad', rewardLabel = 'Reward', onClaim, onClose, accent = '#FFB627' }) { const [t, setT] = useStatePU(5); const [done, setDone] = useStatePU(false); const firedRef = useRefPU(false); const nativeAd = !!(window.HHAds && window.HHAds.available); // On device: show the REAL rewarded ad. onClaim fires only if the reward is earned. useEffectPU(() => { if (!nativeAd || firedRef.current) return; firedRef.current = true; window.HHAds.showRewarded( () => { onClaim && onClaim(); }, () => { onClose && onClose(); } ); }, []); useEffectPU(() => { if (nativeAd || done) return; const iv = setInterval(() => setT(v => { if (v <= 1) { clearInterval(iv); setDone(true); return 0; } return v - 1; }), 1000); return () => clearInterval(iv); }, [done]); const C = window.HH.C; const pct = (5 - t) / 5; // 0 → 1 across the countdown // Native real-ad path: the ad auto-shows the moment it's loaded (ads.js waits // for us) — meanwhile a friendly frosted veil holds the screen (hole.io candy look). if (nativeAd) { return (
Preparing your reward…
); } return (
{/* candy ad creative card */}
{/* header — ADVERTISEMENT eyebrow + skip/countdown */}
{/* circular countdown / close */}
{/* mock creative */}
{/* soft drifting glow blobs for depth */}
{/* twinkling star sprinkles */} {[[18,30],[78,22],[30,78],[86,70],[55,14]].map((s, i) => )}
More Hungry Hole?
{['cube','donut','rocket','crab'].map((tp,i)=>
)}
{/* reward badge — floating chip showing what you'll earn */}
Reward: {rewardLabel}
{/* progress bar (hole.io green→yellow) */}
{/* footer CTA */}
{!done ?
Reward in {t}s…
: }
Optional ad reward.
); } // a button that says "Watch ad" and opens an AdModal; calls onReward when claimed function AdButton({ label = 'Watch ad', rewardLabel = 'Reward', onReward, className = 'btn sun', style, accent }) { const [open, setOpen] = useStatePU(false); return <> {open && setOpen(false)} onClaim={() => { setOpen(false); onReward && onReward(); }} />} ; } Object.assign(window, { PowerIcon, GameIcon, AdModal, AdButton });