// Tessra v3.1 — Hidden Order · Coral (store production).
// Screens: Home, Daily, LevelMap, LevelPlay, Waitlist.
// Persists progress in localStorage. Mechanics unchanged from v3.
const { useState, useEffect, useRef, useMemo, useCallback } = React;
// Shared patch-engine (loaded before this file in Penrose Mosaic.html).
const { findFigureInTiling, vertexSignatureAt } = window.TessraFigureFinder;
const FIGURES_V2 = window.FIGURES_V2;
const patternForLevel = window.patternForLevel;
// ─── Persistence ──────────────────────────────────────────────────────────
const STORAGE_KEY = 'penrose-v3-progress';
function loadProgress() {
try {
const raw = localStorage.getItem(STORAGE_KEY);
if (!raw) return { unlocked: 1, dailyByDate: {}, onboarded: false };
const p = JSON.parse(raw);
return {
unlocked: Math.max(1, Math.min(21, p.unlocked || 1)),
dailyByDate: p.dailyByDate || {},
onboarded: !!p.onboarded,
};
} catch (e) {
return { unlocked: 1, dailyByDate: {}, onboarded: false };
}
}
function saveProgress(p) {
try { localStorage.setItem(STORAGE_KEY, JSON.stringify(p)); } catch (e) {}
}
const WAITLIST_KEY = 'penrose-v3-waitlist';
function loadWaitlist() {
try {
const raw = localStorage.getItem(WAITLIST_KEY);
return raw ? JSON.parse(raw) : [];
} catch (e) { return []; }
}
function saveWaitlistEntry(email) {
const list = loadWaitlist();
const entry = { email, at: new Date().toISOString() };
if (!list.some(x => x.email === email)) list.push(entry);
try { localStorage.setItem(WAITLIST_KEY, JSON.stringify(list)); } catch (e) {}
return entry;
}
// ─── Theme context (Coral in production — themes.js) ─────────────────────
const ColorsContext = React.createContext(window.TessraThemes ? window.TessraThemes.active : {});
function useC() { return React.useContext(ColorsContext); }
const MONO = 'JetBrains Mono, monospace';
const SERIF = 'Fraunces, serif';
const REDUCED_MOTION = typeof window !== 'undefined'
&& window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
function iconBtnStyle(C) {
return {
width: 36, height: 36, borderRadius: 12,
background: C.surfaceElevated, border: `1px solid ${C.outline}`,
display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
padding: 0,
};
}
function btnGhostStyle(C) {
return {
height: 40, padding: '0 16px', borderRadius: 20,
background: 'transparent', border: `1px solid ${C.outline}`,
color: C.textMuted, fontFamily: MONO,
fontSize: 10, letterSpacing: '0.22em', fontWeight: 700, cursor: 'pointer',
textTransform: 'uppercase',
};
}
function btnDangerStyle(C) {
return {
height: 40, padding: '0 16px', borderRadius: 20,
background: 'transparent', border: `1px solid ${C.disabled}`,
color: C.text, fontFamily: MONO,
fontSize: 10, letterSpacing: '0.22em', fontWeight: 700, cursor: 'pointer',
textTransform: 'uppercase',
};
}
function btnSolidStyle(C) {
return {
height: 48, padding: '0 22px', borderRadius: 20,
background: C.accent, color: C.bg,
fontFamily: MONO, fontSize: 11,
letterSpacing: '0.2em', fontWeight: 700, cursor: 'pointer',
border: 'none', textTransform: 'uppercase',
};
}
// ─── UI glyphs (no emoji) ────────────────────────────────────────────────
function LockGlyph({ size = 11, color }) {
const COLORS = useC();
const c = color || COLORS.lockedText || COLORS.textDim;
return (
);
}
function DoneDot({ size = 8, color }) {
const COLORS = useC();
const c = color || COLORS.outlineActive;
return (
);
}
function MicrocopyToast({ message }) {
const COLORS = useC();
if (!message) return null;
return (
);
}
// ─── Tiny haptic helper ──────────────────────────────────────────────────
function haptic(ms = 8) {
if (navigator.vibrate) {
try { navigator.vibrate(ms); } catch (e) {}
}
}
// ─── Easing ──────────────────────────────────────────────────────────────
function easeOutBack(t) {
const s = 1.70158;
return 1 + (s + 1) * Math.pow(t - 1, 3) + s * Math.pow(t - 1, 2);
}
// ─── DynamicLogo — animated Penrose patch that grows & resets in a loop ──
function DynamicLogo({ size = 120, scale = 16, glow = true }) {
const COLORS = useC();
const canvasRef = useRef(null);
useEffect(() => {
const canvas = canvasRef.current;
if (!canvas || !window.PenroseGeo) return;
canvas.width = size * 2; canvas.height = size * 2;
canvas.style.width = size + 'px'; canvas.style.height = size + 'px';
const ctx = canvas.getContext('2d');
ctx.scale(2, 2);
const { generateTiling, findCenterTile } = window.PenroseGeo;
let tiles, revealed, revealedAt, queue, queueSet;
let phase = 'grow', phaseStart = 0, lastReveal = 0;
let raf;
function newTiling() {
const pattern = 0.15 + Math.random() * 0.7;
tiles = generateTiling({ radius: 10, pattern });
if (!tiles || tiles.length === 0) return;
const cIdx = findCenterTile(tiles);
if (cIdx < 0) return;
revealed = new Set([cIdx]);
revealedAt = new Map([[cIdx, performance.now()]]);
queue = [];
queueSet = new Set();
for (const n of tiles[cIdx].neighbors) { queue.push(n); queueSet.add(n); }
phase = 'grow';
phaseStart = performance.now();
lastReveal = performance.now();
}
function tick(now) {
if (!tiles || tiles.length === 0) { raf = requestAnimationFrame(tick); return; }
ctx.clearRect(0, 0, size, size);
const cx = size / 2, cy = size / 2;
const toScreen = (x, y) => [cx + x * scale, cy - y * scale];
if (phase === 'grow') {
if (now - lastReveal > 130 && queue.length > 0) {
const id = queue.shift(); queueSet.delete(id);
if (!revealed.has(id)) {
revealed.add(id); revealedAt.set(id, now);
for (const n of tiles[id].neighbors) {
if (!revealed.has(n) && !queueSet.has(n)) { queue.push(n); queueSet.add(n); }
}
}
lastReveal = now;
}
if (revealed.size >= 28 && queue.length === 0) { phase = 'wait'; phaseStart = now; }
} else if (phase === 'wait') {
if (now - phaseStart > 1100) { phase = 'fade'; phaseStart = now; }
} else if (phase === 'fade') {
if (now - phaseStart > 500) { newTiling(); }
}
const fade = phase === 'fade' ? Math.max(0, 1 - (now - phaseStart) / 500) : 1;
for (const id of revealed) {
const t = tiles[id]; if (!t) continue;
const age = (now - (revealedAt.get(id) || 0)) / 320;
const grow = age >= 1 ? 1 : easeOutBack(Math.min(1, Math.max(0, age)));
const tcx = t.mean.x, tcy = t.mean.y;
ctx.beginPath();
t.verts.forEach((v, i) => {
const [sx, sy] = toScreen(tcx + (v.x - tcx) * grow, tcy + (v.y - tcy) * grow);
if (i === 0) ctx.moveTo(sx, sy); else ctx.lineTo(sx, sy);
});
ctx.closePath();
ctx.fillStyle = t.type === 'thick' ? COLORS.thick : COLORS.thin;
ctx.globalAlpha = 0.9 * fade;
ctx.fill();
ctx.lineWidth = 0.8;
ctx.strokeStyle = t.type === 'thick' ? COLORS.thickEdge : COLORS.thinEdge;
ctx.globalAlpha = 0.55 * fade;
ctx.stroke();
}
ctx.globalAlpha = 1;
raf = requestAnimationFrame(tick);
}
newTiling();
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [size, scale, COLORS]);
return (
);
}
// ─── Top burger bar (in-frame) ───────────────────────────────────────────
function TopBar({ title, onBack, onMenu, right }) {
const COLORS = useC();
const stroke = COLORS.text;
return (
);
}
// ─── Side menu ────────────────────────────────────────────────────────────
function SideMenu({ open, onClose, goto }) {
const COLORS = useC();
if (!open) return null;
const items = [
{ id: 'home', label: 'Home' },
{ id: 'daily', label: 'Mosaic of the Day' },
{ id: 'levelmap', label: 'Levels' },
{ id: 'waitlist', label: 'Full version' },
...(window.TessraThemes.showPicker ? [{ id: 'proto-sun', label: 'Proto · Sun' }] : []),
];
return (
{items.map(it => (
{ e.stopPropagation(); goto(it.id); }}
style={{
fontFamily: 'JetBrains Mono, monospace', fontSize: 22, fontWeight: 700,
letterSpacing: '0.1em', textTransform: 'uppercase',
color: COLORS.text, cursor: 'pointer', padding: '8px 0',
}}>
{it.label}
))}
);
}
// ─── HOME ─────────────────────────────────────────────────────────────────
function HomeScreen({ goto, progress, daily }) {
const COLORS = useC();
const completed = Math.min(progress.unlocked - 1, 20);
const unlocked = Math.min(progress.unlocked, 20);
return (
goto('menu')} />
DISCOVER · REVEAL
Tessra
Elegant discovery in an aperiodic mosaic.
goto('daily')} accent={COLORS.accent}>
MOSAIC OF THE DAY
{daily.date}
SEED · {daily.patternId}
One shared tiling every UTC day. Tap outward — watch the hidden order emerge.
goto('levelmap')} accent={COLORS.accent2}>
LEVELS
{unlocked}/20
{completed >= 20 ? 'COMPLETED' : (completed > 0 ? 'CONTINUE' : 'BEGIN')}
Twenty named Penrose figures — from Twin Rhombs to Twin Suns.
);
}
function Card({ children, onClick, accent }) {
const COLORS = useC();
return (
e.currentTarget.style.transform = 'scale(0.985)'}
onPointerUp={(e) => e.currentTarget.style.transform = ''}
onPointerLeave={(e) => e.currentTarget.style.transform = ''}>
{accent &&
}
{children}
{children}
;
}
function BigTitle({ children }) {
const COLORS = useC();
return {children}
;
}
function MiniRhomb({ type, color }) {
const R = window.LevelEngine.RHOMB[type];
const long = R.long, short = R.short;
const verts = [
{ x: long, y: 0 }, { x: 0, y: short }, { x: -long, y: 0 }, { x: 0, y: -short },
];
const path = verts.map((v, i) => (i === 0 ? 'M' : 'L') + (24 + v.x * 20) + ' ' + (24 - v.y * 20)).join(' ') + ' Z';
return (
);
}
// ─── DAILY ────────────────────────────────────────────────────────────────
// Canonical figure signatures detected in the Daily mosaic.
const DAILY_FIGURES = [
{ key: 'sun', label: 'Sun', sig: 'Ta,Ta,Ta,Ta,Ta' },
{ key: 'star', label: 'Star', sig: 'ta,ta,ta,ta,ta,ta,ta,ta,ta,ta' },
{ key: 'king', label: 'King', sig: 'Ta,Ta,Ta,ta,ta,ta,ta' },
{ key: 'jack', label: 'Jack', sig: 'Ta,Ta,Ta,Ta,ta,ta' },
{ key: 'queen', label: 'Queen', sig: 'Ta,To,To,ta,ta' },
{ key: 'ace', label: 'Ace', sig: 'Ta,To,ta,to' },
{ key: 'deuce', label: 'Deuce', sig: 'Ta,to,to' },
];
function DailyScreen({ goto, daily, dailyState, updateDailyState }) {
const COLORS = useC();
const canvasRef = useRef(null);
const [tiling, setTiling] = useState(null);
const [centerId, setCenterId] = useState(-1);
const [revealed, setRevealed] = useState(() => new Set(dailyState.revealed || []));
const animRef = useRef(new Map()); // tileId → animation start time
const ripplesRef = useRef([]); // [{x, y, start}] in world coords
// Vertex → list of tile ids that share it (computed once when tiling loads).
const vertexMap = useMemo(() => {
if (!tiling) return null;
const m = new Map();
tiling.forEach((t, i) => t.vertexKeys.forEach(vk => {
if (!m.has(vk)) m.set(vk, []);
m.get(vk).push(i);
}));
return m;
}, [tiling]);
// Count canonical figures that are FULLY enclosed by revealed tiles.
const figureCounts = useMemo(() => {
const counts = Object.fromEntries(DAILY_FIGURES.map(f => [f.key, 0]));
if (!tiling || !vertexMap) return counts;
for (const [vk, ids] of vertexMap) {
if (ids.length < 3) continue;
if (!ids.every(id => revealed.has(id))) continue;
const sig = vertexSignatureAt(tiling, ids, vk);
for (const f of DAILY_FIGURES) {
if (sig === f.sig) { counts[f.key]++; break; }
}
}
return counts;
}, [tiling, vertexMap, revealed]);
// Detect newly-completed figure for a brief celebrate animation.
const prevCountsRef = useRef(figureCounts);
const [celebrating, setCelebrating] = useState(null);
useEffect(() => {
const prev = prevCountsRef.current;
for (const f of DAILY_FIGURES) {
if (figureCounts[f.key] > (prev[f.key] || 0)) {
setCelebrating({ key: f.key, at: performance.now() });
haptic(15);
break;
}
}
prevCountsRef.current = figureCounts;
}, [figureCounts]);
useEffect(() => {
if (!celebrating) return;
const id = setTimeout(() => setCelebrating(null), 1200);
return () => clearTimeout(id);
}, [celebrating]);
// Generate tiling for today's seed.
useEffect(() => {
const tiles = window.PenroseGeo.generateTiling({ radius: 18, pattern: daily.pattern });
const c = window.PenroseGeo.findCenterTile(tiles);
setTiling(tiles);
setCenterId(c);
if (!dailyState.revealed || dailyState.revealed.length === 0) {
const initial = new Set([c]);
setRevealed(initial);
updateDailyState({ revealed: [c] });
}
}, [daily.patternId]);
// Frontier: tiles adjacent to a revealed tile but not yet revealed.
const frontier = useMemo(() => {
if (!tiling) return new Set();
const f = new Set();
revealed.forEach(id => {
tiling[id].neighbors.forEach(n => { if (!revealed.has(n)) f.add(n); });
});
return f;
}, [tiling, revealed]);
// Draw.
useEffect(() => {
if (!tiling) return;
const canvas = canvasRef.current;
if (!canvas) return;
const dpr = window.devicePixelRatio || 1;
const rect = canvas.getBoundingClientRect();
canvas.width = rect.width * dpr; canvas.height = rect.height * dpr;
const ctx = canvas.getContext('2d');
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
let raf;
function frame() {
const w = rect.width, h = rect.height;
ctx.clearRect(0, 0, w, h);
ctx.fillStyle = COLORS.bg;
ctx.fillRect(0, 0, w, h);
// Fit camera around revealed tiles + small buffer.
let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
const tilesShown = new Set([...revealed, ...frontier]);
tilesShown.forEach(id => {
tiling[id].verts.forEach(v => {
if (v.x < minX) minX = v.x; if (v.x > maxX) maxX = v.x;
if (v.y < minY) minY = v.y; if (v.y > maxY) maxY = v.y;
});
});
const pad = 1.5;
const bw = (maxX - minX) + pad * 2, bh = (maxY - minY) + pad * 2;
const scale = Math.min(w / bw, h / bh) * 0.95;
const cx = (minX + maxX) / 2, cy = (minY + maxY) / 2;
const ox = w / 2 - cx * scale, oy = h / 2 + cy * scale;
const project = (p) => ({ x: ox + p.x * scale, y: oy - p.y * scale });
const now = performance.now();
let stillAnimating = false;
// Draw frontier (pulsing outline) BEHIND revealed tiles.
const pulse = REDUCED_MOTION ? 0.65 : (0.5 + 0.5 * Math.sin(now / 520));
frontier.forEach(id => {
const t = tiling[id];
ctx.beginPath();
t.verts.forEach((v, i) => {
const p = project(v);
if (i === 0) ctx.moveTo(p.x, p.y); else ctx.lineTo(p.x, p.y);
});
ctx.closePath();
ctx.fillStyle = COLORS.tappable;
ctx.globalAlpha = 0.18 + 0.12 * pulse;
ctx.fill();
ctx.globalAlpha = 1;
ctx.strokeStyle = COLORS.tappableEdge;
ctx.setLineDash([4, 4]);
ctx.lineWidth = 1;
ctx.globalAlpha = 0.5 + 0.35 * pulse;
ctx.stroke();
ctx.globalAlpha = 1;
ctx.setLineDash([]);
});
// Draw revealed tiles with easeOutBack pop-in.
revealed.forEach(id => {
const t = tiling[id];
const anim = animRef.current.get(id);
let s = 1;
if (anim) {
const dt = (now - anim) / 420;
if (dt < 1) {
stillAnimating = true;
s = easeOutBack(Math.max(0, dt));
} else {
animRef.current.delete(id);
}
}
const tcx = t.verts.reduce((a, v) => a + v.x, 0) / 4;
const tcy = t.verts.reduce((a, v) => a + v.y, 0) / 4;
ctx.beginPath();
t.verts.forEach((v, i) => {
const sx = ox + (tcx + (v.x - tcx) * s) * scale;
const sy = oy - (tcy + (v.y - tcy) * s) * scale;
if (i === 0) ctx.moveTo(sx, sy); else ctx.lineTo(sx, sy);
});
ctx.closePath();
ctx.fillStyle = t.type === 'thick' ? COLORS.thick : COLORS.thin;
ctx.globalAlpha = 0.92 * Math.min(1, Math.max(0, s));
ctx.fill();
ctx.globalAlpha = 1;
ctx.strokeStyle = t.type === 'thick' ? COLORS.thickEdge : COLORS.thinEdge;
ctx.lineWidth = 0.8;
ctx.globalAlpha = 0.55;
ctx.stroke();
ctx.globalAlpha = 1;
});
// Soft warm glow around revealed cluster.
if (revealed.size > 0 && !REDUCED_MOTION) {
let gx = 0, gy = 0;
revealed.forEach(id => {
const t = tiling[id];
gx += t.verts.reduce((a, v) => a + v.x, 0) / 4;
gy += t.verts.reduce((a, v) => a + v.y, 0) / 4;
});
gx /= revealed.size; gy /= revealed.size;
const gp = project({ x: gx, y: gy });
const breathe = 0.12 + 0.06 * Math.sin(now / 1400);
const gr = scale * 2.8;
const grad = ctx.createRadialGradient(gp.x, gp.y, 0, gp.x, gp.y, gr);
grad.addColorStop(0, COLORS.outlineActive + '44');
grad.addColorStop(1, 'transparent');
ctx.globalCompositeOperation = 'lighter';
ctx.fillStyle = grad;
ctx.globalAlpha = breathe;
ctx.beginPath();
ctx.arc(gp.x, gp.y, gr, 0, Math.PI * 2);
ctx.fill();
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = 1;
}
// Draw ripples.
for (let i = ripplesRef.current.length - 1; i >= 0; i--) {
const r = ripplesRef.current[i];
const dt = (now - r.start) / 900;
if (dt > 1) { ripplesRef.current.splice(i, 1); continue; }
stillAnimating = true;
const ease = 1 - Math.pow(1 - dt, 3);
const rad = ease * 5 * scale;
const sx = ox + r.x * scale, sy = oy - r.y * scale;
ctx.beginPath();
ctx.arc(sx, sy, rad, 0, Math.PI * 2);
ctx.strokeStyle = COLORS.glow;
ctx.globalAlpha = (1 - dt) * 0.55;
ctx.lineWidth = 1.5;
ctx.stroke();
ctx.globalAlpha = 1;
}
stillAnimating = stillAnimating || frontier.size > 0;
if (stillAnimating) raf = requestAnimationFrame(frame);
}
frame();
return () => raf && cancelAnimationFrame(raf);
}, [tiling, revealed, frontier, COLORS]);
// Tap.
const onTap = useCallback((e) => {
if (!tiling) return;
const canvas = canvasRef.current;
const rect = canvas.getBoundingClientRect();
const cx = (e.clientX !== undefined ? e.clientX : e.touches[0].clientX) - rect.left;
const cy = (e.clientY !== undefined ? e.clientY : e.touches[0].clientY) - rect.top;
const w = rect.width, h = rect.height;
// Same fit logic as draw.
let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
const tilesShown = new Set([...revealed, ...frontier]);
tilesShown.forEach(id => {
tiling[id].verts.forEach(v => {
if (v.x < minX) minX = v.x; if (v.x > maxX) maxX = v.x;
if (v.y < minY) minY = v.y; if (v.y > maxY) maxY = v.y;
});
});
const pad = 1.5;
const bw = (maxX - minX) + pad * 2, bh = (maxY - minY) + pad * 2;
const scale = Math.min(w / bw, h / bh) * 0.95;
const ccx = (minX + maxX) / 2, ccy = (minY + maxY) / 2;
const ox = w / 2 - ccx * scale, oy = h / 2 + ccy * scale;
const wx = (cx - ox) / scale;
const wy = (oy - cy) / scale;
// Hit-test frontier first, then revealed (no-op).
for (const id of frontier) {
if (window.PenroseGeo.pointInPoly(wx, wy, tiling[id].verts)) {
const next = new Set(revealed); next.add(id);
const now = performance.now();
animRef.current.set(id, now);
const tcx = tiling[id].verts.reduce((a, v) => a + v.x, 0) / 4;
const tcy = tiling[id].verts.reduce((a, v) => a + v.y, 0) / 4;
ripplesRef.current.push({ x: tcx, y: tcy, start: now });
setRevealed(next);
updateDailyState({ revealed: [...next] });
haptic(10);
return;
}
}
}, [tiling, revealed, frontier, updateDailyState]);
const [countdown, setCountdown] = useState('');
useEffect(() => {
const tick = () => {
const ms = window.PenroseDaily.msUntilTomorrowUTC();
const h = Math.floor(ms / 3600000);
const m = Math.floor((ms % 3600000) / 60000);
const s = Math.floor((ms % 60000) / 1000);
setCountdown(String(h).padStart(2,'0')+':'+String(m).padStart(2,'0')+':'+String(s).padStart(2,'0'));
};
tick();
const id = setInterval(tick, 1000);
return () => clearInterval(id);
}, []);
return (
goto('home')} />
{daily.date}
NEXT IN {countdown} UTC
{/* Figure counter — pulses whichever was just completed. */}
{DAILY_FIGURES.map(f => {
const count = figureCounts[f.key];
const isCelebrating = celebrating && celebrating.key === f.key;
const active = count > 0;
return (
{active && }
{f.label}
{count}
);
})}
);
}
function LevelMapScreen({ goto, progress, startLevel }) {
const COLORS = useC();
return (
goto('home')} />
{Math.min(progress.unlocked, 20)} / 20 UNLOCKED · {Math.min(progress.unlocked - 1, 20)} COMPLETED
STORE · CORAL
{window.Levels.map((lvl) => {
const locked = lvl.id > progress.unlocked;
const done = lvl.id < progress.unlocked;
const current = lvl.id === progress.unlocked;
return (
!locked && startLevel(lvl.id)}
style={{
position: 'relative', padding: '14px 12px 16px',
borderRadius: 10,
border: `1px solid ${done ? COLORS.outlineActive : (current ? COLORS.outlineActive + 'aa' : COLORS.outline)}`,
background: locked ? COLORS.lockedSurface : COLORS.surface,
cursor: locked ? 'default' : 'pointer',
opacity: locked ? 0.4 : 1,
boxShadow: current ? `0 0 14px ${COLORS.glow}` : 'none',
aspectRatio: '1',
display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
}}>
{String(lvl.id).padStart(2, '0')}
{done && }
{locked && }
{lvl.title}
);
})}
goto('waitlist')} style={{
gridColumn: '1 / span 2',
marginTop: 4, padding: '18px 16px',
borderRadius: 14, border: '1px dashed ' + COLORS.outlineStrong,
cursor: 'pointer',
display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'flex-start',
}}>
COMING SOON
FULL VERSION · NOTIFY ME
Sound, infinite canvas, new figures — leave your email for launch day.
);
}
function LevelThumb({ levelId, faded }) {
const COLORS = useC();
const glyph = useMemo(() => {
if (!window.TessraGlyphs) return null;
return window.TessraGlyphs.resolve(levelId, { size: 70, pad: 0.38 });
}, [levelId]);
const size = 70;
if (!glyph || !glyph.ok) {
return (
);
}
return (
);
}
// ─── LEVEL PLAY ───────────────────────────────────────────────────────────
function LevelPlayScreen({ goto, levelId, progress, setProgress }) {
// Dispatch migrated levels to the patch-based engine (separate component
// so React keeps hook order stable inside each branch).
if (FIGURES_V2[levelId]) {
const fig = FIGURES_V2[levelId];
return ;
}
return ;
}
function LevelPlayLegacy({ goto, levelId, progress, setProgress }) {
const COLORS = useC();
const level = window.Levels[levelId - 1];
const [filled, setFilled] = useState(() => level.slots.map(() => false));
const [wonAt, setWonAt] = useState(0); // 0 = not won
const animRef = useRef(new Map());
const ripplesRef = useRef([]);
const canvasRef = useRef(null);
useEffect(() => {
setFilled(level.slots.map(() => false));
setWonAt(0);
animRef.current.clear();
ripplesRef.current = [];
}, [levelId]);
const allFilled = filled.every(Boolean);
useEffect(() => {
if (allFilled && !wonAt) {
setWonAt(performance.now());
haptic(20);
// Unlock next level.
if (progress.unlocked === levelId) {
const next = { ...progress, unlocked: Math.min(21, levelId + 1) };
setProgress(next);
saveProgress(next);
}
}
}, [allFilled, wonAt, levelId, progress, setProgress]);
// Draw.
useEffect(() => {
const canvas = canvasRef.current;
if (!canvas) return;
const dpr = window.devicePixelRatio || 1;
const rect = canvas.getBoundingClientRect();
canvas.width = rect.width * dpr; canvas.height = rect.height * dpr;
const ctx = canvas.getContext('2d');
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
let raf;
function frame() {
const w = rect.width, h = rect.height;
ctx.clearRect(0, 0, w, h);
ctx.fillStyle = COLORS.bg;
ctx.fillRect(0, 0, w, h);
const t = window.LevelEngine.fitTransform(level.slots, w, h, 0.6);
const now = performance.now();
// Win glow background.
if (wonAt) {
const dt = Math.min(1, (now - wonAt) / 800);
const k = 1 - Math.pow(1 - dt, 3);
ctx.fillStyle = 'rgba(255,213,107,' + (0.06 * k) + ')';
ctx.fillRect(0, 0, w, h);
}
// Dashed silhouettes for unfilled slots.
const pulse = 0.55 + 0.45 * Math.sin(now / 400);
level.slots.forEach((s, i) => {
if (filled[i]) return;
const verts = window.LevelEngine.rhombVerts(s).map(p => window.LevelEngine.worldToScreen(p, t));
ctx.beginPath();
verts.forEach((v, j) => j === 0 ? ctx.moveTo(v.x, v.y) : ctx.lineTo(v.x, v.y));
ctx.closePath();
ctx.strokeStyle = 'rgba(255,255,255,' + (0.20 + 0.18 * pulse) + ')';
ctx.setLineDash([6, 5]);
ctx.lineWidth = 1.2;
ctx.stroke();
ctx.setLineDash([]);
ctx.fillStyle = 'rgba(255,255,255,0.025)';
ctx.fill();
});
// Filled rhombi with easeOutBack pop-in.
let animating = false;
level.slots.forEach((s, i) => {
if (!filled[i]) return;
const anim = animRef.current.get(i);
let sc = 1;
if (anim) {
const dt = (now - anim) / 460;
if (dt < 1) { animating = true; sc = easeOutBack(Math.max(0, dt)); }
else { animRef.current.delete(i); sc = 1; }
}
const cx = s.cx * t.scale + t.ox;
const cy = -s.cy * t.scale + t.oy;
const verts = window.LevelEngine.rhombVerts(s).map(p => {
const px = t.ox + p.x * t.scale;
const py = t.oy - p.y * t.scale;
return { x: cx + (px - cx) * sc, y: cy + (py - cy) * sc };
});
ctx.beginPath();
verts.forEach((v, j) => j === 0 ? ctx.moveTo(v.x, v.y) : ctx.lineTo(v.x, v.y));
ctx.closePath();
ctx.fillStyle = s.type === 'THICK' ? COLORS.thick : COLORS.thin;
ctx.globalAlpha = 0.92 * Math.min(1, Math.max(0, sc));
ctx.fill();
ctx.globalAlpha = 1;
ctx.strokeStyle = s.type === 'THICK' ? COLORS.thickEdge : COLORS.thinEdge;
ctx.lineWidth = 0.8;
ctx.globalAlpha = 0.55;
ctx.stroke();
ctx.globalAlpha = 1;
});
// Ripples.
for (let i = ripplesRef.current.length - 1; i >= 0; i--) {
const r = ripplesRef.current[i];
const dt = (now - r.start) / 900;
if (dt > 1) { ripplesRef.current.splice(i, 1); continue; }
animating = true;
const ease = 1 - Math.pow(1 - dt, 3);
const rad = ease * 2.2 * t.scale;
const sx = t.ox + r.x * t.scale, sy = t.oy - r.y * t.scale;
ctx.beginPath();
ctx.arc(sx, sy, rad, 0, Math.PI * 2);
ctx.strokeStyle = COLORS.glow;
ctx.globalAlpha = (1 - dt) * 0.5;
ctx.lineWidth = 1.5;
ctx.stroke();
ctx.globalAlpha = 1;
}
if (animating || (wonAt && now - wonAt < 1500) || !allFilled) {
raf = requestAnimationFrame(frame);
}
}
frame();
return () => raf && cancelAnimationFrame(raf);
}, [level, filled, wonAt, allFilled, COLORS]);
const onTap = useCallback((e) => {
if (wonAt) return;
const canvas = canvasRef.current;
const rect = canvas.getBoundingClientRect();
const cx = (e.clientX !== undefined ? e.clientX : e.touches[0].clientX) - rect.left;
const cy = (e.clientY !== undefined ? e.clientY : e.touches[0].clientY) - rect.top;
const w = rect.width, h = rect.height;
const t = window.LevelEngine.fitTransform(level.slots, w, h, 0.6);
const world = window.LevelEngine.screenToWorld({ x: cx, y: cy }, t);
const i = window.LevelEngine.pickSlot(level.slots, filled, world.x, world.y);
if (i >= 0) {
const next = filled.slice(); next[i] = true; setFilled(next);
const now = performance.now();
animRef.current.set(i, now);
ripplesRef.current.push({ x: level.slots[i].cx, y: level.slots[i].cy, start: now });
haptic(10);
}
}, [level, filled, wonAt]);
const nextId = level.id + 1;
const hasNext = nextId <= 20;
return (
goto('levelmap')} />
{wonAt > 0 && }
{wonAt > 0 ? (
hasNext
?
:
) : (
{filled.filter(Boolean).length} / {level.slots.length}
)}
);
}
// ─── Figure reveal — Variant A (dry/scientific) ──────────────────────────
function FigureRevealOverlay({ level, startedAt, headline }) {
const COLORS = useC();
const [opacity, setOpacity] = useState(0);
useEffect(() => {
let raf;
function tick() {
const dt = (performance.now() - startedAt) / 600;
const v = Math.max(0, Math.min(1, dt));
setOpacity(1 - Math.pow(1 - v, 3));
if (dt < 1) raf = requestAnimationFrame(tick);
}
raf = requestAnimationFrame(tick);
return () => raf && cancelAnimationFrame(raf);
}, [startedAt]);
const label = level.caption || level.figure || level.title || '';
if (!label && !headline) return null;
return (
{headline && (
{headline}
)}
{label}
goto(isProto ? 'home' : 'levelmap')} />
{loadError ? (
Patch not ready — tap to reshuffle the tiling.
) : (
)}
{!loadError && (
<>
{/* Zoom controls — bottom-right of canvas */}
{[['+', () => setZoom(z => Math.min(2.5, +(z + 0.25).toFixed(2)))],
['−', () => setZoom(z => Math.max(0.5, +(z - 0.25).toFixed(2)))]].map(([sym, fn]) => (
))}
{wonAt > 0 &&
}
)}
{wonAt > 0 ? (
hasNext
?
: (isProto
? null
:
)
) : (
{filled.size} / {targetIds.length || '?'}
)}
);
}
function ProtoSunScreen({ goto }) {
// Thin wrapper — patch-based engine in isProto mode regenerates on RESET.
// Showcases canonical Sun (5 thicks at one acute vertex).
return ;
}
// ─── ONBOARDING ───────────────────────────────────────────────────────────
// Static rhomb illustration (used in onboarding slide 1).
function RhombIcon({ type, size = 80 }) {
const COLORS = useC();
const acuteDeg = type === 'thick' ? 72 : 36;
const long = type === 'thick' ? 0.809 : 0.951;
const short = type === 'thick' ? 0.588 : 0.309;
const s = size * 0.45;
const pts = [
[ long * s, 0],
[0, short * s],
[-long * s, 0],
[0, -short * s],
];
const fill = type === 'thick' ? COLORS.thick : COLORS.thin;
const stroke = type === 'thick' ? COLORS.thickEdge : COLORS.thinEdge;
return (
);
}
function OnboardingScreen({ onDone }) {
const COLORS = useC();
const [idx, setIdx] = useState(0);
const last = 2;
const slides = [
{
visual: (
),
title: 'TWIN RHOMBS',
lines: ['Thick · 72° acute.', 'Thin · 36° acute.', 'That is all.'],
},
{
visual: (
),
title: 'HIDDEN ORDER',
lines: [
'Sir Roger Penrose, 1974.',
'Patterns that never repeat —',
'symmetry that always returns.',
],
},
{
visual: (
),
title: 'DISCOVER',
lines: [
'Find Sun, Star, Ace — and seventeen more.',
'Reveal each figure inside the patch.',
'Return daily for a new mosaic.',
],
link: 'https://en.wikipedia.org/wiki/Penrose_tiling',
},
];
const cur = slides[idx];
return (
{/* Skip — top right, below status bar */}
{/* Visual */}
{cur.visual}
{cur.title}
{cur.lines.map((l, i) =>
{l}
)}
{cur.link && (
LEARN MORE →
)}
{/* Dots */}
{slides.map((_, i) => (
))}
{/* Next / Start */}
goto('levelmap')} />
TESSRA · CORAL
Full Tessra
You finished the store preview. The full app adds sound, infinite canvas,
and dozens more figures — we will email you on launch day.
{done ? (
You are on the list
We saved {email.trim().toLowerCase()}.
No spam — one note when the full build ships.
) : (
{ setEmail(e.target.value); setError(''); }}
onKeyDown={(e) => e.key === 'Enter' && submit()}
placeholder="you@example.com"
autoComplete="email"
style={{
height: 48, padding: '0 14px', borderRadius: 12,
border: `1px solid ${error ? '#c45c5c' : COLORS.outline}`,
background: COLORS.surface, color: COLORS.text,
fontFamily: 'Inter, system-ui, sans-serif', fontSize: 15,
outline: 'none',
}}
/>
{error &&
{error}
}
One email on launch day. No spam.
)}
{!done && (
)}
);
}
// ─── Theme switcher (5 presets) ───────────────────────────────────────────
function ThemeStrip({ themeId, onSelect }) {
const COLORS = useC();
const themes = window.TessraThemes.list;
return (
{themes.map(t => {
const active = t.id === themeId;
return (
);
})}
);
}
// ─── ROOT ─────────────────────────────────────────────────────────────────
function PenroseApp() {
const [themeId, setThemeId] = useState(() => window.TessraThemes.loadThemeId());
const colors = useMemo(() => window.TessraThemes.build(themeId), [themeId]);
const pickTheme = useCallback((id) => {
setThemeId(id);
window.TessraThemes.saveThemeId(id);
window.TessraTokens = window.TessraThemes.build(id);
}, []);
const [progress, setProgress] = useState(loadProgress);
const [screen, setScreen] = useState('home');
const [levelId, setLevelId] = useState(1);
const [menuOpen, setMenuOpen] = useState(false);
const daily = useMemo(() => window.PenroseDaily.getDaily(), []);
const dailyState = progress.dailyByDate[daily.date] || { revealed: [] };
const updateDailyState = useCallback((patch) => {
const next = {
...progress,
dailyByDate: { ...progress.dailyByDate, [daily.date]: { ...dailyState, ...patch } },
};
setProgress(next);
saveProgress(next);
}, [progress, daily.date, dailyState]);
const goto = useCallback((target) => {
if (target === 'menu') { setMenuOpen(true); return; }
if (target.startsWith && target.startsWith('level:')) {
const id = parseInt(target.slice(6), 10);
setLevelId(id); setScreen('levelplay'); setMenuOpen(false); return;
}
setScreen(target);
setMenuOpen(false);
}, []);
const startLevel = useCallback((id) => {
setLevelId(id); setScreen('levelplay');
}, []);
const shell = (body) => (
{body}
{window.TessraThemes.showPicker && (
)}
);
// First-launch onboarding: shown only until user finishes / skips it.
if (!progress.onboarded) {
return shell(
{
const next = { ...progress, onboarded: true };
setProgress(next); saveProgress(next);
}} />
);
}
let content;
if (screen === 'home') content = ;
else if (screen === 'daily') content = ;
else if (screen === 'levelmap') content = ;
else if (screen === 'levelplay') content = ;
else if (screen === 'waitlist') content = ;
else if (screen === 'proto-sun') content = ;
return shell(
<>
{content}
setMenuOpen(false)} goto={goto} />
);
}
window.PenroseApp = PenroseApp;