/* global React */ const { useEffect, useRef } = React; /* ────────────────────────────────────────────────────────────────────── * Phone mockup with bespoke per-app screens * ────────────────────────────────────────────────────────────────────── */ function PhoneMock({ app }) { return (
{app.screen}
); } /* Each screen renderer is intentionally simple — boxes/grids/lines only. */ const ScreenSudoku = () => { const cells = [ [5,3,0,0,7,0,0,0,2], [6,0,0,1,9,5,0,0,0], [0,9,8,0,0,0,0,6,0], [8,0,0,0,6,0,0,0,3], [4,0,0,8,0,3,0,0,1], [7,0,0,0,2,0,0,0,6], [0,6,0,0,0,0,2,8,0], [0,0,0,4,1,9,0,0,5], [0,0,0,0,8,0,0,7,9], ]; return (
FUN SUDOKU · EASY
{cells.flat().map((n,i) => { const row = Math.floor(i/9), col = i%9; const thickB = (row+1) % 3 === 0 && row !== 8; const thickR = (col+1) % 3 === 0 && col !== 8; return (
{n || ""}
); })}
{[1,2,3,4,5,6,7,8,9].map(n => (
{n}
))}
); }; const ScreenGravity = () => (
LV 07
×3
{/* stars */} {[[20,40],[80,30],[140,80],[40,120],[120,140],[60,200],[100,260]].map(([x,y],i) => (
))} {/* orbit ellipses */}
00:42
); const ScreenTracker = () => { const days = Array.from({ length: 49 }, (_, i) => { const r = (i * 13 + 7) % 5; return r; }); const palette = ["#EAE2D2", "#E4C4B0", "#D89880", "#C25B3F", "#8B3F2A"]; return (
October
14d streak
Read 30
minutes
{days.map((v,i) => (
))}
WATER
+ NEW
); }; const ScreenFlapzy = () => (
27
{/* clouds */}
{/* pipes */}
{/* bird */}
); const Screen195 = () => (
QUESTION 14 / 25
{/* Flag placeholder — three vertical stripes */}
Which country flies
this flag?
{["Italy","France","Netherlands","Russia"].map((c,i) => (
{c} {["A","B","C","D"][i]}
))}
); const ScreenComing = () => (
?

SOON
); window.PhoneMock = PhoneMock; window.Screens = { ScreenSudoku, ScreenGravity, ScreenTracker, ScreenFlapzy, Screen195, ScreenComing };