e.stopPropagation()}
style={{
position: 'relative',
transform: 'scale(1.0)',
cursor: 'default',
filter: 'drop-shadow(0 30px 60px rgba(0,0,0,0.75))',
}}
>
{renderBig()}
{label}
);
}
function DirectionC({ lang, time, duration, years }) {
const [selectedItem, setSelectedItem] = React.useState(null);
const [pauseOnOpen, setPauseOnOpen] = React.useState(() => {
try { return localStorage.getItem('expo:dirC:pause') !== 'false'; } catch { return true; }
});
React.useEffect(() => {
try { localStorage.setItem('expo:dirC:pause', String(pauseOnOpen)); } catch {}
}, [pauseOnOpen]);
// Esc → закрыть модалку
React.useEffect(() => {
if (!selectedItem) return;
const onKey = (e) => { if (e.key === 'Escape') { e.stopPropagation(); setSelectedItem(null); } };
window.addEventListener('keydown', onKey, true);
return () => window.removeEventListener('keydown', onKey, true);
}, [selectedItem]);
// Замораживаем time, пока модалка открыта и тоггл включён.
const frozenTimeRef = React.useRef(time);
if (!(selectedItem && pauseOnOpen)) {
frozenTimeRef.current = time;
}
const stripTime = (selectedItem && pauseOnOpen) ? frozenTimeRef.current : time;
const yearSpan = duration / years.length;
const yearIdx = Math.min(years.length - 1, Math.floor(time / yearSpan));
const inYearT = (time - yearIdx * yearSpan) / yearSpan;
const year = years[yearIdx];
const data = year[lang];
const extras = (lang === 'ru' ? EXTRA_RU : EXTRA_EN)[year.year] || { news: [], tel: [], let: [] };
// Построим items для лент на основе событий + доп. плашек
const coreNews = data.events.map(ev => ({
type: 'news', headline: ev.title, body: ev.note, date: ev.date,
}));
const newsItems = [...coreNews, ...extras.news];
const coreTel = data.events.map(ev => ({
type: 'tel', text: ev.title.toUpperCase().replace(/ /g, ' · '), date: ev.date,
}));
const telItems = [...coreTel, ...extras.tel];
const letItems = [
{ body: data.lede, from: `${year.year}` },
{ body: data.quote.text, from: data.quote.by },
...data.events.slice(0, 3).map(ev => ({ body: ev.note, from: `${ev.date}, ${year.year}` })),
...extras.let,
];
return (
{/* задник — глубокое дерево стенда */}
{/* луч света сверху */}
{/* крупный год по центру (фоном) */}
{year.year}
{/* 3 ленты */}
(
setSelectedItem({ type: 'news', props: item })}
style={{ position: 'absolute', top: 20, left: 20, cursor: 'zoom-in' }}
>
)}
/>
{
// Псевдослучайная вариация в рамках ±20–25% — размер, сдвиг, поворот.
const s = [0.82, 1.00, 1.18, 0.92, 1.10, 0.86, 1.05][i % 7]; // 0.82..1.18
const dy = [20, 4, 38, 12, 46, 0, 26][i % 7]; // 0..46
const dx = [20, 44, 8, 36, 16, 52, 24][i % 7]; // 8..52
const rot = [-4, 2, -1, 5, -3, 1, 3, -2][i % 8]; // ±5°
const w = Math.round(320 * s);
return (
setSelectedItem({ type: 'tel', props: item })}
style={{ position: 'absolute', top: dy, left: dx, cursor: 'zoom-in' }}
>
);
}}
/>
(
setSelectedItem({ type: 'let', props: item })}
style={{ position: 'absolute', top: 20, left: 20, cursor: 'zoom-in' }}
>
)}
/>
{/* Заголовок */}
{data.chapter}
{data.subtitle}
{/* Нижняя цитата */}
{data.quote.text}
— {data.quote.by}
{/* Верхний виньет-градиент */}
{/* Тоггл «пауза при открытии» — правый-нижний, над нижней цитатой */}
{/* Модалка с увеличенным документом */}
setSelectedItem(null)} lang={lang} />