Connect 4 — AFK timeout

// Pass in matchmaking:join — applies to this game only
socket.emit('matchmaking:join', {
  username:          'Alex',
  playerId:          session.players[0].id,
  afkTimeoutEnabled: true,
  afkTimeoutSeconds: 60,   // forfeit after 60s idle
  afkWarnSeconds:    15,   // warn 15s before forfeit (fires at 45s)
});

// Disable AFK entirely
socket.emit('matchmaking:join', {
  username:          'Alex',
  afkTimeoutEnabled: false,
});

import { useState, useEffect, useRef } from 'react';
import { useSocket } from '@beta-gamer/react';

function AfkBanner({ myPlayerId }: { myPlayerId: string }) {
  const socket = useSocket();
  const [warning, setWarning] = useState<{ isSelf: boolean; seconds: number } | null>(null);
  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);

  useEffect(() => {
    if (!socket) return;

    socket.on('connect4:afk_warning', ({ playerId, secondsRemaining }) => {
      setWarning({ isSelf: playerId === myPlayerId, seconds: secondsRemaining });
      intervalRef.current = setInterval(() => {
        setWarning(prev => {
          if (!prev || prev.seconds <= 1) { clearInterval(intervalRef.current!); return null; }
          return { ...prev, seconds: prev.seconds - 1 };
        });
      }, 1000);
    });

    // Clear on any move
    socket.on('connect4:afk_warning_cleared', () => {
      clearInterval(intervalRef.current!);
      setWarning(null);
    });

    return () => {
      socket.off('connect4:afk_warning');
      socket.off('connect4:afk_warning_cleared');
      clearInterval(intervalRef.current!);
    };
  }, [socket, myPlayerId]);

  if (!warning) return null;

  return (
    <div className={`px-4 py-2 rounded font-semibold flex justify-between ${
      warning.isSelf ? 'bg-red-600 text-white' : 'bg-yellow-600 text-white'
    }`}>
      <span>
        {warning.isSelf ? "⚠️ Drop a piece or you'll forfeit!" : '⏳ Opponent is AFK'}
      </span>
      <span className="font-mono">{warning.seconds}s</span>
    </div>
  );
}