// screens.jsx — five screens for Syndicate City
// expects window globals: Icon, ChipPill, ProgressBar, Panel, GlowBtn, Stripes, AnnoPin, fmt, SC_THEME
const { useState, useEffect, useRef } = React;
// ═══════════════════════════════════════════════════════════════
// HOME SCREEN — daily streak, idle claim, missions, exit hooks
// ═══════════════════════════════════════════════════════════════
function HomeScreen({ state, dispatch, anno }) {
const [idleAccum, setIdleAccum] = useState(state.idle);
useEffect(() => {
if (state.idleClaimed) return;
const t = setInterval(() => setIdleAccum(v => Math.min(state.idleCap, v + 1)), 600);
return () => clearInterval(t);
}, [state.idleClaimed, state.idleCap]);
const streakDays = state.streak;
const streakRewards = [
{ d: 1, c: 500, t: 'common' }, { d: 2, c: 1200, t: 'common' },
{ d: 3, c: 2500, t: 'common' }, { d: 4, c: 5000, t: 'rare' },
{ d: 5, c: 8000, t: 'rare' }, { d: 6, c: 12000, t: 'rare' },
{ d: 7, c: 25000, t: 'legend' },
];
return (
{/* Welcome header */}
Welcome back, Boss
The city missed you.
{/* Idle revenue claim */}
Idle Revenue
{fmt(idleAccum)}
Earned while you were away · +{fmt(Math.floor(idleAccum*0.5))} with VIP 2x
{/* Streak */}
Day {streakDays} Streak
Don't break the chain
{streakRewards.map(r => {
const done = r.d <= streakDays;
const today = r.d === streakDays;
const color = r.t === 'legend' ? '#FFC75A' : r.t === 'rare' ? '#22E5FF' : '#FF2E93';
return (
{done && !today &&
}
D{r.d}
{r.t === 'legend' ?
: }
{fmt(r.c)}
);
})}
{/* Daily missions */}
RESETS IN 8h 14m} anno="missions"/>
{state.missions.map((m, i) => (
dispatch({ type: 'claimMission', idx: i })}/>
))}
{/* Cross-vertical sync hook */}
CROSS-PRODUCT} anno="crossvert"/>
Free Spin · Neon Grand Slots
Complete 3 daily missions to unlock — no deposit needed
m.done).length} max={3} color="#22E5FF" height={6} nearMiss={state.missions.filter(m=>m.done).length === 2}/>
{/* Exit hook */}
Skyline Heist Tournament
Rank Top 100 to win a Legendary fragment
Enter
2,847 players competing
{anno && <>
}
{mission.done ? : }
{mission.title}
{mission.value}/{mission.target}
{fmt(mission.reward)}
{mission.done && !mission.claimed ?
: mission.claimed ?
✓ CLAIMED
: null
}
);
}
function Countdown({ seconds: initial }) {
const [s, setS] = useState(initial);
useEffect(() => { const t = setInterval(() => setS(v => Math.max(0, v-1)), 1000); return () => clearInterval(t); }, []);
const m = Math.floor(s/60), ss = s%60;
return (
{String(Math.floor(m/60)).padStart(2,'0')}:{String(m%60).padStart(2,'0')}:{String(ss).padStart(2,'0')}
);
}
Object.assign(window, { HomeScreen, SectionHeader });