Browser Mini-Games — Analytics Arcade
▶ Схема архитектуры — самодостаточный HTML, открывается в браузере — без установки и сборки
Ситуация
Аналитические концепции — p-value, retention, воронки — абстрактны: рекрутер или студент не «прочувствует» их из текста, а пассивные дашборды не дают интерактивного опыта. Мини-игры превращают концепции в механику: играешь — и понимаешь, почему p < 0.05, что такое retention day и где бутылочное горлышко воронки.
Задача
От меня требовалось проверить концепции на интерактивность: сделать так, чтобы смысл метрики становился очевиден из самого действия, а не из объяснения.
Действия
Игры
| Игра | Тип | Механика |
|---|---|---|
| 🐍 Snake | аркада | ешь, расти, не врежься |
| 🏓 Pong | аркада | обыграй CPU — первый до 11 |
| 🔢 2048 | аркада | сливай плитки до 2048 |
| 🧪 A/B Test | аналитика | собирай данные, пока p < 0.05 |
| 🔻 Funnel Drop | аналитика | лови падающих юзеров, конвертируй |
| 📊 Cohort Catch | аналитика | лови Returning, избегай Churned |
| 🧩 SQL Query | аналитика | выбери токен, завершающий SQL |
| 🃏 Metric Match | аналитика | сопоставь пары метрик за минимум ходов |
| 📅 Retention Day | аналитика | выбери правильный день удержания |
| 🔍 Funnel Bottleneck | аналитика | найди самый большой провал воронки |
Архитектура
Каждая игра — self-contained SVG: HTML, CSS и JS в одном файле. Один файл = вся игра, zero-dependency, без сборки. Хаб — Astro (static), деплой на GitHub Pages. Темы dark/light/cyberpunk через data-theme + localStorage.
Аналитика и конверсия
game_selected— PostHog-событие при выборе игры.- CTA в играх → контакт (Telegram deep-link), событие
contact_click. - Синк в портфолио:
sync_games.pyкопируетdist/→public/games/(drift-check через--check).
Тестирование
Smoke-тесты на Playwright (pytest): каждая игра загружается из public/ и проверяется на работоспособность.
Запуск
npm install
npm run dev # dev server
npm run build # production build → dist/
python3 sync_games.py --dry-run # preview sync to portfolioРезультат
10 игр работают на телефоне (swipe/tap) и десктопе (keyboard/mouse), открываются из одного файла без сервера. Аналитические игры — обучающий инструмент: концепция → механика → интуиция. Синк в портфолио автоматический, smoke-тесты на Playwright ловят поломки загрузки.
Ограничения
Игры упрощают статистику до интуиции и не заменяют реальный анализ: механика показывает идею p-value или retention, а не корректный расчёт. Zero-dependency означает один файл на игру — код между играми не переиспользуется, и любое изменение приходится вносить в каждый файл руками.