// ============================================================ // HUNGRY HOLE 3D β€” UI kit: bezel, icons, chips, stars, primitives // ============================================================ // ---- icon set (rounded, friendly, 1.8 stroke) ---- const I = { back: (p) => , close: (p) => , gear: (p) => , pause: (p) => , play: (p) => , star: (p) => , lock: (p) => , check: (p) => , ad: (p) => , share: (p) => , retry: (p) => , map: (p) => , bag: (p) => , gift: (p) => , target:(p) => , sound: (p) => , phone: (p) => , flag: (p) => , bolt: (p) => , /* clean cartoon crown (replaces the πŸ‘‘ emoji on boss nodes) β€” gold body + 3 jewel dots */ crown: (p) => , /* clean cartoon skull β€” dark fill with cut-out eyes/nose & jaw notches (no emoji) */ skull: (p) => , /* friendly tap/drag hand β€” filled cartoon hand with a soft motion arc (replaces the πŸ‘† emoji) */ drag: (p) => , }; // goal-type glyph function GoalGlyph({ id, size = 20, color = 'currentColor' }) { const p = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round' }; switch (id) { case 'sweep': return ; case 'score': return ; case 'treasure': return ; case 'combo': return ; case 'bonus': return ; case 'avoid': return ; case 'rival': return ; case 'precision': return ; case 'mega': return ; case 'boss': return ; default: return ; } } // coin & gem function Coin({ size = 18 }) { return ; /* // bright hole.io HUD coin: vivid gold dome, glossy rim, big specular glint + $ face return $ ; */ } function Gem({ size = 18 }) { return ; /* // faceted grape gem: bright top facets, deep base, glossy highlight streak return ; */ } function CurChip({ kind, value, onClick }) { // premium warm-tinted pill: glossy top sheen, colored hairline, springy + badge. const gem = kind === 'gem'; const tint = gem ? 'rgba(124,92,252,0.12)' : 'rgba(255,182,39,0.16)'; const edge = gem ? 'rgba(124,92,252,0.38)' : 'rgba(232,165,22,0.48)'; return ; } // stars (1..3 of total, with empty) function Stars({ n, of = 3, size = 22, gap = 3, stamp = false }) { return
{Array.from({ length: of }).map((_, i) => ( ))}
; } // goal chip function GoalChip({ goal, dark = false }) { return
{goal.label}
; } // timer ring β€” hole.io HUD chip: small green clock dot + mm:ss in a navy pill function TimerRing({ frac, label, size = 30, color = 'var(--mint)' }) { const f = Math.max(0, Math.min(1, frac == null ? 1 : frac)); const r = size / 2 - 3, circ = 2 * Math.PI * r; // when time runs low the ring shifts to coral as a warning const ringCol = f < 0.18 ? 'var(--coral)' : color; return
{/* clock hands */}
{label}
; } function IconBtn({ children, onClick, light = false, style }) { // 50px thumb target; true 3D candy face β€” glossy white top, thick navy bottom edge, inner sheen, // and a real "sink onto the shadow" press (via .hh-iconbtn:active in CSS). High-standard, not flat. return ; } function AIIcon({ id, size = 32, style }) { return ; } function Bar({ v, color = 'var(--sky)', h = 8, track = 'var(--line)' }) { const pct = Math.max(0, Math.min(1, v || 0)) * 100; return
{/* glossy 3D fill: a translucent top-sheen β†’ bottom-shade gradient layered over the colour */}
0 ? 'inset 0 1px 0 rgba(255,255,255,0.6)' : 'none', transition: 'width .4s cubic-bezier(.22,1,.36,1)' }} />
; } // ---- phone bezel ---- function Bezel({ children }) { return
{children} {/* Android punch-hole camera */}
; } // Real device: the OS draws the actual status bar. Never render fake time/battery/camera chrome. function StatusBar() { return null; } // top bar for menu screens function TopBar({ title, sub, onBack, right }) { return
{onBack && }
{sub &&
{sub}
}

