Browser Mini-Games — Analytics Arcade
Context
Analytics concepts — p-values, retention, funnels — are abstract. Typical demos are passive dashboards. Mini-games turn concepts into mechanics: you play, and you ‘feel’ why p < 0.05 matters, what a retention day is, and where the funnel bottleneck sits.
Data & Method
Games
| Game | Type | Mechanic |
|---|---|---|
| 🐍 Snake | arcade | eat, grow, don’t crash |
| 🏓 Pong | arcade | beat the CPU — first to 11 |
| 🔢 2048 | arcade | merge tiles to reach 2048 |
| 🧪 A/B Test | analytics | collect data until p < 0.05 |
| 🔻 Funnel Drop | analytics | catch falling users, convert |
| 📊 Cohort Catch | analytics | catch Returning, dodge Churned |
| 🧩 SQL Query | analytics | pick the token that completes the SQL |
| 🃏 Metric Match | analytics | match metric pairs in fewest moves |
| 📅 Retention Day | analytics | pick the right retention day |
| 🔍 Funnel Bottleneck | analytics | find the biggest funnel drop |
Architecture
Each game is a self-contained SVG: HTML, CSS and JS in one file. One file = the whole game, zero-dependency, no build step. The hub is Astro (static), deployed to GitHub Pages. Dark/light/cyberpunk themes via data-theme + localStorage.
Analytics & Conversion
game_selected— PostHog event on game pick.- In-game CTA → contact (Telegram deep-link),
contact_clickevent. - Portfolio sync:
sync_games.pycopiesdist/→public/games/(drift check via--check).
Testing
Playwright smoke tests (pytest): each game loads from public/ and is checked for functionality.
Run
npm install
npm run dev # dev server
npm run build # production build → dist/
python3 sync_games.py --dry-run # preview sync to portfolioImpact
- 10 games, 7 analytics — concepts → mechanics → intuition.
- Zero-dependency — one file = the whole game, no build or server.
- Phone + desktop — swipe/tap and keyboard/mouse, 3 themes.
- Tracking & conversion —
game_selected+ CTA → contact.