// Hotel Marindela — App orchestrator. Manages state, wraps in iOS frame on
// desktop, full-bleed on mobile, exposes Tweaks.
const { useReducer, useState, useEffect, useMemo, useRef } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"paletteId": "forest",
"typeId": "classic",
"showNudge": true,
"frame": "auto"
}/*EDITMODE-END*/;
// ── seed cart (under-ordered on purpose to demo the nudge) ────
function initialState() {
return {
screen: 'welcome',
family: window.FAMILY,
// pre-seed two items so the menu screen has something visual
cart: { s2: 1, k1: 1 },
order: ['s2', 'k1'],
arrival: '19:00',
nudgeDismissed: false,
};
}
function reducer(state, action) {
switch (action.type) {
case 'go': return { ...state, screen: action.screen };
case 'add': {
const cart = { ...state.cart, [action.id]: (state.cart[action.id] || 0) + 1 };
const order = state.order.includes(action.id) ? state.order : [...state.order, action.id];
return { ...state, cart, order };
}
case 'dec': {
const cur = state.cart[action.id] || 0;
if (cur <= 1) {
const { [action.id]: _, ...rest } = state.cart;
return { ...state, cart: rest, order: state.order.filter(id => id !== action.id) };
}
return { ...state, cart: { ...state.cart, [action.id]: cur - 1 } };
}
case 'remove': {
const { [action.id]: _, ...rest } = state.cart;
return { ...state, cart: rest, order: state.order.filter(id => id !== action.id) };
}
case 'setArrival': return { ...state, arrival: action.value };
case 'dismissNudge': return { ...state, nudgeDismissed: true };
case 'confirm': return { ...state, screen: 'confirm' };
case 'reset': return { ...initialState(), nudgeDismissed: false };
default: return state;
}
}
// ── Progress dots on top (subtle stepper) ─────────────────────
function ProgressDots({ screen, palette: p }) {
const stepOf = { welcome: 0, menu: 1, verify: 2, confirm: 3 };
const i = stepOf[screen] ?? 0;
return (
{[0,1,2,3].map(n => (
))}
);
}
// ── Screen orchestrator with cross-fade transitions ───────────
function ScreenStack({ state, dispatch, palette, type }) {
const screens = {
welcome: ScreenWelcome,
menu: ScreenMenu,
verify: ScreenVerify,
confirm: ScreenConfirm,
};
// Maintain a stack so transitions can run
const [current, setCurrent] = useState(state.screen);
const [outgoing, setOutgoing] = useState(null);
const stepIdx = { welcome: 0, menu: 1, verify: 2, confirm: 3 };
useEffect(() => {
if (state.screen !== current) {
setOutgoing({ screen: current, dir: (stepIdx[state.screen] > stepIdx[current]) ? 'forward' : 'back' });
setCurrent(state.screen);
const id = setTimeout(() => setOutgoing(null), 380);
return () => clearTimeout(id);
}
}, [state.screen]);
const Current = screens[current];
const Outgoing = outgoing ? screens[outgoing.screen] : null;
return (
);
}
// ── Theme preset switcher (floating, always visible) ──────────
const THEME_PRESETS = [
{ id: 'editorial', label: 'Editorial', paletteId: 'forest', typeId: 'classic' },
{ id: 'gxLight', label: 'GX · Light', paletteId: 'gxLight', typeId: 'gx' },
{ id: 'gxDark', label: 'GX · Dark', paletteId: 'gx', typeId: 'gx' },
];
function ThemePresets({ paletteId, typeId, onPick }) {
const activeId = THEME_PRESETS.find(p => p.paletteId === paletteId && p.typeId === typeId)?.id;
return (
{THEME_PRESETS.map(p => {
const active = p.id === activeId;
return (
);
})}
);
}
// ── Top-level App ─────────────────────────────────────────────
function App() {
const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [state, dispatch] = useReducer(reducer, undefined, initialState);
const palette = window.PALETTES[tw.paletteId] || window.PALETTES.forest;
const type = window.TYPE_PAIRS[tw.typeId] || window.TYPE_PAIRS.classic;
// Decide framing — auto picks based on viewport width
const [vw, setVW] = useState(window.innerWidth);
useEffect(() => {
const onR = () => setVW(window.innerWidth);
window.addEventListener('resize', onR);
return () => window.removeEventListener('resize', onR);
}, []);
const framed = tw.frame === 'frame' || (tw.frame === 'auto' && vw >= 720);
// Inject font CSS variables onto root
const rootStyle = useMemo(() => ({
'--font-display': type.display,
'--font-body': type.body,
color: palette.ink,
background: palette.bg,
fontFamily: type.body,
}), [type, palette]);
// Override starter component to use ours
const Inner = (
);
return (
{framed ? (
{Inner}
) : (
{Inner}
)}
{framed && (
{ setTweak('paletteId', p.paletteId); setTweak('typeId', p.typeId); }} />
)}
({ value: id, label: v.label.split(' & ')[0] }))}
onChange={(v) => setTweak('paletteId', v)} />
({ value: id, label: v.label }))}
onChange={(v) => setTweak('typeId', v)} />
setTweak('frame', v)} />
dispatch({ type: 'confirm' })} />
dispatch({ type: 'reset' })} />
{/* left context — design label */}
{/* dynamic island */}
{/* status bar */}
9:41
{/* Pad top for status bar */}
{/* home indicator */}