Chess — Socket events

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

function ChessSideEvents({ myPlayerId }: { myPlayerId: string }) {
  const socket = useSocket();
  const roomIdRef = useRef('');

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

    socket.emit('matchmaking:join', {
      username: 'Alex',
      playerId: myPlayerId,
      afkTimeoutEnabled: true,
    });

    socket.on('game:started', ({ roomId }) => {
      roomIdRef.current = roomId;
    });

    socket.on('chess:afk_warning', ({ playerId, secondsRemaining }) => {
      // show countdown banner
    });

    socket.on('game:draw:offered', ({ by }) => {
      // show accept/decline UI
    });

    socket.on('player:disconnected', () => {
      // show "opponent disconnected" banner
    });

    socket.on('game:over', ({ winner, reason }) => {
      // show result screen
    });

    return () => {
      socket.off('game:started');
      socket.off('chess:afk_warning');
      socket.off('game:draw:offered');
      socket.off('player:disconnected');
      socket.off('game:over');
    };
  }, [socket]);

  const offerDraw = () => socket?.emit('game:draw:offer', {
    roomId: roomIdRef.current, playerId: myPlayerId,
  });
  const resign = () => socket?.emit('game:resign', {
    roomId: roomIdRef.current, playerId: myPlayerId,
  });

  return (
    <div>
      <ChessBoard orientation="white" />
      <button onClick={offerDraw}>Offer draw</button>
      <button onClick={resign}>Resign</button>
    </div>
  );
}

// Wrap with BetaGamerProvider — ChessBoard reads context from it
export default function ChessPage({ sessionToken }: { sessionToken: string }) {
  return (
    <BetaGamerProvider token={sessionToken}>
      <ChessSideEvents myPlayerId="user_123" />
    </BetaGamerProvider>
  );
}

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

function ChessGameManual({ myPlayerId }: { myPlayerId: string }) {
  const socket = useSocket();
  const roomIdRef   = useRef('');
  const playerIdRef = useRef('');
  const [fen, setFen] = useState('rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1');
  const [myColor, setMyColor] = useState<'white' | 'black'>('white');

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

    socket.emit('matchmaking:join', { username: 'Alex', playerId: myPlayerId });

    socket.on('game:started', ({ roomId, playerId, color, fen: startFen }) => {
      roomIdRef.current   = roomId;
      playerIdRef.current = playerId;
      setMyColor(color);
      setFen(startFen);
    });

    socket.on('game:move:made', ({ fen: newFen, isCheck }) => {
      setFen(newFen);
    });

    socket.on('game:over', ({ winner, reason, pgn }) => {
      console.log('Game over:', reason, winner ?? 'draw');
    });

    return () => {
      socket.off('game:started');
      socket.off('game:move:made');
      socket.off('game:over');
    };
  }, [socket]);

  // You emit moves yourself — from/to are algebraic squares ("e2", "e4")
  const makeMove = (from: string, to: string, promotion?: string) => {
    socket?.emit('game:move', {
      roomId:   roomIdRef.current,
      playerId: playerIdRef.current,
      move: { from, to, ...(promotion && { promotion }) },
    });
  };

  const resign = () => socket?.emit('game:resign', {
    roomId: roomIdRef.current, playerId: playerIdRef.current,
  });

  // Render your own board using fen + myColor
  return null;
}