{title}

{right}
; } function Label({ children, style }) { return
{children}
; } // ============================================================ // NEW shared components (hole.io look) β€” see brief Β§3 contract // ============================================================ // Under-hole "Size n" light pill: white capsule, blue dot, bold Fredoka number. // Reusable as a generic value pill (label = "Size", "x3", "Lv 4"…). function GoalPill({ size, label = 'Size' }) { return
{label}{size != null && ' '}{size != null ? size : ''}
; } // hole.io goal bar: translucent track, green→yellow gradient fill, a sparkle/star // riding the leading edge, and a value/target fraction. Clamps safely. function ProgressBar({ value, target, h = 16 }) { const tgt = Math.max(1, Number(target) || 1); const val = Math.max(0, Math.min(tgt, Number(value) || 0)); const frac = val / tgt; const pct = frac * 100; const near = frac >= 0.001; // show sparkle once any progress exists return
{/* sparkle riding the leading edge */} {near &&
}
{/* value / target text β€” white, outlined to read in-world, target highlighted */}
{val.toLocaleString()}/ {tgt.toLocaleString()}
; } // Standard centered popup shell. Wraps all popups: frosted .panel card, // bold Baloo title, optional close (X). Centered overlay with scrim. function Dialog({ title, children, onClose }) { return
{ if (onClose && e.target === e.currentTarget) onClose(); }}>
{onClose && } {title &&

{title}

} {children}
; } // ============================================================ // ROUND-2 shared components (cream pop-card shell + candy toggle row + bottom nav) // Uses DESIGN-SYSTEM classes (.hh-popcard / .hh-toggle / .hh-bottomnav families) // AND inlines premium fallback styling so they look right regardless of CSS state. // ============================================================ // Cream pop-card dialog shell β€” warm cream panel, thick soft border, bold brown // title, round βœ• chip top-right, pop-in. accent tints the title underline + close ring. function PopCard({ title, onClose, children, accent = 'var(--sun)' }) { // Scrim scrolls; inner flex wrapper has min-height:100% so the card centers when short // and the whole card (incl. SAVE) scrolls into reach when taller than the viewport. return
{ if (onClose && !(e.target.closest && e.target.closest('.hh-popcard'))) onClose(); }} style={{ position: 'absolute', inset: 0, zIndex: 92, overflowY: 'auto', WebkitOverflowScrolling: 'touch', background: 'rgba(20,16,32,0.50)', backdropFilter: 'blur(4px)', WebkitBackdropFilter: 'blur(4px)', animation: 'hh-fadeup .22s ease both' }}>
{onClose && } {title &&

{title}

} {children}
; } // Green candy pill TOGGLE ROW β€” icon + label on the left, the .hh-toggle switch on the // right. on=true β†’ green track + knob slid right + check. Whole row is the hit target. function Toggle2({ on, onClick, label, icon }) { return ; } // Persistent 3-tab bottom nav: Locked-levels (lock β†’ 'map') Β· Home (house, raised center // β†’ 'home') Β· Holes (hole β†’ 'shop'). active ∈ 'map'|'home'|'shop'. Safe-area aware. function BottomNav({ active, go }) { const tabs = [ { key: 'map', label: 'Levels', icon: (sel) => { const GI = window.GameIcon; const c = sel ? '#fff' : 'var(--slate)'; return GI ? : ; } }, { key: 'home', label: 'Home', center: true, icon: (sel) => { const GI = window.GameIcon; return GI ? : ; } }, { key: 'shop', label: 'Holes', icon: (sel) => { const GI = window.GameIcon; return GI ? : ; } }, ]; return ; } Object.assign(window, { I, GoalGlyph, Coin, Gem, CurChip, AIIcon, Stars, GoalChip, TimerRing, IconBtn, Bar, Bezel, StatusBar, TopBar, Label, GoalPill, ProgressBar, Dialog, PopCard, Toggle2, BottomNav });