// homehub-app.jsx — Mounts the Home Hub design canvas + Tweaks panel.
const { useState: hhUseState, useEffect: hhUseEffect, useMemo: hhUseMemo, useRef: hhUseRef } = React;
// Mobile phone frame for artboards
function HHPhone({ w = 420, h = 920, children }) {
return (
);
}
const HH_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"locale": "fa",
"avatarSide": "start",
"fiveTabs": false,
"scrollAware": true,
"dateMode": "hybrid",
"notifSimulate": true,
"showEmpty": false
}/*EDITMODE-END*/;
function HHApp() {
const [t, setTweak] = useTweaks(HH_TWEAK_DEFAULTS);
const [modalItem, setModalItem] = hhUseState(null);
const [predicted, setPredicted] = hhUseState(null); // local "prediction committed" state
hhUseEffect(() => {
document.documentElement.lang = t.locale;
document.documentElement.dir = t.locale === 'en' ? 'ltr' : 'rtl';
}, [t.locale]);
// Featured card tap → open the unified MyCardsDetailModal. In production
// this would navigate to /my-cards?focus=ID instead.
const onCardPick = (featuredItem) => {
if (featuredItem._inventoryItem) {
setModalItem(featuredItem._inventoryItem);
return;
}
if (typeof window.toInventoryItem === 'function' &&
typeof window.playerCardPropsToCard === 'function') {
const _r = (v) => v == null ? ''
: typeof v === 'string' ? v
: (v[t.locale] || v.fa || v.en || '');
const card = window.playerCardPropsToCard({
tier: featuredItem.tier,
position: featuredItem.position,
overall: featuredItem.overall,
statKey: featuredItem.statKey,
statValue: featuredItem.statValue,
playerName: _r(featuredItem.playerName),
teamName: _r(featuredItem.teamName),
playerImage: featuredItem.image,
});
const item = window.toInventoryItem({
type: 'player', card,
acquiredAt: new Date().toISOString(),
status: 'available', isPinned: false,
});
setModalItem(item);
}
};
// Prediction CTA — in production this would post to /predictions and
// navigate to a confirmation sheet. Here we just remember it for the demo.
const onPredict = ({ matchId, outcome }) => {
setPredicted({ matchId, outcome });
};
const onAllMatches = () => { /* would route to Prediction tab */ };
const onSubmit = () => { /* would route to Lineup builder */ };
const onShop = () => { /* would route to Shop */ };
return (
{/* ── Mobile Bento — the only mobile direction (Classic dropped) ── */}
{/* ── Desktop Bento ── */}
{/* ── Primitives reference for the next sprints ── */}
{/* Live modal — opens when a featured card is tapped */}
{window.MyCardsDetailModal && (
setModalItem(null)}
onAddToLineup={() => setModalItem(null)}
onViewHistory={() => {}}
onShare={() => {}}
/>
)}
setTweak('locale', v)}/>
setTweak('showEmpty', v)}/>
setTweak('notifSimulate', v)}/>
setTweak('avatarSide', v)}/>
setTweak('fiveTabs', v === '5')}/>
setTweak('scrollAware', v)}/>
setTweak('dateMode', v)}/>
);
}
// Force-shrunk Bento variant — scrolled+shrunk preview
function MobileBentoForceShrunk(props) {
const { locale, avatarSide, fiveTabs, dateMode, notifSimulate, onCardPick,
onPredict, onAllMatches, onSubmit, notifications = 3 } = props;
const ll = HH_I18N[locale];
const featured = hhUseMemo(() => hhFeatured(locale), [locale]);
return (
);
}
// ─── Primitive helper components ─────────────────────────────────────────
function PrimitiveStack({ children }) {
return (
{children}
);
}
function PrimitiveLabel({ text }) {
return (
{text}
);
}
// ─── Exports for unified app shell (Phase 1) ─────────────────────────────────
// MobileBento / DesktopBento are already exported from homehub-layouts.jsx.
// We export HHPhone here so the shell can wrap mobile screens in the phone frame.
Object.assign(window, { HHPhone, MobileBentoForceShrunk });
const __hhRoot = document.getElementById('root');
if (__hhRoot && !window.__APP_SHELL_MODE) {
ReactDOM.createRoot(__hhRoot).render();
}
const HH_APP_CSS = `
.hh-phone {
position: relative;
background: var(--bg-deep);
overflow: hidden;
border-radius: 0;
}
.hh-phone-inner {
position: absolute;
inset: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.hh-phone-inner > * { flex: 1 1 auto; min-height: 0; }
.hh-desktop-frame {
width: 100%;
height: 100%;
overflow: hidden;
background: var(--bg-deep);
color: var(--text-primary);
display: flex;
flex-direction: column;
}
`;
const __hhAppStyle = document.createElement('style');
__hhAppStyle.textContent = HH_APP_CSS;
document.head.appendChild(__hhAppStyle);