Я запилил свой Scrum Poker, потому что все остальные - отстой 🎴

#webdev #vibecoding #scrum #programming

Проблема 😩

Спринт-планирование. Команде нужно оценить таски. Кто-то кидает ссылку на Planning Poker. Ты кликаешь. Ждёшь. Половина команды не может подключиться. Вторая половина уже ушла за кофе.

Знакомо?

У нас в AGG TEAM мы перепробовали всё:

Planning Poker Online (лагает, реклама, древний интерфейс)
Scrum Poker for Jira (дорого, требует Jira)
PlanITpoker (работает, но нет НАШИХ фич)

После третьего краша посреди оценки я подумал: "Да пошло оно, сделаю сам."

Настоящая задача: 6 команд, 1 комната 🤯

Вот в чём загвоздка: у нас не ОДНА скрам-команда. У нас ШЕСТЬ отделов:

Frontend, Backend, DevOps, QA, Аналитика, Менеджмент

Все хотят делать планинг покер. Одновременно. В одной комнате.

Это хаос. Как играть в шесть разных карточных игр за одним столом.

Существующие инструменты: "Вот комната, сами разбирайтесь!" Не идеально.

Что я сделал

🎰 Поддержка нескольких столов (до 6!)

Основная идея: одна сессия, несколько независимых столов.

interface Table {
  id: string;
  name: string;        // "Frontend отдел", "Backend ниндзя"
  revealed: boolean;   // Карты раскрыты для этого стола?
}

interface Player {
  id: string;
  name: string;
  tableId: string;     // За каким столом сидит
  vote: string | null; // "5", "13", "?", "☕"
}

Хост создаёт столы с кастомными названиями. Все выбирают свой стол. Каждый стол голосует независимо. Видишь все столы + общую среднюю оценку.

Возможности хоста: Добавлять, удалять, переименовывать столы на лету. Перемещать людей между столами при необходимости.

⚡ Real-time синхронизация

Использовал Supabase как бэкенд. Простой подход с polling:

useEffect(() => {
  if (view === 'room' && roomId) {
    fetchRoomState();
    const interval = setInterval(fetchRoomState, 2000);
    return () => clearInterval(interval);
  }
}, [view, roomId]);

Да, WebSocket'ы были бы круче. Но для прототипа и ~50 пользователей? Polling отлично работает. Если масштаб вырастет, переделаю.

Обновления в реальном времени:

Кто-то присоединился → мгновенно
Кто-то проголосовал → сразу
Карты раскрыты → все видят результаты
Эмодзи брошено → летит через экран

💓 Умное определение отключения

Проблема других инструментов: люди закрывают вкладки, но их аватары остаются навсегда. Пользователи-призраки.

Моё решение использует heartbeat + явное отключение:

// Отправляем heartbeat каждые 10 секунд
const sendHeartbeat = async () => {
  await fetch(`${API_URL}/rooms/${roomId}/heartbeat`, {
    method: 'POST',
    body: JSON.stringify({ playerId }),
  });
};

// Также явное отключение при закрытии страницы
window.addEventListener('beforeunload', () => {
  navigator.sendBeacon(
    `${API_URL}/rooms/${roomId}/disconnect`,
    JSON.stringify({ playerId })
  );
});

Результат:

Страница открыта, но бездействуешь? Сиди сколько хочешь (без киков)
Закрыл страницу/вкладку? Мгновенное отключение (2 секунды)

Никаких призраков. Чистые комнаты.

🎉 Атаки эмодзи!

Моя любимая фича. Кликаешь на любого участника, кидаешь эмодзи. Оно буквально летит от твоего аватара к его с плавной анимацией (💩)(🤮).

12 эмодзи: 👍 👏 🎉 ❤️ 🚀 🔥 😂 🤔 💯 ✨ 👌 🙌

Реальные сценарии:

👍 согласен с оценкой
🔥 кто-то делает отличное замечание
😂 джун оценивает простую таску в 89 поинтов
☕ определённо пора за кофе

Это сделало наши планирования весёлыми. Люди реально теперь ждут оценочные встречи!

🃏 Фибоначчи + специальные карты

Классика: 0, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89

Плюс:

"?" → "Понятия не имею"
"☕" → "Нужен кофе перед размышлениями"

Можно менять голос даже после раскрытия. Почему? Потому что во время обсуждения можешь понять, что 13 на самом деле 8. Большинство инструментов блокируют голоса. Мой - нет.

🧮 Автоматический расчёт среднего

Каждый стол показывает свою среднюю. Плюс общий итог внизу по ВСЕМ столам.

const calculateAverage = (players, revealed) => {
  if (!revealed) return null;

  const numericVotes = players
    .map(p => p.vote)
    .filter(v => v && !isNaN(Number(v)))
    .map(Number);

  if (numericVotes.length === 0) return null;
  return (numericVotes.reduce((a, b) => a + b) / numericVotes.length).toFixed(1);
};