{/* Dynamic logo */}

{/* Tagline above title */}

APERIODIC · MOSAIC

{/* Title */}

PENROSE

{/* Mode buttons — vertical */}

{MODES.map(({ id, label, sub }) => ( ))}

); } function App() { const tweaksDef = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}]; const [tweaks, setTweak] = tweaksDef; const palette = VIBES[tweaks.vibe] || VIBES.deep; const [screen, setScreen] = useState('onboarding'); const [briefingMode, setBriefingMode] = useState('zen'); const [showMenu, setShowMenu] = useState(false); const [currentLevel, setCurrentLevel] = useState(null); const currentLevelRef = useRef(null); currentLevelRef.current = currentLevel; const [game, setGame] = useState(() => window.PenroseGame.createGame({ mode: 'zen' })); const gameRef = useRef(game); gameRef.current = game; const wonRef = useRef(false); const [, force] = useState(0); useEffect(() => { wonRef.current = false; return game.subscribe(() => { force(n => n + 1); const gs = gameRef.current.state; if (currentLevelRef.current && !wonRef.current && gs.placed >= 1) { wonRef.current = true; setTimeout(() => setScreen('win'), 800); } }); }, [game]); const canvasRef = useRef(null); const cameraRef = useRef({ x: 0, y: 0, scale: 40, targetScale: 40, targetX: 0, targetY: 0 }); const dprRef = useRef(2); const sizeRef = useRef({ w: 390, h: 700 }); const tweaksRef = useRef(tweaks); tweaksRef.current = tweaks; const paletteRef = useRef(palette); paletteRef.current = palette; // Resize useEffect(() => { function fit() { const c = canvasRef.current; if (!c) return; const parent = c.parentElement; const w = parent.clientWidth, h = parent.clientHeight; const dpr = Math.min(window.devicePixelRatio || 1, 2); dprRef.current = dpr; sizeRef.current = { w, h }; c.width = w * dpr; c.height = h * dpr; c.style.width = w + 'px'; c.style.height = h + 'px'; } fit(); const ro = new ResizeObserver(fit); if (canvasRef.current) ro.observe(canvasRef.current.parentElement); return () => ro.disconnect(); }, []); // Render loop with auto-camera useEffect(() => { window.__penroseEffectFired = (window.__penroseEffectFired || 0) + 1; let raf; let frames = 0; function tick() { frames++; window.__penroseFrames = frames; const game = gameRef.current; const cam = cameraRef.current; const { w, h } = sizeRef.current; const tiles = game.state.tiles; // Compute bbox of revealed tile vertices (camera follows revealed area) let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity; const ids = game.state.revealOrder; for (const id of ids) { const t = tiles[id]; for (const v of t.verts) { if (v.x < minX) minX = v.x; if (v.y < minY) minY = v.y; if (v.x > maxX) maxX = v.x; if (v.y > maxY) maxY = v.y; } } if (!isFinite(minX)) { minX = -1; maxX = 1; minY = -1; maxY = 1; } const cx = (minX + maxX) / 2; const cy = (minY + maxY) / 2; // Add padding by including 1.5 ring of neighbors visually const spanX = (maxX - minX) || 1; const spanY = (maxY - minY) || 1; const margin = 2.4; // unit-edges of breathing const fitScale = Math.min(w / (spanX + margin * 2), h / (spanY + margin * 2)); const baseScale = tweaksRef.current.tileScale; const targetScale = tweaksRef.current.autoCamera ? Math.min(baseScale, Math.max(16, fitScale)) : baseScale; cam.targetScale = targetScale; cam.targetX = cx; cam.targetY = cy; const k = 0.08; cam.x += (cam.targetX - cam.x) * k; cam.y += (cam.targetY - cam.y) * k; cam.scale += (cam.targetScale - cam.scale) * k; render(); raf = requestAnimationFrame(tick); } raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); function worldToScreen(x, y) { const { w, h } = sizeRef.current; const cam = cameraRef.current; return { x: w / 2 + (x - cam.x) * cam.scale, y: h / 2 + (y - cam.y) * cam.scale }; } function screenToWorld(sx, sy) { const { w, h } = sizeRef.current; const cam = cameraRef.current; return { x: (sx - w / 2) / cam.scale + cam.x, y: (sy - h / 2) / cam.scale + cam.y }; } function render() { const game = gameRef.current; const c = canvasRef.current; if (!c) return; const ctx = c.getContext('2d'); const dpr = dprRef.current; const { w, h } = sizeRef.current; const pal = paletteRef.current; const tw = tweaksRef.current; const gst = game.state; ctx.save(); ctx.scale(dpr, dpr); // Background const g = ctx.createRadialGradient(w / 2, h / 2, 0, w / 2, h / 2, Math.max(w, h) * 0.8); g.addColorStop(0, pal.bg2); g.addColorStop(1, pal.bg1); ctx.fillStyle = g; ctx.fillRect(0, 0, w, h); if (tw.showGuides) { ctx.strokeStyle = pal.dim; ctx.globalAlpha = 0.12; ctx.lineWidth = 1; const cam = cameraRef.current; for (let r = 1; r <= 12; r++) { ctx.beginPath(); ctx.arc(w / 2 - cam.x * cam.scale, h / 2 - cam.y * cam.scale, r * cam.scale, 0, Math.PI * 2); ctx.stroke(); } ctx.globalAlpha = 1; } const now = performance.now(); const cam = cameraRef.current; const tiles = game.state.tiles; // 1) Hidden tiles that are tappable (have revealed neighbor) — show as ghosts // 2) Hidden tiles with at least one tappable-neighbor — show very faintly // We compute a per-tile "visibility" level for layering. const revealed = game.state.revealed; const tappable = new Set(); for (const id of game.state.revealOrder) { const t = tiles[id]; for (const n of t.neighbors) { if (!revealed.has(n)) tappable.add(n); } } // Second-ring: neighbors of tappable tiles (faint outlines for atmosphere) const secondRing = new Set(); for (const id of tappable) { const t = tiles[id]; for (const n of t.neighbors) { if (!revealed.has(n) && !tappable.has(n)) secondRing.add(n); } } // --- Draw second ring (faint outlines) ctx.lineWidth = 1; for (const id of secondRing) { const t = tiles[id]; const sp0 = worldToScreen(t.verts[0].x, t.verts[0].y); // Frustum cull if (sp0.x < -50 || sp0.x > w + 50 || sp0.y < -50 || sp0.y > h + 50) continue; pathTile(ctx, t, 1); ctx.globalAlpha = 0.18; ctx.strokeStyle = pal.hiddenEdge; ctx.stroke(); } ctx.globalAlpha = 1; // --- Draw tappable tiles (highlighted candidates) const isSeedsMode = gst.mode === 'seeds'; for (const id of tappable) { const t = tiles[id]; const isSunMember = isSeedsMode && t.sunIndices && t.sunIndices.some(si => !gst.collectedSuns.has(si)); pathTile(ctx, t, 1); ctx.fillStyle = pal.tappable; ctx.globalAlpha = 0.55; ctx.fill(); const phase = (now / 800 + (id * 0.137)) % 1; const pulse = 0.5 + 0.5 * Math.sin(phase * Math.PI * 2); if (isSunMember) { // Gold pulsing stroke for sun-member tappable tiles ctx.lineWidth = 2 + pulse * 1.2; ctx.strokeStyle = '#FFD700'; ctx.globalAlpha = 0.7 + pulse * 0.3; if (tw.tappableGlow) { ctx.shadowBlur = 12 + pulse * 16; ctx.shadowColor = '#FFD700'; } ctx.stroke(); ctx.shadowBlur = 0; } else { ctx.lineWidth = 1.4 + pulse * 0.8; ctx.strokeStyle = pal.tappableEdge; ctx.globalAlpha = 0.55 + pulse * 0.4; if (tw.tappableGlow) { ctx.shadowBlur = 8 + pulse * 8; ctx.shadowColor = pal.glow; } ctx.stroke(); ctx.shadowBlur = 0; } } ctx.globalAlpha = 1; // --- Draw revealed tiles (THIS IS THE MAIN ATTRACTION) // Sort by reveal time so newer tiles draw on top. const order = game.state.revealOrder; for (let oi = 0; oi < order.length; oi++) { const id = order[oi]; const t = tiles[id]; const bornAt = game.state.revealedAt.get(id) || 0; const age = (now - bornAt) / 360; const grow = age >= 1 ? 1 : easeOutBack(Math.max(0, age)); pathTile(ctx, t, grow); // Fill — distinct colors per type ctx.fillStyle = t.type === 'thick' ? pal.thick : pal.thin; ctx.globalAlpha = 1; ctx.fill(); // Edge stroke (slight) ctx.lineWidth = 1.2; ctx.strokeStyle = t.type === 'thick' ? pal.thickEdge : pal.thinEdge; ctx.globalAlpha = 0.65; ctx.stroke(); // Fresh glow const glowAge = now - bornAt; if (glowAge < 800) { const tF = 1 - glowAge / 800; ctx.globalAlpha = tF * 0.8; ctx.lineWidth = 2; ctx.shadowBlur = 22 * tF; ctx.shadowColor = pal.glow; ctx.stroke(); ctx.shadowBlur = 0; } ctx.globalAlpha = 1; } // Gold stroke on revealed sun-member tiles if (isSeedsMode && gst.suns.length > 0) { for (let si = 0; si < gst.suns.length; si++) { const isCollected = gst.collectedSuns.has(si); for (const tid of gst.suns[si].tileIds) { if (!revealed.has(tid)) continue; const tSun = tiles[tid]; const bornAt = game.state.revealedAt.get(tid) || 0; const age = (now - bornAt) / 360; const grow = age >= 1 ? 1 : easeOutBack(Math.max(0, age)); pathTile(ctx, tSun, grow); if (isCollected) { ctx.lineWidth = 2.5; ctx.strokeStyle = '#FFD700'; ctx.globalAlpha = 0.9; ctx.shadowBlur = 6; ctx.shadowColor = '#FFD700'; ctx.stroke(); ctx.shadowBlur = 0; } else { const pulse = 0.6 + 0.4 * Math.sin(now / 700 + tid * 0.41); ctx.lineWidth = 1.6; ctx.strokeStyle = '#FFD700'; ctx.globalAlpha = 0.35 * pulse; ctx.stroke(); } } } ctx.globalAlpha = 1; } // Ripples (drawn on top) for (let i = game.state.ripples.length - 1; i >= 0; i--) { const r = game.state.ripples[i]; const t = (now - r.start) / r.duration; if (t > 1) { game.state.ripples.splice(i, 1); continue; } const ease = 1 - Math.pow(1 - t, 2); const sp = worldToScreen(r.x, r.y); const rippleColor = r.big ? '#FFD700' : pal.glow; const rippleRadius = ease * (r.big ? 10 : 5) * cam.scale; ctx.beginPath(); ctx.arc(sp.x, sp.y, rippleRadius, 0, Math.PI * 2); ctx.strokeStyle = rippleColor; ctx.globalAlpha = (1 - t) * (r.big ? 0.7 : 0.5); ctx.lineWidth = r.big ? 3 : 2; ctx.stroke(); if (r.big && t < 0.5) { ctx.beginPath(); ctx.arc(sp.x, sp.y, ease * 4 * cam.scale, 0, Math.PI * 2); ctx.globalAlpha = (1 - t * 2) * 0.3; ctx.fillStyle = '#FFD700'; ctx.fill(); } } ctx.globalAlpha = 1; ctx.restore(); } function pathTile(ctx, tile, grow) { const verts = tile.verts; const cx = tile.mean.x, cy = tile.mean.y; ctx.beginPath(); for (let i = 0; i < verts.length; i++) { const lx = cx + (verts[i].x - cx) * grow; const ly = cy + (verts[i].y - cy) * grow; const sp = worldToScreen(lx, ly); if (i === 0) ctx.moveTo(sp.x, sp.y); else ctx.lineTo(sp.x, sp.y); } ctx.closePath(); } function easeOutBack(t) { const s = 1.70158; return 1 + (s + 1) * Math.pow(t - 1, 3) + s * Math.pow(t - 1, 2); } // Pointer function handlePointer(e) { const rect = canvasRef.current.getBoundingClientRect(); const sx = (e.clientX || (e.touches && e.touches[0]?.clientX)) - rect.left; const sy = (e.clientY || (e.touches && e.touches[0]?.clientY)) - rect.top; const wp = screenToWorld(sx, sy); // Only consider tappable tiles const tiles = game.state.tiles; const revealed = game.state.revealed; let bestId = -1, bestD = Infinity; for (let id = 0; id < tiles.length; id++) { if (revealed.has(id)) continue; // quick reject by mean distance const t = tiles[id]; const dx = t.mean.x - wp.x, dy = t.mean.y - wp.y; const d2 = dx * dx + dy * dy; if (d2 > 4) continue; if (window.PenroseGeo.pointInPoly(wp.x, wp.y, t.verts)) { if (d2 < bestD) { bestD = d2; bestId = id; } } } if (bestId >= 0) { const ok = game.reveal(bestId); if (ok && tweaks.haptics && navigator.vibrate) navigator.vibrate(8); else if (!ok && tweaks.haptics && navigator.vibrate) navigator.vibrate([2, 24, 2]); } } // Hint: pick a random tappable tile, briefly mark it function takeHint() { const gst = game.state; const tiles = gst.tiles; const revealed = gst.revealed; const tappable = []; for (const id of gst.revealOrder) { for (const n of tiles[id].neighbors) { if (!revealed.has(n)) tappable.push(n); } } if (!tappable.length) return; let bestId = tappable[0]; if (gst.mode === 'seeds') { // prefer tappable tiles that belong to an uncollected sun const sunMembers = tappable.filter(id => { const t = tiles[id]; return t.sunIndices && t.sunIndices.some(si => !gst.collectedSuns.has(si)); }); const pool = sunMembers.length ? sunMembers : tappable; // among candidates pick highest sun progress let bestProgress = -1; for (const id of pool) { const t = tiles[id]; let progress = 0; if (t.sunIndices) { for (const si of t.sunIndices) { if (!gst.collectedSuns.has(si)) progress = Math.max(progress, gst.sunProgress.get(si) || 0); } } if (progress > bestProgress) { bestProgress = progress; bestId = id; } } } else { // pick farthest from camera center for "growth" hint const cam = cameraRef.current; let bestD = -Infinity; for (const id of tappable) { const t = tiles[id]; const dx = t.mean.x - cam.x, dy = t.mean.y - cam.y; const d = dx * dx + dy * dy; if (d > bestD) { bestD = d; bestId = id; } } } game.reveal(bestId); if (tweaks.haptics && navigator.vibrate) navigator.vibrate(8); } const s = game.state; const goalProgress = Math.min(1, s.placed / s.goalTarget); return (

