Browser Mini-Games — Analytics Arcade

Контекст

Аналитические концепции — 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 игр, 7 аналитических — концепции → механика → интуиция.
Zero-dependency — один файл = вся игра, без сборки и сервера.
Phone + desktop — swipe/tap и keyboard/mouse, 3 темы.
Трекинг и конверсия — game_selected + CTA → контакт.

Документация

Разбор кейса

Проблема

Аналитические концепции — p-value, retention, воронки — абстрактны: рекрутер или студент не «прочувствует» их из текста, а пассивные дашборды не дают интерактивного опыта.

Подход

Каждая игра — self-contained SVG: HTML, CSS и JS в одном файле, zero-dependency, без сборки. Аналитические игры превращают концепции в механику: A/B Test — собирай данные, пока p < 0.05; Funnel Drop — лови падающих юзеров; Cohort Catch — лови Returning, избегай Churned; SQL Query — выбери токен, завершающий запрос; Retention Day — угадай день удержания. Хаб на Astro, темы dark/light/cyberpunk, PostHog-трекинг.

Результат

10 игр работают на телефоне (swipe/tap) и десктопе (keyboard/mouse), открываются из одного файла без сервера. Аналитические игры — обучающий инструмент: концепция → механика → интуиция. Синк в портфолио автоматический (sync_games.py), smoke-тесты на Playwright.

10 Игр

7 Аналитических

0 Зависимостей

phone + desktop Платформы