{btn('Y', 'Y', 'I', onY, 'Y / I — Toggle SFX')}
{btn('X', 'X', 'U', onX, 'X / U — Quick-jump menu')}
{btn('A', 'A', 'J', onA, 'A / J / Enter — Advance')}
{btn('B', 'B', 'K', onB, 'B / K / Esc — Back')}
);
}
/* ========== HOME CAROUSEL ========== */
function CardEmblem({ kind, active }) {
const stroke = 'var(--fg)';
const glow = active ? 'drop-shadow(0 0 8px var(--phos-glow))' : 'none';
const common = { width: '70%', height: '70%', filter: glow, transition: 'filter 0.4s' };
// viewBox is centered on 0,0 so CSS rotations around `transform-origin:
// center` line up correctly inside the SVG without needing transform-box
// overrides on every child element.
if (kind === 'surgeon') return (
);
if (kind === 'ai') return (
);
// Lazy chevrons — stacked, marching upward in a loop
return (
);
}
function VentureCard({ v, active, offset, onClick }) {
const absOff = Math.abs(offset);
const translateX = offset * 280;
const translateZ = absOff === 0 ? 0 : -220;
const rotateY = offset * -36;
const opacity = absOff >= 2 ? 0 : 1;
const scale = absOff === 0 ? 1 : 0.82;
const filter = absOff === 0 ? 'none' : 'blur(1px) brightness(0.55)';
return (
◆ {v.num}{v.faction}
{v.title}
{v.role}
{Object.entries(v.stats).map(([k, val]) => (
{k}{val}
))}
{v.class}{active ? 'SELECTED ●' : 'TAP TO OPEN →'}
);
}
function HomeCarousel({ idx, setIdx, enter }) {
const offsetFor = (i) => {
const n = VENTURES.length;
let d = i - idx;
if (d > n / 2) d -= n;
if (d < -n / 2) d += n;
return d;
};
const active = VENTURES[idx];
return (
◆ PICK A VENTURE TO EXPLORE — 3 ON THE TABLE ◆
THE TOMORROW TRIBE CREATIVE SOLUTIONS
◆ CREATIVE SOLUTIONS FOR THE BUSINESSES OF TOMORROW ◆
{ROUTE_ORDER.map(rk => {
const r = ROUTES[rk];
return (
{r.sections.length > 0 && (
{r.sections.map((s, i) => (
))}
)}
);
})}
);
}
/* ========== MAIN CABINET ========== */
function Cabinet() {
const router = useRouter();
const { state, dir, go, nextSection, prevSection, nextRoute, prevRoute, back } = router;
const { route, sectionIdx } = state;
// HOME carousel index
const [homeIdx, setHomeIdx] = React.useState(() => {
const saved = localStorage.getItem('ttt-side');
return saved != null ? Number(saved) : 0;
});
React.useEffect(() => { localStorage.setItem('ttt-side', String(homeIdx)); }, [homeIdx]);
const [qjOpen, setQjOpen] = React.useState(false);
const [menuOpen, setMenuOpen] = React.useState(false);
const [helpOpen, setHelpOpen] = React.useState(false);
// { target: 'AI', title: 'PURO AI LABS', dir: 'down'|'up' } | null
const [pendingSwitch, setPendingSwitch] = React.useState(null);
const [isMobile, setIsMobile] = React.useState(() => window.matchMedia('(max-width: 900px)').matches);
const [showSwipeHint, setShowSwipeHint] = React.useState(false);
const [pressed, setPressed] = React.useState(null);
const [dpadDir, setDpadDir] = React.useState(null);
const [sfxMuted, setSfxMuted] = React.useState(() => window.sfx ? window.sfx.isSfxMuted() : false);
const [musicMuted, setMusicMuted] = React.useState(() => window.sfx ? window.sfx.isMusicMuted() : false);
// Track viewport breakpoint
React.useEffect(() => {
const mq = window.matchMedia('(max-width: 900px)');
const onChange = () => setIsMobile(mq.matches);
mq.addEventListener('change', onChange);
return () => mq.removeEventListener('change', onChange);
}, []);
// First-visit tutorial (desktop only — mobile navigates like a normal app)
React.useEffect(() => {
if (isMobile) return;
const seen = localStorage.getItem(window.HELP_KEY);
if (!seen) {
const t = setTimeout(() => setHelpOpen(true), 700);
return () => clearTimeout(t);
}
}, [isMobile]);
React.useEffect(() => {
if (!helpOpen) localStorage.setItem(window.HELP_KEY, '1');
}, [helpOpen]);
// Mobile swipe hint (once per session)
React.useEffect(() => {
if (!isMobile) return;
if (sessionStorage.getItem('ttt-swipe-hint')) return;
const t = setTimeout(() => {
setShowSwipeHint(true);
sessionStorage.setItem('ttt-swipe-hint', '1');
setTimeout(() => setShowSwipeHint(false), 3200);
}, 1500);
return () => clearTimeout(t);
}, [isMobile]);
const flashBtn = (b, d) => {
setPressed(b);
if (d) { setDpadDir(d); }
setTimeout(() => { setPressed(null); setDpadDir(null); }, 220);
};
// Enter/A action: context-aware
const onA = React.useCallback(() => {
flashBtn('A');
if (qjOpen) { setQjOpen(false); return; }
if (route === 'HOME') {
// Enter the selected faction
const v = VENTURES[homeIdx];
const routeMap = { surgeon: 'SURGEON', ai: 'AI', lazy: 'LAZY' };
const target = routeMap[v.id];
if (target) { window.sfx && window.sfx.enter(); go(target, 0, 'zoom'); }
} else {
// Advance to next section, or jump to next route if at end
const advanced = nextSection();
if (!advanced) { window.sfx && window.sfx.enter(); nextRoute(); }
}
}, [qjOpen, route, homeIdx, go, nextSection, nextRoute]);
const onB = React.useCallback(() => {
flashBtn('B');
if (qjOpen) { setQjOpen(false); return; }
back();
}, [qjOpen, back]);
const onX = React.useCallback(() => {
flashBtn('X');
setQjOpen(o => !o);
}, []);
// Y button / I key = toggle SFX (the arcade bleeps/blops).
const onY = React.useCallback(() => {
flashBtn('Y');
if (window.sfx) {
const m = window.sfx.toggleSfxMute();
setSfxMuted(m);
}
}, []);
// Music toggle (separate from Y/I). Wired to the MUSIC button in the header.
const toggleMusic = React.useCallback(() => {
if (window.sfx) {
const m = window.sfx.toggleMusicMute();
setMusicMuted(m);
}
}, []);
const onLeft = React.useCallback(() => {
flashBtn(null, 'left');
if (qjOpen) return;
if (route === 'HOME') {
setHomeIdx(i => (i - 1 + VENTURES.length) % VENTURES.length);
window.sfx && window.sfx.tick();
} else {
prevSection();
}
}, [qjOpen, route, prevSection]);
const onRight = React.useCallback(() => {
flashBtn(null, 'right');
if (qjOpen) return;
if (route === 'HOME') {
setHomeIdx(i => (i + 1) % VENTURES.length);
window.sfx && window.sfx.tick();
} else {
nextSection();
}
}, [qjOpen, route, nextSection]);
const onUp = React.useCallback(() => {
flashBtn(null, 'up');
if (qjOpen) return;
prevRoute();
}, [qjOpen, prevRoute]);
const onDown = React.useCallback(() => {
flashBtn(null, 'down');
if (qjOpen) return;
nextRoute();
}, [qjOpen, nextRoute]);
// Keyboard
React.useEffect(() => {
const onKey = (e) => {
if (e.target && (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA')) return;
// When help is open, ANY key closes it — no background navigation.
// Modifier keys alone are ignored so stray Shift/Ctrl releases don't dismiss.
if (helpOpen) {
if (['Shift', 'Control', 'Alt', 'Meta'].includes(e.key)) return;
e.preventDefault();
e.stopPropagation();
setHelpOpen(false);
return;
}
// Route-switch confirmation: Enter/Y = confirm, Esc/N = dismiss.
if (pendingSwitch) {
if (['Shift', 'Control', 'Alt', 'Meta'].includes(e.key)) return;
e.preventDefault();
e.stopPropagation();
const k = e.key.toLowerCase();
if (k === 'enter' || k === 'y' || k === ' ') {
const tgt = pendingSwitch.target;
const dir = pendingSwitch.dir === 'down' ? 'down' : 'up';
setPendingSwitch(null);
window.sfx && window.sfx.enter && window.sfx.enter();
go(tgt, 0, dir);
} else {
setPendingSwitch(null);
}
return;
}
switch (e.key) {
// Arrow cluster
case 'ArrowRight': e.preventDefault(); onRight(); break;
case 'ArrowLeft': e.preventDefault(); onLeft(); break;
case 'ArrowUp': e.preventDefault(); onUp(); break;
case 'ArrowDown': e.preventDefault(); onDown(); break;
// Confirm / back
case 'Enter': case ' ': e.preventDefault(); onA(); break;
case 'Escape': e.preventDefault(); if (qjOpen) setQjOpen(false); else onB(); break;
// Left-hand D-pad (WASD)
case 'w': case 'W': onUp(); break;
case 'a': case 'A': onLeft(); break;
case 's': case 'S': onDown(); break;
case 'd': case 'D': onRight(); break;
// Right-hand buttons (J K U I, emulator-style)
case 'j': case 'J': onA(); break;
case 'k': case 'K': onB(); break;
case 'u': case 'U': onX(); break;
case 'i': case 'I': onY(); break;
// Home shortcut
case 'h': case 'H': go('HOME', 0, 'zoom'); break;
// Help
case '?': case '/': e.preventDefault(); setHelpOpen(o => !o); break;
}
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [onA, onB, onX, onY, onLeft, onRight, onUp, onDown, go, qjOpen, helpOpen, pendingSwitch]);
// Idle auto-open help (30s) + close on any non-keyboard action.
// Desktop only — mobile is a normal app with no help layer.
// Keyboard-close is handled by the main onKey handler above.
React.useEffect(() => {
if (isMobile) return;
const IDLE_MS = 30000;
let idleTimer = null;
let armed = false;
const resetIdle = () => {
if (idleTimer) clearTimeout(idleTimer);
idleTimer = setTimeout(() => { setHelpOpen(true); }, IDLE_MS);
};
const onActiveAction = (e) => {
resetIdle();
if (!helpOpen || !armed) return;
// Don't close if the user is interacting with the help card itself
// (close button, GOT IT button, scrolling inside, etc.)
const t = e.target;
if (t && t.closest && t.closest('.help-card')) return;
setHelpOpen(false);
};
// mousemove alone shouldn't close the help (user might just be reading),
// but it SHOULD keep the idle timer alive.
const onMove = () => resetIdle();
// Re-arm the close-on-action logic shortly after open, so the very
// click/tap that opened the help (e.g. HELP button click) doesn't
// immediately re-close it.
const armTimer = setTimeout(() => { armed = true; }, 120);
const closeEvents = ['mousedown', 'touchstart', 'wheel'];
closeEvents.forEach(evt => window.addEventListener(evt, onActiveAction, { passive: true }));
window.addEventListener('mousemove', onMove, { passive: true });
resetIdle();
return () => {
if (idleTimer) clearTimeout(idleTimer);
clearTimeout(armTimer);
closeEvents.forEach(evt => window.removeEventListener(evt, onActiveAction));
window.removeEventListener('mousemove', onMove);
};
}, [helpOpen, isMobile]);
// Touch swipes on the screen.
//
// Horizontal (left/right) = step through the current venture's sections
// — kept low-resistance since this is the primary in-venture nav.
// Vertical (up/down) = switch between ventures
// — when the user is INSIDE a venture, we require a much longer and
// more vertically-dominant gesture, because otherwise a casual
// swipe while reading can accidentally jump to the next venture.
// On HOME (the carousel) the old thresholds stay, because nothing
// is being "read" yet.
const screenRef = React.useRef(null);
React.useEffect(() => {
const el = screenRef.current;
if (!el) return;
let sx = 0, sy = 0, st = 0, tracking = false;
const onStart = (e) => {
if (!e.touches || e.touches.length !== 1) return;
sx = e.touches[0].clientX; sy = e.touches[0].clientY; st = Date.now();
tracking = true;
};
const onEnd = (e) => {
if (!tracking) return;
tracking = false;
const t = e.changedTouches && e.changedTouches[0];
if (!t) return;
const dx = t.clientX - sx;
const dy = t.clientY - sy;
const dt = Date.now() - st;
if (dt > 700) return;
const ax = Math.abs(dx), ay = Math.abs(dy);
const inVenture = route !== 'HOME';
const H_MIN = 40; // horizontal keeps its snappy threshold
const V_MIN = inVenture ? 110 : 40; // vertical needs a longer throw inside a venture
const V_DOMINANCE = inVenture ? 1.8 : 1.0; // vertical must clearly out-measure horizontal
if (ax >= ay) {
if (ax < H_MIN) return;
if (dx < 0) onRight(); else onLeft();
} else {
if (ay < V_MIN) return;
if (ay / Math.max(1, ax) < V_DOMINANCE) return;
if (inVenture) {
// Don't yank the reader away — ask first.
const idx = ROUTE_ORDER.indexOf(route);
const targetKey = dy < 0
? ROUTE_ORDER[(idx + 1) % ROUTE_ORDER.length]
: ROUTE_ORDER[(idx - 1 + ROUTE_ORDER.length) % ROUTE_ORDER.length];
setPendingSwitch({
target: targetKey,
title: ROUTES[targetKey].label,
dir: dy < 0 ? 'down' : 'up',
});
window.sfx && window.sfx.tick && window.sfx.tick();
return;
}
if (dy < 0) onDown(); else onUp();
}
};
el.addEventListener('touchstart', onStart, { passive: true });
el.addEventListener('touchend', onEnd, { passive: true });
return () => {
el.removeEventListener('touchstart', onStart);
el.removeEventListener('touchend', onEnd);
};
}, [onLeft, onRight, onUp, onDown, route]);
const r = ROUTES[route];
const curSec = r.sections[sectionIdx];
const sectionLabel = curSec ? curSec.label : 'HOME';
const total = r.sections.length;
// Per-venture accent theming. On a venture route, use that venture's brand
// accent. On HOME, preview the currently-selected card's accent so the
// whole console colour-bleeds into the faction you're about to enter.
const VENTURE_ACCENT = {
surgeon: { phos: '#E24A4A', glow: 'rgba(226,74,74,0.55)' }, // Surgeon medical red
ai: { phos: '#E36A3B', glow: 'rgba(227,106,59,0.55)' }, // Puro terracotta
lazy: { phos: '#3D7BFF', glow: 'rgba(61,123,255,0.55)' }, // Lazzzy blue
};
const ROUTE_TO_VID = { SURGEON: 'surgeon', AI: 'ai', LAZY: 'lazy' };
const activeVid = route === 'HOME'
? (VENTURES[homeIdx]?.id || 'surgeon')
: (ROUTE_TO_VID[route] || 'surgeon');
const accent = VENTURE_ACCENT[activeVid] || VENTURE_ACCENT.surgeon;
const cabinetThemeStyle = {
'--phos': accent.phos,
'--phos-glow': accent.glow,
'--venture-accent': accent.phos,
'--venture-accent-glow': accent.glow,
};
return (
PAUSE · ROUTES
{ROUTE_ORDER.map(rk => (
))}
{isMobile && (
◆ HOW TO NAVIGATE
↕
Swipe up / down
Switch between ventures
↔
Swipe left / right
Go deeper within a venture — step through its sections
)}
{menuOpen &&
setMenuOpen(false)} />}
{!isMobile && (
)}
ONLINE
◆ TAP A VENTURE OR USE THE ARROW KEYS TO EXPLORE — EVERY BUTTON ON THE CONSOLE IS REAL ◆
{/* On HOME the route label would say "PICK A VENTURE" — the
same copy appears above the screen and on the right side
of this HUD. Leave the left blank here to stop the triple
repeat the user saw on their phone. */}
)}
{route === 'HOME'
?
: }
{/* Subtle swipe cues anchored in the screen's top corners on
venture pages — shows the previous section name on the
left and the next section name on the right so users
always know where a swipe will take them. Tappable too. */}
{route !== 'HOME' && total > 1 && sectionIdx > 0 && (
)}
{route !== 'HOME' && total > 1 && sectionIdx < total - 1 && (
)}
{/* Section dots — visible on subpages so users can see how many
sections exist and where they are. Tapping jumps directly. */}
{route !== 'HOME' && total > 1 && (