// ──────────────────────────────────────────────────────────── // Nukus 89 — UI primitives + screens // Depends on: T, BAR, KITCHEN, EVENTS, FLOOR (window globals from data.jsx) // ──────────────────────────────────────────────────────────── const { useState, useMemo, useEffect, useRef } = React; // ─── Primitives ──────────────────────────────────────────── function Hr({ ink, dashed = true, style = {} }) { return
; } function Btn({ children, onClick, kind = 'ghost', theme, full = false, disabled = false, style = {} }) { const { ink, bg } = theme; const isPrimary = kind === 'primary'; return ( ); } function Chip({ children, active = false, theme, onClick, style = {} }) { const { ink, bg } = theme; return ( ); } function CornerTag({ children, theme, style = {} }) { return (
{children}
); } function SectionLabel({ children, theme, right = null }) { return (
{children}
{right}
); } // ─── Top header (used on inner screens) ──────────────────── function ScreenHeader({ title, onBack, theme, t, right = null }) { const { ink } = theme; return (
{title}
{right}
); } // ─── HOME SCREEN ────────────────────────────────────────── function HomeScreen({ go, theme, t, lang, setLang }) { const { ink, bg, mute } = theme; // График: ежедневно с 17:00; ночи пт/сб — до 04:00, остальные — до 01:00 (Ташкент, UTC+5) const _now = new Date(Date.now() + 5 * 3600e3); const _h = _now.getUTCHours(); const _closeFor = (dow) => (dow === 5 || dow === 6) ? 4 : 1; // час закрытия ночи, начавшейся в день dow const _close = _h >= 17 ? _closeFor(_now.getUTCDay()) : _closeFor((_now.getUTCDay() + 6) % 7); const isOpen = _h >= 17 || _h < _close; const tiles = [ { k:'book', label: t('book'), sub:'01' }, { k:'kitchen', label: t('kitchen'), sub:'02' }, { k:'bar', label: t('bar'), sub:'03' }, { k:'events', label: t('events'), sub:'04' }, ]; return (
{/* header bar with lang + status */}
{['ru','en','uz'].map(l => ( ))}
{isOpen ? `${t('open_till')} 0${_close}:00` : `${t('closed_till')} 17:00`}
{/* hero block */}
{t('welcome')}
NUKUS89
{t('sub_speakeasy')}
{/* logo mark */}
{t('address')}
{t('address_note')} ⋅ 41.28°N / 69.27°E
{/* соцсети */}
{t('instagram')} ↗ {t('telegram')} ↗
{/* big tile menu */}
{tiles.map((tile, i) => { const isRight = i % 2 === 1; const isBottom = i >= 2; return ( ); })}
{/* NUKUS CLUB — временно скрыт (LOYALTY_ENABLED в data.jsx) */} {LOYALTY_ENABLED && (
)} {/* bottom bar with my-bookings shortcut */}
); } // ─── BOOKING FLOW ───────────────────────────────────────── function BookingFlow({ go, theme, t, lang, onConfirm }) { const { ink, bg, mute } = theme; const [step, setStep] = useState(0); // 0 date, 1 time, 2 guests, 3 table, 4 success const [date, setDate] = useState(null); const [time, setTime] = useState(null); const [guests, setGuests] = useState(2); const [table, setTable] = useState(null); const [comment, setComment] = useState(''); const [code, setCode] = useState(null); const [saving, setSaving] = useState(false); const [saveErr, setSaveErr] = useState(false); const [busyRows, setBusyRows] = useState([]); // брони на выбранную дату (занятость столов) const allTimes = ['18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00','22:30','23:00','23:30']; // Реальная занятость столов с сервера useEffect(() => { if (!date) return; const ds = `${date.y}-${String(date.m+1).padStart(2,'0')}-${String(date.d).padStart(2,'0')}`; fetch('/api/availability?date=' + ds) .then(r => r.json()) .then(rows => setBusyRows(Array.isArray(rows) ? rows : [])) .catch(() => setBusyRows([])); }, [date]); // ponytail: стол занят, если бронь в пределах ±2ч от выбранного времени const toMin = (s) => { const [h, m] = String(s).split(':').map(Number); return (h || 0) * 60 + (m || 0); }; const takenTables = useMemo(() => { if (!time) return []; return busyRows.filter(b => Math.abs(toMin(b.time_str) - toMin(time)) < 120).map(b => b.table_id); }, [busyRows, time]); // Хелпер: доступные слоты для конкретной даты (с буфером +60 мин) function getAvailableTimesForDate(d) { // Пт/сб брони только до 21:00 — дальше живая посадка let ts = allTimes; if (d.dow === 5 || d.dow === 6) ts = ts.filter(tm => tm <= '21:00'); const now = new Date(); const isToday = d.d === now.getDate() && d.m === now.getMonth() && d.y === now.getFullYear(); if (!isToday) return ts; const currentMinutes = now.getHours() * 60 + now.getMinutes() + 60; return ts.filter(t => { const [h, m] = t.split(':').map(Number); return h * 60 + m > currentMinutes; }); } // Генерируем дни: если на сегодня нет слотов — начинаем с завтра const days = useMemo(() => { const now = new Date(); const todayObj = { d: now.getDate(), m: now.getMonth(), y: now.getFullYear(), dow: now.getDay() }; const startFromTomorrow = getAvailableTimesForDate(todayObj).length === 0; const base = new Date(now); if (startFromTomorrow) base.setDate(base.getDate() + 1); base.setHours(0, 0, 0, 0); const out = []; for (let i = 0; i < 30; i++) { const d = new Date(base); d.setDate(d.getDate() + i); out.push({ d: d.getDate(), m: d.getMonth(), y: d.getFullYear(), dow: d.getDay() }); } return out; }, []); // Доступные слоты для выбранной даты const times = useMemo(() => { if (!date) return allTimes; return getAvailableTimesForDate(date); }, [date]); const back = () => step === 0 ? go('home') : setStep(step - 1); const finalize = async () => { const c = 'NK-' + Math.floor(Math.random()*9000+1000); setSaving(true); setSaveErr(false); const ok = await onConfirm({ date, time, guests, table, code: c, comment: comment.trim() }); setSaving(false); if (!ok) { setSaveErr(true); return; } setCode(c); setStep(4); }; const StepIndicator = () => (
{[0,1,2,3].map(i => (
))}
); const stepLabels = [ t('select_date'), t('select_time'), t('guests'), t('select_table'), ]; if (step === 4) { return ; } return (
{step === 0 && ( { setDate(d); setStep(1); }} theme={theme} t={t} lang={lang} /> )} {step === 1 && ( { setTime(x); setStep(2); }} theme={theme} t={t} /> )} {step === 2 && ( setStep(3)} /> )} {step === 3 && ( )}
{step === 3 && (
{t('comment_label')}