// screens.jsx — every FocusDex screen, exported on window for app.jsx to wire up. // ═══ TITLE / SPLASH ════════════════════════════════════════════════════════ function TitleScreen({ go }) { return (
{/* sun */}
{/* distant terminal mountains */}
Catch your year of work.
{/* Notchy holding a focus ball */}
v0.1 · MADE IN THE NOTCHYVERSE
); } // ═══ ONBOARDING ═════════════════════════════════════════════════════════════ function OnbFrame({ children, dotIdx }) { return (
{children}
{[1,2,3,4,5].map(i => (
))}
); } function Onb1({ go }) { return (

Welcome to FocusDex

I'm Professor Notchy. I live in the notch. Let's catch your year.

); } function Onb2({ go, starter, setStarter }) { const opts = [ { id:'Codesprite', sprite:Codesprite, type:'Code', glow:'#2EE6A0', tagline:'For coders.' }, { id:'Inkling', sprite:Inkling, type:'Doc', glow:'#C147FF', tagline:'For writers.' }, { id:'Pixibrush', sprite:Pixibrush, type:'Art', glow:'#FF6B6B', tagline:'For designers.' }, ]; return (

Choose your starter

Your first companion.
{opts.map(o => { const Sp = o.sprite; const selected = starter === o.id; return ( ); })}
); } function Onb3({ go }) { return (

How focus earns balls

Real work → real loot.
{/* Step 1 */}
💻
STEP 1
Focus in a real app
{/* Step 2 */}
70%
STEP 2
Build Focus Energy
{/* Step 3 */}
STEP 3
Earn Pokeballs
5 min = 1 Focus · 25 min = 1 Great · 90 min = 1 Ultra · 8 hr = 1 Master
); } function Onb4({ go }) { return (

Catch on your breaks

Spend Pokeballs between sessions.
{/* Safari preview */}
{/* dotted throw arc */}
{/* inventory */}
INVENTORY
 ); } function Onb5({ go }) { const [dur, setDur] = React.useState(25); return (

Ready for your first session?

Pick a duration. I'll watch your progress.
{/* Timer dial */}
{[...Array(60)].map((_,i)=>{const a=(i/60)*Math.PI*2;return })}
{String(dur).padStart(2,'0')}:00
FOCUS
{[15,25,50,90].map(m => ( ))}
⌘
Focus in: Xcode
 ); } // ═══ LOCK-IN ════════════════════════════════════════════════════════════════ function LockInScreen({ go, openPopup, sigilTier = 3, remaining = 2568 }) { const mm = String(Math.floor(remaining/60)).padStart(2,'0'); const ss = String(remaining%60).padStart(2,'0'); const total = 45*60; const pct = (1 - remaining/total) * 100; return (