{/* ── Always-on ambient background ── */}

{screen === 'onboarding' && ( { if (mode === 'levels') { setScreen('map'); } else { setBriefingMode(mode); setScreen('mode-briefing'); } }} /> )} {screen === 'mode-briefing' && ( setScreen('onboarding')} onBegin={() => { setGame(window.PenroseGame.createGame({ mode: briefingMode })); setCurrentLevel(null); wonRef.current = false; setScreen('game'); }} /> )} {screen === 'map' && ( setScreen('onboarding')} onSelect={(lvl) => { setCurrentLevel(lvl); setScreen('briefing'); }} /> )} {screen === 'briefing' && currentLevel && ( setScreen('map')} onBegin={() => { setGame(window.PenroseGame.createGame({ mode: 'seeds' })); setScreen('game'); }} /> )} {screen === 'win' && currentLevel && ( { wonRef.current = false; setGame(window.PenroseGame.createGame({ mode: 'seeds' })); setScreen('game'); }} onNext={() => setScreen('map')} /> )} {showMenu && ( setShowMenu(false)} onNewGame={() => { wonRef.current = false; setGame(window.PenroseGame.createGame({ mode: s.mode })); setShowMenu(false); }} onChangeMode={() => { setShowMenu(false); setScreen('onboarding'); }} /> )}

SCORE

{s.score}

LEVEL

{s.level}

{s.hi}

{s.mode === 'seeds' ? (

☀ SUNS {s.placed} COMBO × 3 ? '#FFD700' : palette.ink }}>{s.combo}

) : (

TILES {s.revealed.size} # {s.patternId || '????'} × 3 ? palette.thick : palette.ink }}>{s.combo}

)}

{s.mode === 'seeds' ? `GOAL · COLLECT ${s.goalTarget} SUNS` : `GOAL · REVEAL ${s.goalTarget}`} {s.placed}/{s.goalTarget}

{window.TweaksPanel && ( setTweak('vibe', v)} /> setTweak('showGuides', v)} /> setTweak('tappableGlow', v)} /> setTweak('autoCamera', v)} /> setTweak('haptics', v)} /> setTweak('tileScale', v)} /> )}

); } window.PenroseApp = App;