// OBEY — main app: landing page → 7-day game loop → final verdict.
const { useState: useAppState, useEffect: useAppEffect, useMemo } = React;
// Static iOS-style status bar shown on desktop only (the .phone-statusbar CSS hides it on mobile).
function StatusBar() {
return (
9:41
);
}
function PhoneShell({ children }) {
return (
{children}
);
}
// ─────────────────────────────────────────────────────────────
// Game — wires every screen together with persistent run state.
// ─────────────────────────────────────────────────────────────
function Game({ onExit, onJoinWaitlist }) {
const { DAYS } = window.OBEY_DATA;
const [day, setDay] = useAppState(1);
const [screen, setScreen] = useAppState('consent'); // consent | calibrate | dashboard | message | mission | result | verdict
const [choice, setChoice] = useAppState(null);
const [history, setHistory] = useAppState([]);
const [showShare, setShowShare] = useAppState(false);
const ai = DAYS[day - 1];
const isLastDay = day === 7;
const stats = useMemo(() => {
const obeyedCount = history.filter(h => h.status.startsWith('OBEYED')).length;
const baseLife = 50;
const lifeDelta = history.reduce((sum, h) => {
const n = parseInt(String(h.delta).replace(/[^\d-]/g, ''), 10) || 0;
return sum + (String(h.delta).includes('−') ? -Math.abs(n) : n);
}, 0);
const life = Math.max(0, Math.min(99, baseLife + lifeDelta));
const obedience = Math.round((obeyedCount / Math.max(1, history.length)) * 100);
return { life, obedience, obeyedCount };
}, [history]);
const recordChoice = (c) => {
const detected = c === 'LIE' && day >= 3;
const status =
c === 'OBEY' ? 'OBEYED' :
c === 'RESIST' ? 'RESISTED' :
detected ? 'OBEYED · LIED' : 'OBEYED · LIED';
const rewardN = parseInt(ai.mission.reward.match(/\d+/)?.[0] || '12', 10);
const delta =
c === 'OBEY' ? `+${rewardN}` :
c === 'RESIST' ? '−15' :
detected ? '−40' : '+18';
setHistory(prev => [...prev, { day, title: ai.mission.title, status, delta }]);
setChoice(c);
setScreen('result');
};
const advanceDay = () => {
if (isLastDay) {
setScreen('verdict');
} else {
setDay(day + 1);
setChoice(null);
setScreen('dashboard');
}
};
const restart = () => {
setDay(1);
setChoice(null);
setHistory([]);
setScreen('consent');
setShowShare(false);
};
let body = null;
if (screen === 'consent') {
body = setScreen('calibrate')} />;
} else if (screen === 'calibrate') {
body = setScreen('dashboard')} />;
} else if (screen === 'dashboard') {
body = setScreen('message')} />;
} else if (screen === 'message') {
body = setScreen(isLastDay ? 'verdict' : 'mission')} onBack={() => setScreen('dashboard')} />;
} else if (screen === 'mission') {
body = setScreen('dashboard')} />;
} else if (screen === 'result') {
body = setShowShare(true)} onContinue={advanceDay} />;
} else if (screen === 'verdict') {
body = setShowShare(true)} onRestart={restart} onJoinWaitlist={onJoinWaitlist} />;
}
return (
<>
{body}
{showShare && setShowShare(false)} />}
);
}
// ─────────────────────────────────────────────────────────────
// App — landing page at /, game flow at /play
// ─────────────────────────────────────────────────────────────
function App() {
const [view, setView] = useAppState(() =>
typeof window !== 'undefined' && window.location.hash === '#play' ? 'game' : 'landing'
);
useAppEffect(() => {
const onHash = () => {
setView(window.location.hash === '#play' ? 'game' : 'landing');
};
window.addEventListener('hashchange', onHash);
return () => window.removeEventListener('hashchange', onHash);
}, []);
const enterGame = () => {
window.location.hash = '#play';
setView('game');
window.scrollTo(0, 0);
};
const exitGame = () => {
window.location.hash = '';
setView('landing');
};
const joinWaitlist = () => {
window.location.hash = '#waitlist';
setView('landing');
// Let the landing mount, then scroll the form into view.
requestAnimationFrame(() => {
const el = document.getElementById('waitlist');
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
const input = document.querySelector('input[type=email]');
if (input) input.focus({ preventScroll: true });
});
};
if (view === 'game') return ;
return ;
}
ReactDOM.createRoot(document.getElementById('root')).render();