THE GATE HOLDS
{/* Notchy at gate base */}
ON WATCH
{/* Gate */}
{/* Side panel */}
ZEN SIGIL · 45 MIN
BLOCKED
{['🐦','📺','💬','🎮','📰'].map((e,i)=>(
{e}
))}
SPAWNING
+ 3
{/* Big timer */}
{mm}:{ss}
focusing in Xcode · FocusDex.xcodeproj
); } // distraction popup overlay function DistractionPopup({ onClose }) { return (
You're locked in.
The gate holds.
Twitter blocked26:14 remaining
); } // ═══ CATCH / SAFARI ═════════════════════════════════════════════════════════ function CatchScreen({ go, onCatch }) { const [phase, setPhase] = React.useState('idle'); // idle | throwing | flash | wobble1 | wobble2 | wobble3 | caught const [selectedBall, setSelectedBall] = React.useState('focus'); const Balls = { focus: FocusBall, quick: QuickBall, premier: PremierBall, net: NetBall }; const Ball = Balls[selectedBall]; const throwBall = () => { if (phase !== 'idle') return; setPhase('throwing'); setTimeout(() => setPhase('flash'), 700); setTimeout(() => setPhase('wobble1'), 950); setTimeout(() => setPhase('wobble2'), 1500); setTimeout(() => setPhase('wobble3'), 2050); setTimeout(() => { setPhase('caught'); onCatch?.(); }, 2700); }; return (
{/* HUD top */}
SAFARI MODE · Notchyverse Meadow
{/* wild creature */} {phase !== 'caught' && (
{/* HP bar above wild */} {phase==='idle' && (
Wild Codesprite
)}
)} {/* thrown ball */} {(phase==='throwing'||phase==='wobble1'||phase==='wobble2'||phase==='wobble3'||phase==='caught') && (
)} {/* throw trail */} {phase==='throwing' && ( )} {/* flash effect */} {phase==='flash' && (
)} {/* caught burst */} {phase==='caught' && (
{[...Array(6)].map((_,i)=>{ const a=(i/6)*Math.PI*2; return
; })}
)} {/* Caught banner */} {phase==='caught' && (
CAUGHT! ✨
)} {/* Bottom control bar */}
{/* ball select */}
{[ ['focus','Focus',FocusBall,3], ['quick','Quick',QuickBall,1], ['premier','Premier',PremierBall,1], ['net','Net',NetBall,2], ].map(([id,lbl,B,n]) => ( ))}
{/* big throw button */} {phase==='caught' && ( )}
); } // ═══ POST-CATCH REVEAL ══════════════════════════════════════════════════════ function CatchRevealScreen({ go }) { const c = CREATURES[0]; return (
{/* Sprite window */}
{/* corner sparkles */} {[[12,12],[12,'auto'],['auto',12],['auto','auto']].map((p,i)=>(
))}
{/* Info */}
#{String(c.num).padStart(3,'0')}

{c.name}

{c.types.map(t => )}
Caught Wed 11:54 · while focusing on FocusDex.xcodeproj
{[['HP',c.stats.HP,'#FF6B6B'],['FP',c.stats.FP,'#C147FF'],['STA',c.stats.STA,'#47A0FF'],['SPD',c.stats.SPD,'#2EE6A0']].map(([l,v,c2]) => (
{l}
{v}
))}
); } // ═══ POKÉDEX ════════════════════════════════════════════════════════════════ function DexScreen({ go }) { const [filter, setFilter] = React.useState('all'); const Sprites = { 1: Codesprite, 2: Codecrawler, 3: Codetitan, 4: Inkling, 5: Inkwarden, 6: Inkdragoon, 7: Pixibrush, 8: Brushwing, 9: Maestrix, 25: Bracketling, 29: Stickynote, 31: Wavelet, 39: Tickbug, 41: Sproutmit, }; const caughtIds = new Set([1,4,7,25,29,31,39,41,8]); const cells = ALL_DEX_NUMS.slice(0, 50).map(n => { const c = CREATURES.find(c => c.num === n); const caught = caughtIds.has(n); const Sp = Sprites[n]; return { n, c, caught, Sp }; }); const totalCaught = 69; // narrative-consistent with trainer card 47% const totalDex = 147; const pct = 47; return (
{/* Header */}
YOUR POKÉDEX

The Notchyverse

caught
{totalCaught} / {totalDex}
{pct}%
{/* Filter chips */}
{['all','Code','Art','Doc','Sound','Spark','Spirit','Pixel','Zen','Glitch'].map(f => ( ))}
{/* Grid */}
{cells.map(({n,c,caught,Sp}) => (
caught && c && go(`creature-${c.num}`)}> #{String(n).padStart(3,'0')}
{Sp ? : (
)}
{caught && c && {c.name}} {!caught && ???} {caught && c && (
{c.types.slice(0,1).map(t => )}
)}
))}
); } // ═══ CREATURE DETAIL ════════════════════════════════════════════════════════ function CreatureScreen({ go, creatureId }) { const c = CREATURES.find(c => c.num === creatureId) || CREATURES[0]; const Sprites = { 1: Codesprite, 2: Codecrawler, 3: Codetitan, 4: Inkling, 5: Inkwarden, 6: Inkdragoon, 7: Pixibrush, 8: Brushwing, 9: Maestrix, 25: Bracketling, 29: Stickynote, 31: Wavelet, 39: Tickbug, 41: Sproutmit }; const Sp = Sprites[c.num] || Codesprite; return (
{/* Header */}
#{String(c.num).padStart(3,'0')}

