// ============================================================
// HUNGRY HOLE 3D — core screens: Splash, Onboarding, WorldMap, LevelIntro, Home
// Polished casual-.io shell: bright sky, candy 3D buttons, isometric city island,
// winding level-node trail, persistent BottomNav + top resource bar. ORIGINAL art.
// ============================================================
const { useState: useStateCo, useEffect: useEffectCo, useRef: useRefCo } = React;
// ----- 0 · Loading screen -----
// First thing the player sees: the splash art + an animated progress bar, then auto-advance
// straight to Home (the old "Tap to Play" splash is bypassed). Drops the user's hero art in if
// present at www/assets/loading-splash.webp; otherwise a built-in animated sky/hole/title scene.
function Loading({ go }) {
const [p, setP] = useStateCo(0);
const [imgOk, setImgOk] = useStateCo(false);
useEffectCo(() => {
let raf, t0 = performance.now(); const dur = 2400;
const tick = (now) => { const f = Math.min(1, (now - t0) / dur); setP(f); if (f < 1) raf = requestAnimationFrame(tick); else setTimeout(() => go('home'), 420); };
raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf);
}, []);
const pct = Math.round(p * 100);
return (
{/* the user's hero art, if dropped at assets/loading-splash.webp — covers the fallback scene */}
setImgOk(true)} onError={(e) => { e.target.style.display = 'none'; }}
style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
{!imgOk && (
<>
{[[8, 13, 64], [70, 8, 86], [24, 28, 48], [82, 32, 56], [46, 18, 42]].map((c, i) => (
))}
)}
{/* avatar chip — chosen AvatarDisc (hole or emoji) + tiny level badge */}
{/* coin chip */}
{/* gem chip */}
{/* spacer pushes the gear to the far top-right corner (away from the gem) */}
{/* gear → settings */}
ready && go('home')} style={{ position: 'absolute', inset: 0, overflow: 'hidden', cursor: ready ? 'pointer' : 'default',
background: 'linear-gradient(180deg, #2FA4FF 0%, #6FCBFF 42%, #BFE6FF 74%, #E2F2FF 100%)' }}>
{/* warm sun bloom top-right + soft rotating rays */}
{/* faint city skyline silhouette along the horizon for depth */}
{/* drifting soft clouds (parallax layers) */}
{[0, 1, 2, 3, 4].map(i => (
))}
{/* hero hole devouring orbiting props */}
{/* soft ground shadow disc under the hero */}
{orbit.map((t, i) => { const dur = 8 + (i % 4) * 2.6; const orb = 104 + (i % 3) * 22; return (
); })}
{/* floating player name tag — .io signature */}
{/* wordmark — original stacked candy treatment */}
Hungry Hole Studio
HUNGRY
HOLE 3D
City run
{/* loader / start */}
{!ready
? <>
Loading{Math.round(p * 100)}%
:
}
{/* soft clouds */}
{[0, 1, 2].map(n =>
)}
{/* demo stage — a faux board with the hole and props */}
{/* ground plane */}
{card.k === 'drag' &&
}
{card.k === 'eat' && <>
{[0, 1, 2].map(n =>
)}
}
{card.k === 'grow' &&
}
{/* drag knob hint */}
{card.k === 'drag' &&
}
{/* mini goal bar to teach the win condition */}
{card.k === 'grow' &&
}
{/* growing +N float on eat */}
{card.k === 'eat' &&
+1
}
{/* copy */}
Step {i + 1} of 3
{card.title}
{card.line}
{[0, 1, 2].map(n => )}
);
}
// ---------- 3 · World Map (the flagship level select) ----------
// Winding path of level nodes (locked / unlocked / star-rated), current level
// glowing, themed parallax props beside the trail, a .hh-topbar + persistent BottomNav.
function WorldMap({ go, openLevel, world, setWorld, wallet, planet = 0 }) {
const HH = window.HH;
const W = (HH.worldView ? HH.worldView(world, planet) : HH.WORLDS[world]); // planet re-tint
const PL = HH.planetForIndex ? HH.planetForIndex(planet) : null;
const levels = HH.LEVELS[world];
const stars = HH.STARS;
const scrollRef = useRefCo(null);
const dark = window.__hhTheme === 'dark';
const night = !!W.night || dark;
const nextN = nextPlayable();
const totalStars = Object.values(stars).reduce((a, b) => a + b, 0);
const worldStars = levels.reduce((a, lv) => a + (stars[lv[0]] || 0), 0);
const worldDone = levels.filter(lv => (stars[lv[0]] || 0) > 0).length;
// winding node positions (S-curve down the trail)
const nodeX = (i) => 50 + Math.sin(i * 1.1) * 28;
const ROW = 100;
// scroll the current node into view on open
useEffectCo(() => {
const el = scrollRef.current; if (!el) return;
const idx = levels.findIndex(lv => lv[0] === nextN);
if (idx >= 0) { const y = (levels.length - 1 - idx) * ROW; el.scrollTop = Math.max(0, y - 240); }
}, [world]);
return (
{/* ambient bloom (sun by day, neon by night) for atmosphere */}
{/* parallax far hills/skyline silhouette behind the trail — adds depth (two layers) */}
{/* drifting clouds far behind the trail */}
{[0, 1, 2, 3].map(i => (
))}
{/* node path (scrolls) */}
{/* (removed floating prop sprites beside the trail — the 3D map art already carries the scene) */}
{/* connecting path — soft white casing + dashed accent core + tiny milestone flags */}
{levels.map((lv, i) => {
const n = lv[0]; const st = stars[n] || 0;
const unlocked = n <= nextN; const isNext = n === nextN; const done = st > 0;
const goal = HH.GOALS[lv[2]];
const y = (levels.length - 1 - i) * ROW + 30; const x = nodeX(i);
const size = isNext ? 64 : 56;
const isBoss = n % 10 === 0; // every 10th level = mini boss / world finale
return (
{isNext &&
}
{/* calm static glow behind the current node (no spinning conic — it flickered on Android) */}
{isNext &&
}
);
})}
{/* ===== sticky header (above the scroll) ===== */}
{/* top scrim for legibility */}
{/* top resource bar */}
{/* world switcher */}
{PL && PL.isNew ? PL.icon + ' ' + PL.name + ' · ' : ''}World {W.id}
{W.name}
{W.sub}
{/* world completion mini-bar */}
{worldStars}
/ {levels.length * 3}
·
★ {totalStars} total
);
}
// ---------- 4 · Level Intro ----------
// Polished pre-level card over a live board preview: level name, goal glyph +
// label + target, reward, loadout, 3-star bar, big PLAY button.
function LevelIntro({ go, startLevel, world, level, planet = 0 }) {
const HH = window.HH;
const W = (HH.worldView ? HH.worldView(world, planet) : HH.WORLDS[world]);
const PL = HH.planetForIndex ? HH.planetForIndex(planet) : null;
const gLevel = HH.globalLevel ? HH.globalLevel(planet, level) : level;
const lv = HH.LEVELS.flat().find(l => l[0] === level) || HH.LEVELS[0][0];
const goal = HH.GOALS[lv[2]];
const st = HH.STARS[level] || 0;
const diff = HH.DIFFICULTY(level, planet);
const mm = String(Math.floor(diff.time / 60)).padStart(1, '0');
const ss = String(diff.time % 60).padStart(2, '0');
const reward = 60 + level * 20;
const CH = (HH.challengeFor ? HH.challengeFor(level) : { name: 'Classic', color: 'var(--sky)', desc: '' });
return (
{/* board preview */}
{}} />
go('map')} style={{ position: 'absolute', top: 48, left: 18, zIndex: 20 }}>
{/* goal-tinted top glow */}
{/* header: world + goal verb */}
{PL && PL.isNew ? PL.icon + ' ' + PL.name + ' · ' : ''}World {W.id} · {goal.verb}
{lv[1]}
LEVEL {gLevel}
{/* CHALLENGE badge — glossy chip with a colored name-tag + description */}
{/* goal callout — glyph + premium TARGET/TIME objective bar */}
{/* soft radial halo behind the glyph for depth */}
{goal.label}
{/* premium objective bar — two solid stat chips (not flat pills) */}
{[{ ic:
, lab: 'TARGET', val: diff.target.toLocaleString(), f: 1.35 },
{ ic:
, lab: 'TIME', val: mm + ':' + ss, f: 1 }].map((c, i) => (
))}
{/* reward + loadout row */}
{/* 3-star hint */}
★★★ = hit the score target with time to spare
{/* drifting helicopter doing a wide circuit, blades spinning */}
{/* the island bobs as one piece */}
{/* candy buildings (HTML, positioned on the iso top) */}
{buildings.map((b, i) => (
{/* roof */}
{/* body with window grid */}
{Array.from({ length: Math.min(8, Math.floor(b.h / 14) * 2) }).map((_, k) => (
))}
))}
{/* two chunky trees on the island */}
{/* a little delivery car rolling along the road */}
{/* the hungry hole sitting on the road, with a name tag */}
{b.map((x, i) =>
{Array.from({ length: 16 }).map((_, k) => )}
)}
{Array.from({ length: 8 }).map((_, i) => )}
;
}
function ArcadeLogo() {
return ;
}
function ArcadeHoleScene() {
return ;
}
// ---------- 5 · Home / main hub ----------
// Rich hub: top resource bar, an isometric city-island hero (animated), the current
// world's level chips with the active one highlighted, a big green PLAY → current
// level, quick-access tiles, and the persistent BottomNav.
function Home({ go, openLevel, world, setWorld, wallet, nextLevel }) {
const HH = window.HH;
const nextN = nextPlayable();
const curWorld = Math.floor((nextN - 1) / 10);
const W = HH.WORLDS[curWorld] || HH.WORLDS[0];
const levels = HH.LEVELS[curWorld] || HH.LEVELS[0];
const stars = HH.STARS;
const totalStars = Object.values(stars).reduce((a, b) => a + b, 0);
const nlv = HH.LEVELS.flat().find(l => l[0] === nextN);
const dark = window.__hhTheme === 'dark';
const night = !!W.night || dark;
const accent = W.accent || 'var(--sky)';
return (
{/* top resource bar (avatar + coin + gem + gear) */}
{/* ===== bottom command deck ===== */}
{nlv &&
}
{/* compact action tiles */}
go('powerups')} />
go('daily')} badge />
go('missions')} />
go('leaderboard')} />
{/* persistent bottom nav */}
);
}
// Cartoon candy quick-access tile: white extruded card + a glossy colored icon disc.
// `tone` selects the disc palette (grape / sun / mint / coral).
function HomeNav({ icon, iconId, label, onClick, badge, tone }) {
const tones = {
grape: ['#9C82FF', '#6A48E8'],
sky: ['#35A8FF', '#116FD8'],
sun: ['#FFD061', '#EBA014'],
mint: ['#46E6BF', '#13A883'],
coral: ['#FF8B8B', '#ED4F52'],
};
const [c1, c2] = tones[tone] || tones.grape;
return ;
}
// ---------- Dynamic new-user Walkthrough (animated, illustrated with AI art) ----------
// A 4-step overlay that teaches the loop with live CSS-animated AI images:
// drag the hole · swallow props · grow huge · beat the score goal.
function Walkthrough({ onDone }) {
const [i, setI] = useStateCo(0);
const A = 'assets/ui-ai/';
const steps = [
{ key: 'drag', title: 'Drag to move', desc: 'Slide your finger anywhere to steer the hole around the city.', accent: '#35A8FF' },
{ key: 'eat', title: 'Swallow everything', desc: 'Roll over cars, benches and people — gulp them straight down.', accent: '#22C9A0' },
{ key: 'grow', title: 'Grow bigger', desc: 'The more you eat, the bigger you grow — soon whole buildings fit!', accent: '#9B6BFF' },
{ key: 'goal', title: 'Reach the goal', desc: 'Hit the score target before the timer runs out to clear the level.', accent: '#F4A906' },
];
const s = steps[i];
const last = i === steps.length - 1;
const done = () => { try { localStorage.setItem('hh_tut_done', '1'); } catch (e) {} onDone && onDone(); };
return (
How to play · {i + 1}/4
{/* animated stage — sky over road, the hole, and per-step AI props in motion */}
{/* the hole */}
{s.key === 'drag' && <>
}
{s.key === 'eat' && [0, 1].map(n => (
))}
{s.key === 'grow' &&
}
{s.key === 'goal' && <>
{[...Array(7)].map((_, n) =>
)}
}
{s.title}
{s.desc}
{steps.map((_, n) => )}
);
}
Object.assign(window, { Loading, Splash, Onboarding, WorldMap, LevelIntro, Home, Walkthrough });