{c.name}

{c.types.map(t => )}
{/* Left col — sprite + evolution */}
EVOLUTION
{c.evo ? :
Does not evolve.
}
{/* Right col — stats / move / lore (scrollable) */}
BATTLE STATS
{c.rarity?.toUpperCase()}
SIGNATURE MOVE
{c.move}
{c.moveDesc}
{c.lore && c.lore.length > 0 && (
LORE · NOTCHY'S NOTES
{c.lore.map((p,i) => (

"{p}"

))}
)} {c.spawn && (
SPAWN
{c.spawn}
)}
); } // ═══ TRAINER CARD ═══════════════════════════════════════════════════════════ function TrainerCardScreen({ go }) { return (
{/* holo sheen */}
{/* top row */}
{/* avatar */}
🧑‍💻
TRAINER ID · NV-7104

Ben

Cupertino, CA
LV.24
{/* starter row */}
STARTER
Codesprite
BOND
312 hrs
{/* gym badges */}
GYM BADGES
{['Code','Art','Doc','Sound','Spark','Zen','Spirit','Time'].map((t,i) => (
))}
{/* stats grid */}
DEX COMPLETION
47%
FOCUS HOURS
312
this year
STREAK
14d
{/* QR + footer */}
JOINED 2026-01-14 · NV-7104-AKLP
{[...Array(64)].map((_,i)=>{ const on=((i*7+i*i)%5)<2; return
; })}
); } // ═══ BATTLE ═════════════════════════════════════════════════════════════════ function BattleScreen({ go }) { const [myHP, setMyHP] = React.useState(42); const [opHP, setOpHP] = React.useState(58); const [log, setLog] = React.useState(["A wild Inkling appeared!", "Go, Codesprite!"]); const [busy, setBusy] = React.useState(false); const attack = (name, dmg) => { if (busy) return; setBusy(true); setLog(l => [...l, `Codesprite used ${name}!`]); setTimeout(() => setOpHP(h => Math.max(0, h - dmg)), 400); setTimeout(() => { const counterDmg = 6 + Math.floor(Math.random()*6); setLog(l => [...l, `Wild Inkling used Margin Note!`]); setMyHP(h => Math.max(0, h - counterDmg)); setBusy(false); }, 1200); }; return (
{/* arena */}
{/* hex floor */} {[...Array(20)].map((_,i)=>( ))} {[...Array(6)].map((_,i)=>( ))} {/* HUD panels */}
Codesprite
Lv.24 · Bond ⛓ 312h
Wild Inkling
Lv.18 · "She's spry."
{/* creatures */}
{/* bottom panel — move grid + log */}
{[ { name:'Compile Strike', type:'Code', pp:'15/15', dmg:18 }, { name:'Margin Pulse', type:'Spirit', pp:'10/10', dmg:14 }, { name:'Espresso Burst', type:'Caffeine', pp:'5/5', dmg:24 }, { name:'Zen Pulse', type:'Zen', pp:'8/8', dmg:10 }, ].map(m => ( ))}
BATTLE LOG
{log.slice(-4).map((line,i) =>
› {line}
)}
); } Object.assign(window, { TitleScreen, Onb1, Onb2, Onb3, Onb4, Onb5, LockInScreen, DistractionPopup, CatchScreen, CatchRevealScreen, DexScreen, CreatureScreen, TrainerCardScreen, BattleScreen, });